HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。
最常">
首頁 > web前端 > H5教程 > HTML5中的Article和Section元素認識及使用_html5教學技巧

HTML5中的Article和Section元素認識及使用_html5教學技巧

WBOY
發布: 2016-05-16 15:49:55
原創
2137 人瀏覽過
 
HTML5帶出了一系列新元素,並且將在未來廣泛應用。然而,有一些元素在使用時容易被混淆,包括以下兩個新元素:

最常被問起的問題是:在什麼情況下我們應該使用這些元素?以及我們應該如何正確的使用這些元素?

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

從描述中我們可以看出元素的作用就是分段,或多或少類似
。但它仍有一個特例。在文件中,加入了一段特別聲明:
「當一個元素只用於風格樣式或是為了腳本的方便,我們鼓勵作者使用
元素適用於,當元素的內容需要明確的列出時。當有複雜的樣式或腳本時,我們仍建議使用div元素。
第二,類似
  • 元素,section元素是用來列舉內容的。
    因此在現實例子中,使用
    元素的原因是結構化的列出部落格的內容,程式碼如下:





    複製程式碼
    程式碼如下:

    Blog Post Title

    Ice cream tart powder jelly-o.

    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. p>


    Blog Post Title


    Ice cream tart powder jelly-o.
    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.




    Blog Post Title


    Ice cream tart powder jelly-o.
    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.






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


    Article元素

    從名字上,它已經很好的詮釋了自己,但是我們仍要看看官方文檔上是如何描述它的:
    「在文檔,頁面,應用或是站點上的一個獨立部分,並且大體上,是可獨立分配,或是重複使用的,例如在發佈時。的評論,互動的小工具或小工具,或任何其他獨立項目的內容。的,例如博客,頁面內容或是論壇帖子。
    以下範例給出如何使用
    建立一個部落格文章。



    複製程式碼


    程式碼如下:



    This is Blog Post Title


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



    複製程式碼
    程式碼如下:

    This is Blog Post Title






    This is the Sub-Heading


    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 gingerb. 🎜>

    This is another Sub-Heading


    Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
    toffee sesame snaps tart top ppa drops
    toffee sesame snaps tart top ppa drops
    toffee sesame snaps tart top pa drops Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder>



    總結

    如萬維網的創始人和W3C的董事所預測的那般,所有HTML5創造出來的新元素都是為了是網路結構更加語義化。如何正確的應用這些元素在網頁開發者和設計者之間,仍有爭論。
    無論如何,不要混淆觀點。如我之前提出的,只要是合理的情況,且你看到使用了它使得結構變得意義非凡,那麼請用它。
  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板