网站建设资讯

NEWS

网站建设资讯

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:视频

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用于标识“小型文本”等

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

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

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

date:用于输入日期的控件(年,月,日,不包括时间)。

datetime:基于 UTC 时区的日期时间输入控件(时,分,秒及几分之一秒)。

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

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

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

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

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

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

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

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

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

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


新闻标题:html5元素属性,html5元素属性大全
网站地址:http://cdweb.net/article/dsshpog.html