H5的新特性

H5的新特新

1.语义化的标签:header、footer、section、nav、aside、article

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

                                                                                               

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

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

 

3.新增表单元素:datalist、keygen、output

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

 

4.新增的表单属性:placeholder、require、min、max、.......

表单属性         描述                                                           
placeholder       输入框的默认提示
required  是一个boolean属性,要求填写的输入域不能为空值
pattern 描述一个正则表达式,用于验证input元素的值
min/max 设置元素的最大值和最小值
step 为输入域规定合法的数字间隔
height/width 用于image类型的input标签的图像高度和宽度                    
autofocus 是一个boolean属性,规定在页面加载时,域自动的获取到焦点                    
multipe 是一个boolean属性,规定input元素中可选择多个值

 

5.音频、视频:audio、video

6.canvas:在页面上放置一个canvas元素,就相当于在页面上放置了一块画布,可以在其中进行图形的描绘。

要指定的是 idwidthheight三个属性 

<canvas id="canvas" width="400" height="300" />

7.地理定位:getCurrentPosition() 

返回用户位置的经度和纬度

 

 

8.拖拽:

9.本地存储

localStorage:没有时间限制的数据存储

sessionStorage:针对一个session的数据存储,当用户关闭浏览器窗口后,数据会被删除

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

事件                 描述                                              
onresize 调整窗口大小时触发的事件
ondrag 当元素拖拽时触发的事件
onscroll 当滚动元素的滚动条变化时触发事件
onmousewheel   当转动鼠标滚轮时候触发的事件
onerror 当错误发生时触发的事件
onplay 当媒介数据将要开始播放时触发的事件
onpause 当媒介数据暂停时触发的事件                         

 

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

12.块级元素和行内元素的总结

块级元素:div、p、h1~h5、ul、ol、li、dd、table、hr、blockquote(标记长的引用)、address( 

元素位于
元素内,定义文档或文章的作者/拥有者的联系信息)、menu、pre(pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。)、还有上面新增的语义化的标签:header、footer、section、nav、aside、article

行内元素:span、img、a、label、input、abbr(缩写)、em(强调)、big(呈现大号字体效果)、cite(引用a标签包裹引用的标题)、i(斜体)、q(标记短的引用)、textarea、select、small( 标签呈现小号字体效果)、sub(下标)、sup(上标)、strong(加粗)、u(下划线)、button

标签:

带有两个菜单按钮 ("File" 和 "Edit") 的工具栏,每个按钮都包含带有一系列选项的下拉列表:

 

<menu type="toolbar">
 <li>
 <menu label="File">
 <button type="button" onclick="file_new()">New...button>
 <button type="button" onclick="file_open()">Open...button>
 <button type="button" onclick="file_save()">Savebutton>
 menu>
 li>
 <li>
 <menu label="Edit">
 <button type="button" onclick="edit_cut()">Cutbutton>
 <button type="button" onclick="edit_copy()">Copybutton>
 <button type="button" onclick="edit_paste()">Pastebutton>
 menu>
 li>
menu>

标签的作用:

此标签用于标记一个缩写,当鼠标停留到标记的缩写上面时会展示"title"属性的全部内容

<html>
  <head>
    <meta charset="utf-8">
    <title>abbr标签title>
  head>
  <body>
    <abbr title="中国航天四老之一">任新民abbr>,航天技术与液体火箭发动机技术专家,中国导弹与航天技术的重要开拓者之一。
  body>
html>

你可能感兴趣的:(H5的新特性)