HTML 语义化标签

常用的HTML标签

• 语义化标签的好处

  • 提高了代码的可读性，减少了对id和clss的依赖。

  • 适合自己和团队阅读，方便维护（避免自定义class和ID带来的歧义）

• 常用的语义化标签

<section>章节</section>

<main>主体</main>

<header>页眉</header>

<footer>页脚</footer>

<aside>边栏</aside>

<article>文章</article>

<nav>菜单</nav>

// 未完待续

• 其他常用标签

<ol>
    <li></li>// 有序列表 ，带编号
</ol>

<ul>
    <li></li> // 无序列表，带圆点
<ul/>

<table> //表格
    <thead>
        <tr>
             <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
             <td></td>
        </tr>
    </tbody>
    <tfoot>
          <tr>
             <td></td>
        </tr>
    </tfoot>
</table>

<img src="路径"  alt="对图片的文本描述">

• 难点标签

<form ></form>
<input></input>
<a></a>

[input：输入（表单输入）元素 - HTML（超文本标记语言）|MDN(mozilla.org)] developer.mozilla.org/zh-CN/docs/…

[form - HTML（超文本标记语言） | MDN (mozilla.org)] developer.mozilla.org/zh-CN/docs/…

[a - HTML（超文本标记语言） | MDN (mozilla.org)] (developer.mozilla.org/zh-CN/docs/…)

• mate

<meta name="viewport" content="width=device-width,initial-scale=1
 ,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">