【重構前端知識體系之HTML】2022，你還會來看HTML嗎？帶你重溫亦或走進！

歸子莫發表於2022-01-19
前端HTML

【重構前端知識體系之HTML】2022，你還會來看HTML嗎？帶你重溫亦或走進！

引言

寫些篇文章的時候，自己思考了幾個問題。但最終還是下定決心寫，寫文是為技術，技術傳遞的過程卻不止呼技術。

思索的問題

  • HTML的文章太多了，為什麼還要寫？
  • HTML的入門誰不會？還要學？
  • HTML的文章基本都是水文，誰會看？

自己的回答

一個知識點的誕生，如果形成了標準的話，那麼中心就確定了。再多的文章，其表達的含義是一致的，萬變不離其宗！

文章書寫的目的不就是為了使其讀者能夠讀懂文章並有所得嗎？因此我還是要寫，但表達得讓你們喜歡（持續追求）！

我相信大多數來看此文章的都知道HTML，或者說都聽說過HTML。

但其實總有一些人不明白，總有一些人以為明白（我自己！），因此我將視角轉向了你們！我的xdm（1.寫程式碼 2.兄弟們 3.想得美 4.斜對面 5.兄弟萌 ），不要誤會，兄弟萌（男女都兄弟哈）！真正以讀者的角度來寫文章！

文章水不水，其實不是因為同類的文章多了，而是因為同類的文章太像了，審美疲勞了，沒有新意了。

那麼，來！拿出我的新意，為你而寫！

同樣的，掏出你的金手指，為我而贊！（出自鬼刀——撿起你的頭顱，為我而戰！）

鬼刀

什麼是HTML

總是逃不開這個話題。抱歉，我再來為你們述說一次！

HTML的英文全稱是 Hyper Text Marked Language（超文字標記語言），它於1990年由Web的發明者的Tim Berners-Lee發明。

先說點聽不懂的（或者一次聽不懂的）

  • HTML 不是一種程式語言，而是一種標記語言
  • 標記語言是一套標記標籤 (markup tag)
  • HTML 使用標記標籤來描述網頁
  • HTML 文件包含了HTML 標籤及文字內容
  • HTML文件也叫做 web 頁面

新手來看（白話）

HTML的頁面被稱為文件，那麼這些文件我想讓它長得和我一樣帥，但是腿要比我短！

這可怎麼辦？把它的腿打個標記：不能比我長！是不是就行了！

說到這個標記，HTML笑了笑：不就是我的菜上了嗎！

HTML通過標記式的指令，將影像、聲音、圖片、文字動畫、影視等內容顯示出來。

如果你剛瞭解HTML，就記住它是修飾文件的標記。

偉大的作者

HTML的作者是蒂姆·伯納斯·李。

他發明了世界上第一個瀏覽器。

第一個伺服器。

發明了www(全球資訊網)。

同時發明了HTML、HTTP和URL。

以上給我一個，就燙手，不對，就燙死了！

如若不信，可百度百科一下。

image-20220114190329587

是否之前從未想過HTML的作者是誰？這是我回過頭來總結的時候，需要特別提出的，在學習HTML的時候，應當還有其作者的名字，這裡提出來，是為感謝和致敬！

HTML的演變史

看了作者，那豈能不瞭解HTML趨於完美的發展歷史！

HTML發展史

  • HTML 1.0 （HTML/HTML+）超文字標記語言(第一版) ——在1993年6月發為網際網路工程工作小組(IETF)工作草案發布(並非標準)。
  • HTML 2.0 ——1995年11月作為RFC 1866釋出，在RFC 2854於2000年6月釋出之後被宣佈已經過時。
  • HTML 3.2 ——1996年1月14日，W3C推薦標準。
  • HTML 4.0 ——1997年12月18日，W3C推薦標準。
  • HTML 4.01(微小改進) ——1999年12月24日，W3C推薦標準，編碼更加規範。
  • XHTML 1.0 —— 釋出於2000年1月26日，是W3C推薦標準，後來經過修訂於2002年8月1日重新發布。
  • XHTML 1.1 —— 於2001年5月31日釋出，W3C推薦標準。
  • XHTML 2.0 —— 於2002年8月5日釋出，W3C草案。
  • HTML5.0 —— 2012年12月17日，全球資訊網聯盟宣佈，經過接近8年的艱苦努力，該標準規範終於制定完成。
  • HTML5.1 —— 2013年5月6日，草案公佈。

HTML的版本

看了這麼多，眼尖的xdm應該發現了，XHTML。這個是什麼？講到這裡，就把XML拉過來一起來個桃園三結義！

HTML、XML、XHTML 的區別

  • HTML：超文字標記語言，是語法較為鬆散的、不嚴格的Web語言；
  • XML：可擴充套件的標記語言，主要用於儲存資料和結構，可擴充套件；
  • XHTML：可擴充套件的超文字標記語言，基於XML，作用與HTML類似，但語法更嚴格。

得出XHTML是語法嚴格的HTML。

一個HTML長什麼樣

講了這麼多，就是沒講HTML！進入正題！

HTML的案例

首先來看看一幅圖

HTML網頁結構這就是一個HTML文件的內容，用程式碼來翻譯

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我是一個標題</title>
</head>
<body>
    <h1>我是一個頁面內容的標題</h1>
    <div>我是一個美男子，你信嗎？</div>
</body>
</html>

看了圖片，看了程式碼，不看看錶現？

演示效果

看了之後是不是發現HTML一套一套的，很符合強迫症患者！那麼首先從第一行開始！

<!DOCTYPE> 宣告

所有 HTML 文件必須以 <!DOCTYPE> 宣告開頭。同時是不區分大小寫。

來看看一些常用的HTML版本的通用宣告。

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果有人槓，憑什麼上面就是常用的HTML版本啊！那好你中計了！

常用HTML版本，一個寶藏網站！地址

可見HTML5的發展還是相當不錯的！

image-20220114231005974

因此現在我們的文件宣告一般是使用HTML5的<!DOCTYPE html>。

HTML標籤

在上面的程式碼案例中出現了很多標籤，也就是標記。如html、meta、head、title、body、h1、div等等一些的標籤！

新手發言：我記不住啊！

我也記不住！寫多了，手記住了！所以不要擔心，這裡不展開講HTML標籤了。

現在它們的標記作用你應該理解了，吧？

HTML字符集

看到了有一個charset="UTF-8"的程式碼，是啥意思呢？它是告訴瀏覽器應該用什麼編碼去解析你的HTML。

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字元宣告為 UTF-8 或 GBK。

具體為什麼是這兩種，還是下回一定！

當然，如今的版本用的大部分是HTML5，而HTML5 中的預設字符集為 UTF-8。是不是又少了一個擔憂？

總結

本文是第一篇，也是把自己之前的HTML筆記推翻重來的一次文章改造。自己寫這篇部落格，看了三十幾篇部落格，感覺這一篇夠勁！

重構前端知識體系，你要一起嗎？

部落格說明與致謝

文章所涉及的部分資料來自網際網路整理，其中包含自己個人的總結和看法，分享的目的在於共建社群和鞏固自己。

引用的資料如有侵權，請聯絡本人刪除！

感謝萬能的網路，W3C，菜鳥教程等！

感謝勤勞的自己，個人部落格，GitHub學習，GitHub

公眾號【歸子莫】，小程式【子莫說】

如果你感覺對你有幫助的話，不妨給我點贊鼓勵一下，好文記得收藏喲！關注我一起成長！

所屬專欄：重構前端知識體系（HTML）

幸好我在，感謝你來！

相關文章