2.3.1 一般文本格式标签

首先我们从最基本的文本类标签开始学起，这是最没有理解成本的标签类型。我们把常见的文本标签罗列出来大家看一看：

• <h1> – <h6>：1级标题 – 6级标题
• <p>：表示一个正文的段落
• <b> ：仅加粗文本字重，没别的意思
• <strong>：加重文字权重和凸显，同时加粗
• <i>：仅定义文字斜体，没别的意思
• <em> ：定义需要注意的文字，同时倾斜
• <del>：定义删除线文字
• <br/>：换行符，类似word中的换行效果

这些标签作为身份标识的作用想必不用介绍了，通常只要了解一点，h1 标签内部一般不用再包含一些标识文本的内容，而对于 p 标签来说就可以往下级添加其它标签配合。

比如一段文案：“超人老师 独家秘笈 上线啦，只要98，不用998，赶紧来参加！”，我们可以写成这样：

通过这种方法，我们对一个段落内容的文本就可以做出不同的语义调整，“独家秘笈” 我们强调这个关键字的权重，“98” 仅仅只是加粗它，“998” 我们则用删除线抹掉。

2.3.2 有序/无序列表标签

而在文本的段落类型里，还有一个重要的部分，就是列表。在正常我们打字编辑的时候，列表有两种，有序列表和无序列表，它们分别由 ul、ol 标签来标识。而仅仅定义一个列表是不够的，列表中还会包含对应的条目，所以它们中每个条目由 li 表示。

比如我们要创建一个 HTML CSS 课程的目录，作为一个有序列表（无序同理），它就可以这么写：

2.3.3 链接标签

链接我们上一节介绍过了，是 a 标签，可以通过 herf 属性指定线上网址或本地路径的方式进行跳转。而 a 标签内容的文字内容，则会变颜色以及多出下划线。

值得注意的是，链接是用来实现跳转功能的标签，而在我们的实际项目中，实现跳转的可不仅仅只有文字，还可能是整个段落，整个模块。

所以，使用这种效果的办法就是在这些内容的上级添加 a 标签，就可以实现超链接的跳转效果。

2.3.4 多媒体标签

多媒体内容就是一个页面中除了文字外的图片、音效、视频等内容，如下所示：、

• <img>：图像标签，用来显示位图的标签
• <audio>：音频标签，可以嵌入一些类似mp3的音频文件进行播放
• <video>：视频标签，可以嵌入类似avi、wmv、mp4等主流格式的视频

这三个标签中，图像标签比较特殊，因为它也是一个不需要添加结束标签的特殊标签。想要正确应用这三个标签，就需要了解一个重要的属性 —— src。

这是一个用来指定多媒体文件地址的属性，只输入 img 标签，浏览器虽然知道这里应该放张图片，但具体是什么图，它不能凭空脑补出来，所以，我们要用 src 属性来指定具体目标。

这里就牵扯到下一个重要的知识点，链接类型：绝对链接、相对链接。

• 绝对链接：比如链接到具体网址，比如 src=“supermancall.com/logo.png”
• 相对链接：相对当前HTML文档的位置，比如 src=“/img/logo.png”

绝对链接比较好理解，就是每张图片的一个固定门牌号地址。而相对链接则是对方基于你当前位置的方位。我们可以尝试创建一个 HTML，然后在这个文档同级目录创建一个 img 文件夹，然后在里面添加素材中的 logo，再输入下方的代码，你就可以看见 img 文件夹中的 logo 被正常显示在浏览器中：

所以，这就是切图的作用，把页面图片导出，然后通过代码对它进行调用。当然，文件的地址你可以根据根目录随意更改，每一个 “/” 就代表一级目录，如果 img 下方还创建了一个目录的话，那么 src 的值就应该是 img / chil / logo.png。

如果你想控制它们的大小，就可以通过 height、width 两个属性，比如下面代码：

而 audio 和 video 两个标签，使用 src 的方法相同，只是它们有结束标签，且规则相对来说更复杂，因为对我们来说用的不多，所以暂且跳过。

2.3.5 表单标签

表单标签 form，类似我们去银行填写申请信息的申请单，是收集用户选填的一系列数据的标签。

一个完整的 form 标签就是一张清单本身，但上面是空白的，所以，我们要在表单里指定一系列我们需要收集的条目，比如姓名、手机号、地址等信息。

而收集的条目和列表类似，也要由其它标签来完成：

• <input>：一个标准的输入元素，类型由属性指定，可以输入文本、密码等
• <textarea>：一个多行文本输入框
• <select>：定义下拉选项列表
• <button>：表单执行的按钮，类似注册或登录按钮

对于表单来说，最常用的就是 input 标签了，它也没有结束标签。用 type 属性可以来指定这个输入元素是哪种类型，比如下面的情况：

• < input type=”email”>：指定邮箱输入框
• < input type=”password”>：指定密码输入框
• < input type=”tel”>：指定手机号输入框
• < input type=”date”>：指定日期选择空间
• < input type=”button”>：表单内应用的按钮

再用个完整的例子来解释，比如我们要注册一个账号，那么填写账号的表单，代码可以这么表示：

表单是一个对前端来说非常重要的标签类型，可用的标签其实远远不止展示的这些，对于我们而言，只要对这些基础标签有认识，了解整个表单的功能即可。