HTML5新增元素及属性

来源：互联网发布：sqlserver exists in 编辑：程序博客网时间：2024/06/06 02:35

前言

虽然HTML5没有完全颠覆HTML4，但是他们也有一些不同。下面列出一些HTML5的主要内容

1.简化的语法

例如doctype的声明，只需要<!DOCTYPE html>即可，它表示网页使用html5。还比如指定网页的编码格式<meta charset='UTF-8'>，写法很简化。

2.canvas的使用

早前web开发使用flash，在网页上播放flash需要引入很多插件和代码。现在使用canvas可以实现一些炫酷的效果，比如网页截图、动画等。

3.新增标签

3.1新增语意化标签

增加main、header、nav、section、article、aside、hgroup、footer等语义化标签，使代码的结构很清晰，header就表示头部，footer就表示尾部。注意这些都属于块元素

3.2新增的其他标签

3.2.1.figure与figcaption

figure与figcaption的使用使网页文字和图片的排版更专业。figure标签规定独立的流内容（figure元素的内容应该和主内容相关，但如果被删除，则不应该对文档流产生影响。figcaption主要定义figure元素的标题（注意并不是每个figure都需要figcaption，如果使用figcaption,一般放在figure元素的第一个位置或着最后一个位置)。一个figure元素应该只有一个figcaption元素。说了这么多定义，我们来看一下他的用法

figure通常用于图片元素，如下所示

</figure>

figure中也可以放多张图片，如下所示

</figure>

figure标签是一种独立于上下文的单元，这意味着无论你把它移动到什么地方，都不会影响它在文档中的意义

figcaption标签用于说明figure的标题或内容，用法如下所示

<figcaption>3张图片展示</figcaption>

</figure>

当然如果希望给你的图像增加更多语义，可以使用其他元素，比如h1、p等，如下所示

<h2>detail 1</h2>

<p>detail 2</p>

</figcaption>

</figure>

3.2.2新增video、audio标签

3.2.3新增mark元素

mark标签定义带有符号的文本，用来突出显示文本

<p>Do not forget to buy <mark>milk</mark> today.</p> 显示如下

3.2.4新增datalist元素

规定输入域的选项列表，列表是通过datalist内的option元素创建。与input元素配合使用该元素，来定义input可能的值。把datalist绑定到输入域，需要将输入域的list属性引用到datalist的id。

<span>浏览器版本</span>

</datalist>

显示效果如下

这里说一下datalist与select的区别:datalist与input绑定，可以输入，可以自动捕获鼠标，而select只能选择。

4.删除的元素

4.1能用CSS代替的元素

basefont、big、center、font s、strike、tt、u

4.2不再使用frame框架

不再使用frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器放创建的由多个页面组成的复合页面的形式，删除以上这三个标签

4.3废除只有部分浏览器支持的元素

applet、bgsound、blink、marquee等标签

5.表单域增强元素

5.1新增的type类型 email url tel search number元素

number元素输入类型用于包含数字值的输入字段，可以设置可接受的数字的限制

例：<input type="number" min="1" max="10" step="2" value="1">

range元素输入类型用于应该包含指定范围值的输入字段，染个类型显示为滑块

例：<input type="range" min="1" max="10" step="2" value="1"/>

color元素输入类型允许从拾色器中选取颜色

5.2新增的表单属性

autocomplete属性

该属性规定form或input域应该拥有自动完成功能。注：autocomplete适用于form标签，以及以下类型的input标签：text,search,url,tel,email,password,datepickers,range以及color。例如<input type="text" autocomplete="on" name="name" placeholder="用户名" >

autofocus属性

该属性规定在页面加载时，自动获得焦点。适用于所有input标签的类型，一个页面只能有一个。

multiple属性

该属性规定输入域中可以选择多个值。该属性适用于以下类型的input标签：email和file。多个email用逗号隔开

placeholder属性

该属性提供一种提示，描述输入域所期待的值。该属性用于以下类型的input标签：text,search,url,tel,email,password。

required属性

该属性规定必须在提交之前完成输入，不能为空。

pattern属性

该属性为一个正则表达式，提交时会验证所输入的值是否合格。该属性适用于以下类型的input标签：text,url,tel,email,password。

例如 <input type="tel" name="tel" pattern="[1][3|5|7|8][0-9]{9}" placeholder="电话">

novalidate属性

该属性取消输入域的验证功能，该属性适用于form以及以下类型的input标签：text,search,tel,email,password,datapickers,range,color。

6.全局属性 contentEditable

该属性允许用户编辑元素中的内容，可以获得鼠标焦点，属性为布尔值，可被指定为true或false。

如<p contenteditable="true">内容可以编辑</p>，该标签的内容是可以编辑的。

7.label标签的for属性

label标签为input元素定义标注。如果在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的控件上。

label标签的for属性应当与相关元素的id属性相同。例如

<label for="a">请输入姓名</label><input type="text" id="a"/>

8.改良的标签 ol-li

此标签定义有序列表。增加新属性reversed(规定列表顺序为降序)。可以使用start（规定有序列表的起始值）和type(规定列表中使用额标记类型)属性，type可选值有1/A/a/i/I

例如

</ol>

0 0