前端开发规范(二):HTML语法规范

发布时间:2019-08-01 15:42:09 阅读:66
此文章主要实现的目标:代码一致性和最佳实践。通过代码风格的一致性,降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践,确保页面性能得到最佳优化和高效的代码。此文章是在开发中积累下来的经验和参考其它规范/指南制定的,它只是起指导作用,除个别条目强制之外,大多数为非强制约束,开发者可根据自己的实际情况自行决定是否要遵守。该指南只是保证大方向一致性和最佳实践的阶段性总结,不是最后结论,它会随着时间而变化。

HTML语法规范

标签

  • 自闭合(self-closing)标签,无需闭合 ( 例如: img input br hr 等 );
  • 可选的闭合标签(closing tag),需闭合 ( 例如:</li> 或 </body> );
  • 尽量减少标签数量;
	<img src="https://atts.w3cschool.cn/attachments/image/cimg/google.png" alt="Google">
<input type="text" name="title">

<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>

<!-- 不建议使用 -->
<span class="avatar">
  <img src="...">
</span>

<!-- 建议使用 -->
<img class="avatar" src="...">

Class 与 ID

  • class 应以功能或内容命名,不以表现形式命名;
  • class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔;
  • 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class;
	<!-- 不建议使用 -->
<div class="j-hook left contentWrapper"></div>

<!-- 建议使用 -->
<div id="j-hook" class="sidebar content-wrapper"></div>

属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。

  • id
  • class
  • name
  • data-xxx
  • src, for, type, href
  • title, alt
  • aria-xxx, role
	<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">

引号

属性的定义,统一使用双引号。

	<!-- 不建议使用 -->
<span id='j-hook' class=text>Google</span>

<!-- 建议使用 -->
<span id="j-hook" class="text">Google</span>
	

嵌套

a 不允许嵌套 div这种约束属于语义嵌套约束,与之区别的约束还有严格嵌套约束,比如a 不允许嵌套 a

严格嵌套约束在所有的浏览器下都不被允许;而语义嵌套约束,浏览器大多会容错处理,生成的文档树可能相互不太一样。

语义嵌套约束

  • <li> 用于 <ul> 或 <ol> 下;
  • <dd><dt> 用于 <dl> 下;
  • <thead><tbody><tfoot><tr><td> 用于 <table> 下;

严格嵌套约束

  • inline-Level 元素,仅可以包含文本或其它 inline-Level 元素;
  • <a>里不可以嵌套交互式元素<a><button><select>等;
  • <p>里不可以嵌套块级元素<div><h1>~<h6><p><ul>/<ol>/<li><dl>/<dt>/<dd><form>等。

更多详情,参考 WEB标准系列-HTML元素嵌套

布尔值属性

HTML5 规范中 disabledcheckedselected 等属性不用设置值。

	<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"前端开发规范(二):HTML语法规范",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560