首页 > 网页制作 > HTML/Xhtml

HTML代码书写规范指南

admin HTML/Xhtml 2022-02-04 23:52:34 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
xxx
src, for, type, href
title, alt
aria-xxx, role

XML/HTML Code复制内容到剪贴板
  1. <a id="..." class="..." 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。

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

 

语义嵌套约束

  • 用于
  • 潘少俊衡

    | 桂ICP备2023010378号-4

    Powered By EmpireCMS

    爱享小站

    中德益农

    谷姐神农

    环亚肥料

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢潘少俊衡友情技术支持