HTML5規范明確指出:使用元素應該完全從元素的語義出發。但這類元素中有些元素的含義非常明確,有些則比較含糊。在元素的使用上最好做到將呈現工作交給CSS打理,但這並不是絕對的,有時候只要保持HTML文檔中的一致性就好。
生成超鏈接a元素用於生成超鏈接,a元素有6個局部屬性:
1)href:指定a元素所指資源的URL;
2)hreflang:說明所鏈接資源使用的語言;
3)media:說明說鏈接資源用於哪種設備,同style元素的media屬性;
4)rel:說明文檔與所鏈接資源的關係類型,同link元素的rel屬性;
5)target:指定用於打開所鏈接資源的瀏覽環境;
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中用得最多的協議就是http,但瀏覽器也支持其它協議,例如:https和ftp。如果想引用一個電子郵箱地址,可以使用mailto協議,如:mailto:[email protected]。
使用相對URL<body> ...... You can see other fruits I like <a href=fruitlist.html>here</a>.</body>
默認情況下,瀏覽器會假定目標資源與當前文檔位於同一位置,不過可以通過base元素提供一個基礎URL加以改變。
生成內部超鏈接該方式用於將統一文檔中的另一個元素移入視野,需要是使用ID選擇表達式:#<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>
用戶點擊鏈接,文檔就會滾動到能看到id為fruits的元素的位置。
設置瀏覽環境target屬性用於告訴瀏覽器希望將所鏈接的資源顯示在哪裡。默認情況下,瀏覽器使用當前文檔的窗口、標籤頁或窗框,所以新文檔會取代現在顯示的文檔,但你可以設置其它值:
1)_blank:在新窗口或標籤頁中打開文檔;
2)_parent:在父窗框(frameset)中打開文檔;
3)_self:在當前窗口中打開文檔(默認);
4)_top:在頂層窗口打開文檔;
5)<frame>:在指定窗框中打開文檔,這裡的<frame>是表示窗口的名稱。
下面通過一個例子幫助你理解frame。假定TestFrame.html文檔中的代碼如下:
<html><frameset cols=50%,50%> <frame src=test.html /> <frame name=frame1 /></frameset></html>
這裡定義了一個frameset,裡麵包含兩個frame,寬度各佔一半,第一個frame指向了一個html文檔,第二個frame被賦予了名稱frame1。 test.html的內容如下:
<!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元素的默認樣式是粗體。
em元素em元素表示對一段文字的強調,可以用來向讀者提供關於句子或段落含義的一種語境。
<body> <em>I</em> like <b>apples</b> and <b>oranges</b>.</body>
em元素的習慣樣式是斜體字。此例對句子開頭的I進行了強調。
i元素i元素表示一段文字與周圍內容有本質區別,常用於外文詞語、科技術語甚至某人的想法。
<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元素的習慣樣式是斜體,同em元素。
s元素s元素用來表示一段文字不再正確或準確,習慣樣式是在文字上顯示一條刪除線。
<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元素讓一段文字從周圍內容中凸現出來,但並不表示強調或其重要性有所增加。效果就是為文字添加下劃線。
<body> I like apples and oranges. <strong>Warning:</strong> Eating <u>too many</u> oranges can give you heart burn.</body>
由於u元素的習慣樣式與a元素類似,為了防止混淆,應該盡量避免使用u元素。
small元素HTML5中使用small標籤指定細則,通常包括免責聲明、注意事項、法律限制、版權信息等。有時還可以用它來表示署名,或者滿足許可要求。
<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只適用於短語,不要用它標記長的法律聲明,如使用條款和隱私政策頁面。
sub和sup元素sub和sup元素分別用於表示下標和上標。
<body> The point x<sub>10</sub> is the 10<sup>th</sup> point.</body>
換行
有兩個元素可以用來控制內容換行:br和wbr元素。
br元素br元素會引起一次換行,br元素只宜用在換行也是內容的一部分的情況,切勿用它創建段落或別的內容組。
<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新增,用於表示長度超過當前瀏覽器窗口的內容適合再次換行,究竟換不換行由瀏覽器決定,wbr元素只不過是對恰當的換行位置的建議而已。
<body> This is a very long word: Super<wbr>califragilistic<wbr>expialidocious.</body>
不使用wbr元素時,瀏覽器會將長單詞作為一個整體進行處理,而使用了wbr元素,瀏覽器則可以選擇在建議處換行。使用wbr元素,就是告訴瀏覽器一個單詞最適合在什麼地方那個拆分。
表示輸入和輸出1)code:表示計算機代碼片段
2)var:在編程語境中表示變量,也可表示一個供讀者在想像中插入一個指定值的佔位符
3)samp:表示程序或計算機系統的輸出
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>使用標題引用、引文、定義和縮寫abbr元素
表示縮寫,其title屬性表示該縮寫代表的完整詞語。
<body> I like apples and oranges. The <abbr <p> The <dfn </p></body>
該元素沒有習慣樣式,因此其內容看上去沒有什麼特別之處。
q元素表示引自他處的內容。 q元素的cite屬性可以用來指定來源文章的URL。
<body> <p> <q cite=http://en.wikipedia.org/wiki/Apple>The <dfn </p></body>
q元素的習慣樣式是在引文前後生成引號。
cite元素表示所引用作品的標題。
<body> My favorite book on fruit is <cite>Fruit: Edible, Inedible, Incredible</cite> by Stuppy & Kesseler</body>
其習慣樣式是斜體。
使用語言元素ruby、rt和rp元素ruby元素表示一段包含注音符號的文字,需要與rt元素和rp元素搭配使用,rt元素用來標記註音符號,rp元素則用來標記供不支持注音符號特性的瀏覽器顯示在註音符號前後的括號。
<body> <ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby> <ruby>魅<rp>(</rp><rt> mei</rt><rp>)</rp></ruby></body>
當顯示在支持注音符號的瀏覽器中時,rp元素及其內容會被忽略,rt元素的內容則會作為註音符號顯示。而在不支持注音符號的瀏覽器中顯示該文檔,那麼rp和rt元素的內容都會被顯示出來。
bdo元素用來設置其內容中文字的方向。 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元素
本身沒有任何含義,通常用來把一些全局屬性應用到一段內容上。
<body> I like <span class=fruit>apples</span> and <span class=fruit>oranges</span>.</body>mark元素
HTML5中新增的,用來表示因為與某段上下文相關而被突出顯示的一段文字。
<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元素
表示時間和日期。如果布爾屬性pubdate存在,那麼time元素表示的是整個HTML文檔或離該元素最近的article元素的發布日期。 datetime屬性以RFC3339規定的格式指定日期和時間。有了datetime,就能在元素中以便於閱讀的形式設置日期或時間,同時又確保計算機能無歧義地解析指定的日期或時間。
<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屬性,這時需要提供具備有效的機器可讀格式的時間和日期,當時間和日期格式不規範時,則需要使用datetime屬性來指定文本內容的機器可讀格式。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。