慕少3449830 ·語法簡介
本章概括介紹 HTML 的標簽語法，以及 HTML 語言和傳統語言的差異。
1. HTML來歷
1969年，IBM 的技術人員 Charles Goldfarh 和 Edward Mosher 等人一起發明了通用標記語言 GML（Generalized Marked Language）。1985年在英國成立了國際 SGML 用戶組織，在1986年，SGML 成為國際標準ISO8879：信息處理標準通用標記語言（Information processing Text and office system Standard generalized markup language）。HTML 和 XML 派生于 SGML，XML 可以被認為是它的一個子集，而 HTML 是它的一個應用。為了告訴瀏覽器我們需要展示什么內容，HTML 定義了一整套符號標記規范，這些規范包括
- 設置文字的格式；
- 創建列表；
- 顯示圖片；
- 顯示多媒體；
- 顯示超鏈接；
- 等等。
2.標準
HTML3.2 以前的標準是由 IETF 制定。IETF 互聯網工程任務組（The Internet Engineering Task Force），成立于1985年底，是全球互聯網最具權威的技術標準化組織，主要任務是負責互聯網相關技術規范的研發和制定，當前絕大多數國際互聯網技術標準出自IETF。 IETF 的工作成果主要以RFC文檔的途徑發布。
HTML 3.2 開始，由 W3C 制定標準。W3C 萬維網聯盟（ The World Wide Web Consortium ）創建于1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。到目前為止，W3C 已發布了200多項影響深遠的Web技術標準及實施指南，如廣為業界采用的超文本標記語言（ HTML ）、可擴展標記語言（ XML ）以及幫助殘障人士有效獲得Web內容的信息無障礙指南（ WCAG ）等，有效促進了Web技術的互相兼容，對互聯網技術的發展和應用起到了基礎性和根本性的支撐作用。
3.HTML和編譯型語言的區別
計算機語言分成解釋型語言和編譯型語言兩種。
我們下面來展開講一下解釋型語言和編譯型語言兩者的區別：
在說兩區別之前我們先來講一下計算機怎么把代碼翻譯成計算機能看得懂的語言（翻譯成機器碼）。
眾所周知，計算機 CPU 的集成電路中，除了電容、電阻、電感就是晶體管了，每個晶體管相當于一個開關，理論上 CPU 只能存儲識別兩個標識符，那就是 0 和 1，所以說 CPU 識別的指令集只能由 0 和 1 組合。那么所有的計算機語言想要 CPU 能看得懂，必須翻譯成 0/1 代碼才行，這個由 0/1 組成的代碼叫做機器碼。但是機器碼相對于人來說過于繁瑣，所以就有人發明了高級語言、低級語言等等，這些語言的分級是根據它的語法是貼近人還是貼近機器來區分的，越貼近人它就越高級，越貼近機器它就越低級，但是最終想要 CPU 可以識別都需要翻譯成機器碼。
典型的低級語言包括剛剛提到的機器碼、匯編語言、c 等，高級語言包括 PHP、c#、JavaScript、Java、Python 等等。
什么是編譯型語言和解釋性語言呢？
剛剛我們提到翻譯成機器碼，這個翻譯的過程就叫做編譯或解釋。編譯型語言是指通過編譯器翻譯成完整的機器碼，然后通過 CPU 去執行。
而解釋型語言是指通過一個虛擬機的方式一行行的翻譯，翻譯一行執行一行；還有一種方式是混合型，介于兩者之間。常見的編譯型語言包括 c++、c、rust等，解釋型語言包括 JavaScript、PHP、HTML 等等，混合型包括 Python、Java等。
4. 標簽語法和屬性
4.1 HTML文檔擴展名
HTML 以文檔的形式存儲，文檔的后綴可以是 .html .htm .xhtml，有時也會看到 php/asp/jsp 等類型的網頁后綴，這種是通過服務器的 CGI 動態解析過的網頁，網頁內容也是 HTML 格式，只不過網頁后綴是根據服務器的 CGI 網關的不同來定義的。不同的后綴形式可能在瀏覽器的解釋結果不相同，在此不做深入討論。
4.2 HTML標簽
標簽有兩種定義方式：
- 閉合型標簽：<標簽>內容</標簽>
- 自閉合標簽： <標簽 />或者<標簽>
標簽不區分大小寫，工作中通常使用小寫，因為日常寫代碼的時候 IDE 通常設置小寫。
<div>這是一個閉合標簽</div> <!-- 閉合標簽 -->
<DIV>跟上邊等價</DIV> <!-- 標簽不區分大小寫 -->
<input type='text' name='test' /> <!-- 自閉合標簽 -->
自閉合標簽通常是一些不需要包含具體 HTML 內容的的標簽，例如表單、圖片、換行符、css 樣式等等。
<input type='radio' /><!-- 表單 -->
<img src='https://www.baidu.com/img/bd_logo1.png' /><!-- 圖片 -->
<br>
<link rel="stylesheet" type="text/css" href="theme.css" /><!-- 引入css樣式 -->
從上述例子看得出來，通常自閉和標簽是不包含實際的文本內容，通常是用來引入文件、圖片、樣式等作用，而閉合標簽是包含內容，既然包含內容所以后邊的閉合標簽相當于起到一個結束符的作用。實際開發中，如果忘記將標簽閉合，通常來說日常的瀏覽器（例如在 chrome v81） 中不會報語法錯誤，而是自動閉合，但是不建議這么做，因為瀏覽器并非完全的智能，有可能會引起排版錯誤，例如：
<p style='color:red'>我是紅色的段落</p><!-- 正確的寫法 -->
<span>我是默認的文本</span>
這段代碼中，定義了一個段落，并設置了字體為紅色，當忘記使用閉合標簽時
在瀏覽器的展示效果如下：
可以看到，樣式出現了錯亂。
TIPS: 所以在日常項目開發中，盡量選擇帶有語法檢測的 IDE，可以避免大部分的語法錯誤。
4.3 屬性
屬性是控制元素的第二個維度，通過屬性的設置，可以讓元素展現出不同的表現風格。屬性包含屬性名稱和屬性值，通常在元素標簽中用 name = value 的方式設置，多個屬性之間使用空格隔開。例如表單中的是否只讀，可以用
屬性值通常需要使用引號隔開，并非強制性，但是一旦屬性值中包含空格的話不使用引號隔開則會解析異常，例如：
<input name="one style" type='text'><!-- 定義表單的name為 one style -->
<input name=one style type="text"><!-- 未使用引號 -->
上述表單定義 name 為 one style，第二種寫法的解析結果則是定義表單的 name 為 one，然后定義一個空的 style 屬性，顯然與預期不符，但是瀏覽器并不會報錯。所以使用規范的寫法（引號隔開）則會避免這種異常情況出現。
一個標簽內可以包含多個屬性，屬性名稱不能重復，屬性名稱不區分大小寫，例如：
這樣的話瀏覽器會解析錯誤，不同的瀏覽器會呈現不同的效果，但是一般不會報錯。
除了可以在標簽內定義元素的屬性之外，還可以使用 JavaScript 動態控制屬性，這種方式在項目開發中經常使用，例如：
<input type='text' id = 'num1'> + <input type='text' id='num2'> = <input type='text' id='res'>
<button onclick='count()'>計算結果</button><!-- 點擊按鈕實現計算 -->
<script>
function count(){
if(isNaN(document.getElementById('num1').value) || isNaN(document.getElementById('num2').value)) return alert("請輸入正確的數字");//判斷輸入數字是否合法
document.getElementById('res').value = parseFloat(document.getElementById("num1").value) + parseFloat(document.getElementById("num2").value);//將結果輸出
}
</script>
上述代碼，通過使用 JavaScript 設置表單元素的 value 屬性，實現了一個簡單的加法計算器。
4.4 注釋
注釋內容在瀏覽器中不做解釋，只用于開發者記錄代碼用途等信息，格式如下：
以上可以看出，css 和 HTML 都只有一種注釋方式，這種設計方式可以因為 HTML 和 css 只是標記語言，沒有函數和類等傳統編程語言的概念，因此無需過多的注釋風格。
TIPS: 除以上注釋，實際項目開發中可能還會針對文件、類、項目模塊做注釋，這種注釋的設置方式跟使用的 IDE 設置有關，有些 IDE 可以設置當聲明一個類或文件時自動加上定義好的注釋內容，良好的注釋可以提升項目整體的擴展性、維護性、可用性。在程序編譯或者解釋的過程中會被瀏覽器忽略，在開發大型項目中上線之前通過會做程序壓縮合并等處理，處理的過程中通常會刪掉注釋代碼
4.5 HTML代碼結構
符合HTML標準的網頁代碼結構大致格式如下
<!DOCTYPE > <!-- 控制w3c格式 -->
<html>
<head>
<meta charset="utf-8"> <!-- 告訴瀏覽器使用的是utf-8字符集 --> <title>我的網站</title><!-- 這里用來編寫網站的標題 -->
</head>
<body> <!-- 只有body標簽的內容，才能真正顯示在瀏覽器的窗口 -->
</body>
</html>
上述內容是一個大致符合 w3c 標準的 HTML 代碼框架，其中包含文檔描述頭標簽、HTML標簽、頭標簽和 body 標簽，但是實際開發者可能不會包含這么完整的標簽框架，例如可以只聲明 body 內的標簽：
這樣的話，瀏覽器的展示效果并未有什么變化，但是當打開瀏覽器調試工具可以發現：
瀏覽器幫我們補齊的缺失的標簽。
4.6 在瀏覽器中查看源碼
開發過程中需要調試、查看代碼，在瀏覽器中可以通過開發者工具方便的查看源碼，這里以 Chrome 舉例，在網頁中點擊右鍵->查看網頁源代碼/檢查，即可查看源碼。
總結
本章主要從標簽語法、屬性用途、文件格式、框架結構等幾個方面大致介紹了HTML的規范和標準，只是預熱一下，沒有作深入討論。之后的章節里，我們會根據以上內容延伸講解。
2025 imooc.com All Rights Reserved |