- HTML5權威指南
- (美)Adam Freeman
- 1778字
- 2020-01-10 15:29:12
3.1 使用元素
代碼清單3-1是一個應用于文本內容的HTML元素的簡例。
代碼清單3-1 HTML元素示例
I like<code>apples</code>and oranges.
這里用粗體標明元素。該元素分為三部分。其中有兩部分稱為標簽(tag):開始標簽<code>和結束標簽</code>。夾在兩個標簽之間的是元素的內容(本例中為單詞apples)。兩個標簽連同它們之間的內容構成code元素。其結構剖析見圖3-1。

圖3-1 HTML元素剖析
元素是一種用來向瀏覽器說明文檔內容的工具。其效果體現在內容之上。不同的元素有不同的確切含義。例如,前述code元素代表的是計算機代碼片段。
提示
元素名不區分大小寫。<CODE>、<code>甚至<CoDe>都會被瀏覽器視為code元素的開始標簽。一般來說,應該認定某種大小寫格式并且貫徹始終。近年來更常見的風格是全部使用小寫。本書采用的就是這種格式。
HTML定義了各種各樣的元素,它們在HTML文檔中起著各不相同的作用。code元素是語義元素的一個例子。語義元素可以用來說明內容的含義以及內容的不同部分之間的關系。第8章還會對此做進一步說明。下面的圖3-2顯示了code元素的效果。

圖3-2 code元素在瀏覽器中的顯示效果
注意,瀏覽器不會顯示元素的標簽,它的任務是解讀HTML文檔,然后向用戶呈現一個體現了HTML元素作用的視圖。
將內容與呈現分開
有些HTML元素會對呈現形式產生影響。瀏覽器遇到這種元素時,會改變向用戶呈現文檔內容的方式。code元素就是一例。瀏覽器遇到該元素時,會用等寬字體顯示元素的內容,這可以從圖3-2中看出來。
用HTML元素控制內容呈現形式的做法如今受到強烈反對。現在的觀點是應該用HTML元素說明文檔內容的結構和含義,用CSS(第4章將會介紹)控制內容呈現給用戶的形式。
會影響呈現形式的那些元素通常產生于HTML的早期版本,當時將內容與其呈現形式分開這個理念尚未像如今一樣得以嚴格實施。這些元素在瀏覽器中呈現時有默認的呈現樣式(例如code元素通常使用等寬字體),不過可以用CSS改變其默認樣式。第4章會談到這個問題。
3.1.1 了解本章用到的元素
為了讓讀者對HTML有個初步的認識,我需要用到一些后面各章中才會講到的元素。表3-2列出了這些元素及其簡要說明,還有其全面說明所在的章編號。
表3-2 元素摘要

3.1.2 使用空元素
元素的開始和結束標簽之間并非一定要有內容。沒有內容的元素稱為空元素。代碼清單3-2所示就是一例。
代碼清單3-2 空HTML元素
I like<code></code>apples and oranges.
有些元素為空時沒有意義(code就是其中之一),即便如此,它也是有效的HTML代碼。
3.1.3 使用自閉合標簽
空元素可以更簡潔地只用一個標簽表示。如代碼清單3-3所示。
代碼清單3-3 只用一個標簽表示空元素
I like <code/> apples and oranges.
此例將開始標簽和結束標簽合二為一。通常用來表示結束標簽開始的斜杠符號(/)在此被放到標簽的末尾。代碼清單3-2和代碼清單3-3中的元素等價,但只用一個標簽的表示法更為簡潔。
3.1.4 使用虛元素
有些元素只能使用一個標簽表示,在其中放置任何內容都不符合HTML規范。這類元素稱為虛元素(void element)hr就是這樣一個元素。它是一種組織性元素(第9章將介紹一些其他的這類元素),用來表示內容中段落級別的終止。虛元素有兩種表示法。第一種只使用開始標簽,如代碼清單3-4所示。
代碼清單3-4 用單個開始標簽表示虛元素
I like apples and oranges.
<hr>
Today was warm and sunny.
瀏覽器知道hr是虛元素,所以不會等待其結束標簽出現。第二種表示法在此基礎上加了一個斜杠符號,其形式與空元素一致,如代碼清單3-5所示。
代碼清單3-5 用空元素結構表示虛元素
I like apples and oranges.
<hr />
Today was warm and sunny.
我更喜歡這種表示法,并且會在本書中采用。順便提一句,hr元素也是一個具有呈現形式含義的元素,它會顯示為一條橫線(這也是其名稱的由來)。在圖3-3中可以看到hr元素的默認表現形式。

圖3-3 hr元素的默認表現形式
用不用非強制使用的開始和結束標簽
許多HTML5元素在某些條件下可以省略其中一個標簽。例如,html元素(第7章將會講到)的結束標簽在此情況下就可以省略:“該元素后面沒有緊跟著一條注釋,且該元素包含著一個非空或者其開始標簽未曾省略的body元素”。這段引文出自一份正式的HTML5規范文檔。你不妨讀讀這些規范(可從w3c.org獲得),但是要注意:它們都是以這樣一種“活潑”的風格寫就。
標記語言能有這種靈活性挺棒,不過這也會把人弄糊涂,而且會給維護工作帶來麻煩HTML文檔并非只由瀏覽器處理,你的同事和未來的你(在以后回頭修整和升級自己的應用程序時)也會閱讀它們。瀏覽器也許能明白某個標簽為什么會被省略,但你的同事未必能輕松看出來,就算你自己以后回頭修改代碼也是如此。出于這個原因,本書不會詳述前面所說的那些特殊規定,除非有必要破例(屆時會有解釋),否則書中的元素都會有開始和結束標簽。
- 深度實踐OpenStack:基于Python的OpenStack組件開發
- LabVIEW Graphical Programming Cookbook
- 深入淺出Java虛擬機:JVM原理與實戰
- Mastering Selenium WebDriver
- 編程珠璣(續)
- Practical Windows Forensics
- PHP網絡編程學習筆記
- Extending Puppet(Second Edition)
- 物聯網系統架構設計與邊緣計算(原書第2版)
- 超好玩的Scratch 3.5少兒編程
- Java高級程序設計
- Java面向對象程序設計教程
- HTML5程序開發范例寶典
- Python全棧開發:數據分析
- 編譯原理學習與實踐指導