国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

HTML5中的Article和Section元素認識及使用

2020-03-24 16:32:44
字體:
來源:轉載
供稿:網友

HTML5帶出了一系列新元素,并且將在未來被廣泛應用。然而,有一些元素在使用時易被混淆,包括以下兩個新元素: article 和 section 。
最常被問起的問題是:在什么情況下我們應該使用這些元素?以及我們應該如何正確的使用這些元素?

Section元素
這 是一個最容易產生歧義的元素。它與 div 元素有什么區別?我們一直在用 div 來劃分段落,所以除 了 div ,我們什么時候使用這個元素。我們引用官方文檔來闡述它。根據WHATWG文檔,對 section 元素做了以下 描述:
section 元素表示了一篇文檔或應用中,通用段落 - WHATWG

從描述中我們可以看出 section 元素的作用就是分段,或多或少類似于 div 。但是它仍有一個特例。在文檔中,加入了一段特別聲明:
當一個元素僅用于風格樣式或是為了腳本的方便,我們鼓勵作者使用 div 。 section 元素適用于,當元素的內容需要明確的列出時。- WHATWG

基于這一點,我們可以總結以下兩點:
第一,盡管section元素在技術上是可以設計樣式的,但是當有復雜的樣式或腳本時,我們仍建議使用div元素。
第二,類似于 li 元素,section元素是用來列舉內容的。

因此在現實例子中,使用 section 元素的原因是結構化的列出博客的內容,代碼如下:

復制代碼代碼如下:
div
section
h2 Blog Post Title /h2
p Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. /p
/section
section
h2 Blog Post Title /h2
p Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. /p
/section
section
h2 Blog Post Title /h2
p Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. /p
/section
/div

這只是個例子, section 元素也可以用作其他用途。

Article元素
從名字上,它已經很好的詮釋了自己,但是我們仍要看看官方文檔上是如何描述它的:
在文檔,頁面,應用或是站點上的一個獨立部分,并且大體上,是可獨立分配,或是重復使用的,例如在發布時。這個可以是論壇帖子,雜志或是新聞,博客條目,用戶提交的評論,互動的小工具或小工具,或任何其他獨立項目的內容。

從上描述中,我們可以總結出 article 元素專用于結構化文章,特別是我們要發布的,例如博客,頁面內容或是論壇帖子。
以下例子給出了如何使用 article 構建一個博客文章。

復制代碼代碼如下:
article
header
h1 This is Blog Post Title /h1
div
ul
li Author Name /li
li Save in Categories /li
/ul
/div
/header
div
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
/div
/article

此外, article 元素還可與section元素結合,需要的時候,可以使用 section 元素將文章分為幾個段落,如下例所示。

復制代碼代碼如下:
article
header
h1 This is Blog Post Title /h1
div
ul
li Author Name /li
li Save in Categories /li
/ul
/div
/header
div
section
h2 This is the Sub-Heading /h2
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
gummies danish biscuit applicake gingerbread jelly-o pastry.
/section
section
h3 This is another Sub-Heading /h3
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
Cheesecake gummi bears drag e jujubes drag e drag e brownie jelly biscuit. Powder croissant jelly beans pastry.
/section
/div
/article

總結
如萬維網的創始人和W3C的董事所預測的那般,所有HTML5創造出來的新元素都是為了是網絡結構更加語義化。如何正確的應用這些元素在網絡開發者和設計者之間,仍存有爭論。
無論如何,不要混淆觀點。如我之前提出的,只要是合理的情況,且你看到使用了它使得結構變得意義非凡,那么請用它。html教程

鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 沙田区| 新密市| 弥渡县| 临沧市| 达孜县| 祁东县| 拜城县| 宁陵县| 固原市| 齐河县| 库伦旗| 祁阳县| 沐川县| 玉溪市| 黔南| 泊头市| 和林格尔县| 平利县| 资兴市| 涿鹿县| 盐城市| 尼玛县| 瓦房店市| 玉树县| 高唐县| 双流县| 侯马市| 孝感市| 五莲县| 龙州县| 博湖县| 收藏| 洪湖市| 九台市| 洛隆县| 邹平县| 高州市| 子洲县| 黄浦区| 红安县| 黄山市|