HTML5学习(三)

全局属性

在HTML5中新增了全局属性的概念,即:可以用来配置所有元素共有的行为,这种属性称为全局属性,可以用在任何一个元素身上。

例如以下几个:

  • contenteditable属性
  • designmode属性
  • hidden属性
  • spellcheck属性
  • tabindex属性

(1)contenteditable 是 HTML5 中新增加的属性,其用途是让用户能够修改页面上的内容。

<body>
    

<h1>可编辑列表h1>
<ul contenteditable="true">
<li>列表1li>
<li>列表2li>
<li>列表3li>

ul>
body>

如下图:

                     HTML5学习(三)_第1张图片

 

 contenteditable 属性值设置为 true 时,用户可以单击文字编辑内容。设置为 false 时禁止编辑。

(2)hidden属性

hidden是个布尔属性,表示相关元素当前不需要关注,浏览器对它的处理方式是隐藏相关元素(控制一个元素的展示隐藏的时候,自定义一个 hidden 类,然后在里面写隐藏样式)。

如:  <div hidden>这个元素将会被隐藏div> 

(3)spellcheck 属性

spellcheck用来表明浏览器是否应该对元素的内容进行拼写检查,这个属性只有用在用户可以编辑的元素上时才有意义。

spellcheck 属性可以接受的值有两个:true 和 false。

至于拼写检查的实现方式则因浏览器而异。

<textarea spellcheck="true" cols="60" rows="3"> textarea>

HTML5学习(三)_第2张图片

 

 (4)designMode属性

用来指定整个页面是否可编辑,有两个值,on和off。该属性只能用javascript来修改值。如果design设置为on,则所有允许设置contenteditable的元素都可编辑。

用法: window.document.designmode="off"; 

designmode为on时,整个页面都是可编辑的。为off时,不可编辑。全局都可修改不是很实用,还是contenteditable这种对局部的修改比较实用。

(5)tabindex属性

tabindex 属性规定元素的 tab键切换顺序(当 tab 键用于导航时),可将tabIndex属性设成1到32767的一个值。

Note:tabindex属性设为一个负值(如tabindex="-1")时,用户使用tab键切换时该html元素将不会被选中。

举例:

<form>
    <label>姓名: <input type="text" name="name" tabindex="2"/>label>
    <br/>
    <label>身份证号: <input type="text" name="city" tabindex="-1"/>label>
    br>
    <label>准考证号: <input type="text" name="country" tabindex="1"/>label>
    br>
    <input type="submit" value="查询" tabindex="3"/>
form>

HTML5学习(三)_第3张图片

 

你可能感兴趣的:(HTML5学习(三))