- 精通HTML+CSS網頁開發與制作
- 車云月
- 1803字
- 2019-12-12 17:15:52
1.1 HTML基本概念
互聯網上的信息是以網頁的形式呈現給用戶的，因此，網頁是網絡信息傳遞的載體。
網頁文件是用一種標簽語言書寫的，這種語言稱為HTML（Heyper Text Markup Language，超文本標記語言），是用來描述網頁文檔的一種置標語言。HTML文件以.htm或.html為擴展名。
1.1.1 什么是HTML
HTML不是一種編程語言，而是一種描述性的標記語言（Markup Language），用于描述網頁的內容和結構。HTML最基本的語法是：
標簽通常是成對出現，有一個開始標簽就對應有一個結束標簽。結束標簽只是在開始標簽的前面加一個斜杠“/”。當瀏覽器收到HTML文件后，就會解釋里面的標簽，然后把標簽相對應的功能表達出來，從而顯示瀏覽網頁的內容。
例如，在HTML中，用<h1></h1>標簽來定義一個文章的標題，用<br/>標簽來定義一個換行符。當瀏覽器遇到<h1>xxx</h1>標簽時，會把該標簽中的內容（xxx）自動形成一個標題。當遇到<br/>標簽時會自動換行，標簽中的“/”可以省略，但為了代碼的規范性，一般建議加上。
1.1.2 HTML的發展歷程
HTML主要用于描述超文本中內容的顯示方式。標記語言從誕生到今天，經歷了二十幾年的不斷更新與改進，已經越來越完善，經歷的版本及發布日期如表1.1所示。
表1.1 HTML發展史
1.1.3 HTML與XHTML的重要區別
通過HTML的發展歷史，可以知道這套語言有兩個版本，即XHTML和HTML。雖然目前瀏覽器都兼容HTML，但是為了使網頁能夠符合標準，應該盡量使用XHTML規范來編寫代碼，需要注意的事項有：
（1）在XHTML中，標簽名必須小寫。在HTML中，標簽名稱可以大寫，也可以小寫。
（2）在XHTML中，屬性名稱必須小寫。在HTML中，屬性名稱不區分大小寫。
（3）在XHTML中，標簽必須嚴格嵌套。在HTML中，對標簽的嵌套沒有嚴格的規定。
（4）在XHTML中，標簽必須封閉。在HTML中，標簽不封閉也是正確的，即標簽可以不成對出現。例如，“<p>我沒有結束標記”和“<p>我有開始標記和結束標記</p>”，在瀏覽器中顯示的結果是完全相同的；但是，在XHTML中，第一條語句是不被允許的（不能正常顯示），必須像第二條語句那樣，嚴格地使標簽封閉。
（5）在XHTML中，即使是空元素的標簽也必須封閉。這里說的空標簽，就是指那些像<img><br><hr>等不對稱的標簽，它們也必須閉合，在HTML中，這類標簽書寫為<img>或<img />均是正確的；但在XHTML規范中，必須寫為<img />才正確。
（6）在XHTML中，屬性值必須使用雙引號引起來。在HTML中，屬性值可以不必使用雙引號。
（7）在XHTML中，屬性值必須使用完整形式。在HTML中，一些屬性經常使用簡寫方式設定屬性值，如<input disabled>；而在XHTML中，必須完整地寫為<input disabled="disabled"/>。
1.1.4 HTML文件基本結構
完整的HTML結構包括頭部、主體等，頁面的各部分內容都在對應的標簽中。
一個HTML文件的基本結構如示例1.1所示。
示例1.1：
1．DOCTYPE聲明
DOCTYPE是用來聲明文檔類型的，聲明文檔為HTML文檔結構，用來檢驗是否符合Web相關標準，同時告訴瀏覽器使用哪種規范來解釋這個文檔中的代碼。DOCTYPE聲明必須位于HTML文檔的第一行。
2．<html>標簽
<html>標簽是HTML語言中最基本的單位，一個網頁以<html>標簽開始、以</html>標簽結束。
3．<head>標簽
<head>標簽用于定義文檔的頭部，是所有頭部元素的容器。<head>標簽中的元素可以引用腳本，指示瀏覽器在哪里找到樣式表，提供元信息等。文檔的頭部描述了文檔的各種屬性和信息，絕大多數文檔頭部包含的數據都不會真正作為內容顯示給用戶。
4．<title>標簽
<title>標簽描述網頁的標題，類似一篇文章的標題，一般為一個簡潔的主題，并能吸引讀者有興趣讀下去，例如，百度首頁，對應的網頁標題為：
在瀏覽器中的效果如圖1.1所示。
圖1.1 <title>標簽的使用
5．<meta>標簽
<meta>標簽描述網頁具體的摘要信息，包括文檔內容類型、字符編碼信息、搜索關鍵字、網站提供的功能和服務的詳細描述等。<meta>標簽描述的內容并不顯示，其目的是方便瀏覽器解析或利于搜索引擎搜索，采用“名稱／值”對的方式描述摘要信息。
其中，屬性“http-equiv”提供“名稱／值”中的名稱，“content”提供“名稱／值”中的值，HTML代碼的含義如下。
名稱：content-type（文檔內容類型）。
值：text/html。
charset=UTF-8（html文檔的字符編碼為國際標準字符），charset表示字符集編碼。常用的編碼有以下幾種。
GB2312：簡體中文，一般用于包含中文和英文的頁面。
ISO-885901：純英文，一般用于只包含英文的頁面。
BIG5：繁體，一般用于帶有繁體字的頁面。
UTF-8：國際通用的字符編碼，同樣適用于中文和英文的頁面。與GB2312編碼相比，國際通用性更好，但字符編碼的壓縮比較低，對網頁性能有一定的影響。
當網頁打開后出現亂碼的原因就是沒有設置<meta>標簽、字符編碼造成的，從這里可以看到，一個網頁的字符編碼是多么重要，因此在制作網頁時，一定不要忘記設置網頁編碼，以免出現頁面亂碼問題。
6．<body>標簽
<body>標簽是用在網頁中的一種HTML標簽，表示網頁的主體部分，也就是用戶可以看到的內容，可以包含文本、圖片、音頻、視頻等各種內容。