(2019)[前端]面试题[9]：HTML5语义化标签和新特性
问题
知道语义化吗？说说你理解的语义化，如果是你，平时会怎么做来保证语义化？ 说说你了解的HTML5语义化标签，HTML5新增了那些新特性？
Hello，欢迎来到我的博客，每天一道面试题，我们共同进步。
题外话：新网站（ https://www.lzpan.com ）懒盘，百度云、蓝奏云资源搜索，欢迎访问。
题外话
其实，不知道大家有没有想过一件事：现在都在说H5,C3，那么他们正式发布的时间是多久？
反正都是在写这篇文章时想到的。
HTML5经过查阅文章，确切发布时间应该是：2014年10月 （查看此篇文章：http://www.chinaw3c.org/archives/677/ ）
CSS3我网上没找到具体的，反正看百度百科（ https://baike.baidu.com/item/CSS3/4059544?fr=aladdin ）貌似在2012年后才发布的。（2012年都貌似还在提案）
面试我觉得应该不会问吧，但了解下我觉得还是可以的。
正题
语义化标签
hgroup
代表网页或者section的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章主标题和副标题的组合。
只有一个h1-h6时就不要用此标签，多个时h1-h6包裹在hgroup，然后可以把hgroup放在header标签里面。
header
网页或者section的页眉，hgroup可以放在header里面，该标签没有个数限制，可以一个网页放置多个。
nav
nav：navigation，导航，用于定义页面的主要导航部分。用在整个页面的主导航部分，不适合不要用nav元素
section
代表文档中的节或段，段可以是指一篇文章里按照字体的分段，节可以指一个页面的分组。
细节： section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。 article、nav、aside可以理解为特殊的section， 所以如果可以用article、nav、aside就不要用section，没实际意义的就用div
<section>
<h1>section是啥？</h1>
<article>
<h2>关于section</h1>
<p>section的介绍</p>
<section>
<h3>关于其他</h3>
<p>关于其他section的介绍</p>
</section>
</article>
</section>以上代码摘抄自网上
article
article代表一个在文档，页面或者网站中自成一体的内容
细节： 独立文章：article 单独模块：section 没有语义：div
<article>
<h1>一篇文章</h1>
<p>文章内容..</p>
<footer>
<p><small>版权：迷思雨博客，作者：无道</small></p>
</footer>
</article>aside
aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等. 在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。
footer
网页 或 section 的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
比如迷思雨博客网，这里就是包括在一个footer里面：
细节： 可以是 网页 或任意 section 的底部部分； 没有个数限制，除了包裹的内容不一样，其他跟header类似【本来header和footer就可以理解成对应的】。
detailes
用于描述文档或文档某个部分的细节
summary
标签包含 details 元素的标题
dialog
定义对话框，比如提示框
什么是语义化
自己的定义
如上面所示的那些标签，都有自己的语义及使用情况，这就叫语义化。
语义化的好处
- 语义化就是让计算机能够快读的读懂内容，高效的处理信息，可以对搜索引擎更友好。
- 便于与他人的协作，他人通过读代码就可以理解你网页标签的意义。
- 页面能呈现清晰的结构。
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义方式来渲染网页。
- 便于团队开发和维护，语义化更具有可读性，是下一步把网页的重要动向，遵循W3C标准的团队都要遵循这个标准，减少差异化
增强型标签类型
类型 | 描述 |
|---|---|
color | 主要用于选取颜色 |
date | 从一个日期选择器选择一个日期 |
datetime | 选择一个日期（UTC 时间） |
datetime-local | 选择一个日期和时间 (无时区) |
包含 e-mail 地址的输入域 | |
month | 选择一个月份 |
number | 数值的输入域 |
range | 一定范围内数字值的输入域 |
search | 用于搜索域 |
tel | 定义输入电话号码字段 |
time | 选择一个时间 |
url | URL 地址的输入域 |
week | 选择周和年 |
就是input（当然不止input） 的type属性的值新增了以上
比如我定义了一个颜色选择器：
<body>
<input type="color">
</body>在Chrome浏览器下：
感觉还可以吗？
在Win10 Edge下：
看出来了吗，显示方式完全是浏览器自己定义的，而不是开发者决定的。 哈米，这你都可以接受？那么告诉你，在很多低版本浏览器下，根本不支持，如果你要去兼容IEx，那么还是不能使用这个。只能说，等待以后大多数都兼容再说。
HTML5新增表单属性
- placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
- required 属性，是一个 boolean 属性。要求填写的输入域不能为空
- pattern 属性，描述了一个正则表达式用于验证
<input>元素的值。 - min 和 max 属性，设置元素最小值与最大值。
- step 属性，为输入域规定合法的数字间隔。
- height 和 width 属性，用于 image 类型的
<input>标签的图像高度和宽度。 - autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
- multiple 属性 ，是一个 boolean 属性。规定
<input>元素中可选择多个值。
HTML5新特性
- 新的DOCTYPE声明
<!DOCTYPE html> - 完全支持css3 【所以从这里我们可以看出CSS3先于HTML5发布，那么CSS正式发布就在14年前】
- 新增video和audio 标签 <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素。 </audio>
- 本地存储（localStorage、sessionStorage），详解可参考：https://blog.csdn.net/weixin_42881744/article/details/81414262
- 语义化标签
- canvas 【这也算是一个较重要的部分吧，个人认为】
- 新事件如 ondrag onresize
- 地理位置获取
以上有些参考：