前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端面试 【HTML】— 谈谈你对HTML语义化的理解

前端面试 【HTML】— 谈谈你对HTML语义化的理解

作者头像
越陌度阡
发布2021-11-10 14:59:41
3790
发布2021-11-10 14:59:41
举报

根据内容的结构选择合适的标签,便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

简单来说,一般有以下注意事项:

1. 尽可能少的使用无语义的标签 div 和 span;

2. 在语义不明显时,既可以使用 div 或者 p 时,尽量用 p, 因为 p 在默认情况下有上下间距,对兼容特殊终端有利;

3. 不要使用纯样式标签,如:b、font、u 等,改用 css 设置;

4. 需要强调的文本,可以包含在 strong 或者 em 标签中(浏览器预设样式,能用CSS 指定就不用他们),strong 默认样式是加粗(不要用 b),em 是斜体(不用i);

5. 使用表格时,标题要用 caption,表头用 thead,主体部分用 tbody 包围,尾部用 tfoot 包围。表头和一般单元格要区分开,表头用 th,单元格用 td;

6. 表单域要用 fieldset 标签包起来,并用 legend 标签说明表单的用途;

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

8. 为了更好的实现语义话,HTML5新增了如下语义标签:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/11/08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档