html5废除属性,HTML5增加及废除的属性

HTML5同时增加和废除了很多属性。简单说明如下。

1．增加的属性

表单属性

为input (type=text)、select、textarea与button元素新增加autofocus屑性。它以指定属性的方式让元素在画面打开时自动获得焦点。

为input元素(type=text)与textarea元素新增加placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容。

为input、output、select、textarea、button与fieldset新增加form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内。

为input元素(type=text)与textarea元素新增加required属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容。

为input元素增加autocomplete、mm、max、multiple、pattern和step属性。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomplete属性配合使用。multiple属性允许在上传文件时一次上传多个文件。

为input元素与button元素增加了新属性formaction、formenctype、formmethod、formnovalidate与formtarget，它们可以重载form元素的action、enctype、method、novalidate与target属性。为fieldset元素增加了disabled属性，可以把它的子元素设为disabled(无效)状态。

为input元素、button元素和form元素增加了novalidate属性，该属性可以取消提交时进行的有关检查，表单可以被无条件地提交。

链接属性

为a元素与area元素增加了media属性，该属性规定目标URL是为哪种类型的媒介或设备进行优化的，只能在href属性存在时使用。

为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素的一致。

为link元素增加了新属性sizes。该属性可以与icon元素结合使用(通过rel属性)，用于指定关联图标(icon元素)的大小。

为base元素增加了target属性，主要目的是保持与a元素的一致性。

其他属性

为ol元素增加reversed属性，用于指定列表倒序显示。

为meta元素增加charset属性，因为这个属性已经被广泛支持了，而且为文档的字符编码的指定提供了一种比较良好的方式。

为menu元素增加了两个新的属性type与label， label属性为菜单定义一个可见的标注，type属性让菜单可以以上下文菜单、工具条或列表菜单这3种形式出现。

为style元素增加scoped属性，用来规定样式的作用范围，譬如只对页面上某个树起作用。

为script元素增加async属性，用于定义脚本是否异步执行。

为html元素增加manifesf属性，开发离线Web应用程序时，它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。

为iframe元素增加3个属性sandbox、seamless与srcdoc，用来提高页面安全性，防止不信任的Web页面执行某些操作。

2.  废除的属性

HTML5废除了HTML4中过时的属性，而采用其他属性或其他方案进行替代，具体说明如下表所示。

HTML5废除的属性 表1

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃  HTML 4属性                               适应元素                     HTML5替代方案

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃rev                                                     link.a                                    rel

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃ charset                    link.a                  在被链接的资源中使用HTTP Content-type头元素

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃shape. coords                a                      使用area元素代替a元素

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃longdesc                    img、iframe             使用a元素链接到较长描述

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃target                      link                    多余属性，被省略

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃nohref                       area                   多余属性，被省略

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃profile                      head                   多余属性，被省略

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃version                      html                   多余属性，被省略

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃name                        img                     id

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃ scheme                      meta                   只为某个表单域使用scheme

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃archive、 classid、 codebase、                         使用data与type属性类调用插件。需要使用这些属

┃codetype、 declare、 standby   object

┃                                                    性来设置参数时，使用param属性

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃valuetype、 type              param                  使用name与value属性，不声明值的MIME类型

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃                                                    使用以明确简洁的文字开头，后跟详述文字的形式。

┃axis、abbr                  td、th                  可以对更详细内容使用title屑性，来使单元格的内

┃                                                    容变得简短

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃scope                       td                      在被链接的资源中使用HTTP Content-type头元素

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃                            caption、 input、 legend、

┃align                       div、hl、h2、h3、h4、  使用CSS样式表替代

┃                            h5、h6、 p

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

表2

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃   HTML4属性                          适应元素           HTML5替代方案

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃alink、 link、 text、 vlink、

┃   background                                     body               使用CSS样式表替代

┃bgcolor

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃align、bgcolor、 border、 cellpadding       table               使用CSS样式表替代

┃cellspacing、 frame、 rules、 width

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃align、 char、 charoff、 height、         tbody、 thead、tfoot  使用CSS样式表替代

┃nowrap、 valign

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃align、 bgcolor、 char、 charoff、        td、th              使用CSS样式表替代

┃height、 nowrap、 valign、width

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃align、 bgcolor、 char、 charoff、 valign        tr                   使用CSS样式表替代

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃align、 char、 charoff、 valign、 width       col、 colgroup       使用CSS样式表替代

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃align、 border、hspace、vspace          object             使用CSS样式表替代

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃clear                                  br                 使用CSS样式表替代

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃ compact、 type                         ol、 ul、 li         使用CSS样式表替代

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃compact                                dl                 使用CSS样式表替代

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃compact                                menu               伎用CSS样式表替代

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃width                                 pre                 使用CSS样式表替代

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃align、 hspace、 vspace                 img                 使用CSS样式表替代

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃align、 noshade、 size、 width           hr                  使用CSS样式表替代

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃align 、   frameborder 、   scrolling 、 iframe              使用CSS样式表替代

┃marginheight、 marginwidth

┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

┃autosubmit                             menu

┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━