标签语义化 我不是女神ヾ 2021-09-18 23:30 335阅读 0赞 > 使用正确的标签做正确的事,即使是源码也是有意义的,也是可读的。理解起来很简单,人眼能看到的某个标签长什么样,做什么用,但是阅读设备只能阅读源码结构,所以必须要让这个结构是有意义的组织。 ### 目的 ### * 1、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备) * 2、提升用户体验 * 3、SEO 友好 * 4、便于团队开发和维护 ### 建议 ### 1. 尽可能少的使用无语义的标签,比如 `<div>` 和 `<span>`。 2. 不要使用纯样式用途的标签。如 `<b>`、`<font>`,而是改用 CSS 来实现。原则就是,HTML 负责内容和结构,而样式则交由 CSS 全权负责。 3. 每个 `<input>` 都应该配备一个 `<label>` 标签用于说明其用途,并使用 `for`属性关联 <form> <label for="username">账号</label> <input type="text" id="username" /> </form> 4. 请勿使用非表单元素来实现表单功能,比如用 `<div>` 来实现按钮,虽然样式可以看上去一致,但是你会失去表单元素原生的一些功能,比如键盘的可访问性,无法通过 Tab 键获取焦点 5. 使用表格时,标题要用 `<caption>`,表头用 `<thead>`,主体部分用 `<tbody>`包围,尾部用 `<tfoot>` 包围。表头和一般单元格要区分开,表头用 `<th>`,单元格用 `<td>` <table> <caption>标题</caption> <thead> <tr> <th>表头</th> </tr> </thead> <tbody> <tr> <td>主体</td> </tr> </tbody> <tfoot> <tr> <td>尾部</td> </tr> </tfoot> </table> 6. 图片 `<img>` 标签始终添加 `alt` 属性,其内容应提供图像的直接表示以及它在视觉上传达的内容。 任何个人说明或额外描述都不应该包含在这里,而应该放到 `title`属性中。 <img alt="图片描述" title="额外描述" src=""> 7. `<img>` 标签中的图片应该是内容,具有意义,如果纯粹是为了视觉装饰,则应该作为 CSS 背景图像。 8. 使用 HTML5 新标签 * `<header>` 代表整个网页和 section 的页眉 * `<footer>` 代表整个网页和 section 的页脚 * `<hgroup>` 组合标题 * `<nav>` 页面导航链 * `<aside>` 附属信息 * `<article>` 文档内容 * `<mark>` 突出显示文本
还没有评论,来说两句吧...