因?yàn)樗鼈儧]有結(jié)束標(biāo)簽，因此內(nèi)部不能包含任何內(nèi)容。所以自封閉元素通常帶有一些屬性，以便為它們提供附加信息。

HTML 塊和內(nèi)聯(lián)

在 HTML 中，您主要會(huì)遇到兩種類型的 HTML 元素：

塊元素用于通過將內(nèi)容劃分為連貫的塊來構(gòu)造頁面的主要部分。

這是第一段內(nèi)容
這是第二段內(nèi)容

內(nèi)聯(lián)元素旨在區(qū)分文本的一部分，以賦予其特定的功能或含義。內(nèi)聯(lián)元素通常包含一個(gè)或幾個(gè)單詞。

如果感興趣，可以點(diǎn)擊這里來訪問我的主頁

開始和結(jié)束標(biāo)簽

所有塊級(jí)元素都有一個(gè)開始和結(jié)束標(biāo)簽。

所以，自封閉元素都是內(nèi)聯(lián)元素，僅僅是因?yàn)樗鼈兊恼Z法不允許它們包含任何其他 HTML 元素。

HTML 層次結(jié)構(gòu)

HTML 文檔就像一棵大的家族樹，上面有父母、兄弟姐妹、孩子、祖先和后代等。

這源于 HTML 元素具有相互嵌套的功能。

嵌套

讓我們編寫一個(gè)簡單的段落，并通過插入兩個(gè)內(nèi)聯(lián)元素來區(qū)分文本各個(gè)部分來對(duì)其進(jìn)行增強(qiáng)：

  培根曾經(jīng)說過：合理安排時(shí)間，就等于節(jié)約時(shí)間。

結(jié)果：

其中：

使用 會(huì)加粗標(biāo)簽內(nèi)的內(nèi)容html表格在默認(rèn)情況下有邊框，這只是瀏覽器的默認(rèn)行為。請(qǐng)注意：您必須根據(jù) HTML 元素的含義而非其外觀來選擇 HTML 元素。

這種情況下：

順序

如何嵌套 HTML 文檔取決于打開和關(guān)閉標(biāo)簽的位置。

由于 HTML 元素包含打開和關(guān)閉標(biāo)簽，以及介于兩個(gè)標(biāo)簽之間的內(nèi)容，一個(gè)子元素的關(guān)閉必須結(jié)束于父元素之前。

  This HTML code won't work because I the "strong" tag is opened here but is only closed after the paragraph.

上述代碼是不合法的，因?yàn)? 標(biāo)簽打開在

標(biāo)簽之后（因此 被認(rèn)為是

的子元素），所以 必須在

元素關(guān)閉之前關(guān)閉。

  This HTML code will work because I the "strong" tag is opened and closed properly.

深度

由于子元素本身可以包含其他子元素，所以可以在 HTML 文檔中編寫更深的層次結(jié)構(gòu)。

例如，我們可以編寫一段：

  
題圖故事：光努力是沒有用的
  

    漫畫家蔡志忠有一個(gè)演講，題目叫做《努力是沒有用的》。讀完這份演講稿，我覺得他說的有道理。
  
  

    有些人非常勤奮，別人休息和娛樂的時(shí)候，都在工作學(xué)習(xí)。但是努力了一輩子，人生也沒有顯著的提升，就像報(bào)道里經(jīng)常說的：某某在平凡的崗位上，勤勤懇懇工作了一輩子。
  
  

    另一方面，很多成功者似乎也沒有特別努力，就取得了許多成就，過上了好日子。蔡志忠以自己為例，他從小就喜歡畫畫，然后一直畫，不知不覺就成了大漫畫家，名利雙收，從沒有覺得過得很辛苦。
  

結(jié)果：

在這種情況下，該 HTML 文檔的家族樹看起來會(huì)是這樣：

和三個(gè)

是兄弟姐妹；每個(gè)

的父親都是 ；每個(gè)元素（除開 ）都是 的后代；

塊元素和內(nèi)聯(lián)元素嵌套

塊元素可以包含塊元素或內(nèi)聯(lián)元素。

但是，內(nèi)聯(lián)元素只能包含其他內(nèi)聯(lián)元素。（ 標(biāo)簽除外）

  
You can't put a paragraph inside a "strong" tag.

但是要記住元素的家族樹。這種層次結(jié)構(gòu)在 CSS 中很有用。

HTML 是語義的

HTML 標(biāo)記的目的是向文檔傳遞含義。所以不必?fù)?dān)心網(wǎng)頁的外觀，應(yīng)該關(guān)心每個(gè)標(biāo)簽的含義。

選擇合適匹配的元素

根據(jù)要編寫的內(nèi)容，可以選擇與文本含義相匹配的適當(dāng)元素。

不要過分考慮語義

大約有 100 個(gè)語義 HTML 元素可供選擇。遍歷該列表并為您的內(nèi)容選擇適當(dāng)?shù)脑乜赡軙?huì)讓人不知所措。

但是不要花太多時(shí)間擔(dān)心這一點(diǎn)。基本上能用好上面的標(biāo)簽就足夠好了。

一個(gè)有效的 HTML 文檔

HTML 文檔需要特定的結(jié)構(gòu)才能生效。

文檔類型

提供的第一個(gè)信息就是我們正在編寫的 HTML 文檔的類型：。

曾經(jīng)有很多 HTML 版本共存。如今，HTML 5 已經(jīng)成為規(guī)范。

所以，我們要告訴瀏覽器這個(gè) HTML 文檔是 HTML 5 的版本，只需要在最開始寫上：

注意：HTML 是大小寫不敏感的。這意味著你只需要單詞拼寫對(duì)就可以了——但仍需要保持規(guī)范。

“ HTML 5 文檔類型沒有提到數(shù)字 “5” 的原因是：W3C 認(rèn)為以前的文檔類型定義太混亂了，借機(jī)吧任何 HTML 版本的信息都給簡化掉了。

元素

除了 外，所有 HTML 文檔都必須包裝在一個(gè) 元素內(nèi)：

標(biāo)簽相當(dāng)于整個(gè)頁面（ 包裹的內(nèi)容）的屬性。為整個(gè)頁面提供了附加的額外信息，并且不會(huì)顯示。

例如，文檔的標(biāo)題就包含在 標(biāo)簽內(nèi)：

使我們編寫所有網(wǎng)頁內(nèi)容的地方。里面的所有內(nèi)容都會(huì)顯示在瀏覽器窗口中。

完整的有效 HTML 文檔

綜合所有這些要求，我們可以編寫一個(gè)簡單有效的 HTML 文檔：

  
    
  
  
    
歡迎關(guān)注公眾號(hào)：wmyskxz
  

瀏覽器視角：

Part 3. CSS 基礎(chǔ)為什么存在 CSS？

隨著 90 年代網(wǎng)絡(luò)的普及，將特定設(shè)計(jì)應(yīng)用于網(wǎng)站的意圖也隨之增強(qiáng)。Web 開發(fā)人員依靠特定的 HTML 標(biāo)簽來增強(qiáng)網(wǎng)頁顯示：

也可以使用幾個(gè) HTML 屬性：

但最重要的是，為了創(chuàng)建視覺上對(duì)齊（通常是彼此定位）的元素，Web 開發(fā)人員通常會(huì)使用 來設(shè)計(jì)網(wǎng)頁，因?yàn)樗匀坏靥峁┝艘曈X網(wǎng)格：

但這種方法很麻煩，原因如下：

這就是為什么逐漸放棄使用表進(jìn)行布局的原因，而改用 CSS 的原因。

什么是 CSS?

CSS 是 Style 的縮寫，即層疊樣式表。其目的是為標(biāo)記語言（如 HTML 或 XML）設(shè)置樣式。因此，CSS 本身一文不值，除非與 HTML 文檔相關(guān)聯(lián)。

CSS 通過設(shè)置字體、顏色，定義邊距、定位元素、動(dòng)畫交互等等html表格在默認(rèn)情況下有邊框，使 HTML 文檔栩栩如生。

CSS 是如何工作的?

CSS 的工作方式是選擇一個(gè) HTML 元素（如一個(gè)段落），選擇一個(gè)要更改的屬性（如顏色），并應(yīng)用一個(gè)特定的值（如紅色）：

p {color: red;}

“ "樣式" 一詞可能具有欺騙性。CSS 不僅僅可以用于修改文本的顏色、大小、字體等，還可以用來定義高度、寬度、內(nèi)部和外部的邊距、位置等。

我在哪里寫 CSS？CSS 作為標(biāo)簽屬性

您可以使用 style 屬性直接在 HTML 元素上編寫 CSS：

This paragraph will be red.

結(jié)果：

中的 CSS

您也可以在 中使用

HTML

CSS

HTML+CSS