先把 HTML 的知识结构图放前面方便查阅理解
css 和 html
winter老师说深刻理解 HTML 是成为优秀的前端工程师重要的一步。
在此之前我并没有把 HTML 放到如此重要的地步，也确实还没有察觉到 HTML 其实很难精通，下面看看具体讲解。
首先是 HTML 中的语义类标签。
语义类标签是什么
学习一样东西，首先要弄清楚它的定义。
语义类标签比较常用，分别都有自己的语义，比如：section、nav、footer 等，在视觉表现上大部分都差不多。
语义又是什么
语义是我们说话表达的意思，一般由文字来承载，比如 section 转化文字就是章节，如果 HTML 是用中文写的，那么就是：<章节></章节>，表示告诉人们和电脑这里是一段章节。
为什么要用语义类标签
其实现代互联网大多数项目用的还是 div 居多，因为有些东西本身就没有语义，或者语义不明确。比如点赞按钮，它看上去不像平常按钮，是一个图形大拇指或者心型，但同时它又有一个可以按的功能，那么我们一般都会用 div 。
那么我们为什么要用语义类标签，语义类标签优点在哪里？
如果正确使用语义类标签是可以带来很多好处的。
-
对开发者友好，方便人类阅读，也就方便了开发和维护。
-
也方便机器阅读，适合搜索引擎检索，优化 seo 可以从这方面入手
-
方便阅读障碍者，可以很好地支持读屏软件，方便生成目录等
当然这是正确使用语义的情况下，如果滥用用错也是会给机器以及 css 编写造成负担。
用对 > 不用 > 用错
有理想的前端还是应该追求“用对”它们
几个语义标签使用场景
- 最自然的使用场景：作为自然语言和纯文本的补充，来表达一定的结构或者消除歧义
比如给汉字写上拼音，可以直接用 ruby、rt、rp 三个标签实现
或者一句话里需要强调某个字，可以使用 em 标签，强调部分不一样，语义也不一样。
<p>今天中午<em>吃</em>什么？</p>
<p>今天<em>中午</em>吃什么？</p>
- 作为标题摘要的语义类标签
h1 - h6 ，就表示了不同层级的标题，类似以下使用文章会自动生成结构
<h1>主标题</h1>
<h2>第一个副标题</h2>
<h3>第一个副标题下的标题</h3>
<h2>第二个副标题</h2>
- 作为整体结构的语义类标签
一个典型的页面：
<body>
<header>
<nav></nav>
</header>
<aside>
<nav></nav>
</aside>
<section></section>
<section></section>
<footer>
<address></address>
</footer>
<body>
总结
在合适的场景下使用语义化：
-
自然语言表达能力的补充
-
文章标题包括摘要等
-
适合机器阅读的整体结构
作业
只用 HTML 写一个页面，用语义化标签，可以参考 https://en.wikipedia.org/wiki/World_Wide_Web
先自己查标签看能不能写出类似结构页面，写完后再查看这个 wiki 页面的代码看他用的是哪些标签
下面是一些补充：
补充语义标签
建议
尽量只用自己熟悉的标签，并且只在有把握的场景引入语义标签，保证标签不被滥用。
网友评论