HTML5新特性

1.语义化标签

• <article> 用来在页面中表示一套结构完整且独立的内容部分，可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容等。
• <section> 定义文档中的区段，页面上的版块，用于划分页面上的不同区域,或者划分文章里不同的节
• <nav>定义导航
• <asider> 定义文章的侧边栏
• <figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
• <figcaption> figure的子元素 用于对figure的内容 进行说明
• <header>定义页眉、网页或section的头部
• <footer>定义页脚 ，网页或section底部的内容
• <hgroup>定义对网页标题的组合
• <time></time>定义日期和时间
• <dialog>定义一个对话框
• <datalist></datalist>选项列表。与 input 元素配合使用，来定义 input 可能的值。
• <mark>在视觉上向那些想要突出的文字，比如搜索结果中向用户高亮显示搜索关键词
• <details></details>标签用于描述文档或文档某个部分的细节,summary是details元素的标题
• < summary></summary> details 元素的标题。该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容
• <progress> 进度条，运行中、加载中的进度。
• <meter> 数据区间中绘制一个值的占比与状态
• <audio></audio>定义音频,可以支持多个source（媒介标签，这里没有写错，这个标签可以省略/）,浏览器默认将第一个能识别的格式进行播放
• <video></video> 定义电影片段或者其他视频流,支持三种类型的视频： Ogg、MPEG4、WebM
• <svg>使用XML技术绘制可缩放矢量图形的语言，可使用扩展名.svg的xml定义，也可以内嵌在html中
• <canvas> 用来进行canvas绘图,该标签为图形容器，通过js找到标签的操作对象来画图

　语义化标签的作用：提升页面的阅读性(结构性增强)，更有利于SEO，对于使用屏幕阅读器的人来说会更友好(有明显的语气差别，例如strong标签内的内容会重读)；

2.新增媒体元素，audio、video audio和video标签能够很容易的输出音频或视频流，提供便利的获取文件信息的API

　　更多详细属性参考 MDN audio MDN video

3.用于绘画的canvas属性 Canvas API 提供了一个通过JavaScript 和 HTML的canvas元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
更多详细属性参考 MDN canvas

4.新增本地存储方式：sessionStorage、localStorage sessionStorage 用于存储会话级别的数据，会话关闭，数据消失，不可设置过期时间。
localStorage 用于存储需要进行持久化存储的数据，只要不主动删除，数据不会消失。
　　更多详细属性参考 MDN sessionStorage
　　更多详细属性参考 MDN localStorage

5.新的技术：webworker、websocket webworker：用于多线程编程
　　　　　　websocket：客户端与服务端双向数据通信协议

6.新增的表单控件：calendar、date、time、email、url、search

新增的表单元素：output、datalist、keygen

新增的表单属性：autocomplete（自动补全）、autofocus（自动聚焦）、required(是否必选)、height（高度）、width（宽度）
    multiple（多文件上传）、max（最大值）、min、step、list、pattern（模式匹配/正则）、placeholder（默认值）、novalidate(提交表单时不校验email/tel这些需要校验的表单类型)、
    form（表单元素可以在form之外，但是可以指定属于哪个form，会一起发送）、formaction（请求地址）、formmethod（form元素的请求方法,get/post这些）、formenctype、formnovalidate

新增的表单类型(type="xxx"):color设色器、date日期选择器、datetime(utc时间)、datetime-local(无时区)
    email(包含email的输入域)、month（月份）、number（数值）、range(范围)、search（搜索）、tel(电话号码)
    url、week

　　更多详细属性参考 MDN input

 

 

 

作者：evans_
链接：https://juejin.cn/post/6909698127689220109
来源：稀土掘金