我是尚丹丹,我的博客建好啦!欢迎大家光临!

前端编码规范(2)—— HTML 规范

html sdd 336℃ 0评论

文档类型

推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>.

HTML 中最好不要将无内容元素[1] 的标签闭合,例如:使用 <br> 而非 <br />.

HTML 验证

一般情况下,建议使用能通过标准规范验证的 HTML 代码

省略可选标签

省略一些可选的标签确实使得页面大小减少,在开发后期对页面进行压缩处理

脚本加载

脚本引用写在 body 结束标签之前,并带上 async 属性

语义化

根据元素(“标签”)其被创造出来时的初始意义来使用它。打个比方,用 heading 元素来定义头部标题,p 元素来定义文字段落,用 a 元素来定义链接锚点,等等。

有根据有目的地使用 HTML 元素,对于可访问性、代码重用、代码效率来说意义重大。

多媒体回溯

对页面上的媒体而言,像图片、视频、canvas 动画等,要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本(alt),视频和音频文件我们可以为其加上说明文字或字幕。

关注点分离

严格地保证结构、表现、行为三者分离,并尽量使三者之间没有太多的交互和联系。

清晰的分层意味着:

  • 不使用超过一到两张样式表(i.e. main.css, vendor.css)
  • 不使用超过一到两个脚本(学会用合并脚本)
  • 不使用行内样式(<style>.no-good {}</style>
  • 不在元素上使用 style 属性(<hr style="border-top: 5px solid black">
  • 不使用行内脚本(<script>alert('no good')</script>
  • 不使用表象元素(i.e. <b>, <u>, <center>, <font>, <b>
  • 不使用表象 class 名(i.e. red, left, center)

HTML 内容至上

HTML 标签的目的,就是为了不断地展示内容信息。

  • 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
  • 不要将 img 元素当做专门用来做视觉设计的元素
  • 图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息。
  • 不要用标签来做一些设计的问题,比如小圆点、色条、小三角等,可以用:before来处理

不推荐

11

推荐

22

 

Type 属性

省略样式表与脚本上的 type 属性

可用性

如果 HTML5 语义化标签使用得当,许多可用性问题已经引刃而解。

Tab Index 在可用性上的运用

检查文档中的 tab 切换顺序并传值给元素上的 tabindex,这可以依据元素的重要性来重新排列其 tab 切换顺序。你可以设置 tabindex="-1" 在任何元素上来禁用其 tab 切换。

当你在一个默认不可聚焦的元素上增加了功能,你应该总是为其加上 tabindex 属性使其变为可聚焦状态,而且这也会激活其 CSS 的伪类 :focus。选择合适的 tabindex 值,或是直接使用 tabindex="0" 将元素们组织成同一 tab 顺序水平,并强制干预其自然阅读顺序。

微格式在 SEO 和可用性上的运用

如果 SEO 和可用性环境条件允许的话,建议考虑采用微格式。微格式是通过在元素标签上申明一系列特定数据来达成特定语义的方法。

谷歌、微软和雅虎对如何使用这些额外的数据一定程度上的达成一致,如果正确的使用,这将给搜索引擎优化带来巨大的好处。

什么是微格式?

ID 和锚点

通常一个比较好的做法是将页面内所有的头部标题元素都加上 ID. 这样做,页面 URL 的 hash 中带上对应的 ID 名称,即形成描点,方便跳转至对应元素所处位置。

格式化规则

在每一个块状元素,列表元素和表格元素后,加上一新空白行,并对其子孙元素进行缩进。内联元素写在一行内,块状元素还有列表和表格要另起一行。

HTML 引号

使用双引号(“”) 而不是单引号(”) 。例如:<div class=”product”></div>

转载请注明:尚丹丹的博客 » 前端编码规范(2)—— HTML 规范

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址