大家好，我是qishilong。
语义化
首先我们先来了解一下什么是语义化：
- 语义化是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好的html结构，有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。 -- 维基百科
- 在编程中，语义指的是一段代码的含义 — 例如 "运行这行 JavaScript 代码会产生怎样的影响？", 或者 "这个 HTML 的元素有什么作用，扮演了什么样的角色"（而不只是 "它看上去像是什么？"。）...... -- MDN （因为篇幅过长，如果想要详细了解的同学，可以去MDN文档中关于语义化的详细介绍）
- ......
然后我们再来聊聊语义化：
- 每一个 HTML 元素都有具体的含义
<a></a>: a元素，超链接<p></p>: p元素，段落<h1></h1>: h1元素，一级标题- ......
```HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化</title>
</head>
<body>
<a href="https://www.baidu.com">百度一下</a>
<p>这是一个段落</p>
<h1>这是一级标题</h1>
</body>
</html>
```
- 所有元素与展示效果无关
元素展示到页面中的效果，应该由CSS决定。
因为浏览器在将元素渲染到页面上时，会在对应的标签上加山对应的默认属性，所有不同的标签在初始情况下渲染的样式不同，下面我们来验证一下：
通过在浏览器页面上按下 鼠标右键 -> 检查 或者使用电脑上的 Fn+F12按键 打开浏览器的控制台，来查看或者调试页面。
想要详细了解谷歌浏览器的控制台功能，可以看这篇文章的介绍：https://www.cnblogs.com/xiaowenshu/p/10450848.html
现在我们来看一下a标签渲染到页面上时的初使样式。让我们选中a元素，然后在控制台中查看：
我们可以看到标签出事渲染到页面上时，会自动带一些初使样式，例如a标签就带有以下初使样式：
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
这些属性在以后的内容篇中会逐步讲到，我在这里先大致说一下：
color: 元素中字体的颜色；
cursor: 鼠标移动到元素上时，鼠标的样式，cursor: pointer;表示的是一个小手的样式，这个属性还有其他属性值，在讲到CSS时会在详细的介绍这个属性；
text-decoration: 用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）。
看到这里，不知道细心的同学有没有发现，这些CSS属性也有很大的语义化，比如设置字体颜色，就是color，设置鼠标指针的形状就是cursor，设置文本下划线属性，就是text-decoration，其实很多的CSS属性根据字面意思就能猜出来，这个属性的作用是什么，具体的CSS内容会在后面逐步介绍到。其实还有一点，不知道大家有没有注意到，在上面的图片中，出现了这样一句话user agent stylesheet，这句话的意思很字面--浏览器默认样式，所以谷歌的浏览器很贴心啊，默认样式都在控制台中标注出来了，并且在单独的内容框里，这也是为什么我十分推荐谷歌浏览器的原因。我们再来看下p元素的：
h1元素的：
现在我们通过在控制台中向对应的元素加入或改变一些CSS属性，看元素会有什么变化：
a元素：
可以看到，页面中字体的颜色变了，字体类型变了，下划线的位置变了
在控制台的element.style一栏中可以加入自己想要给定的元素样式，不过这个自己在控制台中加的样式不是永久的，在重新刷新页面后，这些自己添加的样式会自动取消，在平时的开发和练习中可以在这一栏中加入自己想要给定的样式，方便测试。
p元素：
h1元素
看到这里，我想同学们应该能够理解上面所讲的
元素展示到页面中的效果，应该由CSS决定。
因为浏览器在将元素渲染到页面上时，会在对应的标签上加山对应的默认属性，所有不同的标签在初始情况下渲染的样式不同
这两句话的意思了，元素的样式应该有CSS决定，而之所以不同的元素在渲染到页面上时会有不同的样式，是因为在渲染时，浏览器会为其加上特有的默认属性，而自己也可以通过改变元素的CSS属性来改变元素的样式。
不知道有没有同学在这地方有过疑问：
这个是什么？
:any-linkCSS伪类 选择器代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有 href 属性的 <a>、<area> 或 <link> 元素。因此，它会匹配到所有的 :link 或 :visited。
想要具体了解的，请看下面这片文章：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:any-link
这些内容我们以后会提到
重要：选择什么元素，取决于内容的含义，而不是显示出的效果 🌟🌟🌟
牢记这句话。
为什么需要语义化
- 为了搜索引擎优化（SEO）
- 为了让浏览器理解网页
这里就不再详细介绍这部分内容了，想要详细了解的，我这里放一些文章的链接，大家下去可以自己了解下。
语义化：https://developer.mozilla.org/zh-CN/docs/Glossary/Semantics
写语义标记的一些好处如下：
- 搜索引擎将其内容视为影响页面搜索排名的重要关键字（参见SEO）。
- 屏幕阅读器可以将其用作指引，帮助视力受损的用户导航页面。
- 比起搜索无休止的带有或不带有语义/命名空间类的div，找到有意义的代码块显然容易得多。
- 向开发人员建议将要填充的数据类型。
- 语义命名反映了正确的自定义元素/组件命名。
SEO：https://developer.mozilla.org/zh-CN/docs/Glossary/SEO
HTML 语义化：https://www.cnblogs.com/zhuochong/p/11412332.html
什么是语义化的HTML?有何意义？为什么要做到语义化？：https://www.cnblogs.com/wuqiutong/p/5986220.html
谈谈对于 HTML 语义化的理解：http://www.yaohaixiao.com/blog/thinking-of-html-semantic/
