HTML5权威指南
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.5 HTML5全局属性

本章前面讲过如何用属性配置元素。每种元素都能规定自己的属性，这种属性称为局部属性（local attribute）。第6章在开始详细介绍各种元素的时候，将会列出它们具有的所有局部属性并且示范用法。每一个局部属性都可以用来控制元素独有行为的某个方面。

属性还有另一种类型：全局属性（global attribute）。它们用来配置所有元素共有的行为。全局属性可以用在任何一个元素身上，不过这不一定会带来有意义或有用的行为改变。下面将会介绍所有全局属性并示范其用法。有些全局属性涉及本书后面才会详细讲到的更宏大的HTML特性。对于它们这里会提供相关章节的参照信息。

3.5.1 accesskey属性

使用accesskey属性可以设定一个或几个用来选择页面上的元素的快捷键。代码清单3-14是一个在简单表单中使用这个属性的例子。表单是第12章到第14章的主题，可以在读过那几章之后再来看看这个例子。

代码清单3-14 使用accesskey属性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <form>
                  Name: <input type="text" name="name"accesskey="n"/>
                  <p/>
                  Password: <input type="password" name="password"accesskey="p"/>
                  <p/>
                  <input type="submit" value="Log In"accesskey="s"/>
              </form>
            </body>
        </html>

此例为三个input元素添加了accesskey属性（input元素的说明见第12章和第13章）。其目的是让网页或网站的熟客可以使用快捷键访问经常用到的元素。用来触发accesskey机制的按键组合因平台而异，在Windows系统上是同时按下Alt键和accesskey属性值对应的键。图3-5展示了accesskey属性的效果。用户可以按Alt+n将键盘焦点转移到第一个input元素，在此输入姓名。接下来按Alt+p将焦点转到第二个input元素，在此输入密码。然后按Alt+s，这等于按下Log In按钮以提交表单。

图3-5 accesskey属性的效果

3.5.2 class属性

class属性用来将元素归类。这样做通常是为了能够找出文档中的某一类元素或为某一类元素应用CSS样式。代码清单3-15示范了如何使用class属性。

代码清单3-15 使用class属性

        <! DOCTYPE HTML>
        <html>
            <head>
                <title>Example</title>
            </head>
            <body>
                <a class="class1class2"href="http://apress.com">Apress web site</a>
                <p/>
                <a class="class2otherclass"href="http://w3c.org">W3C web site</a>
            </body>
          </html>

一个元素可以被归入多个类别，为此在class属性值中提供多个用空格分隔的类名即可。类名可以随便取，不过最好取点具有实际含义的，文档中拥有许多元素类别时尤其如此。class属性本身没有任何作用。图3-6是上面的示例在浏览器中的显示结果，从中看到的只是几个超链接。

图3-6 两个应用了class属性的元素

class属性的一种利用方式是设计CSS样式时以所定义的一个或多个类作为应用目标。代码清单3-16即是一例。

代码清单3-16 定义依靠类起作用的样式

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
<style type="text/css">
.class2 {
background-color:grey;
color:white;
padding:5px;
margin:2px;
                  }
.class1 {
font-size:x-large;
                  }
</style>
            </head>
            <body>
              <a class="class1 class2" href="http://apress.com">Apress web site</a>
              <p/>
              <a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
            </body>
        </html>

此例用style元素定义了两条样式，第一条用于属于class2类的元素，第二条用于属于class1类的元素。

style元素的说明见第7章。第4章会介绍样式以及将其应用到元素上的各种方式。

将这个HTML文档载入浏览器，所定义的样式会被应用到相关元素上，其效果如图3-7所示。用类来确定样式应用对象的好处在于不用对涉及的元素一一重复同样的样式设置。

图3-7 借助class属性应用样式

脚本程序也可以利用class属性。代码清单3-17就是这样一个例子。

代码清单3-17 在脚本中使用class属性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <a class="class1 class2" href="http://apress.com">Apress web site</a>
              <p/>
              <a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
<script type="text/javascript">
var elems = document.getElementsByClassName("otherclass");
for (i = 0; i < elems.length; i++) {
var x = elems[i];
x.style.border = "thin solid black";
x.style.backgroundColor = "white";
x.style.color = "black";
                  }
</script>
            </body>
        </html>

此例中的脚本程序找出所有属于otherclass类的元素并对其设置了一些样式。script元素在第7章介绍。第19章到第24章介绍各种样式属性。第26章介绍如何查找文档中的元素。前述脚本的效果见图3-8。

图3-8 在脚本中使用class属性

3.5.3 contenteditable属性

contenteditable是HTML5中新增加的属性，其用途是让用户能够修改页面上的内容。代码清单3-18是一个简单的例子。

代码清单3-18 使用contenteditable属性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <pcontenteditable="true">It is raining right now</p>
            </body>
        </html>

此例把contenteditable属性用在一个p元素（在第9章介绍）身上。该属性值设置为true时用户可以编辑元素内容，设置为false时则禁止编辑。如果未设定其值，那么元素会从父元素处继承该属性的值。这个属性的效果如图3-9所示。用户单击那段文字后即可开始编辑其内容。

图3-9 用contenteditable属性启用编辑功能

3.5.4 contextmenu属性

contextmenu属性用来为元素设定快捷菜单。这种菜单会在受到触发的时候（例如，Windows用户用鼠标右击时）弹出来。在撰写本书的时候，尚无支持这个属性的浏览器。

3.5.5 dir属性

dir属性用来规定元素中文字的方向。其有效值有两个：ltr（用于从左到右的文字）和rtl（用于从右到左的文字）。在代码清单3-19中这两个值都用上了。

代码清单3-19 使用dir属性

          <! DOCTYPE HTML>
          <html>
              <head>
                <title>Example</title>
              </head>
              <body>
                <pdir="rtl">This is right-to-left</p>
                <pdir="ltr">This is left-to-right</p>
              </body>
          </html>

其效果如图3-10所示。

图3-10 从右到左的文字和从左到右的文字

3.5.6 draggable属性

draggable属性是HTML5支持拖放操作的方式之一，用来表示元素是否可被拖放。拖放操作的详细说明见第37章。

3.5.7 dropzone属性

dropzone属性是HTML5支持拖放操作的方式之一，与上述draggable属性搭配使用。二者的介绍都放到第37章。

3.5.8 hidden属性

hidden是个布尔属性，表示相关元素当前毋需关注。浏览器对它的处理方式是隐藏相关元素。代码清单3-20展示了hidden属性的效果。

代码清单3-20 使用hidden属性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <script>
                  var toggleHidden = function() {
                      var elem = document.getElementById("toggle");
                      if (elem.hasAttribute("hidden")) {
                          elem.removeAttribute("hidden");
                      } else {
                          elem.setAttribute("hidden", "hidden");
                      }
                  }
              </script>
            </head>
            <body>
              <button onclick="toggleHidden()">Toggle</button>
              <table>
                  <tr><th>Name</th><th>City</th></tr>
                  <tr><td>Adam Freeman</td><td>London</td></tr>
                  <tr id="toggle"hidden><td>Joe Smith</td><td>New York</td></tr>
                  <tr><td>Anne Jones</td><td>Paris</td></tr>
              </table>
            </body>
        </html>

这个例子的复杂程度有点超标。文档中有一个table元素，它包含的一个tr元素（代表表格中的一行）设置了hidden属性。文档中还有一个button元素，按下它所代表的按钮将会调用定义在script元素中的JavaScript函数toggleHidden。这段脚本程序的作用是：如果那个tr元素的hidden属性存在就将其删除，否则就添加该属性。现在没必要寻思其中原委。第11章会介绍table、tr、th和td元素。script元素和事件的介绍分别安排在第7章和第30章。

这里将这些东西烩作一锅是为了演示hidden属性的作用。图3-11显示了按下Toggle按钮的结果。

图3-11 删除和添加hidden属性的效果

把hidden属性应用到一个元素之后，浏览器干脆不去显示该元素，仿佛HTML文档中没有这个元素。所以上面的例子中所显示的表格的行数比实际的要少（应用了hidden属性时）。

3.5.9 id属性

id属性用来给元素分配一个唯一的标识符。这种标识符通常用来将样式应用到元素上或在JavaScript程序中用来选择元素。代码清单3-21示范了如何根据id属性值应用样式。

代码清单3-21 使用id属性

          <! DOCTYPE HTML>
          <html>
              <head>
                <title>Example</title>
              </head>
              <style>
                #w3clink {
                    background:grey;
                    color:white;
                    padding:5px;
                    border: thin solid  black;
                }
              </style>
              <body>
                <a href="http://apress.com">Apress web site</a>
                <p/>
                <aid="w3clink"href="http://w3c.org">W3C web site</a>
              </body>
          </html>

为了根据id属性值应用样式，需要在定义样式时使用一个以#号开头后接id属性值的选择器（selector）。CSS选择器的详细说明见第17章和第18章。第19章到第24章介绍了各种可以使用的样式。上例中样式应用的效果如图3-12所示。

图3-12 根据元素的id属性值应用样式

提示

id属性还可以用来导航到文档中的特定位置。倘若有个名为example.html的文档中包含一个id属性值为myelement的元素，那么使用example.html#myelement这个URL即可直接导航至该元素。该URL的末尾部分（#加上元素id值）称为URL片段标识符（fragment identifier）。

3.5.10 lang属性

lang属性用于说明元素内容使用的语言。代码清单3-22示范了其用法。

代码清单3-22 使用lang属性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <p lang="en">Hello - how are you? </p>
              <p lang="fr">Bonjour - comment êtes-vous? </p>
              <p lang="es">Hola - ¿cómo estás? </p>
            </body>
        </html>

lang属性值必须使用有效的ISO语言代码。关于如何声明语言的全面说明可参阅这个网址：http://tools.ietf.org/html/bcp47。不过要注意，语言是个复杂的技术性问题。

使用lang属性的目的是让浏览器调整其表达元素内容的方式。比如说，改变使用的引号，在使用了文字朗读器（或别的残障辅助技术）的情况下正确发音。

lang属性还可以用来选择指定语言的内容，以便只显示用户所选语言的内容或对其应用样式。

3.5.11 spellcheck属性

spellcheck属性用来表明浏览器是否应该对元素的内容进行拼写检查。这个属性只有用在用户可以编辑的元素上时才有意义。代码清单3-23就是一例，例中的textarea元素的介绍见第14章。

代码清单3-23 使用spellcheck属性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <textareaspellcheck="true">This is some mispelled text</textarea>
            </body>
        </html>

spellcheck属性可以接受的值有两个：true（启用拼写检查）和false（禁用拼写检查）。至于拼写检查的实现方式则因浏览器而异。图3-13所示为谷歌的Chrome的处理方式，即键入时检查拼写。其他浏览器则需要用户发出检查拼写的指示。

图3-13 Chrome中的拼写检查

警告

目前大多数流行浏览器中的拼写检查都会忽略前面介绍过的lang属性。它们的拼写检查基于用户所用操作系统中的语言设置或浏览器的语言设置。

3.5.12 style属性

style属性用来直接在元素身上定义CSS样式（这是在style元素或外部样式表中定义样式之外的一种选择）。代码清单3-24示范了其用法。

代码清单3-24 使用style属性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <a href="http://apress.com"style="background: grey; color:white; padding:10px">
                  Visit the Apress site
              </a>
            </body>
        </html>

第5章会对CSS作更多说明。第19章到第24章将介绍各种可用的样式选项。

3.5.13 tabindex属性

HTML页面上的键盘焦点可以通过按Tab键在各元素之间切换。用tabindex属性可以改变默认的转移顺序。代码清单3-25示范了其用法。

代码清单3-25 使用tabindex属性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
                <form>
                  <label>Name: <input type="text" name="name"tabindex="1"/></label>
                  <p/>
                  <label>City: <input type="text" name="city"tabindex="-1"/></label>
                  </p>
                  <label>Country: <input type="text" name="country"tabindex="2"/></label>
                  </p>
                  <input type="submit"tabindex="3"/>
                </form>
            </body>
        </html>

tabindex值为1的元素会第一个被选中。用户按一下Tab键后，tabindex值为2的那个元素会被选中，依次类推。tabindex设置为-1的元素不会在用户按下Tab键后被选中。上面示例中的tabindex设置的效果是：在按Tab键的过程中，键盘焦点从第一个input元素转到第三个，然后又转到Submit按钮，如图3-14所示。

图3-14 用tabindex属性控制焦点转移顺序

3.5.14 title属性

title属性提供了元素的额外信息。浏览器通常用这些东西显示工具提示。代码清单3-26示范了该属性的用法。

代码清单3-26 使用title属性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <a title="Apress Publishing"href="http://apress.com">Visit the Apress site</a>
            </body>
        </html>

图3-15显示了Chrome使用这个属性值的方式。

图3-15 显示为工具提示的title属性值

上一章目录下一章