1. HTML 标签
我们知道 HTML 的主要作用是标记元素的类型，这个标记的专业术语叫做 「标签」（HTML TAG）。标签由三个概念组成，分别为标签名、尖括号、结束标签。
<标签名> 相关内容
在上一篇中，我们做过的演示，标题和一段正文，是由 h1 和 p 两个标签组成。
结束标签是 HTML 中的重要内容，忘记添加结束标签会引发一系列问题。
2. HTML 属性
不同的标签，会包含一些特殊的 HTML 属性，这个属性和我们所说的 CSS 属性不完全相同，比如一个链接标签，如果我们只给出一个起始和结束标签是没意义的，还需要添加具体的网址进去，这样才有意义，于是我们会这么写：
属性的添加方法，就是在起始标签的名称后面添加 —— 空格、属性名=「值」。
不同的标签类型包含的属性会有差异，比如一个标题标签就不能为它添加链接。但是，一个标签会包含多个属性，所以我们也可以在一个标签内添加好几个属性。
比如我们可以制定让上面的链接在新窗口中打开，那么我们可以添加一个新的属性和值进去：
感兴趣的同学可以在编辑器中进行操作看一看前后的效果。
3. HTML 层级
HTML 还有一个非常重要的语法特点，就是它非常注重标签的层级关系。一个起始标签和结束标签中除了普通文本以外，还可以在中间嵌套一些别的标签。
比如一个标题，它同时也是链接，那我们可以这么写：
也就是说，a 标签是包含在 h 标签下的子标签，而 h 是 a 的父标签。当然这个例子很简单，在更复杂的情况下，我们可以创建一内容卡片中包含了标题、副标题、正文、查看更多、点赞、分享，前三个元素是一个层级，后三个元素一个层级，那么它们就会写成这样：
div 是一个比较特殊的标签类型，我们可以把它先理解成一个编组，而上面这种代码的结构，就类似我们在设计软件中创建的图层编组树桩结构。
在 HTML 中，正确的层级结构是非常重要的概念，不仅包含实际画面的效果，也包含内容逻辑上的从属关系。而我们在输入代码过程中，通常会将对文本样式做编排，即将上级标签的中间添加一个换行符，并为下级标签添加一个 tab 缩进，实现更直观的层级结构。
掌握了这些内容，那么我们就基本知道 HTML 书写的方式了，可以学习下一步了。
设计过 UI 界面的同学应该都知道，每次开始界面具体内容设计前，我们要先做一些全局的谋划和置入官方组件元素，比如状态栏、首页指示器、底部导航栏、页边距等信息。
而我们创建一个标准的网页文件，也需要做对应的准备工作，那就是提前把页面的结构创建好。当然，这些结构就不是设计素材了，而是对应的页面标签。下面是一个常规 HTML 文档的标准结构：
1. < !DOCTYPE html>
这是一个特殊的标签，在 HTML 所有标签中，有一些标签是不需要结束标签的。比如这个，是一个标准网页文档声明。用来告诉浏览器，该文档是一个 「正经文档」 以防在一些特殊情况下被错误识别成其它类型的文件。
当然，大家可以不用纠结具体的细则，只要每次在文档顶部添加这段代码即可。
2. html 标签
HTML 标签则是一个顶级标签，所有 HTML 中出现的代码元素都会包含到这个标签内。
HTML 的标签从开始到结束传达给浏览器文档内 HTML 元素的起点和终点，是一个常规网页中必备的标签元素，不能忘记添加。
3. head 标签
head 标签是网页的头部标签，它并不是指网页样式中的头部，而是代码、文档的头部。
多数情况下，我们要添加一些不展示在具体页面内容中的全局信息时，就会添加到这个标签中来。比如后面要介绍的两个标签，以及调用外部的代码、文件、统计信息等。
4. meta 标签
meta 标签是一个用来声明当前 html 文档元信息的标签，例如页面的字符编码类型，页面的搜索引擎关键字。
meta 也是一个不需要结尾标签的特殊标签，因为它声明的方式是通过属性和值来完成的，比如：
声明页面使用 utf-8 的文字编码，没有声明中文可能乱码
声明了页面的搜索关键字信息超人、UI、设计，协助搜索引擎收录定向
声明了页面的简介信息，搜索结果页面中可以看见
meta 这个标签比较特殊，在我们学习中，只要声明第一条即可，其它可以暂时忽略。
5. Title 标签
Title 标签是一个用来声明页面标题的标签，作为浏览器页面选项卡上显示的页面标题。
6. body 标签
这是页面主体的标签，标签内包含的相关内容就是展示用户可见元素的区域。
我们要实现页面的视觉、交互、排版，就要在 body 标签内编辑。后续我们学习的 HTML 标签，就以包含在 body 中的标签为主。
首先我们从最基本的文本类标签开始学起，这是最没有理解成本的标签类型。我们把常见的文本标签罗列出来大家看一看：
这些标签作为身份标识的作用想必不用介绍了，通常只要了解一点，h1 标签内部一般不用再包含一些标识文本的内容，而对于 p 标签来说就可以往下级添加其它标签配合。
比如一段文案：「超人老师独家秘笈上线啦，只要98，不用998，赶紧来参加！」，我们可以写成这样：
通过这种方法，我们对一个段落内容的文本就可以做出不同的语义调整，「独家秘笈」 我们强调这个关键字的权重，「98」 仅仅只是加粗它，「998」 我们则用删除线抹掉。
而在文本的段落类型里，还有一个重要的部分，就是列表。在正常我们打字编辑的时候，列表有两种，有序列表和无序列表，它们分别由 ul、ol 标签来标识。而仅仅定义一个列表是不够的，列表中还会包含对应的条目，所以它们中每个条目由 li 表示。
比如我们要创建一个 HTML CSS 课程的目录，作为一个有序列表（无序同理），它就可以这么写：
文本标签是比较直观的标签，它主要就是用来定义文本的使用类型，而只要大家稍微对 word 有一定的使用经验，就可以很快的理解。
链接我们上一节介绍过了，是 a 标签，可以通过 herf 属性制定线上网址或本地路径的方式进行跳转。而 a 标签内容的文字内容，则会变颜色以及多出下划线。
值得注意的是，链接是用来实现跳转功能的标签，而在我们的实际项目中，实现跳转的可不仅仅只有文字，还可能是整个段落，整个模块。
所以，使用这种效果的办法就是在这些内容的上级添加 a 标签，就可以实现超链接的跳转效果。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery