首頁  >  文章  >  web前端  >  html5 aside標籤有什麼用? html5 aside標籤的使用總結(附實例)

html5 aside標籤有什麼用? html5 aside標籤的使用總結(附實例)

寻∝梦
寻∝梦原創
2018-08-28 17:53:5825464瀏覽

本篇文章主要的為大家介紹了關於HTML5中的aside標籤,介紹了標籤的作用和使用的方法實例說明,aside標籤作為文章的側欄,其作用還是挺大的,當然還有在網站製作時比較常用的兩種方法實例。

推薦手冊HTML5最新版參考手冊

好了,下面就讓我們一起來看看這篇文章吧

首先我們來看看這個html5 aside標籤的意思:

aside 的內容應該與附近的內容相關。

html5 aside標籤的作用:

#

<p>大家好,这里是PHP中文网.网址是www.php.cn</p>
<aside>
  <h4>编程教程</h4>
  这里有很多的优质的课程等你来学习
</aside>

效果就是下面這張圖:

html5 aside標籤有什麼用? html5 aside標籤的使用總結(附實例)

HTML5中aside標籤的兩種使用方法:

aside元素在網站製作中主要有以下兩種使用方法

1.被包含在article元素中作為主要內容的附屬資訊部分,其中的內容可以是與當前文章有關的相關資料、名次解釋,等等。

<article>
  <h1>PHP中文网</h1>
  <p>欢迎访问www.php.cn</p>
  <aside>这里是PHP中文网</aside>
</article>

先看看效果:

html5 aside標籤有什麼用? html5 aside標籤的使用總結(附實例)

#相關文章推薦
1.關於html中標籤和         
2.HTML5aside側邊欄的具體使用方法你知道嗎?  
相關影片推薦

1.獨孤九賤(1)_HTML5影片教學

2.在article元素之外使用作為頁面或站點全域的附屬資訊部分。最典型的是側邊欄,其中的內容可以使友情鏈接,博客中的其它文章列表、廣告單元等。

<aside>
  <h2>这还是PHP中文网</h2>
  <ul>
    <li>一个学编程必备的网站</li>
    <li>一个很活跃的网站</li>
  </ul>
  <h2>PHP中文网</h2>
  <ul>
    <li>欢迎你的到来</li>
    <li>想学什么编程都可以来</li>
  </ul>
</aside>

最後看看效果:

html5 aside標籤有什麼用? html5 aside標籤的使用總結(附實例)

【小編推薦】

html h1標籤怎麼居中?有關於html中的h1居中實例解析

HTML中標籤的class屬性的值及其使用方法總結

以上是html5 aside標籤有什麼用? html5 aside標籤的使用總結(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn