转载请标明出处：http://blog.csdn.net/zhaoyanjun6/article/details/126518161
本文出自【赵彦军的博客】
代码实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<script>
//改变image图片
function setImageSrc() {
const imageUrl = "https://img2.baidu.com/it/u=1088287531,1393326254&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
document.getElementById('im').src = imageUrl
}
</script>
<h1>h1h1h1</h1>
<h2>h2h2h2</h2>
<h3>h3h3h3</h3>
<h4>h4h4h4</h4>
<h5>h5h5h5</h5>
<h6>h6h6h6</h6>
<button id="btn" onclick="setImageSrc()">点击替换image</button>
<input id="input" value="输入框"/>
<img id="im" src="https://img2.baidu.com/it/u=263214107,966825174&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
width="100px" alt="123"/>
<p>这一个一个p标签</p>
<br>
</body>
</html>
效果图如下：
标签分类
- h1 – h6 标题
- p 段落
- button 按钮
- input 输入框
- img 图片
- br 换行
注意实现
- 浏览器会自动地在段落的前后添加空行。（
</p>是块级元素） - 不要忘记结束标签，即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：
- 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
<br>标签： <br />元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。- 当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
图像
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
- src 源属性的值是图像的 URL 地址
- alt 属性用来为图像定义一串预备的可替换的文本
- height（高度） 与 width（宽度）属性用于设置图像的高度与宽度
- border 显示边框
- align=“top” 对齐方式
alt : 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
举个例子
<img id="im" src="https://img2.baidu.com/it/u=263214107,966825174&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
width="100" height="100"
alt="alt-image"/>
如果把网络关闭，显示的效果就会显示 alt 属性值
border 边框
<img border="10" src="https://img2.baidu.com/it/u=263214107,966825174&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" width="200"/>
嵌套
<p>文本一 <img src="/aa123.png" width="100"> 文本二</p>
align
align="middle"
align="top"
align="bottom"
align="left"
align="right"
举例:
<p>文本一 <img src="/aa123.png" width="100" align="top"> 文本二</p>
图像浮动
style="float:left"
style="float:right"
举例：
<p>文本一 <img src="/aa123.png" width="100" style="float:right"> 文本二</p>
创建图片链接
<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="10" src="/aa123.png" alt="HTML 教程" width="32" height="32"></a></p>
效果图如下：
a标签
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
效果图如下：
target
target="_blank" 每次都打开一个新页面
target="view_window" 打开新窗口，下次打开，就会覆盖
target="_self" 默认。在相同的框架中打开被链接文档
target="_parent" 在父框架集中打开被链接文档
target="framename" 在指定的框架中打开被链接文档
- view_window
当用户第一次选择内容列表中的某个链接时，浏览器将打开一个新的窗口，将它标记为 “view_window”，然后在其中显示希望显示的文档内容。如果用户从这个内容列表中选择另一个链接，且这个 “view_window” 仍处于打开状态，浏览器就会再次将选定的文档载入那个窗口，取代刚才的那些文档。
view_window 使用场景：打开小说章节列表，所有章节都在同一个窗口打开，下一个章节，会覆盖上一个章节。