HTML & HTML5基础

HTML5新增元素、标签

form相关

form属性:在HTML5中表单元素可放在表单之外,通过给该元素添加form属性来指向目标表单(form属性值设为目标表单id即可)。
formaction属性:HTML5给提交按钮(如button、submit、image等)增加了formaction属性,以便提交到不同的服务器地址。

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

formmethod属性: 用法同formaction。
placeholder属性:用于文本输入框处于未输入状态的一种文字提示。
autofocus属性:自动获得焦点。一个页面只能有一个空间具有该属性。该属性无值,直接写就好。

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

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

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

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

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

input元素种类:

  • search: 与text文本框类似,用于搜索;
  • tel:用于电话;
  • url:用于URL格式的地址;
  • email: 用于email格式的地址;
  • number: 用于数值
  • range: 只允许输入一段范围内的数值,通过min和max属性来设置范围;
  • color: 颜色文本框
  • file: 文件选择文本框,HTML5中通过multiple属性设置多选
  • datatime, date, month, week, time, datetime-local各种日期与时间输入的文本框;
  • output:定义不同类型的输出;

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

  • 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>
	<inputtype="text" name="name" id="name" required>
	<input type="submit" orfmnovalidate name="button" id="button" value="提交">
</form> 

自定义错误 : 在HTML5中没经过验证的表单浏览器会有默认的提示,但也通过了JavaScript的来设置自定义错误提示信息。

增强的页面元素

  1. figure 元素:figure 是个组合元素,可以带标题figcaption,一个figure只允许放置一个figcaption.
<figure>
	<img src="logo.png" alt="图片">
	<figcaption>标志</figcaption>
</figure>
  1. details 元素:details提供了一种替代JavaScript的、将画面上局部区域进行展开或收缩的方法.
<details>
	<summary>低级我查看细节</summary>
	<p>我是细节内容</p>
</details>
  1. mark 元素:mark 元素表示页面需要突出显示或高亮显示的部分。
  2. progress 元素:一般用于写进度条,可以给progress设置value和max属性,value表示已经进行的,max表示总数,value和max只能为有效的浮点数,value必须大于0小于等于max。如果不给progress设置这两个属性,则是动态显示正在进行,进度不确定。
  3. meter 元素:定义度量衡。(界定上下的值会有颜色区分)。
    high:定义度量的值位于哪个点,被界定为高的值。
    low:定义度量的值位于哪个点,被界定为低的值。
    max:定义最大值。默认值是 1。
    min:定义最小值。默认值是 0。
    optimum:定义什么样的度量值是最佳的值,如果该值高于 “high” 属性,则意味着值越高越好。如果该值低于 “low” 属性的值,则意味着值越低越好。
    value:定义度量的值。
  4. 改良的ol列表:在HTML5中为ol元素添加了start属性和reversed属性。
    start:表示列表序号从几开始。
    reversed:表示列表序号为倒序。
  5. 改良的dl列表:dl是专门用来定义术语的列表,在HTML5中为dt增加了名字dfn。
      <dl>
	        <dt>术语1</dt>
	        <dd>描述...</dd>
	        <dt><dfn>名字</dfn>术语2</dt>
	        <dd>描述...</dd>
        </dl>
  1. cite: 用于表示作者。

  2. small: 用于标识“小型文本”。

  3. <article> 标签 : 定义外部的内容。

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

  5. <audio> 标签:定义声音。

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

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

  8. <embed> 标签:定义嵌入的内容,比如插件。

  9. <footer> 标签:定义 section 或 document 的页脚。

  10. <header> 标签:定义 section 或 document 的页眉。

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

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

  13. <nav> 标签:定义导航链接的部分。

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

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

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

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

  18. <section> 标签:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

  19. <source>标签:为媒介元素(比如 和 )定义媒介资源。

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

  21. <time> 标签:定义日期或时间,或者两者。

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

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

猜你喜欢

转载自blog.csdn.net/qq_24639793/article/details/86502920