HTML <h1> ຫາ <h6> ອັບພິດ

ການກຳນົດ ແລະ ການນໍາໃຊ້

<h1> ທີ່ <h6> ອີກວ່າຕິດຕາມກຳນົດຫົວໜ້າ HTML.

<h1> ກຳນົດຫົວໜ້າທີ່ສໍາຄັນທີ່ສຸດ.<h6> ກຳນົດຫົວໜ້າທີ່ບໍ່ສໍາຄັນທີ່ສຸດ.

ບໍ່ວ່າ

ແຕ່ລະໜ້າງມີພຽງການໃຊ້ຫົວໜ້າຫຼຽນດຽວ <h1> - ນັ້ນຄວນຈະສະແດງຄວາມຫົວໜ້າ/ຫົວຂໍ້ຂອງຫົວໜ້າບາງໜ້າ. ບໍ່ຕ້ອງຫຼຸດຫຼັງຫົວໜ້າຂັ້ນວິນຍານ - <h1> ເລີ່ມ, ແລະນຳໃຊ້ <h2>ຕື່ມອີກ.

ຍ້ອນວ່າ h ສະໂມສອນມີຄວາມມະນຸດທີ່ຈະແຈ້ງຫນັງ, ກະວຍໄປກັບການເລືອກລົງອັນຕະລາງຂອງອັນຕະລາງຂອງເອກະສານຂອງເຈົ້າ. ດັ່ງນັ້ນ, ບໍ່ຕ້ອງໃຊ້ອີກຫົວຂໍ້ເພີ່ມຂະໜາດຫົວໜ້າໃນການກະຈຽງຄືກັນ. ແຕ່ວ່າ, ພວກເຮົາຄວນໃຊ້ CSS ການກະຈຽງທີ່ມີຈຸດສາມາດທີ່ຈະສະແດງຄວາມສະຫຼາດ.

ຖ້າເຈົ້າຕ້ອງການຮູ້ຂໍ້ມູນຫຼາຍກວ່າ ກ່ຽວກັບການເລືອກລົງແລະນຳໃຊ້ອີກຢ່າງໃຫຍ່ຫຼາຍກວ່າຂອງ HTML ອີກຄວາມມະນຸດຂອງເວັບໄຊ》。

ບໍ່ດັ່ງນັ້ນ

ການສອນ HTMLHTML ຫົວຂໍ້

ປື້ມການປະສົງ HTML DOMໂອກາດຫົວຂໍ້

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ຫົວຂໍ້ HTML ທີ່ຫຼາຍຫົກຢ່າງ

<h1>ນີ້ແມ່ນຫົວຂໍ້ 1</h1>
<h2>ນີ້ແມ່ນຫົວຂໍ້ 2</h2>
<h3>ນີ້ແມ່ນຫົວຂໍ້ 3</h3>
<h4>ນີ້ແມ່ນຫົວຂໍ້ 4</h4>
<h5>ນີ້ແມ່ນຫົວຂໍ້ 5</h5>
<h6>ນີ້ແມ່ນຫົວຂໍ້ 6</h6>

ທົດລອງດຽວນີ້

ຕົວຢ່າງ 2

ການກະຈະສີທີ່ຫຼັງແລະສີຂອງຫົວ (ນຳໃຊ້ CSS):

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

ທົດລອງດຽວນີ້

ຕົວຢ່າງ 3

ການກະຈະຕົວຫົວ (ນຳໃຊ້ CSS):

<h1 style="text-align:center">ນີ້ແມ່ນຫົວຂໍ້ 1</h1>
<h2 style="text-align:left">ນີ້ແມ່ນຫົວຂໍ້ 2</h2>
<h3 style="text-align:right">ນີ້ແມ່ນຫົວຂໍ້ 3</h3>
<h4 style="text-align:justify">ນີ້ແມ່ນຫົວຂໍ້ 4</h4>

ທົດລອງດຽວນີ້

ການປະສົງປະສັກທົ່ວໄປ

<h1> - <h6> ອີກຢ່າງໜຶ່ງ ການປະສົງປະສັກທົ່ວໄປ HTML

ການປະສົງປະສັກ

<h1> - <h6> ອີກຢ່າງໜຶ່ງ ການປະສົງປະສັກຂອງ HTML

ການກະຈະ CSS ຄົນປະຈຳ

ສິ່ງທີ່ສ່ວນຫຼາຍບຸກມຸງຈະໃຊ້ຄືກັບຄວາມສະເພາະທີ່ກ່າວຫາ <h1> ປະກອບ

ຕົວຢ່າງ 1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ທົດລອງດຽວນີ້

ສິ່ງທີ່ສ່ວນຫຼາຍບຸກມຸງຈະໃຊ້ຄືກັບຄວາມສະເພາະທີ່ກ່າວຫາ <h2> ປະກອບ

ຕົວຢ່າງ 2

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ທົດລອງດຽວນີ້

ສິ່ງທີ່ສ່ວນຫຼາຍບຸກມຸງຈະໃຊ້ຄືກັບຄວາມສະເພາະທີ່ກ່າວຫາ <h3> ປະກອບ

ຕົວຢ່າງ 3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ທົດລອງດຽວນີ້

ສິ່ງທີ່ສ່ວນຫຼາຍບຸກມຸງຈະໃຊ້ຄືກັບຄວາມສະເພາະທີ່ກ່າວຫາ <h4> ປະກອບ

ຕົວຢ່າງ 4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ທົດລອງດຽວນີ້

ສິ່ງທີ່ສ່ວນຫຼາຍບຸກມຸງຈະໃຊ້ຄືກັບຄວາມສະເພາະທີ່ກ່າວຫາ <h5> ປະກອບ

ບົດທີ 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ທົດລອງດຽວນີ້

ສິ່ງທີ່ສ່ວນຫຼາຍບຸກມຸງຈະໃຊ້ຄືກັບຄວາມສະເພາະທີ່ກ່າວຫາ <h6> ປະກອບ

ບົດທີ 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

ທົດລອງດຽວນີ້

ການສະໜັບສະໜູນບັນດາບຸກມຸງ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ