8 tags HTML ທີ່ທ່ານຕ້ອງການໃຊ້ (ແລະ 5 ເພື່ອຫລີກລ້ຽງ)

ກະວີ: John Stephens
ວັນທີຂອງການສ້າງ: 2 ເດືອນມັງກອນ 2021
ວັນທີປັບປຸງ: 19 ເດືອນພຶດສະພາ 2024
Anonim
8 tags HTML ທີ່ທ່ານຕ້ອງການໃຊ້ (ແລະ 5 ເພື່ອຫລີກລ້ຽງ) - Creative
8 tags HTML ທີ່ທ່ານຕ້ອງການໃຊ້ (ແລະ 5 ເພື່ອຫລີກລ້ຽງ) - Creative

ເນື້ອຫາ

ເມື່ອການ ກຳ ນົດສະເພາະຂອງ HTML5, ມັນໄດ້ ນຳ ເອົາປ້າຍຊື່ semantic ໃໝ່, ເຊິ່ງໃຫ້ຄວາມ ໝາຍ ເພີ່ມເຕີມຕໍ່ກັບ HTML tags. ຂ່າວດີ ສຳ ລັບນັກອອກແບບເວບໄຊທ໌, ຜູ້ທີ່ບໍ່ຕ້ອງຜະລິດ div> tags ເພື່ອສ້າງໂຄງສ້າງເວັບໄຊທ໌ຂອງພວກເຂົາອີກຕໍ່ໄປ.

ໃນຂະນະທີ່ແທັກ HTML ຂັ້ນພື້ນຖານຄ້າຍຄື header>, footer> ແລະ nav> ແມ່ນ ຄຳ ອະທິບາຍດ້ວຍຕົນເອງ, ມີ plethora ຂອງ HTML ທີ່ ໃໝ່ ກວ່າທີ່ນັກອອກແບບເວັບຕ້ອງການ ນຳ ໃຊ້ເຊັ່ນກັນ. ໃນບົດຂຽນນີ້, ພວກເຮົາໄດ້ຮວບຮວມປ້າຍ HTML ທີ່ ສຳ ຄັນ ຈຳ ນວນແປດອັນທີ່ທ່ານຕ້ອງການໃຊ້, ແລະອະທິບາຍວິທີເຮັດແນວນັ້ນ. ເພື່ອຄວາມສົມດຸນ, ພວກເຮົາຍັງໄດ້ເລືອກເອົາຫ້າປ້າຍທີ່ ຈຳ ເປັນຕ້ອງຖືກກັກຂັງໄວ້ໃນບ່ອນປິດຂອງປະຫວັດສາດເວັບ.

ສຳ ລັບ ຄຳ ແນະ ນຳ ກ່ຽວກັບການອອກແບບເວບໄຊທ໌, ເບິ່ງເຄື່ອງມືອອກແບບເວບໄຊທ໌ຂອງພວກເຮົາຮອບ, ລາຍຊື່ນັກສ້າງເວບໄຊທ໌ຊັ້ນ ນຳ ຫລືຄູ່ມືຂອງພວກເຮົາກ່ຽວກັບວິທີສ້າງແອັບ.

01. ຮູບ>

ຮູບພາບ> tag ແມ່ນຄ້າຍຄືກັນກັບ img>, ໄດ້ ຮູບພາບ> ອົງປະກອບສະຫນອງຄວາມຍືດຫຍຸ່ນໂດຍການອະນຸຍາດໃຫ້ຫຼາຍ ແຫຼ່ງຂໍ້ມູນ> ອົງປະກອບ ສຳ ລັບຊັບພະຍາກອນດຽວກັນ, ເຊິ່ງສາມາດປັບຕົວໄດ້ໂດຍອີງໃສ່ການສອບຖາມສື່ຫຼືການສະ ໜັບ ສະ ໜູນ ປະເພດຮູບພາບ. ຍົກຕົວຢ່າງ, ມັນສາມາດສະ ໜອງ ຮູບພາບຂອງ WebP ໃຫ້ກັບໂປຣແກຣມທ່ອງເວັບທີ່ຮອງຮັບເອກະສານທີ່ ໃໝ່ ແລະຂະ ໜາດ ນ້ອຍກວ່າ.


02. datalist>

datalist> tag ໃຫ້ການໂຕ້ຕອບອັດຕະໂນມັດ ສຳ ລັບ ປ້ອນຂໍ້ມູນ> ອົງປະກອບ. ບັນຊີລາຍຊື່ແຕ່ລະບັນຈຸມີຊຸດຂອງ ທາງເລືອກ> ອົງປະກອບທີ່ມີມູນຄ່າທີ່ກ່ຽວຂ້ອງ. ເມື່ອເຊື່ອມໂຍງກັບ an ປ້ອນຂໍ້ມູນ> ການ ນຳ ໃຊ້ຄຸນລັກສະນະ“ ບັນຊີລາຍຊື່”, ມັນສາມາດສະ ໜອງ ບັນຊີລາຍຊື່ແບບເລື່ອນລົງຫຼືແມ່ນແຕ່ສະແດງ ຄຳ ແນະ ນຳ ທີ່ເປັນປະເພດຜູ້ໃຊ້.

03. dl>

ບັນຊີລາຍລະອຽດນີ້, ຫຼື dl> tag, ອົງປະກອບເຮັດ ໜ້າ ທີ່ເປັນພາຊະນະ ສຳ ລັບກຸ່ມ ຄຳ ສັບທີ່ ກຳ ນົດ. ພາຍໃນ, ແຕ່ລະ ຄຳ ສັບ (dt>) ແລະນິຍາມ (dd>) ຖືກຈັດເປັນກຸ່ມເຂົ້າກັນເພື່ອສ້າງໂຄງປະກອບຄ້າຍຄື ຄຳ ສັບ. ໃນຂະນະທີ່ມັນ ນຳ ໃຊ້ການຈັດຮູບແບບພື້ນຖານໂດຍຄ່າເລີ່ມຕົ້ນ, HTML ທີ່ມີປະໂຫຍດສູງ ສຳ ລັບຜູ້ອ່ານ ໜ້າ ຈໍແລະເຄື່ອງມືອັດຕະໂນມັດອື່ນໆເຊັ່ນ: ຕົວກວາດເວັບ.

04. ລາຍລະອຽດ>

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


05. dfn>

ຄຳ ສັບທີ່ສັບຊ້ອນຫລື ຄຳ ຫຍໍ້ມັກຈະຕ້ອງ ກຳ ນົດ ຄຳ ສັບທີ່ບໍ່ຄຸ້ນເຄີຍ. ໄລຍະຫໍ່ເປັນກ dfn> tag ຈະຖືກ ກຳ ນົດໂດຍຂໍ້ຄວາມທີ່ຢູ່ອ້ອມຮອບມັນ. ນີ້ແມ່ນສ່ວນປະກອບທີ່ຢູ່ໃນເສັ້ນແລະຖືກອອກແບບມາເພື່ອໃຊ້ເພື່ອເນັ້ນ ຄຳ ນິຍາມໃນພາສາຂອງມະນຸດ.

06. ຮູບ>

ຕົວເລກຖືກ ກຳ ນົດເປັນຫົວ ໜ່ວຍ ຂອງເນື້ອຫາທີ່ມັກຈະປະກົດຂື້ນໃນກະແສຫຼັກຂອງເອກະສານແຕ່ສາມາດຕີຄວາມ ໝາຍ ຕ່າງຫາກ. ທ ຮູບ> ອົງປະກອບຫໍ່ຮູບພາບຫຼືເນື້ອຫາອ້າງອີງອື່ນໆແລະຍັງສາມາດລວມເອົາ ຄຳ ອະທິບາຍຂອງເນື້ອໃນຂອງມັນຢູ່ ນຳ ຮູບພາບ>.

07. ລະຫັດ>

ດ້ວຍການຂຽນດ້ານວິຊາການ, ມັນສາມາດເປັນປະໂຫຍດໃນການແຍກລະຫັດຄອມພິວເຕີທີ່ເບິ່ງເຫັນຈາກສ່ວນທີ່ເຫຼືອຂອງປະໂຫຍກ. ໂດຍການຫໍ່ແຕ່ລະເຫດການທີ່ເກີດຂື້ນໃນ a ລະຫັດ> tag, browser ສາມາດ ນຳ ໃຊ້ຮູບແບບເລີ່ມຕົ້ນບາງຢ່າງເພື່ອສະແດງໃຫ້ ເໝາະ ສົມກວ່າ. ສົມທົບກັບ pre> ສຳ ລັບບລັອກລະຫັດທີ່ໃຫຍ່ກວ່າ.


08. ເວລາ>

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

5 tags HTML ເພື່ອຫລີກລ້ຽງ

ການ ກຳ ນົດ HTML ມີຫຼາຍປ້າຍຊື່ມໍລະດົກທີ່ຍັງສາມາດ ນຳ ໃຊ້ໄດ້, ແລະຍັງຈະເຮັດວຽກຢູ່, ແຕ່ຄວາມຈິງທີ່ງ່າຍດາຍກໍ່ຄືວ່າ, ໂດຍທົ່ວໄປແລ້ວຈະມີທາງເລືອກທີ່ດີກວ່າຢູ່ບ່ອນນັ້ນ. ແລະ, ຖ້າມີທາງເລືອກທີ່ດີກວ່ານີ້ທ່ານກໍ່ ຈຳ ເປັນຕ້ອງໃຊ້ມັນ.

ມັນຍັງມີບັນຫາຂອງການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບ. ບາງແທັກຈະບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ໃນທຸກໆໂປແກຼມທ່ອງເວັບອີກຕໍ່ໄປ, ແຕ່ສິ່ງເຫຼົ່ານີ້ສາມາດເບິ່ງບໍ່ເຫັນໄດ້ເມື່ອເບິ່ງການອອກແບບ ໜ້າ ເວບໄຊທ໌. ອີກເທື່ອ ໜຶ່ງ ສິ່ງເຫຼົ່ານີ້ ຈຳ ເປັນຕ້ອງໄດ້ຖືກທົດແທນ.

ຂ້າງລຸ່ມນີ້ທ່ານຈະເຫັນຫ້າປ້າຍທີ່ບໍ່ຄວນນັ່ງຢູ່ໃນ HTML ຂອງ ໜ້າ ໃດ ໜຶ່ງ ຢ່າງແນ່ນອນ. ຖ້າທ່ານເຫັນສິ່ງໃດ ໜຶ່ງ ໃນລະຫັດຂອງທ່ານໃຫ້ແນ່ໃຈວ່າມັນຖືກປ່ຽນແທນດ້ວຍແທັກທີ່ ເໝາະ ສົມກວ່າຫຼືຖືກລຶບອອກທັງ ໝົດ.

01. ຕົວອັກສອນ>

ທາງປະຫວັດສາດ, font> tag ຖືກໃຊ້ເພື່ອອອກແບບ block block ຕົວ ໜັງ ສື, ດຽວນີ້ດີທີ່ສຸດໃນການ ກຳ ນົດເປົ້າ ໝາຍ ແລະຂຽນແບບດ້ວຍ CSS. ອີງຕາມ Advanced Web Ranking, ເກືອບ 6,5 ລ້ານເວັບໄຊທ໌ທ໌ຍັງໃຊ້ປ້າຍຢູ່ນີ້ເຖິງວ່າຈະຖືກປະກາດໃຊ້ເປັນເວລາຫລາຍປີ.

02. menuitem>

ເມື່ອປະສົມປະສານກັບ ເມນູ>, ໄດ້ menuitem> ແທັກຈະສະ ໜອງ ທາງເລືອກແລະການກະ ທຳ ເພື່ອ ດຳ ເນີນການພາຍໃນເມນູສະພາບການ. ດຽວນີ້ມັນຖືກຍ້າຍອອກຈາກສະເພາະເນື່ອງຈາກວ່າມັນບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ຈາກ browser ຫລາຍ.

03. ໃຫຍ່>

ໃຫຍ່> tag ຈະໄດ້ເພີ່ມຂະ ໜາດ ຂອງຕົວ ໜັງ ສືພາຍໃນ tag ໂດຍລະດັບ ໜຶ່ງ. ຄູ່ຂອງມັນ ຂະ ໜາດ ນ້ອຍ> ຍັງໃຊ້ HTML ທີ່ຖືກຕ້ອງ, ແຕ່ດຽວນີ້ມີຄວາມ ໝາຍ ທີ່ແນ່ນອນທີ່ ໝາຍ ເຖິງການພິມນ້ອຍໆ.

04. ສູນ>

ກ່ອນ ໜ້າ ນີ້ ສູນກາງ> ແທັກແມ່ນວິທີດຽວທີ່ຈະລວມສູນເນື້ອຫາທັງໃນບລັອກແລະເສັ້ນ, ແຕ່ດຽວນີ້ມັນຖືກປ່ຽນແທນດ້ວຍ“text-align: ສູນ” ໃນ CSS, ເຊິ່ງເຮັດວຽກດຽວກັນ.

05. marquee>

marquee> ແທັກໄດ້ອະນຸຍາດໃຫ້ຕົວ ໜັງ ສືພາຍໃນແທັກຍ້າຍໄປທົ່ວ ໜ້າ ຈໍຄືກັບເຄື່ອງ ໝາຍ ຂ່າວ. ໃນຂະນະທີ່ກ່ອນ ໜ້າ ນີ້ຄຸນລັກສະນະທີ່ນິຍົມຂອງເວັບມັນໄດ້ຖືກຈັດປະເພດໃຫ້ລ້າສະໄຫມເພື່ອໃຫ້ພາບເຄື່ອນໄຫວທີ່ອີງໃສ່ CSS.

ເພື່ອໃຫ້ເວັບໄຊທ໌ຂອງທ່ານ ດຳ ເນີນການຕາມທີ່ທ່ານຕ້ອງການ, ໃຫ້ແນ່ໃຈວ່າທ່ານໄດ້ຮັບບໍລິການໂຮດຕິ້ງທີ່ ເໝາະ ສົມ ສຳ ລັບທ່ານ. ມີຊັບສິນຫລາຍໆອັນທີ່ຈະ ໜີ ອອກໄປບໍ? ທ່ານຕ້ອງການການເກັບຮັກສາຟັງທີ່ເຊື່ອຖືໄດ້.

  • ເຄື່ອງມືອອກແບບເວບໄຊທ໌: ເພື່ອຊ່ວຍໃຫ້ທ່ານເຮັດວຽກທີ່ສະຫລາດກວ່າ
  • ຄຳ ແນະ ນຳ ກ່ຽວກັບການອອກແບບເວັບທີ່ຕອບສະ ໜອງ: ຊັບພະຍາກອນທີ່ມີປະໂຫຍດແທ້ໆ
  • ແລັບທັອບ ສຳ ລັບການຂຽນໂປແກຼມ: ທາງເລືອກທີ່ດີທີ່ສຸດ
ບົດຂຽນໃຫມ່
ຄູ່ມືຂອງຂວັນວັນຄຣິດສະມາດ ສຳ ລັບສິລະປິນ 3D ແລະ VFX ພາຍໃຕ້ under 100 / $ 125
ອ່ານ​ຕື່ມ

ຄູ່ມືຂອງຂວັນວັນຄຣິດສະມາດ ສຳ ລັບສິລະປິນ 3D ແລະ VFX ພາຍໃຕ້ under 100 / $ 125

ຖ້າທ່ານເປັນສິລະປິນ 3D ຫລື VFX, ມັນງ່າຍທີ່ຈະເບິ່ງຂ້າມສິ່ງທີ່ລຽບງ່າຍເມື່ອຄິດເຖິງລາຍການທີ່ທ່ານຕ້ອງການ. ແທນທີ່ທ່ານຈະ ກຳ ລັງຊອກຫາຢູ່ບ່ອນເຮັດວຽກ, ຕັ່ງ Aero, ຫຼືການສະ ໝັກ ໃຊ້ Adobe CC. ນັ້ນແມ່ນສິ່ງທີ່ດີແລະດີ...
ປັບປຸງ CSS ຂອງທ່ານດ້ວຍ ຄຳ ສັ່ງ Sass @extend
ອ່ານ​ຕື່ມ

ປັບປຸງ CSS ຂອງທ່ານດ້ວຍ ຄຳ ສັ່ງ Sass @extend

ເບິ່ງນັກຮົບເກົ່າ C ຄົ້ນພົບ a ເປັນຄັ້ງ ທຳ ອິດແມ່ນບັນເທີງຕະຫຼອດເວລາ. ແນວຄິດຄືກັບການເຮັດຮັງ, ຕົວແປແລະສ່ວນປະສົມເບິ່ງຄືວ່າເປັນ ທຳ ມະຊາດແລະເມື່ອ yntax ມຸ້ງ ໝັ້ນ ໃນຄວາມຊົງ ຈຳ, ມັນຍາກທີ່ຈະຈື່ເວລາກ່ອນທີ່ຈະມີ. ...
ເປັນຫຍັງວຽກ 3D ຂອງ Aixsponza ຈຶ່ງມີການອອກແບບກຣາບຟິກ
ອ່ານ​ຕື່ມ

ເປັນຫຍັງວຽກ 3D ຂອງ Aixsponza ຈຶ່ງມີການອອກແບບກຣາບຟິກ

ບົດຂຽນນີ້ແມ່ນໄດ້ ນຳ ມາສະ ເໜີ ທ່ານໃນການສົມທົບກັບ Ma ter of CG, ເຊິ່ງເປັນການແຂ່ງຂັນ ໃໝ່ ທີ່ເປີດໂອກາດໃຫ້ທ່ານໄດ້ເຮັດວຽກຮ່ວມກັບ ໜຶ່ງ ໃນຕົວລະຄອນທີ່ມີຮູບສັນຍາລັກທີ່ສຸດຂອງ 2000AD. ມີລາງວັນໃຫຍ່ທີ່ຈະໄດ້ຮັບລາງວັ...