HTML——① HTML 基礎

itsOli發表於2019-04-09
HTML
本文推薦 PC 端閱讀~

本文版權歸 “公眾號 | 前端一萬小時” 所有，未經授權，請勿轉載！
複製程式碼

HTML——① HTML 基礎

html_01
複製程式碼

涉及面試題.png

1. doctype 有什麼作用？怎麼寫？
2. 列出常見的標籤，並簡單介紹這些標籤用在什麼場景？
3. 頁面出現了亂碼，是怎麼回事？如何解決？
4. title 屬性和 alt 屬性分別有什麼作用？
5. html 的註釋怎樣寫？
6. HTML5 為什麼只寫 <!DOCTYPE HTML> ？
7. data- 屬性的作用？
8. <img> 的 title 和 alt 有什麼區別？
9. WEB 標準以及 W3C 標準是什麼？
10. doctype 作用? 嚴格模式與混雜模式如何區分？它們有何意義?
11. HTML 全域性屬性（global attribute）有哪些？
複製程式碼

HTML——① HTML 基礎
HTML——① HTML 基礎
HTML——① HTML 基礎

前言： 學習前端我們有個比喻：先打地基建房子——HTML；然後房子建好後進行硬裝修——CSS；接著把門、窗戶、自來水龍頭、電燈開關、電燈等安裝好——JavaScript；可是還沒有電，沒有水怎麼辦？——造發電機、興修水力發電站（PHP 等）；可是依舊沒水沒電——修水庫，引入水源，進行水力發電（MySQL 等）。 那接下來的系列文章，就開始我們的打地基建房子，然後做個硬裝修。

1 認識 HTML

在《老生常談的從 URL 輸入到頁面展現背後發生的事》一文中，我們認識到了網路工作的整個流程，也知道了我們前端開發的主力點是在“MVC（model view controller）”中的“檢視（view）”這一環。大致回顧下這篇文章：

從 URL 輸入到頁面展現經過以下過程：

  • 在瀏覽器輸入 URL；
  • 瀏覽器查詢域名對應的 IP 地址；
  • 瀏覽器根據 IP 地址與伺服器建立聯絡；
  • 瀏覽器與伺服器通訊：瀏覽器請求，伺服器處理請求並呈現頁面。

然後我們進行倒推：

第一，伺服器處理請求並呈現頁面： web 伺服器是一個全天24小時都在崗的先進勞模，它隨時在準備處理來自 web 瀏覽器發來的請求。一旦有請求，web 伺服器就會以適當的處理方式把裝在它身體裡的 HTML 檔案（HyperText Markup Language 超文字標記語言）（每個伺服器會儲存 HTML 檔案、影像、聲音和其他型別的檔案）反饋給 web 瀏覽器。

第二，web 瀏覽器得到反饋後怎麼去顯示這個頁面： HTML 是瀏覽器顯示頁面的關鍵，它會告訴瀏覽器頁面的結構和所有內容。web 瀏覽器在讀取伺服器反饋的 HTML 檔案時，它會翻譯文字中的所有標記（告訴瀏覽器：標題放哪裡，段落放哪裡，哪些文字需要強調等等）。

2 動手寫一個 HTML

  • 任務：把以下圖片用 HTML 寫出來，並完全熟悉每個元素。

HTML——① HTML 基礎

2.1 第一步：開啟編輯器

開啟記事本/文字編輯器——初學的前半個月強烈建議用最簡單的文字編輯工具把程式碼一個個敲出來。

2.2 第二步：分析結構

2.3 第三步：給文字加標記

<!--註釋1-->    <!DOCTYPE html>
<!--註釋2-->    <html>
<!--註釋3-->     <head>
<!--註釋4-->       <meta charset="utf-8">
<!--註釋5-->       <title>Oli-Zhao的前端一萬小時</title>
<!--註釋6-->     </head>
<!--註釋7-->     <body>
<!--註釋8-->       <img src="HTML圖片" alt="HTML首頁圖">
<!--註釋9-->       <!--以下我們來寫這個頁面-->
<!--註釋10-->       <h1>《Oli-Zhao的前端一萬小時》之:(1)HTML基礎</h1>
<!--註釋11-->         <p>本知識學習用時：2小時……</p>
<!--註釋12-->         <p>前言：學習前端我們有個比喻：先打地基……<br>
                       那接下來的系列文章，我們開始我們的……
<!--註釋13-->         </p>
                   <h2>一、認識HTML</h2>
                    <p>在《Oli-Zhao的前端一萬小時》之……</p>
<!--註釋14-->     </body>
                </html>
複製程式碼
  • 註釋 1：
<!DOCTYPE html>
複製程式碼

每個頁面都要從 doctype 開始，它為瀏覽器指定這個頁面的文件型別，以便瀏覽器更正確的顯示 HTML 。只要按照這樣的格式和位置寫，那麼瀏覽器就會認為你在使用標準 HTML 。這樣寫的好處是：不用再像 HTML5 出來之前那樣，既要寫上 HTML 版本號，又要寫上這個 HTML 文件所依據的標準是在什麼位置。一勞永逸，之後不管 HTML 再怎麼更新，我們的文件都可以被瀏覽器以最正確的方式顯示出來。

  • 註釋 2：
<html>
複製程式碼

必須以 <html> 標記開始我們的頁面，以</html>標記結束，注意看，結束標記多了一個“/”。這整個包含 開始標記+內容+結束標記 的一個整體就稱作一個“元素”。 對於<html>元素，頁面中的所有內容都巢狀在這個元素中。 所謂“巢狀”：是指一個元素可以放在另一個元素的裡邊（如同建房：整個房子是一個整體，入戶門進去後，會有廚房、衛生間、客廳、臥室等個體，而主臥室裡邊可能還有一個衣帽間、一個廁所等）；

  • 註釋 3、註釋 7：
<head>

<body>
複製程式碼

只有 <head> 和 <body> 元素能直接放在 <html> 元素裡。<head> 裡主要放一些與當前頁面內容無關、但承載一些對頁面描述的標記——可以設定它的 meta、title，可以放 CSS，這些部分不會被使用者看到。 <body> 裡邊放的是和頁面內容相關的元素——即你想讓使用者看到的內容。

  • 註釋 4：
<meta charset="utf-8">
複製程式碼

“meta” 指的是我們要告訴瀏覽器關於我們頁面的一些資訊。 “charset” 是 <meta> 標記的屬性，我們的開始標記都是可以有屬性的。這裡，我們要在 charset 屬性中指定字元編碼。 “utf-8”是 unicode 系列中的其中一個編碼，這個編碼是網際網路上使用最廣泛的一種 unicode 的實現方式。它是為傳輸而設計的編碼，並使編碼無國界，這樣就可以顯示世界上所有文化的字元了——不管字母、數字還是中文、阿拉伯文等等。

⚠️“亂碼”詳細原因：

  1. 當我們儲存一個寫好的 HTML 檔案，編碼方式會儲存為 UTF-8 ；
  2. 一個檔案就是一堆的資料，即我們寫的內容變成了一堆的資料。那這個資料到底是變成了 123，還是 456 呢？
  3. 這裡我們就用到了“編碼”，用的編碼方式不一樣，那麼資料呈現的狀態就不一樣；
  4. 然後，當我們把這個以適當編碼方式儲存好的資料再次展示在瀏覽器頁面上時（或用其他編輯器開啟時），那這個資料還要再恢復出來；
  5. 那這時候，瀏覽器（或編輯器）需要使用相同的、與檔案相對應的編碼方式去解碼（但瀏覽器不是萬能的，你不告訴它，它就不知道用什麼方式去解碼，它會隨意地選擇）；
  6. 這時，當編碼是一種方式，而解碼又是另一種方式時，頁面就會出現“亂碼”；
  7. 而解決亂碼的方式就是：只需要知道我在編輯器儲存這個 HTML 檔案時，儲存的是什麼編碼格式，然後在頭部中告訴瀏覽器用什麼方式來解碼。
  • 註釋 5：
<title>Oli-Zhao的前端一萬小時</title>
複製程式碼

<head> 元素裡，必須在正確的位置包含一個 <title> 元素（圖上圈住的的都是我們“title”這個元素呈現出來的）：

HTML——① HTML 基礎

  • 註釋 6：
</head>
複製程式碼

首部 <head> 元素結束標記。

  • 註釋 8：
<img src="HTML圖片" alt="HTML首頁圖">
複製程式碼

這裡是一個 <img> 元素，img=image 影像。我們知道，HTML 頁面是一個純文字，影像是絕對無法作為頁面的一部分直接顯示出來的，都是通過外部引入（連結）的方式來展現。 我們瀏覽器在看到這個元素時，會做的處理不是像看到 <h1> 或 <p> 元素那樣直接在頁面上顯示相關內容，而是需要先到 web 伺服器去獲取這個影像，然後再顯示出來。

?web 常用的影像格式有 JPEG、PNG 和 GIF ：

  1. JPEG：最適合儲存照片和其他複雜影像；
  2. PNG 或 GIF：最適合儲存 logo 和其他包含單色、線條或文字的簡單圖形。

  • 註釋 8 中：<img> 有兩個必要的屬性：src 和 alt 。

    • src: 它是 source 的縮寫，意指這個影像來源自哪裡（這後邊可以放所在檔案的路徑，也可以是一個所在的 URL）；
    • alt：這個屬性主要是為了規避例如：因網速差、硬體裝置限制等外部因素，我們的瀏覽器不能很好的顯示出影像，那 alt 後邊的文字將會取代影像告訴使用者這裡會是什麼東西（參考後邊最終的頁面展現）。

  • 註釋 9：

<!--以下我們來寫這個頁面-->
複製程式碼

這個是用來寫我們的註釋的，便於我們閱讀、修改等。這部分所有內容都不會被瀏覽器顯示出來。

  • 註釋 10：
<h1>《Oli-Zhao的前端一萬小時》之:(1)HTML基礎</h1>
複製程式碼

這裡用一個 <h1> 開始標記，來說明這句話是一個一級標題。我們的標題可以往下分到 <h6> ，一般工作實際中，一般到 <h3> 。

  • 註釋 11：
<p>本知識學習用時：2小時……</p>
複製程式碼

“p” 是 “paragraph” 段落的意思。所以這裡 <p> 開啟一個段落。

  • 註釋 12：
<!--註釋12--> <p>前言：學習前端我們有個比喻：先打地基……<br>
               那接下來的系列文章，我們開始我們的……
<!--註釋13--> </p>
複製程式碼

<br> 元素，是我們 HTML 中專門用來換行的元素。“br”=“break” 間斷，換行的意思。 注意，如果一個元素沒有任何實際內容，只有開始標記和結束標記。那麼這個元素可以直接簡寫成一個開始標記。這樣的元素我們叫他 “void 元素”——空元素。如：<br> 元素、<img> 元素等。

  • 註釋 13：
</p>
複製程式碼

時刻不要忘記一個完整的元素包含哪些標記：元素=開始標記+內容+結束標記。

  • 註釋 14：
  </body>
</html>
複製程式碼

整個身體元素結束，以及下邊的整個 <html> 元素的結束。這都是不可或缺的標記。

2.4 第四步：存好關聯檔案

在你電腦喜歡的位置新建一個資料夾來儲存我們練習中所有相關檔案、影像等。

2.5 第五步：儲存

把上邊我們寫的文件儲存為 .html 格式檔案，並記得編碼方式為 utf-8 。把這個檔案儲存在第四步建立的資料夾裡。

2.6 第六步：完成並測試

用瀏覽器開啟這個 HTML 文稿。對照第三步的註釋再次學習，看看每個標記都在頁面中對應的那個東西（⚠️這一步很重要！）。

?效果及原始碼連結

HTML——① HTML 基礎

後記： 這篇的學習，我們大致瞭解了 HTML 的基本結構，也寫出了第一個可以在瀏覽器上展示的頁面。那下一篇，我們就細講 HTML 其他重要的元素（列表、超連結、表格、音視訊等）以及對應的屬性。

加油！

相關文章