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 拖拽属性

画布 canvas

canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

SVG

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

地理定位 Geolocation

用于定位用户的位置。

你可能感兴趣的:(#,HTML,html5,前端,javascript)