HTML5 新增内容 新特性

更多 input type 属性

number：数字；
tel：电话；
search：搜索；
email：邮箱；
url：地址；
date：年月日；
time：时分秒；
month：月；
week：周；
time：时间；
color：生成颜色选择表单；
range：范围

原有
text：文本
radio：单选
password：密码
button：按钮
checkbox：多选
file：文件
image：图片
submit：提交
reset：重置
hidden：隐藏

更多的 input 属性

required ；placeholder； autofocus ；autocomplete（=on/off）
multiple；
pattern=" " 里面写入想要的正则模式，例如手机号patte=“^(+86)?\d{10}$”
form=“form表单的ID”

原有
name：input名称【radio单选及checkbox多选的name要一致】
value：规定input里面的值
checked：input自动聚焦
maxlength：规定输入字段的最大长度

新的表单事件

oninput：每当input里的输入框内容发生变化都会触发此事件。
oninvalid：当验证不通过时触发此事件。

进度条和度量器

进度条：progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少
度量器 ● meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）
○ high/low：规定被视作高/低的范围
○ max/min：规定最大/小值
○ value：规定当前度量值 设置规则：min < low < high < max

语义化标签

header：定义文档的页眉（头部）；
nav：定义导航链接的部分；
artical：定义文章内容；
section：定义文档中的节（section、区段）；
aside：定义其所处内容之外的内容（侧边）；
footer：定义文档或节的页脚（底部）；

兼容性：IE9以上，移动端可大量使用，都是双标签且都为块级元素

em、strong 相较 i、b 存在语义表达

音频标签：audio

src=“url路径”
controls：控件
autoplay：自动播放
loop：循环播放

视频标签：video

src=“url路径”
width=“100px” height=“100px“

autoplay：自动播放
loop：循环播放
preload=none/auto预加载（选择autoplay之后忽略这一项）
poster=”等待加载的图片url“
muted：静音播放

source标签

Web存储

sessionStorage：针对一个 session 的数据存储（会话存储：关闭页面会消失）
localStorage：没有时间限制的数据存储（本地存储：关闭页面不会消失）

history API

history.go(num)（前进或后退,可正可负）
history.forward(num)（前进）
history.back（num）（后退）
pushstate

新增 draggable 拖拽属性

<img draggable="true" />

画布 canvas

canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 <canvas id="myCanvas" width="200" height="100"></canvas>

SVG

SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准

地理定位 Geolocation

用于定位用户的位置。文章来源地址https://www.toymoban.com/news/detail-484872.html

到了这里，关于HTML5 新增内容 新特性的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！