总是遇到h5新标签的笔试题目,就查阅了资料来总结一下:

1.form相关:

(1)form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标表单id)即可。

(2)formaction属性:HTML5给提交按钮(如button、submit、image等)增加了formaction属性,以便提交到不同的服务器地址。

<input formaction="new.html" type="submit" value="提交到new.html">

(3)formmethod属性:用法同formaction。

(4)placeholder属性:用于文本框处于未输入状态时的一种文字提示。

(5)autofocus属性:自动获得焦点,一个页面只能有一个控件具有该属性。该属性无值,直接写就好。

<input name="username" autofocus type="text" id="username">

(6)list属性:用于单行文本框,该属性的值为某个datalist元素的id,增加该属性后的单行文本框类似选择框(select),但允许用户自定义输入,为了避免没有支持该元素的浏览器出现错误,我们通常使用CSS设置不显示。

<datalist> 标签:定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。

order:<input list="list" name="order" autofocus type="text" id="order">
<datalist id="list" style="display:none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</datalist>

(7)autocomplete属性:自动完成允许浏览器预测对字段的输入,HTML5实现了自定义设置该属性,避免了任何人都可以看到所存在的安全隐患。该属性值有“on”、”off“或“”(不指定)三种,不指定时使用浏览器的默认值。

(8)input元素种类:

  search:与text文本框类似,用于搜索;

  tel: 与text文本框类似,用于电话;

url: 与text文本框类似,用于url格式的地址;

email: 与text文本框类似,用于email格式的地址;

number: 与text文本框类似,用于数值;

range: 只允许输入一段范围内的数值,通过min和max属性来设置范围;

color: 颜色文本框,“#000000”格式的文字;

file: 文件选择文本框,HTML5中通过multiple属性可以多选;

datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框;

output: 定义不同类型的输出;

(9)表单验证相关:

  自动验证(就是通过为元素添加相应的属性来达到验证的要求)

  required属性:具有该属性的元素,如果其内容为空则不允许提交,并给出相应的提示。

  pattern属性:具有该属性的元素,如果内容不为空则把内容与pattern的值进行正则匹配,匹配不成功则不通过并提示。

  min属性和max属性:它们是值类型和日期类型的input元素专用属性,限制了输入的范围。

  step属性:控制元素的值增加或减少的步幅,如输入1-100之间的数字,且步幅是5,那么只能输入1、6、11....。

  显示验证(除了给元素添加属性来自动验证外,在HTML5中,form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法,调用该方法可以进行手动验证,checkValidity方法以boolean的形式返回验证结果)

  

    function check(){
var email=document.getElementById("email");
if(email.checkValidity()){
alert("email格式正确");
}else{
alert("email格式不正确");
}
}

  取消验证(取消表单验证有两个属性:用于form的novalidate和用于submit的formnovalidate)

         //用于form的novalidate
<form novalidate>
<input type="text" name="name" id="name" required>
<input type="submit" name="button" id="button" value="提交">
</form> //用于submit的formnovalidate
<form>
<input type="text" name="name" id="name" required>
<input type="submit" orfmnovalidate name="button" id="button" value="提交">
</form>

  自定义错误:在HTML5中没经过验证的表单浏览器会有默认的提示,但也提供了通过JavaScript的来设置自定义错误提示信息。(我觉得就是自己写个函数,点击时候调用就可以)。

2.增强的页面元素

(1)figure元素:figure是个组合元素,可以带标题figcaption,一个figure只允许放置一个figcaption。

        <figure>
<img src="logo.png" alt="图片">
<figcaption>标志</figcaption>
</figure>

(2)details元素:details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法.

        <details>
<summary>点击我查看细节</summary>
<p>我是细节内容。</p>
</details>

(3) mark元素:mark元素表示页面需要突出显示或高亮显示的部分。

(4)progress元素:一般用于写进度条,可以给progress设置value和max属性,value表示已经进行的,max表示总数,value和max只能为有效的浮点数,value必须大于0小于等于max。如果不给progress设置这两个属性,则是动态显示正在进行,进度不确定。

(5) meter元素:定义度量衡。(界定上下的值会有颜色区分)。

   high:定义度量的值位于哪个点,被界定为高的值。
        low:定义度量的值位于哪个点,被界定为低的值。
        max:定义最大值。默认值是 1。
        min:定义最小值。默认值是 0。
        optimum:定义什么样的度量值是最佳的值,如果该值高于 "high" 属性,则意味着值越高越好。如果该值低于 "low" 属性的值,则意味着值越低越好。
        value:定义度量的值。

(6)改良的ol列表:在HTML5中为ol元素添加了start属性和reversed属性。

  start:表示列表序号从几开始。

  reversed:表示列表序号为倒序。

(7) 改良的dl列表:dl是专门用来定义术语的列表,在HTML5中为dt增加了名字dfn。

        <dl>
<dt>术语1</dt>
<dd>描述...</dd>
<dt><dfn>名字</dfn>术语2</dt>
<dd>描述...</dd>
</dl>

(8)cite:用于表示作者。

(9)small:用于标识“小型文本”。

(10)<article>标签:定义外部的内容。

(11)<aside>标签:定义 article 以外的内容。aside 的内容应该与 article 的内容相关。aside可以用于网站页尾一排排的广告或者链接,一竖排为一个aside。也可以用于博客侧栏。

(12)<audio> 标签:定义声音。

(13)<canvas> 标签:定义图形(是为了客户端矢量图形而设计的)。

(14)<command> 标签:定义命令按钮,比如单选按钮、复选框或按钮。

(15)<embed> 标签:定义嵌入的内容,比如插件。

(16)<footer> 标签:定义 section 或 document 的页脚。

(17)<header> 标签:定义 section 或 document 的页眉。
(18)<hgroup> 标签:用于对网页或区段(section)的标题进行组合。

(19)<hgroup> 标签:用于对网页或区段(section)的标题进行组合。

(20)<nav> 标签:定义导航链接的部分。

(21)<output> 标签:定义不同类型的输出,比如脚本的输出。

(22)<rp> 标签:在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

(23)<rt> 标签:定义字符(中文注音或字符)的解释或发音。

(24)<ruby> 标签:定义 ruby 注释(中文注音或字符)。

(25)<section> 标签:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
(26)<source> 标签:为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

(27)<summary> 标签:details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。

(28)<time> 标签:定义日期或时间,或者两者。

(29)<video> 标签:定义视频,比如电影片段或其他视频流。

(30) <dialog>标签:定义对话(会话)dialog元素表示几个人之间的对话。

如有错误,请您指正!

文章参考链接:

一聚教程网>>网页制作>>html5教程
大前端>>Html5新标签解释及用法

HTML5新增元素、标签总结的更多相关文章

  1. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

  2. HTML5 新增元素梳理

    HTML5新增元素如下图: <canvas> 新元素 <canvas> 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 新多媒体元素 <au ...

  3. HTML5新增的标签与属性

    一.关于DTD HTML5 不基于 SGML,所以不需要引用 DTD(HTML 4.01 基于 SGML) 二.HTML5结构标签 <header> 标记定义一个页面或一个区域的头部 &l ...

  4. HTML5新增Canvas标签及对应属性、API详解(基础一)

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  5. HTML5新增video标签及对应属性、API详解

    知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...

  6. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

  7. html5 新增语义标签

    一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...

  8. HTML5新增的标签及使用

    HTML5和HTML其实是很相似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只要有html+css基础就可以,今天知识看了下新的标签. 一.定义文档类型 在文件的开头总是 ...

  9. html5 新增元素以及css3新特性

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

  10. HTML5新增元素和移除的元素?

    新增元素: 图像Canvas 多媒体video.audio 本地存储localStorage.sessionStorage 语义化更好的内容元素aticle.header.footer.nav.sec ...

随机推荐

  1. jq实现点击表格无刷新修改数据,优化版

    <!-------------------修改密码-------------------------- > $("#pwd").live("click&quo ...

  2. hdu Farm Irrigation

    这题第一感觉是用搜索做,暴力就可以解决,这里将水管转换成一个个3*3的矩阵,然后搜素就可以了.写完之后确实一遍过掉了,31ms.附上代码: #include"iostream" # ...

  3. free一个无效指针

    1. 错误描述:   刚才写了一个删除单链表的结点函数, 参数是 指向链表的指针和链表中指定删除的结点的指针.  当我free这个待删除的结点, 结果报错. 2. 为什么会报错? 我查了查MSDN, ...

  4. HTTP Status 500 - org.apache.jasper.JasperException: com.sun.org.apache.xerces.internal.impl.io.MalformedByteSequenceException

    HTTP Status 500 - org.apache.jasper.JasperException: com.sun.org.apache.xerces.internal.impl.io.Malf ...

  5. vue 解决display与 transition冲突

    下边是vue的源码 var raf = inBrowser && window.requestAnimationFrame; var waitForTransitionStart = ...

  6. jquery 同id使用指针寻找具体每个id的值

    this来判断<script language="javascript"> function t(obj) { alert(obj.value); } </scr ...

  7. javaWeb中servlet开发(4)——servlet跳转

    servlet跳转 1.跳转类型 客户端跳转:跳转后地址栏改变,无法传递request范围内属性,是在所有的操作都执行完毕之后才发生跳转的操作,跳转语法是,response.sendRedict() ...

  8. P1038 神经网络

    #include <bits/stdc++.h> using namespace std; const int maxn = 105; struct node { int situatio ...

  9. Android高级第十一讲之不同系统间的区别

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! Android系统不断的升级,从基础到中级再到高级,逐步升级是软件工程敏捷开发的一个重点,在每个版本 ...

  10. Kingdom of Obsession---hdu5943(二分匹配)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5943 题意:给你两个数n, s 然后让你判断是否存在(s+1, s+2, s+3, ... , s+n ...