h5新增属性和方法

1.header
header 标签定义文档或者文档的一部分区域的页眉。一般作为介绍内容或者导航链接栏的容器。
在一个文档中,可以定义多个 <header> 元素。
注:<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

2.nav
nav定义页面中导航链接部分(传统导航条、腾讯新闻、侧边栏导航、内页导航、百度百科、翻页操作)注:并不一定是视觉上的导航,只要是多链接区域,都可以使用

3.article
<article> 标签定义独立的内容。内容本身必须是有意义的且必须是独立于文档的其余部分。如:论坛帖子、博客文章、新闻故事、评论

4.aside
<aside> 标签定义 <article> 标签外的内容。应该与附近的内容相关。

5.section
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。标示文档的结构

6.footer
<footer> 标签定义文档或者文档的一部分区域的页脚。如:文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中,您可以定义多个 <footer> 元素。

7.figure
定义一段独立的流内容,一般是文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题。
figure是一种元素的组合,带有可选标题。用来表示网页上一块独立内容。
figcaption表示figure的标题。从属于figure,并且,figure中只能放置一个figcaption
注:有默认的边距或填充值

8.hgroup
表示定义文件中一个区块的相关信息,一般用作放置标题标签的容器。

9.dialog
<dialog> 标签定义一个对话框、确认框或窗口
注:目前,只有 Chrome 和 Safari 6 支持 <dialog> 标签。

新增多媒体元素
(1)video元素
?--在HTML5中专门用来播放网络上的视频或者电影。
(2)audio元素
?--在HTML5中专门用来播放网络上的音频。
3)canvas

表示图形,比如图标和其他图像。这个元素本身没有行为,仅提供一块画布,但它把一个绘图API展现给客户端js,以使脚本能够把想绘制的东西绘制到这块画布上

<canvas id=“myCanvas” width=“200” height=“200”> </canvas>

新增的表单元素
1.Datalist
datalist提供一个事先定义好的列表,通过id与input关联,当在input内输入时就会有自动完成的功能,用户将会看见一个下拉列表供其选择。
2.output
表示不同类型的输出,比如脚本的输出
注:表单中有应用

新增的input类型
1.email:专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的,则不允许提交。但它不检查email地址是否存在。提交时可以为空,除非加上了required属性。
具有multiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。
2.url:专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的,则不允许提交。
例:<input name=‘url1’ type=‘url’ value=‘’http://www.baidu.com”&gt;

  1. number 和 range
    number 类型是专门用来输入数字的,并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值,min 是允许的最小值,step 是间隔。设置了这些属性后,如果手动填入的数字不符合这些属性条件,将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似,也有 max、min 和 step 属性,在 Opera 中,可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值,但可以使用 output 输出当前值。
  2. datetime 和 datetime-local
    datetime 类型是用来输入 UTC 日期和时间的文本框,而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。
  3. month 和 week month 类型是月份选择器,它的值为:年-月,如:2012-01;week 类型是周选择器,它的值为:年-W周数,如:2011-W02。
  4. search
    search 类型的是用来输入搜索关键词的文本框,它与 text 类型在功能都没有太大区别,只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中,当用户输入内容时,输入框右侧会有一个“×”按钮,单击该按钮,将清空输入框内的内容,使用非常方便。
    7.color
    color 类型用来选取颜色,它提供了一个颜色选取器,值为 16 进制符号,如:#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。
    8.output元素: 定义不同类型的输出,如计算结果的输出,或脚本的输出。
    注:必须从属于某个表单。即,必须将它书写在表单内部,或对它添加form属性。

HTML 5 不但新增加了表单元素、表单类型,还增加了一些表单属性,同时使用的话,能更好的提高率开发者的工作效率,同时也提高了用户的操作体验。

1、自动验证

1)、required
可以应用在大多数输入元素上,在提交时如果元素内容为空白,则不允许提交,同时显示提示文字。

2)、
将属性值pattern设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。

例:<input  type=“text” pattern = “[0-9][A-Z]{3}”placeholder=‘输入内容:一个数与三个大写字母’>

3)placeholder属性:文本框处于未输入状态时文本框中显示的输入提示。

4)autofocus属性:给文本框、选择框、或者按钮控件加上该属性,当打开页面时,该控件自动获得鼠标焦点,一个页面只能有一个。

5)autocomplete 属性规定输入字段是否应该启用自动完成功能。属性值=on/off
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。使用时表单元素必须有name属性;(历史记录功能)
注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
提示:在某些浏览器中,您可能需要手动启用自动完成功能。
6)、 min、max、step:为包含数字或日期的 input 类型规定限定(约束)
max: 最大值
min: 最小值
step: 数字间隔

例:<input type="number“ min="0" max="10" step="3" />
7)取消验证
可以对form表单添加novalidate属性,即使form表单中的input添加了required,也将不进行验证
8)Multiple:可以输入一个或多个值,每个值之间用逗号分开;如果要获取其中的值在用split获取;
例:<input type=“email” multiple/>
还可以应用于file

原文地址:http://blog.51cto.com/13570197/2319589

时间: 2024-08-01 22:52:38

h5新增属性和方法的相关文章

H5新增属性02

H5智能表单 input 新增 type值 email 若输入的样式不和邮箱一样则报错 url 必须输入url地址(加http://) number 只能输入数字 属性:min max step value(默认值) range 取值范围 属性:min max step value(默认值) tel search 效果和text一样,专用于搜索框 属性:result color 调出取色板 date:选取日月年 month:选取月年 week:选取周年 time:选取时间,小时和分钟 datet

h5新增属性

H5新增标签 结构标签 (双) header 头面 页面头部 section的头部 footer 页脚 nav 导航 aside 侧边栏 main 规定文档的主体内容 section 定义文档中的小节 article 定义文章 论坛 报纸 用户评论 details 属性open summary dialog 对话框 属性 open 文本标签 mark 标记 time 时间 meter 度量 温度/电量/容量 属性 max/min/value/low/high/optimum progress 进

h5新增浏览器本地缓存localStorage

h5新增属性学习笔记(非原创) html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁. 因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. 而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的. 一.web storage和

对H5新增多线程的理解与简单使用

由于JavaScript的特性决定了JavaScript语言是一种单线程语言,但是有时候我们需要使用多线程比如进行大量的计算时.H5为此新增了多线程的方法. 在这里我是用JavaScript来实现著名的斐波拉且数列,当我在输入框中输入第一个数字时返回这个数字所在位置的数字值. 主线程与分线程之间的关系图: 1.在不使用多线程时 HTML <input type="text" placeholder="数值" id="number">

h5新增标签、css3新增属性

- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcaption 图例的说明 main time 日期和时间值 mark 高亮的引用文字 datalist 提供给其他控件的预定义选项 keygen 秘钥对生成器控件 output 计算值 prog

H5新增input属性

目录 H5中新增input系列(2) H5新增的input的type属性 1.placeholder 属性 2.step 属性 3.pattern 属性 4.multiple 属性 5.min 和 max 属性 6.height 和 width 属性 7.list属性 8.required属性 9.formtarget 属性 10.formmethod 属性 11.autofocus 属性 12.autocomplete 属性 13.form 属性 14.formaction 属性 15.for

H5新增form控件和表单属性

第一个知识点:表单的属性及总结 第二个知识点:H5新增的表单控件和属性以及总结 第一个知识点: 我们常见的表单验证有哪些呢 text 文本框标签 password 密码框 checkbox 多选框 radio 单选框 button 按钮 submit 提交按钮 以上是我们常用的一些form属性 第二个知识点:H5新的输入型控件 (一)email:电子邮箱文本框,跟普通的没什么区别 1.当输入不是邮箱的时候,验证不通过 2.移动端键盘会有变化 (二)tel:电话号码 1.主要在移动端,一个键盘的切

h5新增标签及css3新增属性

- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcaption 图例的说明 main   time 日期和时间值 mark 高亮的引用文字 datalist 提供给其他控件的预定义选项 keygen 秘钥对生成器控件 output 计算值 pr

H5新增特性

1.pattern:写正则,但是需要和form表单连着用 2.WebSocket "网络套接字", 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输.现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询.轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器.这种传统的