（2）HTML基本标签

一、认识纯文本格式

1.什么是纯文本格式？

纯文本格式，就是没有任何文本修饰的，没有任何粗体，下划线，斜体，图形，符号或特殊字符及特殊打印格式的文本，只保存文本，不保存其格式设置。

2.纯文本格式和富文本格式的对比？

纯文本格式：最常见的是.txt文件。在存储和传输过程中，只能保存文字，不能保存格式。

富文本格式：与纯文本对应，最常见的是.rtf文件，类似.doc文件，内部可以保存文本的样式、图片等。

从如下图我们可以看到，富文本格式占用大小大于纯文本格式的文件，所以纯文本格式更利于传输，因为它文件大小比较小。

3.纯文本文件的特点

文件只能保存文本，不保存其他的格式或非文本内容，有利于网络传输。
所有的纯文本格式文件，可以通过直接更改扩展名的方式更改保存格式。
纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑。
那么，我们要接下来要学习的html、css、js文件都是纯文本格式文件。

二、什么是标签(HTML tag)

1.标签概念：

标签又叫做标记，也叫元素，有特殊的书写规范，是写给浏览器的一种语法格式，结合普通的文字信息，实现特殊的语义或显示内容。在编辑器中可以编辑和查看，在浏览器中不显示。标签是由：小于号+中间字符+大于号组成的代码（注:代码的所有字符都由英文字符组成）作用是给用户展示特定内容或是告诉浏览器与搜索引擎关于网页的部分信息。

2.标签基本结构

如下图所示：

<!DOCTYPE html>文档类型声明，让浏览器清楚文档的版本、类型和风格，有助于浏览器正确显示网页标签，声明文档类型为html，定义该文件是一个html文档，专业术语称为DTD:文档类型定义(Document Type Definition)，此标签不属于网页的内容. 它是一条指令，告诉浏览器编写页面所用的标记的版本。
<html>标签是网页上的所有内容，无论是给用户看的还是用来与浏览器或是搜索引擎通讯的信息，统一存放在html的开始标签和结束标签之间，lang是language的缩写，代表是该网页属于哪一个国家或是地区的网页。常用lang: ①en-US/en 英语 (美国) ②zh-CN 中文 (简体, 中国大陆 ③zh-SG 中文 (简体, 新加坡) ④zh-HK 中文 (繁体, 香港) ⑤zh-MO 中文 (繁体, 澳门) ⑥zh-TW 中文 (繁体, 台湾)
<head>标签用于定义页面的全局信息，网页上需要在浏览器上显示出来的，并且还要在互联网这个大的平台进行传输，必然就要将网页自身的部分信息发送给浏览器和搜素引擎，给浏览器或者搜索引擎看的所有信息。<head>是所有其他头元素的容器（title meta script style link等）
<meta>标签被称为元数据，作用是专门告诉浏览器或是搜索引擎关于网页的一些基本数据，这里使用charset="UTF-8"，是规定了编码格式为UTF-8格式，这是我们常用的编码格式。charset：char（字符的意思）+set(集合的意思)=字符集合=简称为“字符集”，告诉浏览器我们的网页上文字的编码格式，不同的编码格式包含的文字内容不一样如果浏览器不知道网页文件的字符集的话，那么网页文件的内容就会变成乱码展示中文的字符集种类： gb2312(gb是国标的汉语拼音的缩写，指的是国家标准的意思) ，包含6763个汉字 gbk（国家标准扩展），包含21886个汉字 gb18030，包含70244个汉字 utf-8，包含全世界200多个国家和地区的语言文字。如下是乱码图：
<title>标签之间存放的是网页的名字，如下图所示：

6.<body>标签内部存放用户能够看到的所有内容，包含文字，图片，视频，音频等。

三、HTML标签语法

1.标签语法（1）：

标签在使用时必须使用尖括号括起来
标签分为封闭类型和非封闭类型
封闭类型标记（双标记）：需要结束标记，并且中间可以包含内容，例如（内容）非封闭类型标记（空标记、单标记）:不需要结束标记，但需要加/封闭，且不可包含内容，例如（ ） *开始标签常被称为起始标签，结束标签常称为闭合标签。
<标记名>内容</标记名>
<标记名/>

如下是添加标记后的网页效果

注：利用标记给普通的文本添加语义、描述超文本内容，搭建网页的基本结构，标签只负责网页的基本机构，不负责样式，样式我们需要通过css去实现，css负责我们的样式。

2.标签语法（2）：

元素嵌套： 元素之间可以相互嵌套，形成更为复杂的语法在嵌套元素时需要注意标记的嵌套顺序。

HTML属性规范：

书写位置：必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔。
属性包含：属性名（key）、属性值（value）。属性名与属性值之间的写法通常称做键值对写法，HTML标签属性的键值对写法是k=”v”。XHTML要求属性值必须在双引号内部。
一个标签内可以设置多个不同的属性，属性与属性之间使用空格进行分隔，每个属性的键值对写法都是k="v"。4、部分标签属性k可以设置多个属性值v，所有属性值v都必须写在同一对双引号内，值与值之间需要使用空格分隔。

3.标签语法（3）：

标签特有属性：实例：HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：<a href="http://www.runoob.com">这是一个链接</a> 所以href属性就是a超链接的特有属性，只有该标签有的属性叫特有属性。

通用属性：适用于大多数 HTML 元素，也就是大多数元素标签都可以设置的属性，叫做通用属性。

4.标签语法（4）：

HTML标签支持注释。

注释：为代码添加适当的注释，是一种良好的编码习惯，注释只在编辑文档情况下可见，在浏览器展示页时并不会显示。

语法规范：

注释示例：

三、常用标签

1.标题标签(h1~h6):

从h1开始，到h6结束，它是按照从大到小顺序排布的，h1是最大的标题标签，h6则是最小的标题标签，标题标签的作用是，它是加粗的文字。

标题标签适用场景：

2.<div>区域标签

目前网页布局技术总体而言可以分成三个步骤： 1：分区域 2：排位置 3：塞内容，div标签的作用就在网页内容中间划分出若干个矩形区域，用以存放不一样的内容。

3.<ul><li>标签

网页中间还有一些内容相似、结构相仿、布局接近的区域，像这一类区域我们就使用无序列表来进行区域划分

<ul><li>标签适用场景（1）：商品信息列表

<ul><li>标签适用场景（2）：公告信息列表

<ul><li>标签适用场景（3）：新闻信息列表

4.<ol><li>标签

网页中间还有一些内容相似、结构相仿、布局接近但是每个区域的内容是有先后关系的的区域，像这一类区域我们就使用有序列表来进行区域划分，这一类区域大多用在详细法律条文、政府公告、产品说明等内容上

<ol><li>标签适用场景：详细法律条文

5.<dl><dt><dd>自定义列表标签

网页中间还有一些内容不完全一样、结构相仿、布局接近、每个区域的内容没有先后关系的的区域，像这一类区域我们就使用有自定义列表来进行区域划分，这一类区域大多用在专业名词条目的解释，或是网页底部信息分类等内容上。

<dl><dt><dd>自定义列表标签适用场景（1）：百度百科

<dl><dt><dd>自定义列表标签适用场景（2）：网页底部部分

6.段落标签

段落标签适用场景：网络小说段落

p标签的作用就是在网页内容中间划分出一个专门存放大段文字的区域。

7.<blockquote>标签引用大段文字展示

<blockquote>标签适用场景：

blockquote标签的作用就是：在网页内容中间划分展示大段引用自古典，古籍或是名人名言的区域

8.标签

标签适用场景：

span标签的作用就是在网页内容的大段文字中间标注一行或是数行文字，并给这些文字设置一些不一样的展示效果，比如：下划线，颜色。

9.重要文字标注之标签

标签适用场景:

strong标签的作用就是在网页内容中的某段文字中间标注出特别重要的文字注： 标签的效果与strong类似，区别在于em标签包裹的文字重要性比strong标签低，但是em标签内的文字会产生倾斜效果 标签的效果则是包裹一段文字，使被包裹的文字产生倾斜效果，但是被包裹文字的重要性不会有什么变化。

10.<a>标签

<a>标签常用属性：

href=“网页地址”: href是Hypertext Reference的缩写，意思是超文本引用，作用就是让我们可以点击网页的某些内容可以跳转到其他的网页上去。
target=“页面打开方式”： ‘_black’新页面打开; _self 默认打开方式,当前页打开

<a>标签应用场景:

11.<hr/>水平线标签

12.<img/>标签

<img/>标签的属性：

src=“图片地址”:src是sourse的缩写，表示我们需要显示的图片文件所在的位置
alt=“图片名称”：每个图片都是为了展示某些内容，alt里面的文字则是为了描述图片内容的，它再图片路径填写错误的时候会显示，图片路径正确则不会显示。
width=“图片文件的实际宽度”：用以标注图文文件的实际高度，此处高度数据不可修改，不可因为布局需要改成其他非实际尺寸
height=“图片文件的实际高度”：同上。

img标签的文件地址概念详解：

图片文件的地址可分为两种概念，第一：“相对路径”，第二：“绝对路径”；

背景故事举例：小明同学住在中国湖南省长沙市幸福小区2栋3单元2104室，有一天小明女朋友小芬来小明家玩，此时，小芬走到了小区里结果找不到小明家的位置了，于是她和小明打了个电话… …

src: 路径写法,不能出现中文
相对路径: 从本地文件(该代码所在文件的当前位置)出发寻找到目标文件 ./ (当前目录) ../(上级目录) ../../(上上级目录)类推
绝对路径:从本地: D:/project/demo/pic.jpg（不推荐）
从网络: :https://www.baidu.com/img/blabla.jpg

四、什么是HTML的标签语义化？

标签语义化：说的通俗点就是，明白每个标签的用途（用正确的标签做正确的事情）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

好处：语义化可以让页面的内容结构化，便于浏览器解析，便于搜索引擎解析，并提高代码的可维护度和可重用性。

五、H5新增标签

左侧是H5标签出现之前的写法，右侧是出现H5标签之后的写法。

除此之外，还有<video>视频标签，<audio>音频标签等等。

推荐HTML学习网站，该网站也详细说明了标签语义化，我们按照该网站规范去适用标签即可。

点击如下链接直接跳转到学习网站哦~~

MDN Web Docs