Apakah semantik tag html5

Dalam HTML5, semantik teg merujuk kepada pemahaman yang lebih intuitif tentang kegunaan dan fungsi teg dan atribut semantik teg boleh memudahkan pengguna membaca dan boleh memberikan halaman struktur yang jelas apabila gayanya hilang. Ia sesuai untuk pembangunan dan penyelenggaraan teg semantik biasa termasuk "

", "

", "

" dan sebagainya.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi HTML5, Komputer Dell G3 .

Apakah itu semantik teg HTML5

Pengenalan teg semantik ialah penyelesaian yang baik kepada reka letak div skrin penuh, seperti namanya, membolehkan orang melihat peranan masing-masing tag sepintas lalu. Dan maksudnya, gunakan tag yang sesuai dari segi semantik untuk menjadikan halaman mempunyai struktur yang baik, dan elemen halaman mempunyai makna, yang boleh difahami dengan mudah oleh kedua-dua enjin carian dan enjin carian. Sekeping gambar dapat menunjukkan dengan jelas peranan teg semantik, yang sangat bagus rasanya seperti membina keseluruhannya sekeping demi sekeping.

"Semantik": merujuk kepada keupayaan mesin untuk menyelidik dan mengumpul maklumat dengan kurang campur tangan manusia yang membolehkan halaman web difahami oleh mesin akhirnya akan memberi manfaat kepada kita.

Semantik teg HTML: Ia membolehkan semua orang memahami secara intuitif tujuan dan fungsi teg (penanda) dan atribut (atribut).

1. Jelas sekali bahawa siri Hx kelihatan sangat mirip dengan tajuk, kerana ia mempunyai fon tebal dan saiz fon yang lebih besar.

2. , digunakan untuk menguatkan nada.

3. Mengikut struktur kandungan (semantik kandungan), pilih teg yang sesuai (semantik kod) untuk memudahkan pembangun membaca, dan menulis kod yang lebih elegan sambil menjadikan perangkak dan pelayar analisis tanah yang baik.

Berikut ialah teg semantik biasa dan fungsinya

<header>      <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>           <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。-->
<article>       <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>     <!--：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>        <!--：定义其所处内容之外的内容。如侧栏、文章链接、广告、相关产品列表等。-->
<footer>        <!--：页脚，只有当父级是body时，才是整个页面的页脚。--> 
<title>           <!--：页面主体内容。-->
<hn>             <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>              <!--：无序列表。-->
<li>               <!--：有序列表。-->
<small>         <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>       <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>            <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>         <!--：使用黄色突出显示部分文本。-->
<figure>        <!--：规定独立的流内容（图像、图表、代码等等）（默认有40px左右margin）。-->
<cite>           <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto> <!--：定义块引用，块引用拥有它们自己的空间。-->
<q>                <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>           <!--：datetime属性遵循特定格式，文本必须是合法的时间格式。-->
<abbr>          <!--：简称或缩写。-->
<dfn>             <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>     <!--：作者、或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>             <!--：移除的内容。-->
<ins>             <!--：添加的内容。-->
<code>         <!--：标记代码。-->
<meter>        <!--：定义已知范围或分数值内的标量测量。（IE 不支持 meter 标签）-->
<progress>   <!--：定义运行中的进度（进程）。-->

Ringkasan kelebihan teg semantik:

Mudah untuk pengguna Untuk membaca, ia boleh memberikan halaman struktur yang jelas apabila gaya hilang.

Baik untuk SEO, enjin carian menentukan konteks dan berat kata kunci individu berdasarkan teg.

Mudah untuk dihuraikan oleh peranti lain, seperti pembaca buta yang memaparkan halaman web berdasarkan semantik

Kondusif untuk pembangunan dan penyelenggaraan, semantik lebih mudah dibaca, kod diselenggara dengan lebih baik dan hubungan dengan CSS3 adalah lebih harmoni.

(Mempelajari perkongsian video: tutorial video css, tutorial video html)

Atas ialah kandungan terperinci Apakah semantik tag html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!