html中意外的标记for怎么处理_简单聊聊 HTML 语义化

港控/mmm° 2023-01-10 13:08 94阅读 0赞

![fad6ad3a2daa1833a3638c9d82422bcb.png][]

## **以前：** ##

相信大家对 div+css 一定不陌生，以前的网页，打开就是一堆 div+css 。尽管这方便了开发者，但是这对搜索引擎和其他设备的解析却并不友好。

为了改变上述这种情况，HTML语义化逐渐地就诞生了。

--------------------

## **什么是语义化？** ##

简单来说：**用正确的标签做正确的事。**

如：

*  **头部：header**
 *  **导航：nav**
 *  **主体内容：main**
 *  **标题：h1 ~ h6**
 *  **段落：p**
 *  **侧边栏：aside**
 *  **页脚：footer**

--------------------

## **怎么知道我的标签用的对不对？** ##

可以尝试去掉CSS，只将HTML代码显示在页面中，看看你的内容结构是否依然清晰、好看。

你还可以把代码上传到 W3C 标记验证服务 ，它会帮你验证你的代码是否有效或合理。

--------------------

## **语义化的好处？** ##

*  网页加载慢导致CSS文件还未加载时（没有CSS），页面仍然清晰、可读、好看。
 *  提升用户体验，例如title、alt可用于解释名词或解释图片信息。
 *  有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。
 *  方便其他设备（如屏幕阅读器、盲人阅读器、移动设备）更好的解析页面。
 *  使代码更具可读性，便于团队开发和维护。

--------------------

## **怎么写出更有语义化的HTML代码？** ##

1.  尽可能少的使用无意义的标签，如 div 和 span 。
2.  语义不明显时，如既可以使用div也可以使用p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利。
3.  不推荐使用 b、font、u、center 等纯样式标签，推荐使用 CSS 控制样式。
4.  需要强调的文本，可以使用 strong 或 em 标签，strong 默认样式是加粗显示，em 默认样式是斜体显示。
5.  使用表格时，标题用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表头和一般单元格要区分开，表头用 th，单元格用 td。
6.  表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途（可理解为表单标题）。如：

<form>
      <fieldset>
        <legend>Personalia:</legend>    
        Name: <input type="text"><br>
        Email: <input type="text"><br>
        Date of birth: <input type="text">
      </fieldset>
    </form>

7. 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

如：

<label for="username">请输入用户名: </label> 
    <input type="text" id="username" name="username">

或者直接在label中内嵌控件。如：

<label>请输入用户名<input type="text" id="username"    name="username"></label>

--------------------

## **关于命名规范：** ##

标签的语义化，提高了代码的可读性，同理，我们在命名时，无论是CSS或JS等，命名时一定要遵循命名规范，同时要能体现出代码用途，一定不要写出 "abc" 或 使用拼音命名。

推荐一篇HTML语义化好文：

杯面isaac：初探 · HTML5语义化zhuanlan.zhihu.com

![e7e2917e31dbff4bea17cf9532b5afda.png][]

[fad6ad3a2daa1833a3638c9d82422bcb.png]: /images/20221119/c7f2cf95465942dcab61ecb8c062a7e5.png
[e7e2917e31dbff4bea17cf9532b5afda.png]: https://img-blog.csdnimg.cn/img_convert/e7e2917e31dbff4bea17cf9532b5afda.png