Rumah > Artikel > hujung hadapan web > 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 :
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 | 变量 |