文章开始前推荐一个学习知识的方法论 ：学习一个概念的时候经历这三部曲——
了解这个知识的概念是什么
了解这个知识被提出来的目的是什么?
将知识用一句话说清楚！
如果以上三点都做到了 那么我们基本就理解了这个知识点了?
1.HTML语义化
这里首先推荐下 freecodecamp中的一些小练习 很多简单的小案例 可以帮助我们在实际情景中了解H5的标签的具体用途
前瞻知识
语义化的作用：
-
根据内容的结构 选择合适的标签构建出便于开发者阅读的可维护性更高的代码结构
-
同时也可以让机器更好地解析代码
先来看个总览
下面来看看语义化标签是如何分区的
- header nav —— 一般在头部的内容
- article section —— 写文章时通常会用到的标签
- footer aside 分别表示 页脚信息 广告啥的
来看看MDN的页面结构~
大概了解了语义化标签（还是很简单滴） 来看看面试可能会问些啥？
【1】简述下对HTML语义化的理解？
-
用正确的标签做正确的事情。
-
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
-
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
-
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
-
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
-
另外 使用语义化标签提升过网页可访问性后 听觉障碍、视觉障碍者将可以通过辅助设备获取页面的信息！
- 我们要牢记 障碍者们使用的阅读辅助设备依赖良好、语义化的标签 来获取页面中的信息
嘿 使用语义化标签 这是个伟大的事情！
简单来说 就是
-
提升无障碍性！
-
优化搜索引擎！
-
提升代码可读性！
2.其他HTML5新特性
知识点前瞻
- 多媒体标签
【1】HTML5有哪些新特性、移除了哪些元素？
HTML5 现在已经不是 SGML（古老的标准 于早于HTML2.0九年的1986年发布 是一个用于定义标记语言的系统） 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
新增元素：
-
绘画 canvas; —— 用于绘图的新增元素 可以实现各种炫酷的特效 感兴趣的可以看看这本小册~
-
用于媒介回放的 video 和 audio 元素;（上面有提到）
-
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
-
sessionStorage 的数据在浏览器关闭后自动删除;
-
表单控件，calendar、date、time、email、url、search;
-
新的技术webworker, websocket, Geolocation;
当然还包括我们在第一部分学习的 语义化标签
- article、footer、header、nav、section;
移除的元素：
-
纯表现的元素：basefont，big，center，font, s（删除线），strike，tt，u（添加下划线）;
-
对可用性产生负面影响的元素：frame，frameset，noframes；
【2】如何处理HTML5新标签的浏览器兼容问题？
IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。
【3】如何区分HTML & HTML5
前面提到过的DOCTYPE声明
在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML(用于定义标记语言的系统)。DTD(Document Type Definition) 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
- 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
复制代码- 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
复制代码而HTML5 不基于 SGML，所以不需要引用 DTD。
- 一行代码搞定~
<!DOCTYPE html>
复制代码
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
