html_01 | HTML——① HTML 基礎

時間  2019-11-06
標籤 html 基礎 欄目 HTML 简体版
原文   原文鏈接 
本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

獲取編號.png 

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）有哪些？
12. 如下哪一種多媒體格式支持最普遍？
  ❌ .m3u8
  ✅ .mp4
  ❌ .wmv
  ❌ .flv
  ❌ .mov

13. 打開一個頁面，發現頁面出現了亂碼，如下說法正確的是：
  ✅ 英文和數字不會出現亂碼，中文可能會出現。
  ❌ 只要給 HTML 的 head 標籤里加 <meta charset="utf-8"> 就必定能解決亂碼問題。
  ✅ 給 HTML 的 head 標籤里加 <meta charset="utf-8"> 不必定能解決亂碼問題。
  ✅ 頁面保存的時候用的是什麼編碼格式，就給 HTML 的 head 標籤裏 meta 的 charset 屬性設置相同編碼格式。

14. 關於瀏覽器亂碼，如下說法正確的是？(不定項)
  ❌ 只要在 html 的 head 標籤裏設置 <meta charset="utf-8"> 就必定能解決亂碼問題。
  ✅ 用不合適的編輯器編輯文件，經常會出現亂碼，好比 windows 記事本。
  ✅ html 保存的時候需關注保存時的編碼格式，保存什麼格式，就設置 <meta charset="xxx"> 其中 xxx 爲保存文件時的編碼格式。
  ❌ 若是 html 裏只有英文和數字，通常不會出現亂碼，因此 html 裏不必設置 charset 了。
複製代碼

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


1 認識 HTML

在《老生常談的從 URL 輸入到頁面展示背後發生的事》一文中，咱們認識到了網絡工做的整個流程，也知道了咱們前端開發的主力點是在「MVC（model view controller）」中的「視圖（view）」這一環。大體回顧下這篇文章：前端

從 URL 輸入到頁面展示通過如下過程：web

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

而後咱們進行倒推：面試

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

第二，web 瀏覽器獲得反饋後怎麼去顯示這個頁面： HTML 是瀏覽器顯示頁面的關鍵，它會告訴瀏覽器頁面的結構和全部內容。web 瀏覽器在讀取服務器反饋的 HTML 文件時，它會翻譯文本中的全部標記（告訴瀏覽器：標題放哪裏，段落放哪裏，哪些文本須要強調等等）。瀏覽器


2 動手寫一個 HTML

  • 任務：把如下圖片用 HTML 寫出來，並徹底熟悉每一個元素。

01-01.png

2.1 第一步：打開編輯器

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

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>1、認識HTML</h2>
                    <p>在《Oli-Zhao的前端一萬小時》之……</p>
<!--註釋14-->     </body>
                </html>
複製代碼
  • 註釋 1：
<!DOCTYPE html>
複製代碼

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

  • 註釋 2：
<html>
複製代碼

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

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

<body>
複製代碼

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

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

「meta」 指的是咱們要告訴瀏覽器關於咱們頁面的一些信息。 「charset」 是 <meta> 標記的屬性，咱們的開始標記都是能夠有屬性的。這裏，咱們要在 charset 屬性中指定字符編碼。 「utf-8」是 unicode 系列中的其中一個編碼，這個編碼是互聯網上使用最普遍的一種 unicode 的實現方式。它是爲傳輸而設計的編碼，並使編碼無國界，這樣就能夠顯示世界上全部文化的字符了——無論字母、數字仍是中文、阿拉伯文等等。

⚠️「亂碼」詳細緣由：

  • 當咱們保存一個寫好的 HTML 文件，編碼方式會保存爲 UTF-8 ；

  • 一個文件就是一堆的數據，即咱們寫的內容變成了一堆的數據。那這個數據究竟是變成了 123，仍是 456 呢？

  • 這裏咱們就用到了「編碼」，用的編碼方式不同，那麼數據呈現的狀態就不同；

  • 而後，當咱們把這個以適當編碼方式保存好的數據再次展現在瀏覽器頁面上時（或用其餘編輯器打開時），那這個數據還要再恢復出來；

  • 那這時候，瀏覽器（或編輯器）須要使用相同的、與文件相對應的編碼方式去解碼（但瀏覽器不是萬能的，你不告訴它，它就不知道用什麼方式去解碼，它會隨意地選擇）；

  • 這時，當編碼是一種方式，而解碼又是另外一種方式時，頁面就會出現「亂碼」；

  • 而解決亂碼的方式就是：只須要知道我在編輯器保存這個 HTML 文件時，保存的是什麼編碼格式，而後在頭部中告訴瀏覽器用什麼方式來解碼。

  • 註釋 5：

<title>Oli-Zhao的前端一萬小時</title>
複製代碼

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

01-02.png

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

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

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

這裏是一個  <img> 元素，img=image 圖像。咱們知道，HTML 頁面是一個純文本，圖像是絕對沒法做爲頁面的一部分直接顯示出來的，都是經過外部引入（連接）的方式來展示。 咱們瀏覽器在看到這個元素時，會作的處理不是像看到 <h1> 或 <p> 元素那樣直接在頁面上顯示相關內容，而是須要先到 web 服務器去獲取這個圖像，而後再顯示出來。

💡web 經常使用的圖像格式有 JPEG、PNG 和 GIF ：
-- JPEG：最適合保存照片和其餘複雜圖像；
-- 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 文稿。對照第三步的註釋再次學習，看看每一個標記都在頁面中對應的那個東西（⚠️這一步很重要！）。

🔗效果及源碼連接

01-03.png


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

祝好，qdywxs ♥ you！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程