Html總結

fourther發表於2020-08-02
HTML

零零散散學了幾個月的前端，彙總一下對HTML的理解吧，寫完就忘記～

歷史

HTML是Time Berners-Lee在1990年發明的。看看他的生平：

  • 1994年，離開歐洲到美國去建立W3C
  • 2004年，獲取英國女皇為他頒發的大英帝國爵級司令勳章
  • 2016年，獲得了圖靈獎


這位老爺子的成就不僅僅是發明了HTML，還定義了一整套現在人們網頁使用的流程，發明了WWW、HTTP、URL。老爺子在發現自己制定的一套約定有很大的發展空間，需要花費自己更多的精力維護時，辭退自己原本工作，創辦了W3C組織，用於指定一系列的規則。

預設樣式

預設樣式的歷史

老爺子在發明HTML的時候，還沒有發明出來CSS。為了讓遊覽器更好展示頁面，他規定遊覽器在識別標籤的時候，要為其附上預設樣式。
default_style

可以通過開發者工具Elements -> Styles -> user agent stylesheet檢視預設的樣式 。

預設樣式的缺點以及解決辦法

現如今，我們都用CSS來修改頁面樣式。有時候，預設樣式會對我們操作CSS產生影響，出現錯誤的時候，不容易定位。所以，一般開發的時候都會刪除預設樣式。這也叫做CSS Reset

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

其實這種CSS Reset程式碼可以從大型網站找到的，比如淘寶

對HTML的理解

HTML其實就是一個檔案，遊覽器通過HTTP將伺服器上的檔案傳輸到本地遊覽器，遊覽器根據W3C制定的規則來解析、展示。這在後面學習標籤的時候，就能理解到。
比如說em、strong標籤，這個標籤在定義上規定：

  • em：表示在語氣上強調；
  • strong：在內容上強調；

規定就是規定，規定也僅僅是規定。我願意遵守就遵守，所以你要是非胡亂用這些標籤，其實也並不是不可以。但大多數情況下，我們還是要遵守這些規定的。因為這能更好的加強人機互動，畢竟機器可讀不出來語意。

對了，還有一種說法。HTML大多數標籤其實等於div + 指定的CSS。感覺還是很有道理的，只不過這些CSS由遊覽器來新增罷了。

HTML知識點

下面就是一些知識點了，基本就是自己理解版本的MDN。

HTML檔案結構

HTML檔案的大致結構如下：

<!doctype html> 檔案描述，表示該檔案是html檔案。again，又一次表明約定的重要性
<html lang="zh">
<head>
	<meta charset="UTF-8"> 描述該頁面資料的資料，俗稱後設資料
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 禁用縮放；相容手機
    <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 告訴IE遊覽器使用最新版核心解析該檔案
    <title>檔案的描述</title>
</head>

<body>
</body>
</html>

參考資料

HTML元素

這裡有幾個有意思的小知識點，具體標籤的用法，以後再寫吧。

塊級元素和內聯元素

這是HTML中非常重要的元素分類，但是在HTML5重新定義元素的分類。

  • 塊級元素：頁面中以塊的形式展現 —— 相對於其前面的內容它會出現在新的一行，其後的內容也會被擠到下一行展現
  • 內聯元素：內聯元素不會導致文字換行

這裡可能就需要了解元素的種類，比如說：div是塊級元素，a是內聯元素。這裡其實涉及到樣式的問題，一些佈局技巧中建議：

  • 不要把塊級元素放在內聯元素中

事事都有特殊情況，div標籤就可以放在a標籤

布林屬性

這其實是我開發遇到這種屬性，然後在MDN看到這個介紹，印象有點深，就記錄一下。
HTML標籤中允許不寫屬性值，這種屬性就稱為布林屬性。比如說：

<input type="text" disabled="disabled">

參考知識

HTML5瞭解

我自己沒總體的學習過HTML5，只是有時候用了一下。這裡從別人抄過來HTML5的大致目錄，以後再總結吧。
HTML5其實就是最新版本的HTML語言，包含下述技術：

  • 新標籤、新屬性
  • 新的通訊技術：WebSockets、WebRTC等
  • 離線儲存技術：LocalStorage、斷網檢測
  • 多媒體技術：視訊、音訊
  • 影像技術：Canvas、SVG、WebGL
  • Web增強技術：HistoryAPI、全屏
  • 裝置相關技術：攝像頭、觸控式螢幕
  • 新的樣式技術：CSS3新的Flex、Grid佈局方式

參考知識

引數連結

Time Berners-Lee生平介紹

相關文章