h5新增属性和方法-创新互联
1.header
header 标签定义文档或者文档的一部分区域的页眉。一般作为介绍内容或者导航链接栏的容器。
在一个文档中,可以定义多个
注:
2.nav
nav定义页面中导航链接部分(传统导航条、腾讯新闻、侧边栏导航、内页导航、百度百科、翻页操作)注:并不一定是视觉上的导航,只要是多链接区域,都可以使用
3.article
4.aside
5.section
6.footer
7.figure
定义一段独立的流内容,一般是文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题。
figure是一种元素的组合,带有可选标题。用来表示网页上一块独立内容。
figcaption表示figure的标题。从属于figure,并且,figure中只能放置一个figcaption
注:有默认的边距或填充值
8.hgroup
表示定义文件中一个区块的相关信息,一般用作放置标题标签的容器。
9.dialog
新增多媒体元素
(1)video元素
--在HTML5中专门用来播放网络上的视频或者电影。
(2)audio元素
--在HTML5中专门用来播放网络上的音频。
3)canvas
表示图形,比如图标和其他图像。这个元素本身没有行为,仅提供一块画布,但它把一个绘图API展现给客户端js,以使脚本能够把想绘制的东西绘制到这块画布上
新增的表单元素
1.Datalist
datalist提供一个事先定义好的列表,通过id与input关联,当在input内输入时就会有自动完成的功能,用户将会看见一个下拉列表供其选择。
2.output
表示不同类型的输出,比如脚本的输出
注:表单中有应用
新增的input类型
1.email:专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交。但它不检查email地址是否存在。提交时可以为空,除非加上了required属性。
具有multiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。
2.url:专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的,则不允许提交。
例:
- number 和 range
number 类型是专门用来输入数字的,并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的大值,min 是允许的最小值,step 是间隔。设置了这些属性后,如果手动填入的数字不符合这些属性条件,将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似,也有 max、min 和 step 属性,在 Opera 中,可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值,但可以使用 output 输出当前值。 - datetime 和 datetime-local
datetime 类型是用来输入 UTC 日期和时间的文本框,而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。 - month 和 week month 类型是月份选择器,它的值为:年-月,如:2012-01;week 类型是周选择器,它的值为:年-W周数,如:2011-W02。
- search
search 类型的是用来输入搜索关键词的文本框,它与 text 类型在功能都没有太大区别,只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中,当用户输入内容时,输入框右侧会有一个“×”按钮,单击该按钮,将清空输入框内的内容,使用非常方便。
7.color
color 类型用来选取颜色,它提供了一个颜色选取器,值为 16 进制符号,如:#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。
8.output元素: 定义不同类型的输出,如计算结果的输出,或脚本的输出。
注:必须从属于某个表单。即,必须将它书写在表单内部,或对它添加form属性。
HTML 5 不但新增加了表单元素、表单类型,还增加了一些表单属性,同时使用的话,能更好的提高率开发者的工作效率,同时也提高了用户的操作体验。
1、自动验证
1)、required
可以应用在大多数输入元素上,在提交时如果元素内容为空白,则不允许提交,同时显示提示文字。
2)、
将属性值pattern设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。
例:
3)placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。
4)autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得鼠标焦点,一个页面只能有一个。
5)autocomplete 属性规定输入字段是否应该启用自动完成功能。属性值=on/off
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。使用时表单元素必须有name属性;(历史记录功能)
注释:autocomplete 属性适用于