html5中常见的全局属性

2022-10-10 13:36:27

1.contentEditable属性

1、功能说明

（1）功能：允许用户编辑元素中的内容

（2）说明：是一个布尔值，false是不能编辑，true为可编辑

该元素还隐藏一个inherit状态也是一个布尔值。如果不指定，则由该元素继承的父级元素来决定

2、分析实例

（1）contenteditable属性为false

 <!DOCTYPE html>

 <head>

    <meta charset="utf-8" />

    <title>contentEditable</title>

 </head>

 <body>

    <ul contenteditable="false">

          <li>星期一</li>

          <li>星期二</li>

          <li>星期三</li>

          <li>星期四</li>

          <li>星期五</li>

          <li>星期六</li>

          <li>星期日</li>

     </ul>\

 </body>

显示结果

（2）contenteditable属性为true

<!DOCTYPE html>

<head>

   <meta charset="utf-8" />

   <title>contentEditable</title>

</head>  

<ul contenteditable="true">

  <li>星期一</li>

  <li>星期二</li>

  <li>星期三</li>

  <li>星期四</li>

  <li>星期五</li>

  <li>星期六</li>

  <li>星期日</li>

</ul>

显示结果

2.designMode属性

该属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持 contentEditable 的元素都变成可编辑状态。

该属性只能在JavaScript脚本中编辑修改。该属性有两个值——“on” 与 “off” 。属性为 “on”时，页面可编辑；为 “off”时，页面不可编辑。
页面中有

 <iframe id="editor">可以标记</iframe>

在JavaScript脚本中指定designMode属性的方法如下：

 editor.document.designMode="on";

3.Hidden属性

所有元素都允许使用该属性。
该元素类似于 input 元素中的 hidden 元素，功能是通知浏览器不渲染该元素，是该元素处于不可近状态。

4.spellcheck属性

spellcheck 属性规定是否对元素内容进行拼写检查。

可对以下文本进行拼写检查：

类型为 text 的 input 元素中的值（非密码）
textarea 元素中的值
可编辑元素中的值

5.tabindex属性

当浏览者浏览网站时可以通过按TAB键在网页的链接中依次移动，这是一个相当方便实用的功能。但如果网页中链接太多，恐怕按TAB键就没什么作用了，这时不妨通过改变 TAB键移动的顺序来突出重点，在某些重要页面上方便访问者。

使用TABINDEX属性可以设置TAB键在链接中的移动顺序。把链接的TABINDEX属性设成1到32767的一个值，就可以把这个链接加入到 TAB键的序列中，而若把 TABINDEX属性设为一个负值（如TABINDEX="-1"），那么这个链接将被排除在TAB键的序列之外。

当浏览者使用TAB键在网页链接中移动时，将首先移动到具有最小TABINDEX属性值的链接上，最后在具有最大TABINDEX属性值的链接上结束移动。如果有两个链接的 TABINDEX属性相同，则以链接在html代码中出现的顺序为准。

 <a href="http://www.microsoft.com/" tabindex="-1">Microsoft</a>

 <a href="http://www.microsoft.com/" tabindex="0">Microsoft</a>

 <a href="http://www.microsoft.com/" tabindex="1">Microsoft</a>

 <a href="http://www.microsoft.com/" tabindex="2">Microsoft</a>

 <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

码农公寓

相关文章