前端学习记录（四）：web语义化学习记录

        随着网络技术的发展，人们对于人工智能的要求也越来越高，也更加期望机器能够更加方便快速的能像人类一样读懂文档。        

        而对于一个网站来说，网络曝光率是对这个网站最大的一个收获，因此很多企业和公司都希望自己的产品更加容易被人了解和熟知，而这个网站的曝光率有很大一部分是来自己于搜索引擎的抓取和解析。如果一个网站在开发的时候就能做到语义十分明确，那么网络爬虫就可以更容易的获取该网站的相关知识，增加网站曝光率和点击率，带来关注和流量。

        那么可想而知，web语义化就是说在开发阶段程序员使用一些能让机器容易解析认识的标签来实现，说白了就是程序员在开发时，需要明确  确定是标题的那就用标题标签显示，是图片的就用图片标签显示，是段落的就用段落标签显示等等，这其中当然也包括了一些 seo的相关优化处理。主要目标也就是为了seo优化。

        那么怎么实现语义化呢，优先来了解以下几点知识（内容摘自知乎）

            所谓语义化，简单来说，就是能够更清晰，更直观的理解语言所要表达的含义，所谓词必达意就是这个意思。那么在开发过程中的语义化指的是什么呢？就是能够让除了当事开发者能快速熟悉代码之外，最主要的就是让机器更方便的读懂代码。

            1.语义化标签只是HTML，CSS本身不存在语义化，CSS的ID和class命名可以语义化。HTML是标签，CSS是属性。
            2.语义化标签建立在文档化页面的基础上面，将网页当做是一个文档，DOM中的D（document）以及在书写js是用到的document就已经很清晰的告诉我们，计算机将页面当做是一个document，我们也可以将页面归为document的一种。
            3.HTML标签本身是意义的。如p---paragraph，li---list，img---image但是有些是无语义化的如div---division并不能呢个表示div标签里面内容的属性和表现样式。

            4.HTML5在运来HTML的基础上根据大部分人的开发习惯和一般的网站页面展现形式，增加了语义化的标签如<header><footer><nav><article>.，其实就是原来的常用特定的div+class。

        

            这样，实现web语义化就需要进行以下几点：

            1：某些能确定展示内容属性的内容，用对应的标签展示 ，如文章标题用H1~H6，图片使用img并且写好每一张图片的alt属性。

            2：条理清晰，逻辑缜密，如在标签内部设置 内联属性时按id ，class，style，function等的确定好的顺序

            3：命名规范，按照统一的规范格式命名，并且做到见名知意，目的分工明确，如用id来关联整个dom用来供给js使用，而用class来进行页面样式的控制

            4：dom结构清晰，去除样式之后页面层次也容易理解

            5：使用keyword ，description，content 等等告诉机器本网站是做什么的

            6：为了代码的可维护性高，尽可能的采用 css 选择器的方式 对页面进行样式渲染，避免使用过多的class

            开发者遵守语义化的规范有利于网络爬虫识别网页，也利于程序员维护代码等等，因此对于语义化的了解和使用，是需要开发者注意和加强的。

               一些语义化的标签如 header   nav   section  footer   ，nav用来定义导航区域，本身没有样式，只是在 语法设定上 认为其内内容是导航，section是文档的一个章节 可以用来代替div存放文字段落。