不朽情缘娱乐网站

書名： HTML5權(quán)威指南
作者名： (美)Adam Freeman
本章字?jǐn)?shù)： 3227字
更新時(shí)間： 2020-01-10 15:29:13

3.5 HTML5全局屬性

本章前面講過如何用屬性配置元素。每種元素都能規(guī)定自己的屬性，這種屬性稱為局部屬性（local attribute）。第6章在開始詳細(xì)介紹各種元素的時(shí)候，將會(huì)列出它們具有的所有局部屬性并且示范用法。每一個(gè)局部屬性都可以用來控制元素獨(dú)有行為的某個(gè)方面。

屬性還有另一種類型：全局屬性（global attribute）。它們用來配置所有元素共有的行為。全局屬性可以用在任何一個(gè)元素身上，不過這不一定會(huì)帶來有意義或有用的行為改變。下面將會(huì)介紹所有全局屬性并示范其用法。有些全局屬性涉及本書后面才會(huì)詳細(xì)講到的更宏大的HTML特性。對于它們這里會(huì)提供相關(guān)章節(jié)的參照信息。

3.5.1 accesskey屬性

使用accesskey屬性可以設(shè)定一個(gè)或幾個(gè)用來選擇頁面上的元素的快捷鍵。代碼清單3-14是一個(gè)在簡單表單中使用這個(gè)屬性的例子。表單是第12章到第14章的主題，可以在讀過那幾章之后再來看看這個(gè)例子。

代碼清單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>

此例為三個(gè)input元素添加了accesskey屬性（input元素的說明見第12章和第13章）。其目的是讓網(wǎng)頁或網(wǎng)站的熟客可以使用快捷鍵訪問經(jīng)常用到的元素。用來觸發(fā)accesskey機(jī)制的按鍵組合因平臺(tái)而異，在Windows系統(tǒng)上是同時(shí)按下Alt鍵和accesskey屬性值對應(yīng)的鍵。圖3-5展示了accesskey屬性的效果。用戶可以按Alt+n將鍵盤焦點(diǎn)轉(zhuǎn)移到第一個(gè)input元素，在此輸入姓名。接下來按Alt+p將焦點(diǎn)轉(zhuǎn)到第二個(gè)input元素，在此輸入密碼。然后按Alt+s，這等于按下Log In按鈕以提交表單。

圖3-5 accesskey屬性的效果

3.5.2 class屬性

class屬性用來將元素歸類。這樣做通常是為了能夠找出文檔中的某一類元素或?yàn)槟骋活愒貞?yīng)用CSS樣式。代碼清單3-15示范了如何使用class屬性。

代碼清單3-15 使用class屬性

        <! DOCTYPE HTML>
        <html>
            <head>
                <title>Example</title>
            </head>
            <body>
                <a class="class1class2">Apress web site</a>
                <p/>
                <a class="class2otherclass">W3C web site</a>
            </body>
          </html>

一個(gè)元素可以被歸入多個(gè)類別，為此在class屬性值中提供多個(gè)用空格分隔的類名即可。類名可以隨便取，不過最好取點(diǎn)具有實(shí)際含義的，文檔中擁有許多元素類別時(shí)尤其如此。class屬性本身沒有任何作用。圖3-6是上面的示例在瀏覽器中的顯示結(jié)果，從中看到的只是幾個(gè)超鏈接。

圖3-6 兩個(gè)應(yīng)用了class屬性的元素

class屬性的一種利用方式是設(shè)計(jì)CSS樣式時(shí)以所定義的一個(gè)或多個(gè)類作為應(yīng)用目標(biāo)。代碼清單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" >Apress web site</a>
              <p/>
              <a class="class2 otherclass" >W3C web site</a>
            </body>
        </html>

此例用style元素定義了兩條樣式，第一條用于屬于class2類的元素，第二條用于屬于class1類的元素。

style元素的說明見第7章。第4章會(huì)介紹樣式以及將其應(yīng)用到元素上的各種方式。

將這個(gè)HTML文檔載入瀏覽器，所定義的樣式會(huì)被應(yīng)用到相關(guān)元素上，其效果如圖3-7所示。用類來確定樣式應(yīng)用對象的好處在于不用對涉及的元素一一重復(fù)同樣的樣式設(shè)置。

圖3-7 借助class屬性應(yīng)用樣式

腳本程序也可以利用class屬性。代碼清單3-17就是這樣一個(gè)例子。

代碼清單3-17 在腳本中使用class屬性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <a class="class1 class2" >Apress web site</a>
              <p/>
              <a class="class2 otherclass" >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類的元素并對其設(shè)置了一些樣式。script元素在第7章介紹。第19章到第24章介紹各種樣式屬性。第26章介紹如何查找文檔中的元素。前述腳本的效果見圖3-8。

圖3-8 在腳本中使用class屬性

3.5.3 contenteditable屬性

contenteditable是HTML5中新增加的屬性，其用途是讓用戶能夠修改頁面上的內(nèi)容。代碼清單3-18是一個(gè)簡單的例子。

代碼清單3-18 使用contenteditable屬性

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

此例把contenteditable屬性用在一個(gè)p元素（在第9章介紹）身上。該屬性值設(shè)置為true時(shí)用戶可以編輯元素內(nèi)容，設(shè)置為false時(shí)則禁止編輯。如果未設(shè)定其值，那么元素會(huì)從父元素處繼承該屬性的值。這個(gè)屬性的效果如圖3-9所示。用戶單擊那段文字后即可開始編輯其內(nèi)容。

圖3-9 用contenteditable屬性啟用編輯功能

3.5.4 contextmenu屬性

contextmenu屬性用來為元素設(shè)定快捷菜單。這種菜單會(huì)在受到觸發(fā)的時(shí)候（例如，Windows用戶用鼠標(biāo)右擊時(shí)）彈出來。在撰寫本書的時(shí)候，尚無支持這個(gè)屬性的瀏覽器。

3.5.5 dir屬性

dir屬性用來規(guī)定元素中文字的方向。其有效值有兩個(gè)：ltr（用于從左到右的文字）和rtl（用于從右到左的文字）。在代碼清單3-19中這兩個(gè)值都用上了。

代碼清單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支持拖放操作的方式之一，用來表示元素是否可被拖放。拖放操作的詳細(xì)說明見第37章。

3.5.7 dropzone屬性

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

3.5.8 hidden屬性

hidden是個(gè)布爾屬性，表示相關(guān)元素當(dāng)前毋需關(guān)注。瀏覽器對它的處理方式是隱藏相關(guān)元素。代碼清單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>

這個(gè)例子的復(fù)雜程度有點(diǎn)超標(biāo)。文檔中有一個(gè)table元素，它包含的一個(gè)tr元素（代表表格中的一行）設(shè)置了hidden屬性。文檔中還有一個(gè)button元素，按下它所代表的按鈕將會(huì)調(diào)用定義在script元素中的JavaScript函數(shù)toggleHidden。這段腳本程序的作用是：如果那個(gè)tr元素的hidden屬性存在就將其刪除，否則就添加該屬性。現(xiàn)在沒必要尋思其中原委。第11章會(huì)介紹table、tr、th和td元素。script元素和事件的介紹分別安排在第7章和第30章。

這里將這些東西燴作一鍋是為了演示hidden屬性的作用。圖3-11顯示了按下Toggle按鈕的結(jié)果。

圖3-11 刪除和添加hidden屬性的效果

把hidden屬性應(yīng)用到一個(gè)元素之后，瀏覽器干脆不去顯示該元素，仿佛HTML文檔中沒有這個(gè)元素。所以上面的例子中所顯示的表格的行數(shù)比實(shí)際的要少（應(yīng)用了hidden屬性時(shí)）。

3.5.9 id屬性

id屬性用來給元素分配一個(gè)唯一的標(biāo)識符。這種標(biāo)識符通常用來將樣式應(yīng)用到元素上或在JavaScript程序中用來選擇元素。代碼清單3-21示范了如何根據(jù)id屬性值應(yīng)用樣式。

代碼清單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 >Apress web site</a>
                <p/>
                <aid="w3clink">W3C web site</a>
              </body>
          </html>

為了根據(jù)id屬性值應(yīng)用樣式，需要在定義樣式時(shí)使用一個(gè)以#號開頭后接id屬性值的選擇器（selector）。CSS選擇器的詳細(xì)說明見第17章和第18章。第19章到第24章介紹了各種可以使用的樣式。上例中樣式應(yīng)用的效果如圖3-12所示。

圖3-12 根據(jù)元素的id屬性值應(yīng)用樣式

提示

id屬性還可以用來導(dǎo)航到文檔中的特定位置。倘若有個(gè)名為example.html的文檔中包含一個(gè)id屬性值為myelement的元素，那么使用example.html#myelement這個(gè)URL即可直接導(dǎo)航至該元素。該URL的末尾部分（#加上元素id值）稱為URL片段標(biāo)識符（fragment identifier）。

3.5.10 lang屬性

lang屬性用于說明元素內(nèi)容使用的語言。代碼清單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語言代碼。關(guān)于如何聲明語言的全面說明可參閱這個(gè)網(wǎng)址：http://tools.ietf.org/html/bcp47。不過要注意，語言是個(gè)復(fù)雜的技術(shù)性問題。

使用lang屬性的目的是讓瀏覽器調(diào)整其表達(dá)元素內(nèi)容的方式。比如說，改變使用的引號，在使用了文字朗讀器（或別的殘障輔助技術(shù)）的情況下正確發(fā)音。

lang屬性還可以用來選擇指定語言的內(nèi)容，以便只顯示用戶所選語言的內(nèi)容或?qū)ζ鋺?yīng)用樣式。

3.5.11 spellcheck屬性

spellcheck屬性用來表明瀏覽器是否應(yīng)該對元素的內(nèi)容進(jìn)行拼寫檢查。這個(gè)屬性只有用在用戶可以編輯的元素上時(shí)才有意義。代碼清單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屬性可以接受的值有兩個(gè)：true（啟用拼寫檢查）和false（禁用拼寫檢查）。至于拼寫檢查的實(shí)現(xiàn)方式則因?yàn)g覽器而異。圖3-13所示為谷歌的Chrome的處理方式，即鍵入時(shí)檢查拼寫。其他瀏覽器則需要用戶發(fā)出檢查拼寫的指示。

圖3-13 Chrome中的拼寫檢查

警告

目前大多數(shù)流行瀏覽器中的拼寫檢查都會(huì)忽略前面介紹過的lang屬性。它們的拼寫檢查基于用戶所用操作系統(tǒng)中的語言設(shè)置或?yàn)g覽器的語言設(shè)置。

3.5.12 style屬性

style屬性用來直接在元素身上定義CSS樣式（這是在style元素或外部樣式表中定義樣式之外的一種選擇）。代碼清單3-24示范了其用法。

代碼清單3-24 使用style屬性

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

第5章會(huì)對CSS作更多說明。第19章到第24章將介紹各種可用的樣式選項(xiàng)。

3.5.13 tabindex屬性

HTML頁面上的鍵盤焦點(diǎn)可以通過按Tab鍵在各元素之間切換。用tabindex屬性可以改變默認(rèn)的轉(zhuǎn)移順序。代碼清單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的元素會(huì)第一個(gè)被選中。用戶按一下Tab鍵后，tabindex值為2的那個(gè)元素會(huì)被選中，依次類推。tabindex設(shè)置為-1的元素不會(huì)在用戶按下Tab鍵后被選中。上面示例中的tabindex設(shè)置的效果是：在按Tab鍵的過程中，鍵盤焦點(diǎn)從第一個(gè)input元素轉(zhuǎn)到第三個(gè)，然后又轉(zhuǎn)到Submit按鈕，如圖3-14所示。

圖3-14 用tabindex屬性控制焦點(diǎn)轉(zhuǎn)移順序

3.5.14 title屬性

title屬性提供了元素的額外信息。瀏覽器通常用這些東西顯示工具提示。代碼清單3-26示范了該屬性的用法。

代碼清單3-26 使用title屬性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <a title="Apress Publishing">Visit the Apress site</a>
            </body>
        </html>

圖3-15顯示了Chrome使用這個(gè)屬性值的方式。

圖3-15 顯示為工具提示的title屬性值

官术网_书友最值得收藏!

HTML5權(quán)威指南