HTML 中的 Aside 標籤

HTML中的Aside標籤主要用於顯示網頁的重要內容。它用作螢光筆，重點關注網頁中的主要內容。 HTML中的這個標籤也用於將網頁劃分或分區，但這僅用於關注網頁的主要內容。它用於使網頁的設計更加容易，這將使包含的 HTML 文件更加清晰。網頁上旁白標籤的主要放置區域位於側邊欄或標註框中。

文法：

<aside>
<p>some text</p>
</aside>

• 標籤包含在 標籤內的 HTML 程式碼中。這用於定義作者的傳記、廣告、頁面定義、個人資料詳細資訊和一些重要的連結。它可以在網頁內的任何位置使用。它主要用在 HTML 5 中。
• 它應該在文章元素內或在該文章元素之外使用。當將此標籤與文章元素一起使用時，它必須包含文章的內容。當它要在article元素之外使用時，它必須包含與整個網頁相關的資料。
• 這被視為 HTML 中的區塊級元素。人們可以在
  中使用區塊級元素和內聯元素。標籤或文字元素。它不依賴 HTML 中的任何特定屬性。
• 但是像其他標籤一樣，
  標籤也支援全域屬性以及事件屬性。

HTML 中 Aside 標籤的屬性

以下是 HTML 中 Aside Tag 的屬性：

全域屬性

標籤支援多種全域屬性，其中一些屬性如下：

• accesskey：用作突出顯示特定屬性的快速鍵。
• class：用來為包含的元素定義一個或多個類別名稱。
• contenteditable：此屬性用於提供元素的詳細信息，無論其是否可編輯。
• 資料：此屬性有助於將自訂資料私下收集到所需的頁面或應用程式。
• 可拖曳：定義元素是否可拖曳。

事件屬性

標籤也支援事件屬性；其中一些如下：

• onafterprint：此屬性用於在列印文件時執行腳本。
• onerror: 每當發生任何錯誤時，都會執行此屬性。
• onmessage:觸發訊息時會發生此腳本。
• onpageshow：每當使用者從一個頁面導航到另一個頁面時，此事件屬性都會運作。
• onstorage：每當網路儲存區域更新時，此屬性都會執行腳本。

HTML 中 Aside 標籤的範例

讓我們討論一些定義

標籤的範例，它實際上將如何在 HTML 5 中使用：

範例 #1 – 在

內部新增標籤

代碼：

<h1 id="A-P-J-Abdul-Kalam">A. P. J. Abdul Kalam</h1>
<article>
<aside style="float:right;width:20%; background-color:deepskyblue;padding:20 20px;">
<img  src="/static/imghwm/default1.png" data-src="APJ.jpg" class="lazy"   style="max-width:90%" alt="HTML 中的 Aside 標籤" >
</aside>
<p style="width:80%;padding:20px;">
Dr.A.P.J Abdul Kalam was known as one the most  famous personality in the India.  His full name was Avul Pakir Jainulabdeen Abdul Kalam. His whole life journey comes in between  15 october 1931 – 27 july 2015 . .In this time he was worked as aerospace scientist .  Rameswaram ,Tamil Nadu was his birthplace. As well as he was completed his education in physics and aerospace engineering from Tamilnadu state itself. He was provide service to the nation as being  11<sup>th</sup> president of India from 2002 to 2007.  He almost spend  4 decades of service as being scientist and science administrator , majorly he was active participants at the Defence Research and Development Organisation (DRDO) and in  most famous organization of India i.e  and Indian Space Research Organization (ISRO).  Due to his active participation in those  organization  and had part of India’s military missile development  he was known as Missile Man of India. He played very important role in nuclear test which is taken by India for Pokharan -2 nuclear test in the year 1998.<br> He was well known personality in all reputed fields like education, aerospace, military, public service and into the writing. He died on 27 July 2015, aged 83</p>
</article>

輸出：

範例 #2 – 外部標記

代碼：

<title>Aside tag</title>
<style>
.demo {
font-size:30px;
font-weight:bold;
}
h1 {
font-size:30px;
color:purple;
font-weight:bold;
}
p {
font-size:20px;
margin:20px 0;
}
</style>


<div class="demo"><u>Delhi factory tragedy</u></div>
<aside>
<h1 id="Delhi-fire-tragedy-Meet-fireman-Sunil-Kumar-who-saved-more-than-dozen-lives">Delhi fire tragedy: Meet fireman Sunil Kumar who saved more than dozen lives</h1>        <p>
Meet fireman Sunil Kumar, who along with his team, saved the lives of more than a dozen of people from the bag manufacturing factory fire in Delhi's Anaj Mandi area this morning. The early morning fire had left over 40 dead and many injured.<br>As soon as Sunil Kumar, who is also a President award winner, arrived at the spot with his team from Prasad Nagar, it was very difficult for the fire tender to reach the site from the main road, but somehow one fire tender entered while other fire tenders were waiting on the road
.</p>
</aside>

 輸出：

範例 #3 – 樣式標籤

代碼：

<article>
<h1 id="Miss-South-Africa-crowned-Miss-Universe">Miss South Africa crowned 2019 Miss Universe</h1>
<p>Miss Universe 2018 Catriona Gray of the Philippines crowns the new Miss Universe 2019, South Africa's Zozibini Tunzi, during the pageant at Tyler Perry Studios in Atlanta, Georgia, on December 8, 2019.
</p>
<img  src="/static/imghwm/default1.png" data-src="Miss.jpg" class="lazy"   style="max-width:90%" alt="HTML 中的 Aside 標籤" >
</article>
<p>The two runners-up for the crown were Miss Mexico and Miss Puerto Rico.</p>

輸出：

結論

HTML中的

標籤特別用作區塊級元素，但它也支援內聯元素或文字元素。此類元素用來表示網頁的主要內容。它顯示了作者的詳細資訊、一些重要的網頁連結、廣告部落格等。該元素可以在article元素內部或外部使用。

以上是HTML 中的 Aside 標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！