html 5新标签表单,HTML5表单新标签和属性

概述HTML5的新特性

1) web socket

服务器与浏览器之间的请求连通

web socket    可以保持服务器与浏览器之间的持久连通

2) 离线 & 缓存

离线：断网，有些网站一旦断网脱机就立刻不能访问，h5提出新的api可以对关键的网页进行缓存

存储：程序持久化的方法，数据库持久化mysql,断电关机数据不丢失就是持久化的作用，h5提供了js对数据操作的api,localStorage,sessionStorage,webDataBase

3) 音频与视频

audio & video

embed

4) 3D 图像 效果

增加API        canvas    WebGl    svg

5) 性能与集成

增加web worker 可以进行js的在线操作，之前的js是单线程的，不能操作多线程，h5能让js进行多线程操作(浏览器的支持性特别差)

6) 设备

h5可以用电脑或手机操作硬件设备

调用地理位置，摄像头，触控设备，检测设备，这些硬件设备主要是手机端的API

7) css3

HTML5新增标签：

表单类型 type=''

email 当表单提交时检测是不是一个电子邮件格式

url  当表单提交时检测是不是一个url

tel 电话号码

date  年月日控件

time  时分控件

datetime-local    年月日时分 本地

month    年月格式

week    年周格式

number  数字格式

range   选择区间

search  搜索框 后边有一个叉号，用于清空

color   颜色选择

表单新属性

placeholder    占位符 提示语句

required    必填框

autofocus    自动获取焦点在页面刷新的时候

pattern        正则验证

min/max        最小值/最大值

step        每一步走多远

minlength/maxlength        最大最小长度

list        指定一个datalist作为下拉菜单

结构标签

  模块

  文章

    头部

    底部

          导航

  地址

媒体标签

视频标签

属性

controls

在视频的底部展示一个工具栏，鼠标悬停在视频上会出现，鼠标移开消失

preload

是否在页面加载后载入视频

auto：当页面加载后载入整个视频

metadata：只加载播放文件的基本信息(尺寸，时间，第一针的信息，曲目列表......)

注意：autoplay 自动播放 谨慎使用

loop(循环)

视频播放结束后循环播放

poster(海报)

在视频文件播放前显示的图片

poster='url'

muted(消除声音)

为视频或音频文件设置静音或者消除静音，或者检测当前是否是静音

volume(音量)

获取或设置视频文件的音量，值在0-1之间

duration(持续的时间)

整个媒体文件的播放时长，以s为单位

currentTime

以s为单位返回从开始到当前媒体播放了多长时间，在播放过程中可以设置这个值进行视频播放定位

ended(已结束)

如果视频播放完毕就返回true

用于判断当前视频是否播放完毕

paused(已经暂停)

如果视频被暂停返回true

判断视频是否已暂停

currentSrc

以字符串的形式返回当前正在播放视频的文件，对应当前浏览器在source元素中选中的文件

play()

开始播放

pause()

暂停播放

load()

媒体开始加载

canPlayType

用来测试浏览器是否支持指定的媒体类型

返回值：

空字符串：说明不支持

maybe:：可能支持

probably:大概也许可能支持

音频标签

语义标签

1) 图片与图片的标题标签

figure    figcaption

                

这是一张图片

2) div可编辑属性

contenteditable = false|true    true为可编辑

h5中大部分内容标签都可以支持这个属性

3) 搜索框下拉标签

datalist 标签

包含选择内容下拉菜单

4) 进度条

progress 标签

value min max title

meter 标签

60%

60%

5) 高亮标签

mark

6) 地址标签

address

7) 注释语义

ruby    rp rt

漢han

字zi

8) 摘要与细节

details    summary

details:用来定义细节，可以是文本或图片等

summary:用来包含细节的标题，必须写在details中，并且是details的第一个儿子