HTML <aside> Tag

  • หน้าก่อนหน้า <article>
  • หน้าต่อไป <audio>

Panunuri at Paggamit

<aside> Tag defines ang ilang nilalaman kung saan ito ay hindi kasama sa kanyang nakakitaan na nilalaman.

Ang nilalaman ng aside ay dapat may kahalintulad na kaugnayan sa palibot na nilalaman.

Payo:<aside> Ang nilalaman ay karaniwang inilagay bilang sidebar sa dokumento.

Babala:<aside> Hindi na ipapakita ng elemento sa browser ang anumang espesyal na estilo. Subalit, maaari mong gamitin ang CSS upang itayo: <aside> Ang estilo ng elemento (tingnan ang mga halimbawa sa ibaba).

Mga pangalawang palatandaan:

Manwal sa HTML DOM:Objekto pang-aside

Mga halimbawa

Halimbawa 1

Ipakita ang ilang mga nilalaman kung saan ito ay hindi kasama sa kanyang nakakitaan na nilalaman:

<p>นี่ปีที่ผ่านมา ฉันและครอบครัวของฉันได้เยี่ยมชมสวนสัตว์น้ำหายทะเลฮาชันทงของนครเซี่ยงไฮ้ อากาศดีมาก สวนสัตว์น้ำหายทะเลดูแฝนฝันมาก! ฉันและครอบครัวของฉันได้มีช่วงเวลาที่ดีมากในฤดูร้อน!</p>
<aside>
<h4>Shanghai Haichang Ocean Park</h4>
<p>สวนสัตว์น้ำหายทะเลฮาชันทงของนครเซี่ยงไฮ้เป็นสวนสนุกที่ตั้งอยู่ในเขตนครเซี่ยงไฮ้นิวเซาท์เขตประมง ประกอบด้วยเอกลักษณ์วัฒนธรรมทะเล มีขนาดทั้งหมดประมาณ 29.7 ไร่ และยังเป็นสถานที่ท่องเที่ยวระดับ AAAA ของประเทศด้วย</p>
</aside>

ทดลองด้วยตัวเอง

Halimbawa 2

Iginayos ng CSS ang estilo ng elemento <aside>:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>
<h1>elemento pang-aside</h1>
<p>นี่ปีที่ผ่านมา ฉันและครอบครัวของฉันได้เยี่ยมชมสวนสัตว์น้ำหายทะเลฮาชันทงของนครเซี่ยงไฮ้ อากาศดีมาก สวนสัตว์น้ำหายทะเลดูแฝนฝันมาก! ฉันและครอบครัวของฉันได้มีช่วงเวลาที่ดีมากในฤดูร้อน!</p>
<aside>
<p>สวนสัตว์น้ำหายทะเลฮาชันทงของนครเซี่ยงไฮ้เป็นสวนสนุกที่ตั้งอยู่ในเขตนครเซี่ยงไฮ้นิวเซาท์เขตประมง ประกอบด้วยเอกลักษณ์วัฒนธรรมทะเล มีขนาดทั้งหมดประมาณ 29.7 ไร่ และยังเป็นสถานที่ท่องเที่ยวระดับ AAAA ของประเทศด้วย</p>
</aside>
<p>นี่ปีที่ผ่านมา ฉันและครอบครัวของฉันได้เยี่ยมชมสวนสัตว์น้ำหายทะเลฮาชันทงของนครเซี่ยงไฮ้ อากาศดีมาก สวนสัตว์น้ำหายทะเลดูแฝนฝันมาก! ฉันและครอบครัวของฉันได้มีช่วงเวลาที่ดีมากในฤดูร้อน!</p>
<p>นี่ปีที่ผ่านมา ฉันและครอบครัวของฉันได้เยี่ยมชมสวนสัตว์น้ำหายทะเลฮาชันทงของนครเซี่ยงไฮ้ อากาศดีมาก สวนสัตว์น้ำหายทะเลดูแฝนฝันมาก! ฉันและครอบครัวของฉันได้มีช่วงเวลาที่ดีมากในฤดูร้อน!</p>
</body>
</html>

ทดลองด้วยตัวเอง

เครื่องมือสำหรับทั้งหมด

<aside> แท็กส์ยังสนับสนุน เครื่องมือสำหรับทั้งหมดใน HTML.

เครื่องมือสำหรับเหตุการณ์

<aside> แท็กส์ยังสนับสนุน เครื่องมือสำหรับเหตุการณ์ใน HTML.

การตั้งค่า CSS โดยเริ่มต้น

โดยมากที่สุดเบราเซอร์จะแสดงค่าเริ่มต้นดังนี้ <aside> องค์ประกอบ：

aside {
  display: block;
}

การสนับสนุนโดยเบราเซอร์

ตัวเลขในตารางระบุสัปดาห์ของเบราเซอร์ที่สนับสนุนองค์ประกอบนี้เต็มที่

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1
  • หน้าก่อนหน้า <article>
  • หน้าต่อไป <audio>