06 - HTML常用标签（一）

落日橙子乳酸菌

已于 2023-01-02 14:51:34 修改

阅读量340

点赞数 1

分类专栏： HTML5 网页开发 # HTML基础文章标签： css 前端 html html5

于 2023-01-01 20:49:23 首次发布

本文链接：https://blog.csdn.net/m0_48670609/article/details/128503231

版权

HTML5 网页开发同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

HTML基础

7 篇文章 1 订阅

订阅专栏

一、注释

在很多代码技术中都可以添加注释内容，我们也可以向 HTML 源代码添加注释。

HTML注释语法：

<!-- 注释内容 -->

VS Code快捷键：ctrl+/。可以先使用快捷键然后在里面书写注释内容；也可以光标在某一行文字时使用ctrl+/快捷键，本行会自动注释。

注释的特点：注释只在源代码中可见，在浏览器窗口是不显示的。

利用注释的特点发挥其功能：

①在源代码中添加描述性的提示信息，便于我们阅读代码。

②对于 HTML 纠错也大有帮助，可以通过注释某一行 HTML 代码，以便检索错误的位置。

③暂时注释掉一部分不用的代码，便于后期恢复代码。

二、标题

标题（Heading），在HTML中是通过 <h1> <h2> <h3> <h4> <h5> <h6> 六个标签分别来对六个级别的标题进行定义的。

<h1> 定义最大的标题即一级标题， <h6> 定义最小的标题即六级标题。

<h1> - <h6> 六个标签都是双标签，书写时注意有开始有结束，且是容器级标签，内部可以放容器级标签、文本级标签等任意内容。

<!-- 快捷键 h$*6然后tab键 -->
   <h1>一级标题</h1>
   <h2>二级标题</h2>
   <h3>三级标题</h3>
   <h4>四级标题</h4>
   <h5>五级标题</h5>
   <h6>六级标题</h6>

标题标签的作用

标题标签的作用是给标签内部的元素内容添加对应级别标题的语义，不负责文字的粗体、字号等样式。样式是由css设定的。

标题标签不可嵌套

制作网页时一级标题是最主要的，后面可以跟其他级别的标题，对其进行解释说明。

虽然标题标签是容器级标签，里面可以放其他容器级标签，但是标题标签之间是不能互相嵌套的，下一级标题与上级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的上一级标题。

正确写法：

<h1>一级标题</h1>
<h2>二级标题</h2>

其中<h2>解释的是<h1>的内容。

错误写法：

<h1>
     <h2>二级标题</h2>
</h1>

浏览器中显示的确实是一个二级标题的效果，原因是文字确实是写在了<h2>内部，但是如果在语义上思考就会有一些问题，一会儿说是一级标题一会儿说是二级标题，是行不通的。打开控制台，可以看到，其实并不是<h2>嵌套在了<h1>内，而是把<h2>拿出来了，因为<h1>内不允许嵌套其他标题标签。

标题权重

标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1>标签最重要，<h2>标签次重要，以此类推，<h6>的重要程度最低。但是标题肯定比普通段落的权重要高。

<h1>标签在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo。

<h1>标签由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面出现多个<h1>，反而降低权重。

约定俗成的，一个页面中只会出现一个<h1>，所以要考虑好这个唯一的<h1>里面要放什么内容。

三、段落和换行

段落标签

段落（paragraph）是通过<p>标签进行定义的。

<p>标签是双标签，且为文本级标签。内部只能放置文本或者类似文本的内容，比如图片、表单元素，或者废弃的<font>标签等。

段落标签的作用：<p>标签的作用是给标签内部的内容添加一个完整段落的语义，不负责内容自动换行的样式。换行的效果是由css决定的。

换行标签

换行标签是HTML中一个简单的换行符 <br/>（breaking）。

它是一个单标签，没有什么特殊的属性，也不需要添加元素内容，就是一个空元素。

在需要换行的位置可以使用<br/>标签书写，但是<br/>标签与<p>标签不同，<br/>标签没有建立新的段落的语义，只是简单的进行强制换行，而<p>标签有自己的语义。

<p>这是第一<br />个段落</p>
<p>这是第二个段落</p>

换行不换段落就可以用上述第一种方式。

每一对儿<p>标签内部的元素内容为一个完整的段落，如果有多个段落，需要分别使用不同的<p>标签进行定义：

四、文本格式化

文本格式化就是对现有文本去添加一定格式。

HTML中有部分标签是用来对文字进行格式化显示设置的，比如粗体和斜体等。但是在HTML4.0版本规范后，结构和样式进行了分离，HTML只负责搭建结构，css负责格式化样式，所以大部分文本格式化标签被废弃，但是在HTML4.01和XHTML1.0 transitional版本中依旧可以使用。

文本格式化的标签均为双标签，且为文本级标签，内部只能书写文字。

<p>标签可以包裹文本格式化标签。

当使用过程中需要使用斜体和加粗效果，推荐使用em 和 strong 标签，因为它们有一定语义，而 <b>和<i>只是添加样式。

五、图像

• 图像（image）由<img>标签进行定义。

• <img>标签是单标签，本身相当于一个特殊的文本。

• <img>标签的作用是在指定的位置插入一张图片。

• 在HTML文件，常用的插入图片的类型有：jpg、png、gif。

图像标签的属性

由于<img>为单标签，所以它只能通过属性进行相关的图像设置。

<img>常用属性展示：

1. src属性

如果需要插入一张图片到HTML中，标签必须设置src属性，例如

<img src="smile01.jpg>

src：全称source资源，属性值是图片查找的路径。

路径：指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法。

路径分为相对路径和绝对路径，不同的方式出发点和参考位置。

相对路径

相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找，包含三种方向。

同级查找：指目标文件与HTML文件位于同一级，直接书写文件名+后缀格式；

<img src="ceshi.jpg">

子级查找：指目标文件在与HTML文件同一级的文件夹的内部，需要先查找文件夹名称，然后通过关闭符号/进入文件夹查找里面的文件；如果有多层文件夹，需要/进入多层。

将图片移动到image文件夹中：

<img src="image/ceshi.jpg">

上级查找：指目标文件在HTML文件所在文件夹的更上一级，需要跳出当前文件夹到上一层，路径写法利用../表示跳出一级，如果跳出多级书写多次../，直到找到文件。

将图片移动到html文件所在目录的上一级：

<img src="../ceshi.jpg">

还可以综合使用，例如上级查找加子级查找：

<img src="../image/ceshi.jpg">

绝对路径

绝对路径查找文件时，不需要从HTML文件出发，而是直接从电脑的盘符出发进行查找，或者使用网址形式查找。

盘符出发：例如从c盘或者d盘出发查找图片，书写时以c:/开头，后续类似子级查找写法直至找到目标文件。

<img src="D:/%E5%8A%A0%E6%B2%B9%E5%8A%A0%E6%B2%B9GoGoGo/image/ceshi.jpg">

找路径的第一种方式：找到图片点击上方可以得到图片路径，但是需要将斜线反过来才可以得到代码中的绝对路径。

第二种方式：打开浏览器，将图片拖拽到浏览器页面，上方的路径即为绝对路径

但是复制到VS Code编辑器后需要将前面部分删掉得到最终的绝对路径：

网址形式：要查找的文件是来自网络资源，路径写法以http://开头。

<img src="https://up.enterdesk.com/photo/2010-4-2/enterdesk.com-B7215711B63F17326D3C6EDE1D303BDB.jpg" />

浏览器输入搜索关键词，例如“动物”，点击搜索结果中的任意一张图片，注意不要直接复制页面上方的网址，因为那是整个页面的网址不是图片的，查找图片真实地址的方式：右键图片，然后点击“检查”，找到别人用的这个图片的网址即src部分，然后将网址复制即可。

也可以在网址上右键点击，然后点击“open in new tab”，这时就是一个纯粹的图片，将上方路径直接复制就可以放在编辑器中。如果网址太长，可以在“查看”中点击“自动换行”。

从盘符出发的绝对路径的缺点：

a.盘符出发的路径不可移植，不可移动。意思就是：如果制作的这个网站需要上传到服务器，那么当服务器将html文件返回给用户时，用户自己的浏览器查找这个路径的图片，而用户电脑磁盘中的相同位置并不一定有这张图片，就会出现问题。

b.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。

路径实际应用

a.建议多使用相对路径，可以适当使用网址形式的绝对路径。

b.使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变。

路径是很重要的知识点，不仅在图片这里会用，后续学习超链接也会用到。

2. 宽度和高度

width：图片的宽度

height：图片的高度

属性值：以px为单位的数值，或者省略px不写

 <img src="image/ceshi.jpg" width="200px"/>
    <img src="image/ceshi.jpg" height="300px"/>
    <img src="image/ceshi.jpg" width="200" height="300"/>

如果不设置图片的高度和宽度，默认按照图片的原始尺寸进行加载。

如果设置属性：只设置了其中一个，另一个会等比例变换；如果两个都设置，按照设置值加载。

一般实际工作中只会设置宽度和高度其中的一个，让另一个等比例变换，以免出现上述第三个图片那种情况。如果强制要求宽度和高度，那就两个都设置。

3. 边框border

border：设置图片的边框。

属性值：数值，数值是几表示边框宽度为几像素。

  <img src="image/ceshi.jpg" height="300px" border="20"/>

注意：border属性可以使用css进行设置，css中的边框有更多的设置效果。一般都使用css进行边框设置，因为更美观。

4. 提示文本title

title：设置的是鼠标悬停时的提示文本。

属性值：自定义的提示文字内容。

<img src="image/ceshi.jpg" height="300px" title="点击查看"/>

这种效果可以提高用户体验，因为会给用户一些提示。

5. 替换文本alt

alt：设置的是图片查找错误时，出现的替换文本。

属性值：自定义的替换内容。

如果能正常找到图片，替换文本是不显示的。

这个属性是开发时尽量要书写的。

 <img src="image/ceshi.jpg" height="300px" title="点击查看" alt="这是小王子"/>

此属性也是提高用户体验的，当图片加载失败时会出现提示文本，尽可能小的影响用户阅读体验。

总结

<img>标签最为重要的属性为src，尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化。其他属性如border等可以根据需求进行设置，如果业务需求中有这个要求就进行设置，没有要求就可以不设置。

六、音频和视频

网页中的多媒体内容除了图片，还有音频、视频等， HTML也提供的特定的标签用于添加音频和视频，这些标签是在HTML5中新添加的。

音频标签

• 音频使用<audio>标签进行定义。

•<audio>是双标签。

• 同图片一样，需要使用src属性设置音频查找的路径。

• 音频文件支持的格式包括：.mp3、.ogg、.wav。

<audio src="audio.mp3"> </audio>

仅仅有上述代码浏览器运行结果是一片空白，还要添加音频的控制条属性：

音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是 controls。

<audio src="audio.mp3" controls="controls"> </audio>

视频标签

• 视频的设置方法与音频非常类似。

• 视频使用<video>标签进行定义。

•<video>是双标签。

• 使用src属性设置视频查找的路径。

• 视频文件支持的格式包括：.mp4、.ogg、.webm。

<video src="video.mp4"></video>

同音频类似，仅有上面代码只会显示一张图片，并不会播放视频，需要添加视频的控制条属性。

视频也需要使用controls属性设置控制条，属性值也是controls。

<video src="video.mp4" controls="controls" ></video>

七、超级链接

HTML 使用超级链接与网络上的另一个文档相连。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

超级链接标签

• 在HTML中使用<a>标签创建超链接。

• 其中a全称anchor，锚的意思，轮船上的锚抛到一个点后就会固定在这个点，让船停止在这个位置。超级链接跟这个意思相同，确立一个目标，通过点击就可以跳转至这个目标并停止在这个位置。

• <a>为双标签。

• <a>标签内部可以放容器级标签，也可以放文本级的内容，所以说可以认为<a>标签为一个容器级标签。但是，<a>标签里经常放文本级内容，例如文字、图片等。

• 作用：在指定的位置添加超级链接，提供用户进行点击和跳转。

• <a>标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性。

1. href 属性

href全称hypertext reference，超文本引用，用于规定链接的目标地址。

属性值：链接目标的路径地址。可以使用相对路径或网址形式的绝对路径。

href属性非常重要，<a>标签要想实现点击跳转，必须设置该属性，拥有这个属性<a>标签在鼠标移上时才会显示一个小手指针状态。

<a href="https://www.baidu.com/">跳转至百度</a>
<a href="new.html">跳转至百度</a>

2. target 属性

• 使用target 属性，可以定义被链接的文档（即跳转后的页面）在何处跳转显示，如不设置此属性默认在本标签页进行跳转，即不打开新页面，但是这种已经不太流行了，现在基本都习惯跳转后打开一个新的标签页，原始标签页保持不变。

• 属性值有两种：

• _self：默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。

• _blank：空白的，表示跳转的页面在新窗口打开。

<a href="https://www.baidu.com/" target="_blank">跳转至百度</a>

3. title 属性

• title设置的是鼠标悬停时的提示文本，与标签类似。

• 属性值：自定义的文字内容。

• 该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。

<a href="https://www.baidu.com/" target="_blank" title="会跳转至百度">跳转至百度</a>
<a href="https://www.baidu.com/" target="_blank" title="点击跳转至百度"><img src="image/ceshi.jpg"></a>

其实对于上述第二个例子即<a>标签中嵌套<img>标签进行跳转，title属性可以设置给<a>标签，也可以设置给<img>标签，二者对于用户来说看到的是一样的，只是我们需要知道<a>标签也有title这么个属性。

两种特殊的锚点跳转方法

超级链接的跳转效果不止包含跨页面的跳转，还包含锚点跳转的方式。

页面内锚点跳转

• 这种跳转方式实现的是从某个位置跳转到同页面的另一个位置。

• 制作方法分为两个步骤：分别是设置锚点、添加链接。

第一步：设置锚点

设置锚点，也就是设置跳转目标位置，有两种设置方式。

①在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的。 id的属性值自定义规则：必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写。

<h2 id="mubiao1">目标位置1</h2>

②在目标位置添加一个空的<a> 标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的。

<a name="mubiao2"></a>   
<h2>目标位置</h2>

第二步：添加链接

链接到锚点，在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值。

<a href="#mubiao1">点击跳转至目标位置1</a>
<a href="#mubiao2">点击跳转至目标位置2</a>

案例：

跨页面锚点跳转

这种跳转方法综合了前面的跨页面跳转和锚点跳转两种方式。

制作方法也分为两个步骤，分别是设置锚点、添加链接。

第一步：设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用id或name 属性。

第二步：链接到锚点，添加超级链接时href属性需要更改，属性值写为页面的路径#id ，相当于将目标页面文件的路径和目标页面中目标位置的路径两个路径地址进行了拼接。

例如想要跳转至同级的new.html页面中id为mubiao的位置：

<a href="new.html#mubiao">点击文本</a>

八、列表

• 列表用于制作HTML中的一系列项目。

• 通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建。

• 根据项目的内容不同，可以有三种语义的列表结构：无序列表、有序列表、定义列表。

1. 无序列表

无序列表需要两个标签参与，分别是<ul>和<li>。

ul：unordered list，表示定义一个无序列表的大结构。

li：list item，列表项，定义的是无序列表内的某一项。

<ul>和<li>是嵌套关系，快捷键：ul>li。

一个列表中可以有任意个列表项。

快捷键：ul>li*4

    <h3>中国古典四大名著：</h3>
    <ul>
        <li>红楼梦</li>
        <li>西游记</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>

注意事项：

1. <ul>内部只能嵌套<li>，不能嵌套<h1>标签等其他标签，并且<li>标签不能脱离<ul>单独书写。

2. <li>标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放一组ul>li无序列表结构。

3. 无序列表的列表项<li>之间，没有顺序的先后之分，它们的重要程度是相同的。

4. 无序列表的作用只是搭建列表结构，没有添加样式前缀的功能，样式是由css负责，也就是每一项前面的小圆点是由css负责的，后续都可以用css更改实心还是空心等样式，也可以清除。

2. 有序列表

有序列表的语法与无序列表非常类似，只是在语义上有差异。

有序列表由两个标签组成，分别是<ol>和<li>。

ol：ordered list，表示定义一个有序的列表的大结构。

li：list item，定义的是有序列表的每一项。<ol>和<li>是嵌套关系，快捷键：ol>li。

<ol>标签内部可以嵌套任意多个<li>标签。

快捷键：ol>li*3

    <h3>国土面积排行：</h3>
    <ol>
        <li>俄罗斯</li>
        <li>加拿大</li>
        <li>中国</li>
    </ol>

注意事项：

1. <ol>内部只能嵌套<li>，不能嵌套<h1>标签等其他标签，并且<li>标签不能脱离<ol>单独书写。跟无序列表类似，如果想为列表添加标题应该在<ul>标签之前，而不是<ul>内部。

2. <li>标签是一个经典的容器级标签，内部可以放置任意内容，甚至可以放ol>li。

3. 有序列表的列表项<li>之间，存在顺序先后之分，根据内容的顺序需要合理调整书写位置。

4. 有序列表的作用只是搭建有顺序的列表结构，前面的数字排序样式不是<ol>标签的作用，而是css负责的，序号前缀是由css负责设置的。

3. 定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

由三个标签组成完整的结构，包含<dl>、<dt>、<dd>。

dl：definition list，表示定义一个自定义列表的大结构。

dt：definition term，表示定义自定义列表中的一个主题或者术语。

dd：definition description，定义解释项，表示描述或解释前面的定义主题dt。

<dl>内部只能嵌套<dt>和<dd>，<dt>与<dd>是同级关系。

基本结构：

   <dl>
       <dt>主题</dt>
       <dd>解释项</dd>
   </dl>

快捷键：dl>dt+dd

   <dl>
    <dt>张三</dt>
    <dd>城市：北京</dd>
    <dd>年龄：18</dd>
    <dt>李四</dt>
    <dd>城市：上海</dd>
    <dd>年龄：20</dd>
    <dd>学校：外国语学校</dd>
    <dt>王五</dt>
   </dl>

注意事项：

1. <dl>内部只能嵌套<dt>和<dd>，<dt>与<dd>不能脱离<dl>单独书写。

2. dl内部可以放多组dt和dd，每个dd解释说明的是前面的距离最近的一个dt。

3. .每个dt后面可以有0到多个解释项的dd，每个dd解释的都是前面距离最近的一个dt。

4. dt和dd标签也是容器级标签，内部可以放置任意内容。这样有助于使得列表结构更清晰：

   <dl>
    <dt>张三</dt>
    <dd>
        <p>城市：北京</p>
        <p>年龄：18</p>
    </dd>
    <dt>李四</dt>
    <dd>
        <p>城市：上海</p>
        <p>年龄：20</p>
        <p>学校：外国语学校</p>
    </dd>
    <dt>王五</dt>
   </dl>

5. 定义列表中的缩进样式由css负责，标签只负责搭建语义结构。

6. 配合着css布局效果，最好每个dl中只添加一组dt和dd，便于后期管理。

所以实际工作中一般都会这样写：

<dl>
    <dt>张三</dt>
    <dd>
        <p>城市：北京</p>
        <p>年龄：18</p>
    </dd>
</dl>

<dl>
    <dt>李四</dt>
    <dd>
        <p>城市：上海</p>
        <p>年龄：20</p>
        <p>学校：外国语学校</p>
    </dd>
</dl>

<dl>
    <dt>王五</dt>
</dl>