（二）html5中的属性

1、全局属性

所谓全局属性，是指可以对任何元素都使用的属性；

(1)contentEdITable属性

contentEditable属性的主要功能是允许用户编辑元素中的内容，所以该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。contentEditable属性是一个布尔值属性，可以被指定为true或false。

除此之外，该属性还有一个隐藏inherit（继承）状态，属性为true时，元素被指定为允许编辑；属性为false时，元素被指定为不允许编辑；未指定true或false时，则由inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的；

另外，除了contentEditable属性外，元素还具有一个isContentEditable属性，当元素可编辑时，该属性为true；当元素不可编辑时，该属性为false；

contentEditable属性示例（加上contentEditable属性之后该元素就变成可编辑的了）

可编辑列表

• 列表元素1
• 列表元素2
• 列表元素3

在编辑完元素中内容之后，如果想要保存其中的内容，只能把该元素的innerHTML发送到服务器端进行保存，因为改变元素内容之后该元素的innerHTML内容也会随之改变，目前还没有特别的API来保存编辑后元素中的内容。

(2)designMode属性

designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上述的contentEditable属性的元素都变成了了编辑状态。designMode属性只能在javascript脚本里被编辑修改。该属性有两个值on和off。属性被指定为“on”时，页面可编辑；被指定为“off”时，页面不可编辑。使用javascript脚本来指定designMode属性的方法如下
所示:document.designMode=”on”

(3)hidden属性

在html5中所有的元素都允许使用一个hidden属性。该属性类似于input元素中的hidden元素，功能是通知浏览器不渲染元素，是该元素处于不可见状态。但是元素中的内容还是浏览器创建的，也就是说页面装载后允许使用javascript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。hidden属性是一个布尔值，为true元素处于不可见状态；为false元素处于可见状态。

(4)sPEllcheck属性

spellcheck属性是html5针对input元素（type=text）与textarea这两个文本输入框提供的一个新属性，它的功能为针对用户输入的文本内容进行拼写和语法检查。spellcheck属性是一个布尔值属性，true或false；在书写时有一个特殊的地方，就是必须明确声明属性值为true或false，书写方法如下：

 input type=text spellchech=false >
    /code>
    /PRe>
      p>
    以下写法错误：/p>
        pre class="brush:java;
    ">
    code class=" hljs XMl">
    textarea spelcheck >
    /code>
    /pre>
      p>
    需要注意的是，如果元素的readOnly属性或disabled属性设为true，则不执行拼写检查。/p>
      p>
    strong>
    (5)tabindex属性/strong>
    /p>
      p>
    tabindex是开发中的一个基本概念，当不断敲击Tab键让窗口或者页面中的控件或得焦点，对窗口或页面中的所有控件进行遍历的时候，每一个控件的tabindex表示该控件是第几个被访问到的。过去这个属性在编辑网页时是非常有用的，但如今控件的遍历顺序都是由元素在页面上所处的位置决定的，所以就不再需要了。但是tabindex还有另外一个作用，在默认情况下，只有链接元素与表单元素可以通过按键获得焦点。如果对其他元素使用tabindex属性后，也能让该元素获得焦点，那么当脚本中执行focus()语句的时候，就可以让该元素获得焦点了。但这样做会产生一个副作用：该元素也可以通过按Tab键获得焦点，而这有时候可能不是开发者想要的结果。把元素的tabindex值设为负数（通常为-1）后就解决这个问题了。tabindex的值为负数后，仍然可以通过编程的方式让元素获得焦点，但按下Tab键时该元素就不能获得焦点了。这在复杂的页面中或者复杂的web应用程序中是十分有用的。/p>
      p>
    strong>
    2、表单相关属性/strong>
    /p>
      p>
    (1)可以对input（type=text）、select、textarea与button元素制定autofocus属性。它以指定属性的方式让元素在换面打开时自动获得焦点；/p>
      p>
    (2)可以对input元素（type=text）与textarea元素指定placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容；/p>
      p>
    (3)可以对input、output、select、textarea、button与fieldset指定form属性，声明它属于哪个表单，然后将其放置在页面上的任何位置，而不是表单之内；/p>
      p>
    (4)可以对input（type=text）元素与textarea元素指定required属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容；/p>
      p>
    (5)为input元素增加了几个新的属性：autocomplete、min、max、multiple、pattern与step。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomplete属性配合用。multiple属性允许在上传文件时一次上传多个文件；/p>
      p>
    (6)为input元素与button元素增加了新的属性formaction、formenctype、formmethod、formnovalidate与formtarget、他们可以重载form元素的action、enctype、method、novalidate与terget属性。为fieldset元素增加了disable属性，可以把它的子元素设为disable（无效）状态；/p>
      p>
    (7)为input元素、button元素、form元素增加了novalidate属性，该属性可以取消提交时进行的有关检查，表单可以被无条件的提交；/p>
      p>
    (8)为所有可使用标签（label）元素的表单标签【包括非隐藏的input元素（type属性值不等于hidden）、button元素、select元素、textarea元素、meter元素、output元素、progress元素以及keygen元素】定义一个labels属性，属性值为一个nodelist对象，代表该元素所绑定的标签元素所构成的集合；/p>
      p>
    (9)可以在标签（label元素）内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素；/p>
      p>
    (10)针对input元素与textarea元素在HTML5中增加SelectionDirection属性。当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为“forward”；当用户反向选取文字时，该属性值为“backward”。当用户没有选去任何文字时，该属性值为“forward”；/p>
      p>
    (11)对复选框（checkbox元素）添加indeterminate属性，以说明复选框处于“尚未明确是否可选状态”；/p>
      p>
    (12)对类型为image的input元素添加用于指定图片按钮中图片高度的height属性与用于指定图片宽度的width属性；/p>
      p>
    (13)对textarea元素新增用于限定可输入文字个数的maxlength属性，与用于指定表单提交时是否在文字换行处添加换行符的wrap属性；/p>
      p>
    (14)对iframe元素新增sandbox属性，其作用是出于安全性方面的原因，对iframe元素内的内容是否允许显示，表单是否允许被提交，以及脚本是否允许被执行等方面进行一些限制；/p>
      p>
    (15)对script元素新增async属性与defer属性，用于加快页面的加载速度，是脚本代码的读取不妨碍页面上其他元素的加载；/p>
      p>
    strong>
    3、链接相关的属性/strong>
    /p>
      p>
    (1)为a与area元素增加了media属性，该属性规定目标URL是为什么类型的媒介/设备进行优化的，只能在href属性存在时使用；/p>
      p>
    (2)为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素的一致；/p>
      p>
    (3)为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标（icon元素）的大小；/p>
      p>
    (4)为base元素增加了target属性，主要目的是保持与a元素的一致性；/p>
      p>
    strong>
    4、其他属性/strong>
    /p>
      p>
    (1)为ol元素增加属性reversed，它指定列表倒序显示；/p>
      p>
    (2)为meta元素增加charset属性，因为这个属性已经被广泛支持了，而且为文档的字符编码的制定提供了一种比较良好的方式；/p>
      p>
    (3)为menu元素添加了两个新的属性—type和label。label属性为菜单定义一个可见的标注，type属性让菜单可以以上下文菜单、工具条和列表菜单三种形式出现；/p>
      p>
    (4)为style元素增加scoped属性，用来规定样式的作用范围，譬如只对页面上某个树起作用。/p>
      p>
    (5) 为script元素增加async属性，它定义脚本是否异步执行；/p>
      p>
    (6)为html元素增加属性manifest，开发离线web应用程序时它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息；/p>
      p>
    (7)为iframe元素增加三个属性sandbox,seamless与srcdoc，用来提高页面安全性，防止不信任的web 页面执行某些操作；/p>
      p>
    strong>
    5.废除的属性/strong>
    /p>
    /p>
                  /p>
    

1、全局属性

所谓全局属性，是指可以对任何元素都使用的属性；

(1)contentEditable属性

contentEditable属性的主要功能是允许用户编辑元素中的内容，所以该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。contentEditable属性是一个布尔值属性，可以被指定为true或false。

除此之外，该属性还有一个隐藏inherit（继承）状态，属性为true时，元素被指定为允许编辑；属性为false时，元素被指定为不允许编辑；未指定true或false时，则由inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的；

另外，除了contentEditable属性外，元素还具有一个isContentEditable属性，当元素可编辑时，该属性为true；当元素不可编辑时，该属性为false；

contentEditable属性示例（加上contentEditable属性之后该元素就变成可编辑的了）

可编辑列表

• 列表元素1
• 列表元素2
• 列表元素3

在编辑完元素中内容之后，如果想要保存其中的内容，只能把该元素的innerHTML发送到服务器端进行保存，因为改变元素内容之后该元素的innerHTML内容也会随之改变，目前还没有特别的API来保存编辑后元素中的内容。

(2)designMode属性

designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上述的contentEditable属性的元素都变成了了编辑状态。designMode属性只能在javascript脚本里被编辑修改。该属性有两个值on和off。属性被指定为“on”时，页面可编辑；被指定为“off”时，页面不可编辑。使用javascript脚本来指定designMode属性的方法如下
所示:document.designMode=”on”

(3)hidden属性

在html5中所有的元素都允许使用一个hidden属性。该属性类似于input元素中的hidden元素，功能是通知浏览器不渲染元素，是该元素处于不可见状态。但是元素中的内容还是浏览器创建的，也就是说页面装载后允许使用javascript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。hidden属性是一个布尔值，为true元素处于不可见状态；为false元素处于可见状态。

(4)spellcheck属性

spellcheck属性是html5针对input元素（type=text）与textarea这两个文本输入框提供的一个新属性，它的功能为针对用户输入的文本内容进行拼写和语法检查。spellcheck属性是一个布尔值属性，true或false；在书写时有一个特殊的地方，就是必须明确声明属性值为true或false，书写方法如下：

 input type=text spellchech=false >
    /code>
    /pre>
      p>
    以下写法错误：/p>
        pre class="brush:java;
    ">
    code class=" hljs xml">
    textarea spelcheck >
    /code>
    /pre>
      p>
    需要注意的是，如果元素的readOnly属性或disabled属性设为true，则不执行拼写检查。/p>
      p>
    strong>
    (5)tabindex属性/strong>
    /p>
      p>
    tabindex是开发中的一个基本概念，当不断敲击Tab键让窗口或者页面中的控件或得焦点，对窗口或页面中的所有控件进行遍历的时候，每一个控件的tabindex表示该控件是第几个被访问到的。过去这个属性在编辑网页时是非常有用的，但如今控件的遍历顺序都是由元素在页面上所处的位置决定的，所以就不再需要了。但是tabindex还有另外一个作用，在默认情况下，只有链接元素与表单元素可以通过按键获得焦点。如果对其他元素使用tabindex属性后，也能让该元素获得焦点，那么当脚本中执行focus()语句的时候，就可以让该元素获得焦点了。但这样做会产生一个副作用：该元素也可以通过按Tab键获得焦点，而这有时候可能不是开发者想要的结果。把元素的tabindex值设为负数（通常为-1）后就解决这个问题了。tabindex的值为负数后，仍然可以通过编程的方式让元素获得焦点，但按下Tab键时该元素就不能获得焦点了。这在复杂的页面中或者复杂的web应用程序中是十分有用的。/p>
      p>
    strong>
    2、表单相关属性/strong>
    /p>
      p>
    (1)可以对input（type=text）、select、textarea与button元素制定autofocus属性。它以指定属性的方式让元素在换面打开时自动获得焦点；/p>
      p>
    (2)可以对input元素（type=text）与textarea元素指定placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容；/p>
      p>
    (3)可以对input、output、select、textarea、button与fieldset指定form属性，声明它属于哪个表单，然后将其放置在页面上的任何位置，而不是表单之内；/p>
      p>
    (4)可以对input（type=text）元素与textarea元素指定required属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容；/p>
      p>
    (5)为input元素增加了几个新的属性：autocomplete、min、max、multiple、pattern与step。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomplete属性配合用。multiple属性允许在上传文件时一次上传多个文件；/p>
      p>
    (6)为input元素与button元素增加了新的属性formaction、formenctype、formmethod、formnovalidate与formtarget、他们可以重载form元素的action、enctype、method、novalidate与terget属性。为fieldset元素增加了disable属性，可以把它的子元素设为disable（无效）状态；/p>
      p>
    (7)为input元素、button元素、form元素增加了novalidate属性，该属性可以取消提交时进行的有关检查，表单可以被无条件的提交；/p>
      p>
    (8)为所有可使用标签（label）元素的表单标签【包括非隐藏的input元素（type属性值不等于hidden）、button元素、select元素、textarea元素、meter元素、output元素、progress元素以及keygen元素】定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合；/p>
      p>
    (9)可以在标签（label元素）内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素；/p>
      p>
    (10)针对input元素与textarea元素在HTML5中增加SelectionDirection属性。当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为“forward”；当用户反向选取文字时，该属性值为“backward”。当用户没有选去任何文字时，该属性值为“forward”；/p>
      p>
    (11)对复选框（checkbox元素）添加indeterminate属性，以说明复选框处于“尚未明确是否可选状态”；/p>
      p>
    (12)对类型为image的input元素添加用于指定图片按钮中图片高度的height属性与用于指定图片宽度的width属性；/p>
      p>
    (13)对textarea元素新增用于限定可输入文字个数的maxlength属性，与用于指定表单提交时是否在文字换行处添加换行符的wrap属性；/p>
      p>
    (14)对iframe元素新增sandbox属性，其作用是出于安全性方面的原因，对iframe元素内的内容是否允许显示，表单是否允许被提交，以及脚本是否允许被执行等方面进行一些限制；/p>
      p>
    (15)对script元素新增async属性与defer属性，用于加快页面的加载速度，是脚本代码的读取不妨碍页面上其他元素的加载；/p>
      p>
    strong>
    3、链接相关的属性/strong>
    /p>
      p>
    (1)为a与area元素增加了media属性，该属性规定目标URL是为什么类型的媒介/设备进行优化的，只能在href属性存在时使用；/p>
      p>
    (2)为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素的一致；/p>
      p>
    (3)为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标（icon元素）的大小；/p>
      p>
    (4)为base元素增加了target属性，主要目的是保持与a元素的一致性；/p>
      p>
    strong>
    4、其他属性/strong>
    /p>
      p>
    (1)为ol元素增加属性reversed，它指定列表倒序显示；/p>
      p>
    (2)为meta元素增加charset属性，因为这个属性已经被广泛支持了，而且为文档的字符编码的制定提供了一种比较良好的方式；/p>
      p>
    (3)为menu元素添加了两个新的属性—type和label。label属性为菜单定义一个可见的标注，type属性让菜单可以以上下文菜单、工具条和列表菜单三种形式出现；/p>
      p>
    (4)为style元素增加scoped属性，用来规定样式的作用范围，譬如只对页面上某个树起作用。/p>
      p>
    (5) 为script元素增加async属性，它定义脚本是否异步执行；/p>
      p>
    (6)为html元素增加属性manifest，开发离线web应用程序时它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息；/p>
      p>
    (7)为iframe元素增加三个属性sandbox,seamless与srcdoc，用来提高页面安全性，防止不信任的web 页面执行某些操作；/p>
      p>
    strong>
    5.废除的属性/strong>
    /p>
    /p>
                  /p>
    

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！