按圖索驥系列之——HTML 簡述

時間 2019-11-06

原文原文鏈接

本篇內容主要簡述 HTML 的背景來歷，以及一些基礎架構規範。javascript

1. HTML 的來歷

HTML 是 HyperText Markup Language 的縮寫。它有兩個特色構成了它的名字：1. 超文本 2. 標記語言。超文本意味着能夠連接網站的頁面。標記語言則是指一系列在 web 瀏覽器中展現的元素能夠經過標記來表示。好比，表示一張圖片，咱們使用 img 標籤，表示段落用 p 標籤等等。html

HTML 最開始只是用來描述一種文檔的規範。後來通過 web 的發展和移動應用的崛起，如今也成爲了應用軟件的代名詞。好比：H5 應用指的就是以 HTML 5 爲規範的一系列適配移動端的網頁，但其本質，仍然是 HTML。另外，咱們在 PC 端常見的 HTML，默認使用了 HTML 4.01 的規範。這裏與 HTML 5 的差異，主要表如今更好的語義化標籤和更豐富的標記元素等等。具體部分，咱們之後有機會再分析。前端

2. HTML 如何工做

這裏有一段 HTML：html5

<!DOCTYPE html>
<html>
  <head>
    <title>Sample page</title>
  </head>
  <body>
    <h1>Sample page</h1>
    <p>This is a <a href="demo.html">simple</a> sample.</p>
    <!-- this is a comment -->
  </body>
</html>
複製代碼

HTML 文檔由標籤和文本組成的樹組成。每一個標籤有一個開始標籤 <body> 和結束標籤 </body>。有些結束標籤能夠省略，好比 <img />。java

標籤之間必須知足嵌套關係，不能相互重疊。web

好比，這個就是錯誤的：瀏覽器

<p>This is <em>very <strong>wrong</em>!</strong></p>
複製代碼

這個是正確的：架構

<p>This <em>is <strong>correct</strong>.</em></p>
複製代碼

感興趣的小夥伴能夠打開復制下面代碼在你的瀏覽器的地址欄中粘貼看看。工具

data:text/html,<p>This is <em>very <strong>wrong</em>!</strong></p>
複製代碼

在 Chrome 下上面的代碼會被以下顯示，小夥伴能夠自行比較其中差別。網站

<p>This is <em>very <strong>wrong</strong></em><strong>!</strong></p>
複製代碼

元素能夠擁有屬性，屬性用來控制元素如何工做。最典型的例子就是 <a> 標籤。以下， a 標籤同時具有了 href 屬性，它保存了標籤指向的連接。

<a href="demo.html">simple</a>
複製代碼

HTML 用戶代理（一般指瀏覽器）工具會把文檔解析成 DOM 樹。沒錯，就是前端同窗十分熟悉的 DOM（Document Object Model）。DOM 在內存中表明瞭一個文檔。它也是瀏覽器渲染的重要環節之一。

最開始的例子中，DOM 樹的生成以下：

DOCTYPE: html
- html
  - head
    - #text: ⏎␣␣
    - title
      - #text: Sample page
    - #text: ⏎␣
    - #text: ⏎␣
  - body
    - #text: ⏎␣␣
    - h1
      - #text: Sample page
    - #text: ⏎␣␣
    - p
      - #text: This is a
      - a href="demo.html"
        
        #text: simple
      - #text: sample.
    - #text: ⏎␣␣
    - #comment: this is a comment
    - #text: ⏎␣⏎

關於 DOM 樹的特色，咱們將在後續詳細介紹。直觀的看上圖， DOM 樹的根節點老是 html 節點。節點類型有不少種，常見的有元素節點，html ，註釋節點，文本結點等。任何一段 HTML 代碼在 DOM 樹中都有對應的對象，甚至是換行符。DOM 樹

DOM 樹能夠被頁面中的腳本操做。腳本，一般指 JavaScript，是一段使用 script 標籤嵌入的程序代碼，固然也有部分代碼經過事件處理屬性好比: onclick="javascript: alert('1')" 寫入。複製下面的代碼到瀏覽器的地址欄，來感覺下 JavaScript 是如何做用於頁面元素的。

data:text/html,<form name="main"> Result: <output name="result"></output> <script> document.forms.main.elements.result.value = 'Hello World'; </script> </form>
複製代碼

操做 DOM 會直接影響頁面的渲染，注意這裏並不必定會影響頁面表現好比操做一個 display:none 的元素的屬性。在頁面上咱們不會直接看到什麼變化，但實際上，瀏覽器已經執行過了 DOM 樹的從新計算，只是沒有引起渲染。

最後，關於如何書寫健康的 HTML 頁面。請訪問這個連接使用工具來輔助查詢，本身改過的錯誤，印象纔會更深入。

Nu Html Checker

3. HTML 基礎架構

這章內容相對而言有點枯燥，主要參考 2 Common infrastructure 官方文檔中對 HTML 技術架構的定義來談談本身的理解。

HTML 基礎架構裏，定義了資源，XML 兼容性， DOM 樹，腳本和 URL 等一系列術語的規範。

拿 URL 來講，若是想要詳細瞭解瀏覽器中的 URL 的限定。在這個規範裏，有着十分明確的定義：

若是URL符合WHATWG URL規範中的創做一致性要求，則它是有效的URL。
若是字符串是有效的URL，但不是空字符串，則它是有效的非空URL。
字符串是一個有效的URL，若是從字符串中刪除開頭和結尾的空格後，則該字符串可能被空格包圍。
字符串是有效的非空URL，若是從字符串中刪除開頭和結尾的空格後，它是有效的非空URL，則該字符串可能會用空格包圍。

URL 除了常存在於咱們熟悉的地址欄以外，還在 img script 標籤的 src 中和 a 標籤的 href 中。在查閱文檔的時，還發現一個冷門的知識點： q blockquote ins del 元素有個 cite 屬性，也能夠存儲 URL。它的做用是定義一個連接來記錄該標籤的爲何存在的緣由。

解析 URL 也是有一系列規則的在背後執行的。在解析 URL 以前，會執行如下幾步：

若是指定了文檔，則將編碼設爲文檔的字符編碼，不然將環境設置對象設爲 API URL 字符編碼。
若是指定了文檔，則將 baseURL 設爲文檔的基本 URL，不然，設爲環境設置對象的API基本URL。
讓 urlRecord 做爲使用 baseURL 和編碼將 URL 解析器應用於url的結果。
若是 urlRecord 失敗，則停止這些步驟並出現錯誤。
讓 urlString 做爲將 URL 序列化程序應用於 urlRecord 的結果。
返回 urlString 做爲 URL 字符串的結果，並返回 urlRecord 做爲 URL 記錄的結果。

基礎架構一章中還定義了命名空間，什麼是 HTML 的命名空間呢？這個知識點更爆冷，感受知道了也沒有用。在這裏純粹分享下，以作雜談。

命名空間其實來自於 XML 的概念。在 XML 中，是能夠書寫自定義標籤的，這時候不免就會存在自定義重複的標籤。爲了 XML 可以正常解析，就須要書寫具有命名空間的格式，代碼以下：

<namespace:tag>content</namespace:tag>
複製代碼

以上就是本次的整理內容。下一章，咱們將主要圍繞 DOM 對象開始介紹 HTML 語義和結構以及 HTML 文檔 API 部分。

按圖索驥系列之——HTML 簡述

1. HTML 的來歷

2. HTML 如何工做

3. HTML 基礎架構

推薦閱讀