您现在的位置是：网站首页> 编程资料编程资料

HTML代码书写规范指南XHTML编码七条基本规范小结规范HTML代码可以节省修改代码的时间学习如何书写整洁规范的HTML标记网页制作中使用规范的HTML代码的几点HTML网页META标签内容写作规范要点HTML5 语义化结构化规范化

2021-08-30 901人已围观

简介 这篇文章主要介绍了HTML代码书写规范指南,包括对格式和字符编码以及注释等方面的一些普遍约定俗成的约束,需要的朋友可以参考下

通用约定
标签

自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；
可选的闭合标签（closing tag），需闭合 ( 例如： 或 )；
尽量减少标签数量；

XML/HTML Code复制内容到剪贴板
  1. <img src="images/google.png" alt="Google">  
  2. <input type="text" name="title">  
  3.   
  4. <ul>  
  5.   <li>Styleli>  
  6.   <li>Guideli>  
  7. ul>  
  8.   
  9.   
  10. <span class="avatar">  
  11.   <img src="...">  
  12. span>  
  13.   
  14.   
  15. <img class="avatar" src="...">  

Class 与 ID

class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook，同时避免创建无样式信息的 class；

XML/HTML Code复制内容到剪贴板
  1.   
  2. <div class="j-hook left contentWrapper">div>  
  3.   
  4.   
  5. <div id="j-hook" class="sidebar content-wrapper">div>  

属性顺序

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

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

XML/HTML Code复制内容到剪贴板
  1. <a id="..." class="..." data-modal="toggle" href="###">a>  
  2.   
  3. <input class="form-control" type="text">  
  4.   
  5. <img src="..." alt="...">  

引号

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

XML/HTML Code复制内容到剪贴板
  1.   
  2. <span id='j-hook' class=text>Googlespan>  
  3.   
  4.   
  5. <span id="j-hook" class="text">Googlespan>  

b嵌套

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

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

 

语义嵌套约束

  • 用于