HTML5新标签与特性（笔记）

前言

  HTML5 ： HTML 标准的最新版本，是对 HTML 的第五次重大修改。HTML5的出现，对于WEB来说意义重大，其目的是想要把目前WEB中存在的各种问题一并解决掉。

新增语义化标签

  语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。（就是每个标签在这整个html中都分别代表某种意义）

其新增标签有：

标签	意义
header	定义文档的页眉，用来表示页面的头部
nav	定义页面的导航链接部分（导航栏）
main	表示整个页面的主体内容
aside	网页中的侧边栏
article	该标签表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报纸中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。
section	该标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
footer	定义文档或节的页脚（通常用于页面的底部，版权信息那块）
datalist	该标签定义选项列表（里面包含了一组option元素）。请与 input 元素配合使用该元素，其中input的list属性值必须和datalist的id值一致
figure	该元素用于表示一块独立的图片区域，元素内部可以包含一个或多个img元素。另外，该元素还可以包含一个figcaption元素，用于定义该图片区域的标题
fieldset	可将表单内相关元素分组，与legend标签（就是对这个组的描述）配合使用
meter	该元素用来显示已知范围的标量值或者分数值 例图：
progress	元素用来显示一项任务的完成进度 例图：

新增标签属性

属性	含义
placeholder	占位符提供可描述输入字段预期值的提示信息（常用于input标签中，起到提示作用）
autofocus	规定当页面加载时 input 元素应该自动获得焦点（布尔值）
multiple	多文件上传（常用于input的type属性值为file时，可进行多选文件，布尔值）
autocomplete	规定表单是否应该启用自动完成功能，on默认，启用自动完成，off表示关闭（就是在表单中输入信息提交之后，再次进行输入时，值为on时，输入和上次相同的信息就会有提示作用）
required	表示该input框是必填项（布尔值）
accesskey	全局属性 提供了为当前元素生成快捷键的方式，使用Alt+设置的键，即可选中该元素
tabindex	指定获取焦点的顺序
data-*	自定义标签属性
pattern	属性规定用于正则表达式验证输入的字段（适用于以下 input 类型：text, search, url, telephone, email 以及 password ）

新增的input的type属性值

类型	含义
email	输入邮箱格式
tel	输入手机号码格式
url	输入url格式
number	输入数字格式
search	将输入框以搜索框的形式展现
range	自由拖动滑块
time	允许你选择一个时间
date	允许你从一个日期选择器选择一个日期
month	允许你选择一个月份
week	允许你选择周和年

多媒体标签

embed

  embed可以用来插入各种多媒体，格式可以是 Midi(乐器数字接口)、Wav、AIFF(音频交换文件格式)、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
可以引用 优酷，土豆，爱奇艺，腾讯、乐视的在线视频等

格式

audio

可以通过该标签引入音频文件（只能引入本地音频文件）

格式

audio相关属性

属性	含义
autoplay	自动播放(目前很多浏览器不支持自动播放)
controls	是否显示默认播放控件
loop	是否循环播放

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考：

多浏览器支持的方案：

video

可以通过该标签引入视频文件（只能引入本地视频文件）

格式

video相关属性

属性	含义
autoplay	自动播放(18年开始，谷歌浏览器不支持自动播放)
muted	是否静音播放
controls	是否显示默认播放控件
loop	是否循环播放
width	设置窗口宽度
height	设置窗口的高度

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考：

多浏览器支持的方案：

字体图标

  图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。所以才引入了字体图标（iconfont），为了更好的弥补这些缺点。

目前我觉得https://www.iconfont.cn/这个字体图标库比较好用

这个是阿里巴巴M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成（该图标库使用需要登录GitHub账号）

字体图标引入的方式

感觉简洁明了的文章https://www.cnblogs.com/Grani/p/9610115.html

如有错误还请指出，希望这篇文章能给予你们帮助！