游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    020-85534346

    电子邮件

    81058337@qq.com
  • 码云社APP

    随时掌握码云社动态

  • 扫描二维码

    关注砺锋微信公众号

H5 新特性

发布时期:2019-12-18 09:29
阅读:254 回复:0

H5 新特性语义化标签:header、footer、section、nav、aside、article增强型表单:input 的多个 type新增表单元素:datalist、keygen、output新增表单属性:placehoder、required、min 和 max音频视频:audio、video ...

H5 新特性

  1. 语义化标签:header、footer、section、nav、aside、article
  2. 增强型表单:input 的多个 type
  3. 新增表单元素:datalist、keygen、output
  4. 新增表单属性:placehoder、required、min 和 max
  5. 音频视频:audio、video
  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当媒介数据将要开始播放时运行脚本
onpause当媒介数据暂停时运行脚本
  • 块级元素
    div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5 新增的 header、section、aside、footer 等

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

唐炽英sugar(未知职业)-本文作者
这个人很懒,什么也没有留下。
254 0 2019-12-18 09:29
本文暂无评论,快来抢沙发!

扫一扫关注官方微信号

一手信息资讯权掌握尽在码云社

滚动新闻
CODESEEDING(码云社)一家致力于程序员成长、以内容为核心、以提问为引导的多元化成长社区。我们在线上为技术爱好者提供了一个优质的交流氛围环境,在线下同样和众多高校联合开办了技术沙龙品牌。
020-85534346
关注我们
  • 访问移动H5版
  • 官方微信公众号

码云社 - CODESEEDING 2.0© 2018-2019 码云社. TOOBUG ( 粤ICP备16114193号-3 )