什麼是 HTML？

時間 2019-11-24

標籤什麼 html 欄目 HTML 简体版

原文原文鏈接

前言

做爲程序員，技術的落實與鞏固是必要的，所以想到寫個系列，名爲 why what or how 每篇文章解釋清楚一個問題。php

做爲 why what or how 的第一章，選一個較爲簡單的話題，什麼是 HTML ？css

釋義

HTML - HyperText Markup Language，超文本標記語言html

標記語言，一類以固定的形式描述文檔結構或是數據處理細節的語言，通常爲純文本形式，其內容做爲其餘程序的輸入。java

所以，HTML 是一種用於描述網頁的標記語言，純文本，其內容做爲瀏覽器的輸入。瀏覽器會解析 HTML 文本內容，最終呈現頁面。git

那麼超文本又是什麼？

在網頁出現前，人們的閱讀習慣是從前日後，從上到下，就像閱讀小說，必須從頭至尾的看完，思惟是單向的，並不存在岔路口。而超文本從字面上理解就是：超出了通常的閱讀習慣，看文章的時候思惟是發散的，即經過連接的形式，跳出當前的思惟流，轉到另一個頁面，故而這些能夠點擊跳轉的區域咱們稱之爲超文本連接（具體到 HTML 標籤上就是 a 標籤），而具備這種特性的標記語言理所應當的被稱爲超文本標記語言。程序員

那麼爲什麼瀏覽器恰恰要接收 HTML 而不接受其餘的標記語言呢？這就不得不談談 HTML 與瀏覽器的誕生。github

歷史

1990 年，Tim Berners-Lee 提出了超文本的概念
1991 年，Tim Berners-Lee 在 SGML 的基礎上定義了 HTML ，併發布了 WorldWideWeb 瀏覽器，爲了不同 WWW 混淆，這個瀏覽器後來更名爲 Nexus。同年發佈了世界第一個站點 info.cern.ch/
1993 年，IETF(國際互聯網工程任務組) 正式開始制定 HTML 規範，同年 Mosaic 瀏覽器發佈，Web 的概念正式流行起來，以後的瀏覽器仍然在延用 Mosaic 的圖形化操做界面思想
1994 年，Tim Berners-Lee 爲了 Web 發展而成立了 W3C，同年 Netscape 成立，發佈了第一款商業瀏覽器 Netscape Navigator(FireFox 的前身)
1995 年，IETF 發佈 HTML 2.0 版本，同年 IE 3.0 正式發佈，瀏覽器戰爭爆發
1996 年，W3C 接管了 HTML 的標準化工做，同年 Opera 瀏覽器發佈
1997 年，W3C 發佈 HTML 3.2 推薦標準
1998 年，Netscape 在於 IE 瀏覽器的戰爭中失利，將 Netscape Navigator 開源
1999 年，W3C 發佈 HTML 4.0
2000 年，HTML 4.0 成爲 ISO(國際標準化組織) 標準，至此以後 W3C 致力於 XHTML
2002 年，IE 成爲主流瀏覽器
2003 年，Safari 攜 Webkit 渲染引擎登場
2004 年，因爲 Web 的高速發展，HTML 4.0 中一些不合理的設計以及缺失的特性開始暴露，不滿於 W3C 想要放棄 HTML，由瀏覽器廠商發起組織了 WHATWG 工做組，推動 HTML 的繼續發展，也就是 HTML5
2004 年，Firefox 登場，第二場瀏覽器戰爭爆發，IE 潰敗
2007 年，WHATWG 和 W3C 握手言和，一塊兒制定 HTML5 的標準
2008 年，兩個工做組發佈第一份草案，同年 Chrome 攜 V8 解析引擎登場，加速戰爭，統一戰場
2014 年，發佈 HTML5 ，同時 HTML 再也不基於 SGML ，而是以一門單獨的標記語言出現
...

縱觀瀏覽器與 HTML 的發家史，瀏覽器的起起落落，HTML 版本的更新迭代，源頭都是 Tim Berners-Lee ，或許 HTML 的命名與瀏覽器能解析 HTML 只是一種偶然，但這兩種事物的出現倒是一種必然，而這背後的主導者，是互聯網，Tim Berners-Lee 也僅是執筆而已，爲了記念，他所創做的第一個站點也將被永久保存：info.cern.ch/。web

語法 or 結構

這是 HTML 中一個 p 標籤，在 HTML 中大部分元素都有着一樣的結構數據庫

開始標籤(Opening tag)
結束標籤(Closeing tag)
標籤內容(Enclosed text content)
標籤屬性(An attribute and its value) - 以鍵值對的形式存在在開始標籤上
標籤類型 - 開始標籤中的第一個單詞

只要是符合以上 5 個條件，就是一個合法的 HTML 標籤。編程

固然大部分標籤都有如上的結構，但還有小部分標籤並無標籤內容，所以結束標籤也就沒必要要的，好比引入圖片

<img src="xxx.jpg" />
複製代碼

可是，針對於這種標籤，須要在開始標籤以後加上 / 表明該標記結束。

僅僅定義了標籤固然是不夠的，一個頁面的呈現必須還要一個合理的結構。

而 HTML 結構的定義很簡單：標籤內容是標籤的集合。這就像是函數的遞歸，嵌套的元素就構成了頁面的結構。

在 HTML 中一段文字、換行、或其餘文本內容也是一種元素，屬於文本節點，這種節點僅有內容，而不具有標籤的結構。

HTML 默認結構

正所謂沒有規矩，不成方圓，想要讓瀏覽器認識併成功顯示頁面須要有一個統一的模板，以下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my site</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>
複製代碼

從上到下每一行所表明的含義以下

聲明該文檔爲 HTML 文檔，因爲 HTML 的發展，版本迭代了很多，各個版本的文檔聲明又不盡相同，而 HTML5 獨立成一門單獨的標記語言後，就不須要像以前版本同樣寫各類各樣的聲明，所以就簡化爲 <!DOCTYPE html>。
頁面根節點開始，標誌着文檔解析的開始
頁面頭節點開始，其子節點主要是告知瀏覽器須要知道但卻不須要呈如今頁面上的信息
通知瀏覽器使用 utf-8 的編碼集呈現網頁
通知瀏覽器該頁面的標題爲 my site ，一般瀏覽器會將該內容呈如今標題欄上
頁面頭節點結束
頁面內容節點開始，其子節點爲整個網頁須要顯示的內容，瀏覽器會將該內容渲染
一行段落，內容爲 hello world
頁面內容節點結束
頁面根節點結束，文檔解析結束

所以，咱們能夠大體知道，瀏覽器須要咱們提供兩部分的信息

一些與頁面呈現無關但卻須要通知瀏覽器的信息，即 head 的子元素，用於設置瀏覽器，好比編碼方式，視口大小等
頁面的結構，即 body 的子元素，用於呈現頁面

除此以外，因爲 head 中不須要有結構（信息只要一段一段的給便可，不須要嵌套），所以 head 中的元素只有一層，即沒有子元素。

那麼咱們可使用的標籤都有哪些？

head 中的標籤

在 head 中所能使用到的標籤總共只有 6 個，以下

title

定義文檔標題，通知瀏覽器頁面的主體內容，瀏覽器通常將此信息置於標籤欄，同時收藏或查看歷史記錄時，會以該信息做爲關鍵字。形式以下：

<title>文檔標題</title>
複製代碼

base

爲網頁上全部的超文本連接規定默認地址。瀏覽器在處理 body 中的連接會以該標籤規定的默認地址爲標誌，該標籤主要規定了兩個內容

href - 全部的連接都以該屬性的值做爲默認連接
target - 規定瀏覽器打開某一連接的方式
- _blank - 在新窗口中打開
- _self - 在當前窗口中打開（若是是 iframe 中的文檔，則在當前 iframe 中打開）
- _parent - 在父窗口中打開（經常使用於 iframe 嵌套）
- _top - 在頂層窗口中打開（經常使用於 iframe 多層嵌套）
- framename - 在指定的 iframe 中打開

一個簡單的例子

<base href="https://xxx.com" target="_blank" />
複製代碼

style

樣式標籤，其標籤內容規定了頁面的樣式信息。能夠在 MDN 上查看：CSS 介紹。

script

腳本標籤，其標籤內容爲瀏覽器須要執行的腳本信息。能夠在 MDN 上查看：JavaScript。

noscript

當頁面不支持 script 或是用戶主動關閉了 script 的執行時，瀏覽器將該標籤內容做爲提示信息，用於提示用戶。

link

通知瀏覽器請求外部資源，豐富網頁內容，或是優化體驗，常見用法以下

設置網頁的 icon

<link rel="icon" type="image/x-icon" href="/path/to/icons/favicon.ico" />
複製代碼

如何使用網頁 icon 以及瀏覽器具體對這個 icon 作了什麼能夠查看：詳細介紹HTML favicon

通知瀏覽器使用外部樣式

<link rel="stylesheet" type="text/css" href="xxx.css" />
複製代碼

該種方式相信你們都已經耳熟能詳了，主要是讓樣式進行分離，方便管理。

提供 rss 訂閱

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss/path" />
複製代碼

這個主要是通知搜索引擎，當前頁面的 rss 訂閱在哪，瀏覽器上的插件也有能力獲取到該信息。

提供網頁主頁面

<link rel="canonical" href="main/page/path" />
複製代碼

主要用於搜索引擎，告知當前頁面是附屬於某個頁面，引導搜索引擎去加載主頁面。

優化用戶體驗

<link rel="dns-prefetch" href="//xxx.com" />
複製代碼

通知瀏覽器提早抓取到 xxx.com 站點的 dns 信息，當頁面下有大量關於 xxx.com 站點的請求時，添加該信息會加速數據的獲取。

<link rel="prefetch" href="source/uri" />
複製代碼

通知瀏覽器提早抓取相應資源的內容，當用戶加載該資源時，瀏覽器就會直接從緩存獲取。

<link rel="preconnect" href="//xxx.com" />
複製代碼

通知瀏覽器提早與 xxx.com 站點進行 TCP 連接，加速資源的獲取。

<link rel="prerender" href="//xxx.com" />
複製代碼

通知瀏覽器提早加載 xxx.com 站點的全部內容，當用戶進去該站點時，就會立馬呈現頁面。

以上 4 個內容主要用於提高資源的加載速度，提高用戶體驗。但利弊時同時存在，當瀏覽器加載了大量資源，用戶又不去訪問時，就會照成資源大量消耗又得不到利用的狀況。所以，合理的設置纔是最正確的。

body 中的標籤

body 就是描述網頁內容的主體了，經過標籤的嵌套來描述頁面的內容。內容相關的標籤主要分爲幾個大類：

塊級標籤，用於描述一片區域內的內容
內聯標籤，用於修飾一段文本
列表，用於列出相關聯的幾項內容
表格，用於展現二維數據
圖片與多媒體，用於展現圖片視頻音頻
表單，用於用戶輸入

至於如何編寫 body 中的內容，能夠參考該篇文章文檔與網站架構。

網頁佈局是一門藝術，可是 body 中的內容僅僅是標籤的嵌套而已，至於如何編寫出好看耐看的頁面結構，這裏就不過多的深刻了。

這裏列舉一些經常使用的各個分類的標籤

類型	經常使用標籤
塊級標籤	`p` `h[1-6]` `header` `nav` `main` `article` `aside` `footer` `div` `pre`
內聯標籤	`a` `code` `em` `i` `strong` `addr`
列表	`ul` `ol` `li` `dl` `dt` `dl`
表格	`table` `tr` `th` `td` `thead` `tbody` `tfoot` `caption`
多媒體	`img` `audio` `video`
表單	`form` `input` `textarea` `button`

這裏列舉一下經常使用的通用標籤屬性

屬性名	含義
id	設置 ID 一個元素僅能擁有一個 id，經常使用於 js 獲取元素
class	設置類名，一個元素能夠有多個類名，用於 css 設置元素樣式
data-*	用於給元素設置一個附加屬性，js 能夠獲取設置的值
type	用於表單元素，表示該元素爲什麼種表單

完整的 HTML 標籤可參照該篇文檔 HTML 元素參考。

HTML 與 JSP/ASP/PHP

想必你們都訪問過 xxx.com/a.jsp 之類的網頁，那麼是否說瀏覽器請求了一個 jsp 文件，並解析展現了網頁？

固然不是，能被瀏覽器解析並最終渲染成頁面的只有 HTML 格式的文本，那麼這種類型的連接又改如何解釋呢？

在互聯網的發展歷程中，開發者發現有不少數據須要從數據庫或是本地的文本文件中獲取，可是手動寫 HTML 文件太過於麻煩。以 java 爲例，若是網站天天都會發生變化，那按照生成 HTML 文件的思路只能是天天生成一個 HTML 文件供用戶訪問，而且天天都要替換它，對很麻煩，那麼該如何解決呢？

這就誕生了 jsp 。仍是上面這個例子，jsp 的解決思路以下

用戶請求 xxx.com/a.jsp
java 程序捕獲到用戶的請求
java 程序尋找相應的 jsp 文件
java 程序到數據庫或是本地文件中查出相應信息
java 程序將這些信息填充到 jsp 文件中
java 程序生成 HTML 格式的字符流
java 程序將該字符流發送給瀏覽器
瀏覽器接收到字符流，判讀出該字符流爲 HTML 格式，開始解析並渲染

因此雖然瀏覽器的請求後綴爲 jsp 但最終服務器發送給瀏覽器的仍是 HTML 字符流。相似 ASP/PHP 等都是相似流程，所以 HTML 是單獨於編程語言以外的語言，也能夠說 HTML 是這些語言的輸出，而 JSP/ASP/PHP 只不過輔助了程序進行輸出 HTML 的一箇中間文件而已。