这是我参与「第四届青训营」笔记创作活动的的第1天，以青训营课程为切入点复习和回顾前端HTML基础知识，新理解，新收获。
什么是HTML？
超文本标记语言 (英语：Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。通过一对标签来实现很多功能，如为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
<p class="paragraph">My cat is very grumpy</p>
这就是基本的 HTML 元素，由开始标签，结束标签，内容，元素组成，元素也可以有属性。标签还可以嵌套标签。
HTML 语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，如
<input /> <meta /> - 属性值推荐用双引号包裹。
HTML 结构
一个完整的 HTML 则是由许多的元素构成，下面是最基本的 HTML 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
<!DOCTYPE html>— 文档类型。DOCTYPE用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE在当今作用有限，仅用于保证文档正常读取。告诉浏览器文档的类型，让浏览器正确渲染页面。<html></html>—<html>元素。该元素包含整个页面的内容，也称作根元素。<head></head>—<head>元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字、页面描述、CSS 样式表和字符编码声明等。<meta charset="utf-8">— 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。<title></title>—<title>元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。<body></body>—<body>元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
DOM树
文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。
HTML 中每段标记都可以表示为树形结构中的一个节点，文档节点表示 HTML 元素，属性节点表示属性， 文档节点表示文档类型。
常见的HTML标签
- 行内元素：
a,b,span,img,input,select,strong; - 块级元素：
div,ul,li,dl,dt,dd,h1-5,p等； - 空元素：
<br>,<hr>,<img>,<link>,<meta>;
具体的标签介绍可以参考 MDN 和菜鸟教程。
语义化是什么
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
比如开发者应该遵循语义来编写 HTML：
- 有序列表用 ol； 无序列表用 ul
- lang 属性表示内容所使用的语言
语义化的好处
- 提高代码可读性，可维护性
- 用正确的标签做正确的事情；
- 去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
- 搜索引擎优化，有利于
SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重； - 提升无障碍性（屏幕阅读器，盲人阅读器等）
