html5元素属性,html5元素属性大全

HTML5有哪些新的元素和属性

HTML5 引入了新的 HTML 元素和属性，有的是传统通用元素的语义化版本，如取代 div 元素的 nav, footer

等元素，也有一些全新的元素，如 audio, video。一些在 HTML4 中不被推荐使用的元素，如 font 和 center

将被弃用。HTML5 引入的新 HTML 元素包括：

article：文章

aside：内容旁边的侧边栏内容

audio：音频

canvas：2D 绘图

command：命令按钮

datalist：下拉选择框

details：对象的细节

dialog：对话框

embed：外部插件或对象

figure：一组媒体对象以及标签文字

footer：页脚

header：页首

hgroup：文档某一部分的信息

keygen：表单生成的 Key

mark：标注的文字

meter：预先定义的范围内的度量

nav：导航条

output：输出

progress：进度条

rp：标识 rubby 内容

rt：rubby 内容的解释

ruby：rubby 内容

section：定义一个部分

source：媒体的资源

time：日期时间

video：视频

相关问答

Q1: html添加了哪些表单元素和属性

html5 新增了的表单元素和属性如下：

属性：

1、 form属性

在HTML5中表单元素可放在表单之外，通过给该元素添加form属性即可。

2、 formaction属性

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

3、formmethod属性

既然对提交按钮有了formaction属性，就相应的有了formmethod属性

4、 placeholder属性

给文本框(text或textarea)处于未输入状态时的一种文字提示

5、autofocus属性

自动获得焦点，一个页面只能有一个控件具有该属性

6、 list属性

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

6、autocomplete属性

自动完成允许浏览器预测对字段的输入，在HTML5之前自动完成不能自定义设置，任何人都可以看到，所以存在安全隐患，在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种，不指定时使用浏览器的默认值，这取决于各浏览器的决定。

元素：

HTML5大幅度地增加和改良了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 定义不同类型的输出；

表单验证

自动验证

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

1、 required属性

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

2、pattern属性

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

3、min属性和max属性

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

4、 step属性

控制元素的值增加或减少的步幅，如输入11-100之间的数字，且步幅是5，那么只能输入11、16、21....

显示验证

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

取消验证

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

自定义错误

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

增强的页面元素

1、figure元素

figure是个组合元素，可以带标题figcaption，一个figure只允许放置一个figcaption

2、details元素

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

3 、mark元素

mark元素表示页面需要突出显示或高亮显示的部分，经典的是搜索结果

4、progress元素

可以给progress设置value和max属性，value表示已经进行的，max表示总数，value和max只能为有效的浮点数，value必须大于0小于等于max。如果不给progress设置这两个属性，则是动态显示正在进行，进度不确定。

5、 meter元素

定义度量衡

6、改良的ol列表

在HTML5中为ol元素添加了start属性和reversed属性

7、改良的dl列表

dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn

8、 另外还有cite用于表示作者，small用于标识“小型文本”等

Q2: HTML5中input元素新增加哪些type属性值？它们有什么作用？

在HTML5中，为input元素新增了以下一些type属性值，用来丰富文本框的类型。

color：用于指定颜色的控件。

date：用于输入日期的控件（年，月，日，不包括时间）。

datetime：基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。

datetime-local：用于输入日期时间控件，不包含时区。

email：用于编辑 e-mail 的字段。

month：用于输入年月的控件，不带时区。

number: 用于输入浮点数的控件。

range：用于输入不精确值控件。

search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。

tel：用于输入电话号码的控件。

time：用于输入不含时区的时间控件。

url：用于编辑URL的字段。。

week：用于输入一个由星期-年组成的日期，日期不包括时区。推荐你去一个教学网站 秒秒学上把这些知识过一遍，夯实下基础。