《30分鐘重學HTML》之HTML入門（一）

時間 2020-06-27

原文原文鏈接

什麼是 HTML?

HTML (HyperText Markup Language) 不是一門編程語言，而是一種用來告知瀏覽器如何組織頁面的標記語言。HTML 可複雜、可簡單，一切取決於開發者。它由一系列的元素（elements）組成，這些元素能夠用來包圍不一樣部分的內容，使其以某種方式呈現或者工做。一對標籤（ tags）能夠爲一段文字或者一張圖片添加超連接，將文字設置爲斜體，改變字號，等等。html

HTML 標籤不區分大小寫。也就是說，輸入標籤時既可使用大寫字母也可使用小寫字母。 例如，標籤 <title> 寫做 <title>、<TITLE>、<Title>、<TiTlE>，等等均可以正常工做。不過，從一致性、可讀性等各方面來講，最好僅使用小寫字母。編程

HTML 文檔

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>個人測試站點</title>
  </head>
  <body>
    <p>這是個人頁面</p>
  </body>
</html>
複製代碼

分析以下:瀏覽器

<!DOCTYPE html>: 聲明文檔類型. 好久之前，早期的 HTML(大約 1991 年 2 月)，文檔類型聲明相似於連接，規定了 HTML 頁面必須聽從的良好規則，能自動檢測錯誤和其餘有用的東西。使用以下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 然而這種寫法已通過時了，這些內容已成爲歷史。 只須要知道 <!DOCTYPE html> 是最短有效的文檔聲明。bash
<html></html>: <html>元素。這個元素包裹了整個完整的頁面，是一個根元素。編程語言
<head></head>: <head>元素. 這個元素是一個容器，它包含了全部你想包含在 HTML 頁面中但不想在 HTML 頁面中顯示的內容。這些內容包括你想在搜索結果中出現的關鍵字和頁面描述，CSS 樣式，字符集聲明等等。之後的章節能學到更多關於<head>元素的內容。 <meta charset="utf-8">: 這個元素設置文檔使用 utf-8 字符集編碼，utf-8 字符集包含了人類大部分的文字。基本上他能識別你放上去的全部文本內容。毫無疑問要使用它，而且它能在之後避免不少其餘問題。ide
<title></title>: 設置頁面標題，出如今瀏覽器標籤上，當你標記/收藏頁面時它可用來描述頁面。學習
<body></body>: <body>元素。包含了你訪問頁面時全部顯示在頁面上的內容，文本，圖片，音頻，遊戲等等。測試

HTML 元素

開始標籤（Opening tag）：包含元素的名稱（本例爲 p），被左、右角括號所包圍。表示元素從這裏開始或者開始起做用 —— 在本例中即段落由此開始。ui
結束標籤（Closing tag）：與開始標籤類似，只是其在元素名以前包含了一個斜槓。這表示着元素的結尾 —— 在本例中即段落在此結束。初學者經常會犯忘記包含結束標籤的錯誤，這可能會產生一些奇怪的結果。編碼
內容（Content）：元素的內容，本例中就是所輸入的文本自己。
元素（Element）：開始標籤、結束標籤與內容相結合，即是一個完整的元素。

元素分類

注: 查看-全部 HTML 元素

塊級元素和內聯元素

注: HTML5 從新定義了元素的類別：見元素內容分類(譯文)。儘管這些新的定義更精確，但卻比上述的「塊級元素」和「內聯元素」更難理解，所以在以後的討論中仍使用舊的定義。我的認爲：HTML5 對元素的從新定義,主要是創建在元素使用規範上。規範了某個元素它能夠包含哪一類內容。例如: 章節元素<article>, <aside>, <nav> and <section>

在 HTML 中有兩種你須要知道的重要元素類別，塊級元素和內聯元素。

塊級元素在頁面中以塊的形式展示 —— 相對於其前面的內容它會出如今新的一行，其後的內容也會被擠到下一行展示。塊級元素一般用於展現頁面上結構化的內容，例如段落、列表、導航菜單、頁腳等等。一個以 block 形式展示的塊級元素不會被嵌套進內聯元素中，但能夠嵌套在其它塊級元素中。
內聯元素一般出如今塊級元素中並環繞文檔內容的一小部分，而不是一整個段落或者一組內容。內聯元素不會致使文本換行：它一般出如今一堆文字之間例如超連接元素<a>或者強調元素<em>和 <strong>。

注: 在這篇文章中提到的「塊」和「內聯」，不該該與 the types of CSS boxes 中的同名術語相混淆. 儘管他們默認是相關的，但改變 CSS 顯示類型並不會改變元素的分類，也不會影響它能夠包含和被包含於哪些元素。防止這種混淆也是 HTML5 摒棄這些術語的緣由之一。

注: 你能夠查閱包含了塊級元素和內聯元素列表的參考頁面—see Block-level elements and Inline elements.

行內元素(內聯元素)參考

塊級元素參考

空元素

不是全部元素都擁有開始標籤，內容，結束標籤。一些元素只有一個標籤，一般用來在此元素所在位置插入/嵌入一些東西。例如：元素是用來在元素所在位置插入一張指定的圖片。例子以下：

<img src="https://user-gold-cdn.xitu.io/2020/6/21/172d767cf4c3faba?w=256&h=256&f=png&s=55480">

複製代碼

顯示以下：

元素屬性

元素也能夠擁有屬性，以下：

一個屬性必須包含以下內容：

一個空格，在屬性和元素名稱，或屬性與屬性之間。
屬性名稱。
屬性值，由一對引號「」引發來(布爾屬性可省略)。

布爾屬性

有時你會看到沒有值的屬性，它是合法的。這些屬性被稱爲布爾屬性，他們只能有跟它的屬性名同樣的屬性值。例如 disabled 屬性，他們能夠標記表單輸入使之變爲不可用(變灰色)，此時用戶不能向他們輸入任何數據。

例如：

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

簡寫爲=>

<input type="text" disabled>
複製代碼

屬性值的引號

雖然屬性值不強制要求加引號。可是不加引號，會致使屬性值有空格時的解析問題。如：

// 正確
<a href=https://www.mozilla.org/>收藏頁面</a>

// 出錯,
// 它會把title屬性理解爲三個屬性——title的屬性值爲"The"，
// 另外還有兩個布爾屬性「Mozilla」和「homepage」
<a href=https://www.mozilla.org/ title=The Mozilla homepage>收藏頁面</a>
複製代碼

屬性值的引號使用單引號或者雙引號

都能正確解析。通常使用雙引號。

HTML 空格

下面的兩個代碼片斷是等價的：

<p>狗 狗 很 呆 萌。</p>

<p>狗 狗        很
         呆 萌。</p>
複製代碼

不管你在 HTML 元素的內容中使用多少空格(包括空白字符，包括換行)，當渲染這些代碼的時候，HTML 解釋器會將連續出現的空白字符減小爲一個單獨的空格符。

那麼爲何咱們會在 HTML 元素的嵌套中使用那麼多的空白呢? 答案就是爲了可讀性 —— 若是你的代碼被很好地進行格式化，那麼就很容易理解你的代碼是怎麼回事，反之就只有聚作一團的混亂.。在咱們的 HTML 代碼中，咱們讓每個嵌套的元素以兩個空格縮進。你使用什麼風格來格式化你的代碼取決於你 (好比所對於每層縮進使用多少個空格)，可是你應該堅持使用某種風格。

HTML 特殊字符

在 HTML 中，字符 <, >,",' 和 & 是特殊字符. 它們是 HTML 語法自身的一部分, 那麼你如何將這些字符包含進你的文本中呢, 好比說若是你真的想要在文本中使用符號&或者小於號, 而不想讓它們被瀏覽器視爲代碼並被解釋?

咱們必須使用字符引用 —— 表示字符的特殊編碼, 它們能夠在那些狀況下使用. 每一個字符引用以符號&開始, 以分號(;)結束.

原義字符	轉義字符
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

示例：

<p>HTML 中用 <p> 來定義段落元素。</p>

<p>HTML 中用 &lt;p&gt; 來定義段落元素</p>
複製代碼

在下面的實時輸出中，你會看到第一段是錯誤的，由於瀏覽器會認爲第二個

是開始一個新的段落！第二段是正確的，由於咱們用字符引用來代替了角括號（'<'和'>'符號)。

HTML 中用
來定義段落元素。

HTML 中用 <p> 來定義段落元素
複製代碼

維基百科上有一個包含全部可用 HTML 字符實體引用的列表：XML 和 HTML 字符實體引用列表。

HTML 註釋

爲了將一段 HTML 中的內容置爲註釋，你須要將其用特殊的記號包括起來，好比：

<p>我沒有被註釋！</p>

<!-- <p>我被註釋了！</p> -->
複製代碼

總結

理解 HTML 的文檔結構
理解 HTML 的元素結構
理解 HTML 的空格
理解 HTML 的特殊字符
理解 HTML 的註釋

參考資料

HTML 介紹—開始學習 HTML, developer.mozilla.org/zh-CN/docs/…

相關標籤/搜索

html+css+javascript+html

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。