Kemahiran html: Semantikkan kod anda _HTML/Xhtml_Penghasilan halaman web

Semantik Html nampaknya menjadi isu biasa Jika anda mencari di Google, terdapat banyak artikel tentang semantik Mengapa teg semantik saya fikir dengan cara ini: setiap teg Html mempunyai makna khusus dan teg semantik , iaitu, biarkan. kami menggunakan tag yang sesuai di lokasi yang sesuai untuk lebih memahami kedua-dua orang dan mesin (mesin boleh memahaminya sebagai penyemak imbas dan boleh memahaminya sebagai enjin carian Jika penjelasan saya tidak cukup jelas, sila Google

).

Bagaimana cara menggunakan tag yang betul di tempat yang betul? digunakan untuk senarai yang diisi; dl digunakan untuk menentukan senarai em, tag kuat digunakan untuk penekanan... Secara terang-terangan, setiap tafsiran bahasa Inggeris bagi tag Html menentukan semantiknya (kemudian dalam artikel ini, saya akan Letakkan jadual perbandingan definisi bahasa Inggeris bagi teg Html yang biasa digunakan untuk rujukan). >Css pautan pada halaman dan lihat jika struktur halaman web adalah teratur dan halaman masih sangat mudah dibaca Mengapa anda boleh mengatakan ini semua orang tahu bahawa penyemak imbas mempunyai gaya lalai (ia adalah disyorkan untuk menggunakan Chrome
Alat Pembangun Web untuk Chrome
pemalam, atau pemalam
Pembangun Web Firefox), seperti h1~h6, akan menjadi tebal/ The saiz fon berkurangan secara berurutan, dan gaya lalai untuk jidar atas dan bawah, ul, ol, dan dl semuanya mempunyai bulet lalai, dan kuat mempunyai gaya tebal secara lalai... Oleh itu, pada halaman yang sama, Html dengan semantik yang baik boleh dialih keluar dari halaman Css Ia masih berfungsi dengan baik Perkara lain ialah pengekodan semantik yang baik lebih mesra enjin carian tidak mengetahui Css anda, tetapi mereka boleh mengenali tag Html ialah contoh mudah:

Salin kod
Kod adalah seperti berikut :

Blog En ;/div>

Seorang lelaki biasa yang menumpukan pada teknologi bahagian hadapan Web, menyukai Php dan menyokong kehidupan yang sederhana.

;

Orang biasa yang menumpukan pada teknologi bahagian hadapan Web, suka Php dan menyokong kehidupan yang sederhana.

Melalui contoh mudah di atas dan pemaparan tanpa sebarang definisi Css, sudah tiba masanya untuk memahami perbezaan antara kedua-duanya Jika anda sedang mempelajari Html5, pengepala, pengaki, bar sisi, artikel dan elemen lain semuanya adalah teg semantik yang ditambah.
Semantik pengekodan HTML ialah satu langkah ke arah pembangunan bahagian hadapan yang berkualiti tinggi Ini bermakna lebih baik mengikut piawaian Web, dan ia juga boleh memastikan halaman anda teratur selepas mengalih keluar gaya Untuk pengenalan yang lebih terperinci, anda boleh Google atau baca Adang's "The Way of Web Front-End Development" Bab 3.
Lampiran : Jadual perbandingan semantik tag dalam bahasa Cina dan Bahasa Inggeris

标签名	英文全拼	中文翻译
a	anchor	锚
abbr	abbreviation	缩写词
acronym	acronym	取首字母的缩写词
address	address	地址
b	bold	粗体
big	big	变大
blockquote	block quotation	区块引用于
br	break	换行
caption	caption	标题
center	center	居中
dd	definition description	定义描述
del	delete	删除
div	division	分隔
dl	definition list	定义列表
dt	definition term	定义术语
em	emphasized	加重
fieldset	fieldset	域集
font	font	字体
h1~h6	header1~header6	标题1~标题6
hr	horizontal rule	水平尺
i	italic	斜体
ins	inserted	插入
legend	legend	图标
li	list item	列表项目
ol	ordered list	排序列表
p	paragraph	段落
pre	preformatted	预定义格式
s	strikethrough	删除线
small	small	变小
span	span	范围
strong	strong	加重
sub	subscripted	下表
sup	superscripted	上标
u	underlined	下划线
ul	unordered list	不排序列表
var	variable	变量