HTML5規(guī)范明確指出：使用元素應(yīng)該完全從元素的語義出發(fā)。但這類元素中有些元素的含義非常明確，有些則比較含糊。在元素的使用上最好做到“將呈現(xiàn)工作交給CSS打理”，但這并不是絕對(duì)的，有時(shí)候只要保持HTML文檔中的一致性就好。
生成超鏈接
a元素用于生成超鏈接，a元素有6個(gè)局部屬性：
1）href：指定a元素所指資源的URL；
2）hreflang：說明所鏈接資源使用的語言；
3）media：說明說鏈接資源用于哪種設(shè)備，同style元素的media屬性；
4）rel：說明文檔與所鏈接資源的關(guān)系類型，同link元素的rel屬性；
5）target：指定用于打開所鏈接資源的瀏覽環(huán)境；
6）type：說明所鏈接資源的MIME類型（比如text/html）。
生成指向外部的超鏈接
<body> I like <a href="http://en.widipedia.org/wiki/Apples">apples</a> and <a href="http://en.wikipeida.org/wiki/Orange_(fruit)">oranges</a>.</body>
URL中用得最多的協(xié)議就是http，但瀏覽器也支持其它協(xié)議，例如：https和ftp。如果想引用一個(gè)電子郵箱地址，可以使用mailto協(xié)議，如：mailto:[email protected]。
使用相對(duì)URL
<body> ...... You can see other fruits I like <a href="fruitlist.html">here</a>.</body>
默認(rèn)情況下，瀏覽器會(huì)假定目標(biāo)資源與當(dāng)前文檔位于同一位置，不過可以通過base元素提供一個(gè)基礎(chǔ)URL加以改變。
生成內(nèi)部超鏈接
該方式用于將統(tǒng)一文檔中的另一個(gè)元素移入視野，需要是使用ID選擇表達(dá)式：#<id>。
<body> ...... You can see other fruits I like <a href="#fruits">here</a>. ...... <p id="fruits"> I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes. </p></body>
用戶點(diǎn)擊鏈接，文檔就會(huì)滾動(dòng)到能看到id為fruits的元素的位置。
設(shè)置瀏覽環(huán)境
target屬性用于告訴瀏覽器希望將所鏈接的資源顯示在哪里。默認(rèn)情況下，瀏覽器使用當(dāng)前文檔的窗口、標(biāo)簽頁或窗框，所以新文檔會(huì)取代現(xiàn)在顯示的文檔，但你可以設(shè)置其它值：
1）_blank：在新窗口或標(biāo)簽頁中打開文檔；
2）_parent：在父窗框（frameset）中打開文檔；
3）_self：在當(dāng)前窗口中打開文檔（默認(rèn)）；
4）_top：在頂層窗口打開文檔；
5）<frame>：在指定窗框中打開文檔，這里的<frame>是表示窗口的名稱。
下面通過一個(gè)例子幫助你理解frame。假定TestFrame.html文檔中的代碼如下：
<html><frameset cols="50%,50%"> <frame src="test.html" /> <frame name="frame1" /></frameset></html>
這里定義了一個(gè)frameset，里面包含兩個(gè)frame，寬度各占一半，第一個(gè)frame指向了一個(gè)html文檔，第二個(gè)frame被賦予了名稱frame1。test.html的內(nèi)容如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Your page title</title> <link href="test.css" rel="stylesheet" id="test"/></head><body> <a I like <b>apples</b> and <b>oranges</b>.</body>
b元素的默認(rèn)樣式是粗體。
em元素
em元素表示對(duì)一段文字的強(qiáng)調(diào)，可以用來向讀者提供關(guān)于句子或段落含義的一種語境。
<body> <em>I</em> like <b>apples</b> and <b>oranges</b>.</body>
em元素的習(xí)慣樣式是斜體字。此例對(duì)句子開頭的I進(jìn)行了強(qiáng)調(diào)。
i元素
i元素表示一段文字與周圍內(nèi)容有本質(zhì)區(qū)別，常用于外文詞語、科技術(shù)語甚至某人的想法。
<body> <em>I</em> like <b>apples</b> and <b>oranges</b>. My favorite kind of orange is the mandarin, properly known as <i>citrus reticulata</i>.</body>
i元素的習(xí)慣樣式是斜體，同em元素。
s元素
s元素用來表示一段文字不再正確或準(zhǔn)確，習(xí)慣樣式是在文字上顯示一條刪除線。
<body> <em>I</em> like <b>apples</b> and <b>oranges</b>. My favorite kind of orange is the mandarin, properly known as <i>citrus reticulata</i>. Oranges at my local store cost <s>$1 eanch</s> $2 for 3.</body>
strong元素
strong元素表示一段重要文字。
<body> I like apples and oranges. <strong>Warning:</strong> Eating too many oranges can give you heart burn.</body>
strong元素的樣式同b元素。
u元素
u元素讓一段文字從周圍內(nèi)容中凸現(xiàn)出來，但并不表示強(qiáng)調(diào)或其重要性有所增加。效果就是為文字添加下劃線。
<body> I like apples and oranges. <strong>Warning:</strong> Eating <u>too many</u> oranges can give you heart burn.</body>
由于u元素的習(xí)慣樣式與a元素類似，為了防止混淆，應(yīng)該盡量避免使用u元素。
small元素
HTML5中使用small標(biāo)簽指定細(xì)則，通常包括免責(zé)聲明、注意事項(xiàng)、法律限制、版權(quán)信息等。有時(shí)還可以用它來表示署名，或者滿足許可要求。
<body> <p>Order now to receive free shipping. <small>(Some restrictions may apply.) </small></p> ... <footer role="contentinfo"> <p><small>© 2013 The Super Store. All Rights Reserved. </small></p> </footer></body>
注意：small只適用于短語，不要用它標(biāo)記長(zhǎng)的法律聲明，如“使用條款”和“隱私政策”頁面。
sub和sup元素
sub和sup元素分別用于表示下標(biāo)和上標(biāo)。
<body> The point x<sub>10</sub> is the 10<sup>th</sup> point.</body>
換行
有兩個(gè)元素可以用來控制內(nèi)容換行：br和wbr元素。
br元素
br元素會(huì)引起一次換行，br元素只宜用在換行也是內(nèi)容的一部分的情況，切勿用它創(chuàng)建段落或別的內(nèi)容組。
<body> I WANDERED lonely as a cloud<br/> That floats on high 0'er vales and hills,<br/> When all at once I saw a crowd,<br> A host, of golden daffodils;</body>
wbr元素
HTML5新增，用于表示長(zhǎng)度超過當(dāng)前瀏覽器窗口的內(nèi)容適合再次換行，究竟換不換行由瀏覽器決定，wbr元素只不過是對(duì)恰當(dāng)?shù)膿Q行位置的建議而已。
<body> This is a very long word: Super<wbr>califragilistic<wbr>expialidocious.</body>
不使用wbr元素時(shí)，瀏覽器會(huì)將長(zhǎng)單詞作為一個(gè)整體進(jìn)行處理，而使用了wbr元素，瀏覽器則可以選擇在建議處換行。使用wbr元素，就是告訴瀏覽器一個(gè)單詞最適合在什么地方那個(gè)拆分。
表示輸入和輸出
1）code：表示計(jì)算機(jī)代碼片段
2）var：在編程語境中表示變量，也可表示一個(gè)供讀者在想象中插入一個(gè)指定值的占位符
3）samp：表示程序或計(jì)算機(jī)系統(tǒng)的輸出
4）kbd：表示用戶輸入
<body> <p> <code>var fruits = ["apples", "oranges", "mangoes", "cherries"];<br> document.writeln("I like " + fruits.length + " fruits");</code> </p> <p>The variable in this example is <var>fruits</var></p> <p>The output from the code is: <samp>I like 4 fruits</samp></p> <p>When prompted for my favorite fruit, I typed: <kbd>cherries</kbd></body>使用標(biāo)題引用、引文、定義和縮寫
abbr元素
表示縮寫，其title屬性表示該縮寫代表的完整詞語。
<body> I like apples and oranges. The <abbr <p> The <dfn </p></body>
該元素沒有習(xí)慣樣式，因此其內(nèi)容看上去沒有什么特別之處。
q元素
表示引自他處的內(nèi)容。q元素的cite屬性可以用來指定來源文章的URL。
<body> <p> <q cite="http://en.wikipedia.org/wiki/Apple">The <dfn </p></body>
q元素的習(xí)慣樣式是在引文前后生成引號(hào)。
cite元素
表示所引用作品的標(biāo)題。
<body> My favorite book on fruit is <cite>Fruit: Edible, Inedible, Incredible</cite> by Stuppy & Kesseler</body>
其習(xí)慣樣式是斜體。
使用語言元素
ruby、rt和rp元素
ruby元素表示一段包含注音符號(hào)的文字，需要與rt元素和rp元素搭配使用，rt元素用來標(biāo)記注音符號(hào)，rp元素則用來標(biāo)記供不支持注音符號(hào)特性的瀏覽器顯示在注音符號(hào)前后的括號(hào)。
<body> <ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby> <ruby>魅<rp>(</rp><rt>mei</rt><rp>)</rp></ruby></body>
當(dāng)顯示在支持注音符號(hào)的瀏覽器中時(shí)，rp元素及其內(nèi)容會(huì)被忽略，rt元素的內(nèi)容則會(huì)作為注音符號(hào)顯示。而在不支持注音符號(hào)的瀏覽器中顯示該文檔，那么rp和rt元素的內(nèi)容都會(huì)被顯示出來。
bdo元素
用來設(shè)置其內(nèi)容中文字的方向。bdo元素必須加上dir屬性，支持的值為：1）rtl（從右到左）；2）ltr（從左到右）。
<body> <p> This is left-to-right: <bdo dir="ltr">I like oranges</bdo> </p> <p> This is right-to-left: <bdo dir="rtl">I like oranges</bdo> </p></body>
其他文本元素
span元素
本身沒有任何含義，通常用來把一些全局屬性應(yīng)用到一段內(nèi)容上。
<body> I like <span class="fruit">apples</span> and <span class="fruit">oranges</span>.</body>
mark元素
HTML5中新增的，用來表示因?yàn)榕c某段上下文相關(guān)而被突出顯示的一段文字。
<body> <p> I would like a <mark>pair</mark> of <mark>pears</mark> </p></body>
ins元素和del元素
ins元素和del元素可以分別用來表示文檔中添加和刪除的文字。
<body> <p> <del>I can <mark>sea</mark> the <mark>see</mark></del> <ins>I can <mark>see</mark> the <mark>sea</mark></ins> </p></body>
time元素
表示時(shí)間和日期。如果布爾屬性pubdate存在，那么time元素表示的是整個(gè)HTML文檔或離該元素最近的article元素的發(fā)布日期。datetime屬性以RFC3339規(guī)定的格式指定日期和時(shí)間。有了datetime，就能在元素中以便于閱讀的形式設(shè)置日期或時(shí)間，同時(shí)又確保計(jì)算機(jī)能無歧義地解析指定的日期或時(shí)間。
<body> I still remember the best apple I ever tasted. I bought it at <time datetime="15:00">3 o'clock</time> on <time datetime="1984-12-7">December 7th</time>.</body>
time元素可以不包含datetime屬性，這時(shí)需要提供具備有效的機(jī)器可讀格式的時(shí)間和日期，當(dāng)時(shí)間和日期格式不規(guī)范時(shí)，則需要使用datetime屬性來指定文本內(nèi)容的機(jī)器可讀格式。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
