Html 编写规范

约定

  1. [强制] 所有html文件指定字符编码为 UTF-8
  2. [强制] 使用 HTML5 的 DOCTYPE 来启用标准模式(强制)
  3. [强制] 在未使用rem布局页面中,H5页面设需要置viewport: wdth = 375,PC无需设置,使用rem布局的页面忽略此项
  4. [建议] css 和 js 与HTML分离,在 head 中引入页面所需要的所有 css 资源,而javascript放在页面末尾
    H5页面示例:
<!DOCTYPE html>  
<html>  
  <head>
    <meta charset="utf-8" >
    <title>Showjoy HTML 规范</title>
    <meta name="viewport" content="width=375, user-scalable=no" >
    <link rel="stylesheet" type="text/css" href="..." >
    <link rel="stylesheet" type="text/css" href="..." >
  </head>
  <body>
    <div></div>
    <p></p>
    ...
  <script type="text/javascript" src=""></script>
  </body>
</html>  

代码格式

  1. [强制] 缩进使用2个空格
  2. [强制] 标签全部使用小写
  3. [强制] 一行代码不得超过100个字符
  4. [强制] 属性值用双引号,自定义属性全部以data-xxx命名
  5. [强制] img 标签外部必须要有块级元素包裹,且src不可为空

命名规则

  • [强制] class名称书写:

  • 所有用作 css 样式的className必须全部是小写字母,多个单词间用 —(中划线) 作为分割

  • 所有用作 JS 选择器的className必须遵循固有的 J 钩子规范,即由小写j开头,后接 _ 下划线,下划线后面单词的第一个字母大写,后面单词的命名遵循驼峰书写规范,如 j_ClassName


  • [强制] id名称书写:

    1. 所有 id 命名也必须遵循固有的 J 钩子规范,即由大写 J 开头,后接 _ 下划线,下划线后面单词的第一个字母大写,后面单词的命名遵循驼峰书写规范,如 J_IdName

    2. 不要使用 id 来作为 css 选择器


  • [强制] class 与 id 命名规则:

    1. class 名必须代表相应内容或功能,不要样式信息进行命名

    2. 元素 id 必须保证页面唯一性


米奇

继续阅读此作者的更多文章