重学前端（三）HTML 语义

先把 HTML 的知识结构图放前面方便查阅理解

css 和 html

winter老师说深刻理解 HTML 是成为优秀的前端工程师重要的一步。

在此之前我并没有把 HTML 放到如此重要的地步，也确实还没有察觉到 HTML 其实很难精通，下面看看具体讲解。

首先是 HTML 中的语义类标签。

语义类标签是什么

学习一样东西，首先要弄清楚它的定义。

语义类标签比较常用，分别都有自己的语义，比如：section、nav、footer 等，在视觉表现上大部分都差不多。

语义又是什么

语义是我们说话表达的意思，一般由文字来承载，比如 section 转化文字就是章节，如果 HTML 是用中文写的，那么就是：<章节>，表示告诉人们和电脑这里是一段章节。

为什么要用语义类标签

其实现代互联网大多数项目用的还是 div 居多，因为有些东西本身就没有语义，或者语义不明确。比如点赞按钮，它看上去不像平常按钮，是一个图形大拇指或者心型，但同时它又有一个可以按的功能，那么我们一般都会用 div 。

那么我们为什么要用语义类标签，语义类标签优点在哪里？

如果正确使用语义类标签是可以带来很多好处的。

1. 对开发者友好，方便人类阅读，也就方便了开发和维护。

2. 也方便机器阅读，适合搜索引擎检索，优化 seo 可以从这方面入手

3. 方便阅读障碍者，可以很好地支持读屏软件，方便生成目录等

当然这是正确使用语义的情况下，如果滥用用错也是会给机器以及 css 编写造成负担。

用对 > 不用 > 用错

有理想的前端还是应该追求“用对”它们

几个语义标签使用场景

1. 最自然的使用场景：作为自然语言和纯文本的补充，来表达一定的结构或者消除歧义

比如给汉字写上拼音，可以直接用 ruby、rt、rp 三个标签实现

或者一句话里需要强调某个字，可以使用 em 标签，强调部分不一样，语义也不一样。

今天中午吃什么？
今天中午吃什么？

2. 作为标题摘要的语义类标签

h1 - h6 ，就表示了不同层级的标题，类似以下使用文章会自动生成结构

主标题
    
第一个副标题
        
第一个副标题下的标题
    
第二个副标题

3. 作为整体结构的语义类标签

一个典型的页面：

总结

在合适的场景下使用语义化：

1. 自然语言表达能力的补充

2. 文章标题包括摘要等

3. 适合机器阅读的整体结构

作业

只用 HTML 写一个页面，用语义化标签，可以参考 https://en.wikipedia.org/wiki/World_Wide_Web

先自己查标签看能不能写出类似结构页面，写完后再查看这个 wiki 页面的代码看他用的是哪些标签

下面是一些补充：

补充语义标签

建议

尽量只用自己熟悉的标签，并且只在有把握的场景引入语义标签，保证标签不被滥用。