代码规范 HTML

HTML代码规范

Posted by Nutlee on 2016-04-28

 

标签闭合，尽量少用

class 应以功能或内容命名，不以表现形式命名； 命名小写，避免无样式class

HTML标签内属性顺序

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

属性用双引号

严格嵌套

HTML5 规范中 disabled、checked、selected 等属性不用设置值

HTML HEAD

  • <!DOCTYPE html>

    1
    2
    3
    4
    5
    6
    7
    <!-- 中文 --><html lang="zh-Hans">
    <!-- 简体中文 --><html lang="zh-cmn-Hans">
    <!-- 繁体中文 --><html lang="zh-cmn-Hant">
    <!-- English --><html lang="en">

  • 字符编码

  • 优先兼容最新版本的IE和Chrome浏览器

    1
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  • 完整HEAD

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Style Guide</title>
        <meta name="description" content="不超过150个字符">
        <meta name="keywords" content="">
        <meta name="author" content="name, email@gmail.com">
    	
        <!-- 为移动设备添加 viewport -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	
        <!-- iOS 图标 -->
        <link rel="Apple Store Store Store-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
    	
        <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
        <link rel="shortcut icon" href="path/to/favicon.ico">
    </head>
    </html>

参考资料：
前端开发规范手册HTML

CATALOG
    FEATURED TAGS
    代码规范 HTML
    FRIENDS