H5 的新特性总结

18 篇文章 0 订阅

1、语义化标签headerfootersectionnavasidearticle

2、增强型表单input的多个 type

3、新增表单元素datalistkeygenoutput

4、新增表单属性placehoderrequiredminmax

5、音频视频audiovideo

6、canvas绘画

7、地理定位

8、拖拽

9、本地存储localStorage - 没有时间限制的数据存储;sessionStorage- 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除

10、新事件onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

11、WebSocket:单个 TCP 连接上进行全双工通讯的协议

语义化标签

标签描述
header定义了文档的头部区域
footer定义了文档的尾部区域
nav定义文档的导航
section定义文档中的节(section、区段)
article定义页面独立的内容区域
aside定义页面的侧边栏内容
detailes用于描述文档或文档某个部分的细节
summary标签包含 details 元素的标题
dialog定义对话框,比如提示框

在这里插入图片描述

增强型表单

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

input 的 type描述
color主要用于选取颜色
date从一个日期选择器选择一个日期
datetime选择一个日期(UTC 时间)
email包含 e-mail 地址的输入域
month选择一个月份
number数值的输入域
range一定范围内数字值的输入域
search用于搜索域
tel定义输入电话号码字段
time选择一个时间
urlURL 地址的输入域
week选择周和年

html5 也新增以下表单元素

表单元素描述
datalist元素规定输入域的选项列表,使用 input 元素的 list 属性与 datalist 元素的 id 绑定
keygen提供一种验证用户的可靠方法,标签规定用于表单的密钥对生成器字段
output用于不同类型的输出,比如计算或脚本输出

html5 新增的表单属性

表单属性描述
placehoder简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失
required是一个 boolean 属性。要求填写的输入域不能为空
pattern描述了一个正则表达式用于验证 input 元素的值
min 和 max设置元素最小值与最大值
step为输入域规定合法的数字间隔
height 和 width用于 image 类型的 input 标签的图像高度和宽度
autofocus是一个 boolean 属性。规定在页面加载时,域自动地获得焦点
multiple是一个 boolean 属性。规定 input 元素中可选择多个值

html5 新事件

事件描述
onresize当调整窗口大小时运行脚本
ondrag当拖动元素时运行脚本
onscroll当滚动元素滚动元素的滚动条时运行脚本
onmousewheel当转动鼠标滚轮时运行脚本
onerror当错误发生时运行脚本
onplay当媒介数据将要开始播放时运行脚本
onpauseonpause
  • 块级元素
    div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5 新增的 header、section、aside、footer

  • 行内元素
    span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值