国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[譯]HTML&CSS Lesson2: 了解HTML

TNFE / 1941人閱讀

摘要：塊狀元素可以相互嵌套，并且可以包裹內聯元素。內聯元素之間可以相互嵌套但是它們不可以包裹塊狀元素，我們常用講內聯元素用在小塊的內容上，比如幾句話。

我們初步了解了HTML和CSS，現在讓我們深入挖掘HTML并了解哪些元素構成了這種語言。

建設網站前，我們需要了解什么元素適合排版什么內容。這對于理解元素如何展示在頁面中以及元素的語義化都有非常重要的意義。

在工作中使用適當的元素排版需要長時間的實踐，但接下來的學習中我們將會合理的使用它們。

語義化概述

究竟什么是語義化呢？HTML語義化是在頁面中使用恰當的元素讓內容具有意義和結構。語義化編碼僅針對頁面的內容而不關心內容的樣式。使用語義化元素有很多的好處，包括使計算機，屏幕閱讀器，搜索引擎以及其他設備充分閱讀和理解頁面的內容。 另外，HTML語義化也更利于管理和使用，因為它非常清晰的顯示了每個內容是什么。

接下來的學習中，我們會一邊介紹新元素，一邊討論這些元素的實際意義和他們最能代表的內容類型。在此之前，我們先來看一下兩個元素：

，，它們沒有任何語義，僅用于排版。

辨別div和span

和兩個HTML元素都被當做容器，僅用于頁面排版。作為通用的容器，它們不具備任何意義和語義。舉個例子，段落的語義化元素為

，用

包裹的內容被理解為段落；但

和就沒有這樣的意義，是很純粹的容器。

塊狀元素與內聯元素
大部分的HTML元素都可被分為塊狀元素或內聯元素。那兩者之間有什么不同呢？
塊狀元素會另起一行，并多帶帶占據一整行空間。塊狀元素可以相互嵌套，并且可以包裹內聯元素。我們常用塊狀元素包裹大塊的內容，比如段落。

行內元素不會另起一行。它們被劃分為正常的文件流，一個接著一個顯示，寬度之隨著內容的變化而變化。內聯元素之間可以相互嵌套；但是它們不可以包裹塊狀元素，我們常用講內聯元素用在小塊的內容上，比如幾句話。

和在建站中都非常有價值，因為它們可以將針對性的樣式作用于整組被包裹的內容上。

作為塊狀元素，常用在大塊的內容，用來幫助頁面的布局和設計。作為內聯元素，常用在塊狀元素中的小塊內容。

我們通常會見到的

和元素都設置了class和id屬性用于調節樣式。選擇class和id屬性的值的時候，需要注意：我們要選擇一個代表元素內容的值，而不是元素要顯示的樣式。

舉個例子來說，我們有一個包裹了社交媒體鏈接(social media links)內容的

元素，背景色要設為橙色orange。我們第一個想到的就是將class屬性值設為orange。那么如果我們接下來將橙色背景換為藍色blue呢？這個時候orange這個屬性值就不再具有意義。更明智的選擇就是將class屬性值設為social，它代表
的內容，而不是樣式。






Soon we"ll be writing HTML with the best of them.

HTML和CSS的注釋

上述代碼中有感嘆號，那不是元素，而是HTML注釋

HTML和CSS都可以在代碼中添加注釋，注釋中的內容不會被展示在頁面上。注釋有助于我們保持代碼的有序性，允許我們設置提醒，并為我們提供了一種更有效的管理代碼的方法。 注釋在多人編輯一份文件的時候變得非常有用。

HTML注釋格式開始于， CSS注釋開始于/*結束于*/。

基于文本的元素

雖然線上存在著許多不同形式的媒體和內容，但文字是主要的。于是，頁面中就有了許多用于排版文字的元素。現在我們將一些更常用的元素，包括標題，段落，表示重要性的粗體和用于強調的斜體。

標題

標題都是塊狀元素，它們有六個等級，

到
。標題有助于快速分解內容并建立層次結構。它們是用戶閱讀頁面的關鍵標識符。它們也有助于搜索引擎索引和分析頁面的內容。

在頁面中使用標題要有順序。頁面或者章節的主標題應該用

元素，隨后根據需要使用

，

，

，
和
元素

每個等級的標題元素都應該用在適合它語義的地方，不應該單純為了使文字加粗或變大而使用它——我們有更好的方法做到。

以下是不同等級的標題元素的示例：

Heading Level 1


Heading Level 2


Heading Level 3


Heading Level 4


Heading Level 5


Heading Level 6

段落

標題后常跟著段落。段落用

元素來定義。段落可以一個接一個，按照需要展示在頁面上。以下是段落的示例：

Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.



In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up–advice which he sincerely took to heart.

用strong加粗文字

加粗和強調文本，我們可以使用內聯元素。我們有兩個元素可以加粗文本：和元素。理解它們的語義非常重要。

元素的語義是強調文本的重要性,因此它是最常用于加粗文本的元素。沒有特殊的語義，只是改變文本的樣式，因此在突出文本重要性這個方面它不是最好的選擇。我們可以根據需要選擇合適的元素。

以下是用兩種元素加粗文本的示例：



Caution: Falling rocks.




This recipe calls for bacon and baconnaise.

用em呈現斜體

用斜體強調文本，可以使用內聯元素。與加粗文本一樣，也有兩種元素可以設置斜體，它們也有不同的語義。

的語義是強調重點文本，因此它是最常用于斜體的元素。而另一個元素，語義是代替語音或者有語調的文本，類似于放在引號里。我們可以根據需要選擇合適的元素。

以下是斜體示例：



I love Chicago!




The name Shay means a gift.

創建結構

長時間以來，我們都用

來進行頁面布局，但是
本身沒有什么特殊的語義，確定這些div的作用會有些困難。 而現在HTML添加了很多新的結構化元素，包括
，

閱讀需要支付1元查看
<