Loading...
墨滴

歧途

2021/06/21  阅读:56  主题:红绯

html

HTML 代码规范

  1. HTML 文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明:

     <!DOCTYPE html>
  2. 推荐使用属性值 cmn-Hans-CN(简体, 中国大陆),但是考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN 属性值

     <html lang="zh-CN">
  3. 统一使用"UTF-8"编码

     <meta charset="UTF-8"></meta>
  4. HTML 标签名、类名、标签属性和大部分属性值统一用小写.

  5. HTML 文本、CDATA、JavaScript、meta 标签某些属性等内容可大小写混合

  6. 所有具有开始标签和结束标签的元素都要 写上起止标签,某些允许省略开始标签或和束标签的元素亦都要写上。

  7. 自闭和标签无须闭合.例如 img,input,br, hr等.

    <img src="https://xxx.png" alt="Google" />
    <br />
    <input type="text" name="title" />
  8. 不需要为 CSS、JS 指定类型属性,HTML5 中默认已包含

    <!-- good -->
    <link rel="stylesheet" href="" >
    <script src=""></script>

    <!-- bad -->
    <link rel="stylesheet" type="text/css" href="" >
    <script type="text/javascript" src="" ></script>
    <!-- bad -->

  9. 元素属性值使用双引号语法 元素属性值可以写上的都写上

   <!-- good -->
   <input type="text">
   <input type="radio" name="name" checked="checked" >
       <!-- bad -->
       <input type=text>
       <input type='text'>
       <input type="radio"name="name"checked >
  1. 统一缩为 4 个空格(待定)

  2. 纯数字框使用 type="tel"

     <!-- good -->
     <intput type='tel'></intput>
     <!-- bad -->
     <input type='number'></input>
  3. 每个块级元素独立一行,内联元素可选

  4. [推荐] 段落元素 与 标题元素只能包括内联元素

  5. [推荐] 属性应该按照特定的顺序出现以保证易读性;

    • class
    • id
    • data-*
    • src, for, type, href, value , max-length, max,
    • placeholder, title, alt
    • aria-*, role
    • required, readonly, disabled
  6. [强制] 尽量不要通过 js 来生成标签,这会降低代码的可读性与编辑性

  7. [强制] 在编写 HTML 代码时,需要尽量避免多余的父节点; 很多时候,需要通过迭代和重构来使 HTML 变得更少。

歧途

2021/06/21  阅读:56  主题:红绯

作者介绍

歧途