HTML功能由标签承担，按照功能和语言来划分
- 文档元信息：通常是出现在 head 标签中的元素，包含了描述文档自身的一些信息；
- 语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；
- 链接：提供到文档内和文档外的链接；
- 替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；
- 表单：用于填写和提交信息的一类标签；
- 表格：表头、表尾、单元格等表格的结构。
元信息类标签
head标签
作为盛放其它语义类标签的容器使用。head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。
title标签
完整地概括整个网页内容，一般就是标签页显示的文字
base标签
给页面上所有的 URL 相对地址提供一个基础
meta标签
提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
解决乱码
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
SEO优化
- 关键词
<meta name="keywords" content="your keywords"> - 描述内容
<meta name="description" content="your description"> - 网页作者
<meta name="author" content="author,email address"> - 定义网页搜索引擎索引方式
<meta name="robots" content="index,follow,all">
移动端布局
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width viewport 宽度(数值/device-width)
- height viewport 高度(数值/device-height)
- initial-scale 初始缩放比例
- maximum-scale 最大缩放比例
- minimum-scale 最小缩放比例
- user-scalable 是否允许用户缩放(yes/no)
具有 http-equiv 属性的 meta
- 过期时间
<meta http-equiv="expires" content="31 Dec 2021"> - 设定5秒自动刷新并且跳转到指定的网页。如果不设置ur则刷新本网页。
<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com"> - 强制页面在当前窗口以独立页面显示, 可以防止别人在框架中调用自己的页面。
<meta http-equiv="window-target" content="_top'> - 禁止浏览器从本地计算机的缓存中访问页面的内容
<meta http-equiv="pragma" content="no-cache">
语义类标签
对于大部分场景来说div+css基本就可以满足，但为什么还需要语义类标签呢？
使用语义类标签的好处：
- 可读性强，没有css也能很好的掌握整个网页结构
- 适合引擎检索（SEO），有效提升网页搜索量
- 支持读屏软件，根据文章自动生成目录
当然，不恰当使用语义类标签，容易造成负面作用，给机器造成混淆。用对要比不用好，不用要比用错好。
随着越来越多的浏览器推出“阅读模式”，以及各种非浏览器终端的出现，语义化的 HTML 适合机器阅读的特性变得越来越重要。应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。
<body>
<header>
<nav>
……
</nav>
</header>
<aside>
<nav>
……
</nav>
</aside>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>
<address>……</address>
</footer>
</body>
header，如其名，通常出现在前部，表示导航或者介绍性的内容。
footer，通常出现在尾部，包含一些作者信息、相关链接、版权信息等。
header 和 footer 一般都是放在 article 或者 body 的直接子元素
aside 表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。
aside 很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是 aside，aside 不一定是侧边栏。
aside 和 header 中都可能出现导航（nav 标签），二者的区别是，header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。
最后 footer 中包含 address，这是个非常容易被误用的标签。address 并非像 date 一样，表示一个给机器阅读的地址，而是表示“文章（作者）的联系方式”，address 明确地只关联到 article 和 body。
链接标签
链接型元素是使用 href 属性引入资源
link标签
link 标签的链接类型主要通过 rel 属性来区分
icon
icon 型 link 是唯一一个外部资源类的元信息 link，其它元信息类 link 都是超链接，这意味着，icon 型 link 中的图标地址默认会被浏览器下载和使用。
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
modulepreload
预先加载一个 JavaScript 的模块，不会执行对应的 JavaScript。这可以保证 JS 模块不必等到执行时才加载。
<link rel="modulepreload" href="a1.js">
<link rel="modulepreload" href="a2.js">
<link rel="modulepreload" href="a3.js">
<link rel="modulepreload" href="a4.js">
<script type="module" src="app.js">
stylesheet
引入外联样式表<link rel="stylesheet" href="xxx.css" type="text/css">
a标签
a 标签其实同时充当了链接和目标点的角色，当 a 标签有 href 属性时，它是链接，当它有 name 时，它是链接的目标。
替换型标签
替换型元素使用 src 属性来引入资源
表单标签
input标签
- type 根据此属性形成不同控件类型
- name 表示表单域的名称
- value 表示表单域的默认值
- maxlength 最多输入的字符数
- size 控制框的宽度（以字符为单位）
表格标签
基本开发过程不怎么使用，就算使用也是用第三方开源UI库如elementui的el-table高度封装好
