HTML 中的 Aside 標籤-html教學-PHP中文網

HTML 中 Aside 標籤的屬性

全域屬性

事件屬性

HTML 中 Aside 標籤的範例

範例 #1 – 在

範例 #2 – 外部標記

範例 #3 – 樣式標籤

結論

首頁

web前端

html教學

HTML 中的 Aside 標籤

王林

Sep 04, 2024 pm 04:21 PM

html html5 HTML Tutorial HTML Properties HTML tags

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

文法：

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

登入後複製

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

HTML 中 Aside 標籤的屬性

以下是 HTML 中 Aside Tag 的屬性：

全域屬性

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

事件屬性

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

HTML 中 Aside 標籤的範例

讓我們討論一些定義

範例 #1 – 在

內部新增標籤

代碼：

<html>
<body>
<h1>A. P. J. Abdul Kalam</h1>
<article>
<aside style="float:right;width:20%; background-color:deepskyblue;padding:20 20px;">
<img src="APJ.jpg" style="height:40%; width:100%;">
</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>
</body>
</html>

登入後複製

輸出：

HTML 中的 Aside 標籤

範例 #2 – 外部標記

代碼：

<html>
<head>
<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>
</head>
<body>
<div class = "demo"><u>Delhi factory tragedy</u></div>
<aside>
<h1>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>
</body>
</html>

登入後複製

輸出：

HTML 中的 Aside 標籤

範例 #3 – 樣式標籤

代碼：

<body>
<article>
<h1>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="Miss.jpg" style="height:10%; width:20%;">
</article>
<p>The two runners-up for the crown were Miss Mexico and Miss Puerto Rico.</p>
</body>

登入後複製

輸出：

HTML 中的 Aside 標籤