目录
关注作者微信公众号，开启探索更多 HTML 知识的精彩之旅。在这里，你将收获丰富的 HTML 专业内容，深入了解这一网页开发语言的奥秘，不断拓展你的知识边界，提升技能水平。快来关注吧！
h系列标题标签
在 HTML 中，<h1>至<h6>标签被用于定义不同层级的标题，它们属于容器级标签。其中，<h1>标签定义的标题级别最大，最为突出醒目，而<h6>标签定义的标题级别最小。
所有的主流浏览器都对这一系列标签提供了良好的支持。从理论层面来讲，h 系列标签内部可以放置<p>、<ul>等元素，然而从语义表达的合理性角度出发，不提倡进行这样的操作。
使用标题标签可以使网页的结构更加清晰，便于用户理解和搜索引擎抓取。
示例代码如下：
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body> 运行结果：
p 段落标签
在 HTML 中，p 标签作为一个文本级的标签，具有特定的用途和规范。它可以容纳文字、图片以及表单元素，要知道，这三种元素都属于流元素。
p 标签的主要功能是定义段落，当使用 p 标签时，浏览器会自动在段落的前后添加一些空白区域，从而在视觉上形成段落的分隔效果。这些空白是由浏览器自动生成的，但如果有需要，开发者也可以在样式表中对其进行更加精细的规定，以满足特定的设计需求。值得一提的是，所有主流浏览器都对 p 标签提供了良好的支持，确保了网页在不同浏览器环境下的一致性和稳定性。
以下是正确与错误写法的示例代码：
正确的写法：
<body>
<h3>标题</h3>
<p>段落</p>
</body> 分析：在这种正确的写法中，标题和段落分别被清晰地定义，符合 HTML 的结构规范。
错误的写法：
<body>
<p>
<h3>标题</h3>
段落
</p>
</body> 分析：这种错误的写法从语义和结构上都不太恰当。虽然在某些情况下，浏览器可能不会完全报错，但这样的写法不符合 HTML 的标准规范，可能会在不同的浏览器或设备上产生不可预测的显示效果。
在进行网页开发时，我们应当始终遵循正确的 HTML 结构规范，合理使用 p 标签以及其他标签，以确保网页的质量和可读性。
以下是错误的写法在浏览器中的运行结果：
img图片标签
img图片标签介绍
在 HTML 中，<img>标签可谓至关重要，为网页嵌入图像，赋予网页非凡的生动性与丰富度，从而极大地提升用户体验。
<img>标签属于单标签，且为文本级标签，能够自行封闭。它能够在网页中嵌入多种类型的图像，常见的有 jpg（jpeg）、gif、png 和 bmp 等格式。值得一提的是，所有主流浏览器都对<img>标签给予了良好的支持。
其完整写法为：
<img src="" alt=""/> img 标签拥有多个属性，其中主要的属性有：
| 属性 | 值 | 描述 |
| src | URL | 用于规定显示图像的网络地址（此属性必不可少，可采用相对或绝对路径来指定图像文件路径）。 |
| alt | 文本 | 规定了图像的替代文本（当由于某种原因图像无法显示时，该替代文字会出现，为用户提供必要的信息提示。不过，部分浏览器可能不支持此属性。） |
| title | 文本 | 当用户鼠标悬停于图像上时，会显示额外信息。 |
| width | 像素或使用百分比 | 用于指定图像的宽度 |
| height | 像素或使用百分比 | 用于指定图像的高度 |
| usemap | <map>标签的name属性值 | 与<map>和<area>标签一起使用，可以创建图像映射，即定义图像上的可点击区域 |
总结：<img>标签的应用场景极为广泛。它可以展示产品图片、公司标志、插图等，有力增强网页的视觉效果；在新闻网站、博客等平台上展示相关图片内容，助力读者更好地理解文章；还能用于创建图像画廊或幻灯片，通过 JavaScript 或 CSS 实现精彩的交互效果。总之，在网页开发中，<img>标签是一个不可或缺的重要元素。
示例代码如下：
<body>
<h3>前端基地微信公众号二维码</h3>
<p>
<img src="img/qrcode.jpg" alt="前端基地微信公众号二维码"/>
</p>
<p>
<img src="img/qrcode.jpg" alt="前端基地微信公众号二维码" usemap="#imageMap"/>
<map name="imageMap">
<area shape="rect" coords="0,0,100,100" href="page1.html" alt="Link to Page 1">
<area shape="circle" coords="200,200,50" href="page2.html" alt="Link to Page 2">
</map>
</p>
</body> 分析：首先有一个<img>标签，展示了一个名为 “qrcode.jpg” 的图像，并通过usemap="#imageMap"属性关联了一个图像映射。
然后定义了一个<map>标签，name属性值为 “imageMap”，与usemap属性对应。
在<map>标签内部，有两个<area>标签。第一个<area>定义了一个矩形区域，坐标为左上角（0,0）到右下角（100,100），当用户点击这个区域时，会链接到 “page1.html”。第二个<area>定义了一个圆形区域，圆心坐标为（200,200），半径为 50，点击这个区域会链接到 “page2.html”。
相对路径
相对路径是由特定文件所在路径引起的与其他文件或文件夹的路径关系。当相对路径不变时，将网站项目从一个盘移动到另一个盘或者用 U 盘拷贝给别人，只要相对路径没有被破坏，图片和样式会按照相对路径去查找对应的资源，所以能够正常显示。
其相关符号及描述如下：
| 符号 | 描述 |
| ../ | 表示向上一级 |
| ../../ | 表示源文件所在目录的上上级目录，以此类推。 |
| / | 相对路径的文件夹符号 |
| ./ | 代表目前所在的目录，在引用时可以省略。 |
案例：在index.html页面中，插入图片qdbase.jpg
示例代码：
<img src="../../static/qdbase.jpg" alt=""/> 绝对路径
绝对路径是带有域名的文件完整路径，以 “http://” 开头的路径为绝对路径。切勿使用 “file://” 开头的路径，这是错误的。
以搜狐网站为例，其图片采用绝对路径插入。原因是为防黑客攻击，将图片与页面分置于不同服务器。若图片出现木马，仅存放图片的服务器受影响，搜狐主站则安然无恙。
扫一扫
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
