成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[譯]HTML&CSS Lesson2: 了解HTML

TNFE / 1952人閱讀

摘要:塊狀元素可以相互嵌套,并且可以包裹內(nèi)聯(lián)元素。內(nèi)聯(lián)元素之間可以相互嵌套但是它們不可以包裹塊狀元素,我們常用講內(nèi)聯(lián)元素用在小塊的內(nèi)容上,比如幾句話。

我們初步了解了HTML和CSS,現(xiàn)在讓我們深入挖掘HTML并了解哪些元素構(gòu)成了這種語言。

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

在工作中使用適當(dāng)?shù)脑嘏虐嫘枰L時間的實踐,但接下來的學(xué)習(xí)中我們將會合理的使用它們。

語義化概述

究竟什么是語義化呢?HTML語義化是在頁面中使用恰當(dāng)?shù)脑刈寖?nèi)容具有意義和結(jié)構(gòu)。語義化編碼僅針對頁面的內(nèi)容而不關(guān)心內(nèi)容的樣式。使用語義化元素有很多的好處,包括使計算機,屏幕閱讀器,搜索引擎以及其他設(shè)備充分閱讀和理解頁面的內(nèi)容。 另外,HTML語義化也更利于管理和使用,因為它非常清晰的顯示了每個內(nèi)容是什么。

接下來的學(xué)習(xí)中,我們會一邊介紹新元素,一邊討論這些元素的實際意義和他們最能代表的內(nèi)容類型。在此之前,我們先來看一下兩個元素:

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

辨別div和span

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

,用

包裹的內(nèi)容被理解為段落;但

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

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

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

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

作為塊狀元素,常用在大塊的內(nèi)容,用來幫助頁面的布局和設(shè)計。作為內(nèi)聯(lián)元素,常用在塊狀元素中的小塊內(nèi)容。

我們通常會見到的

元素都設(shè)置了classid屬性用于調(diào)節(jié)樣式。選擇classid屬性的值的時候,需要注意:我們要選擇一個代表元素內(nèi)容的值,而不是元素要顯示的樣式。

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

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





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

HTML和CSS的注釋

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

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

HTML注釋格式開始于, CSS注釋開始于/*結(jié)束于*/

基于文本的元素

雖然線上存在著許多不同形式的媒體和內(nèi)容,但文字是主要的。于是,頁面中就有了許多用于排版文字的元素?,F(xiàn)在我們將一些更常用的元素,包括標(biāo)題,段落,表示重要性的粗體和用于強調(diào)的斜體。

標(biāo)題

標(biāo)題都是塊狀元素,它們有六個等級,

。標(biāo)題有助于快速分解內(nèi)容并建立層次結(jié)構(gòu)。它們是用戶閱讀頁面的關(guān)鍵標(biāo)識符。它們也有助于搜索引擎索引和分析頁面的內(nèi)容。

在頁面中使用標(biāo)題要有順序。頁面或者章節(jié)的主標(biāo)題應(yīng)該用

元素,隨后根據(jù)需要使用

,

,

元素

每個等級的標(biāo)題元素都應(yīng)該用在適合它語義的地方,不應(yīng)該單純?yōu)榱耸刮淖旨哟只蜃兇蠖褂盟覀冇懈玫姆椒ㄗ龅健?/p>

以下是不同等級的標(biāo)題元素的示例:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

段落

標(biāo)題后常跟著段落。段落用

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

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加粗文字

加粗和強調(diào)文本,我們可以使用內(nèi)聯(lián)元素。我們有兩個元素可以加粗文本:元素。理解它們的語義非常重要。

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

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


Caution: Falling rocks.

This recipe calls for bacon and baconnaise.

用em呈現(xiàn)斜體

用斜體強調(diào)文本,可以使用內(nèi)聯(lián)元素。與加粗文本一樣,也有兩種元素可以設(shè)置斜體,它們也有不同的語義。

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

以下是斜體示例:


I love Chicago!

The name Shay means a gift.

創(chuàng)建結(jié)構(gòu)

長時間以來,我們都用

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

閱讀需要支付1元查看
<