HTML

1 通用约定

1.1 语义化

没有 CSS 的 HTML 是一个语义系统而不是 UI 系统. 通常情况下，每个标签都是有语义的，所谓语义就是你的衣服分为外套，裤子，裙子，内裤等，各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧﹌○﹌

一方面为了机器(搜索引擎)易于理解，另一方面为了团队开发协作中，能迅速的了解开发者的意图

标签	语义
`<p>`	段落
`<h1> <h2> <h3> ...`	标题
`<ul>`	无序列表
`<ol>`	有序列表
`<blockquote>`	大段引用
`<cite>`	一般引用
`<b>`	为样式加粗而加粗
`<storng>`	为强调内容而加粗
`<i>`	为样式倾斜而倾斜 or 图标
`<em>`	为强调内容而倾斜
`<input>`	待定
`<textarea>`	待定
`<select>`	待定
`<video>`	待定
`<audio>`	待定
`<object>`	待定
`<embed>`	待定

书的名称：<h1>
书的每个章节标题: <h2>
章节内的文章标题: h3
章节的段落: <p>
小标题/副标题: h4/h5/h6

1.2 标签

标签名使用小写字母
自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )
可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )
尽量减少标签数量

<h1>Bigertech StyleGuide</h1>

<img src="images/bigertech.png" alt="bigertech">
<input type="text" name="title">

<ul>
    <li>Style</li>
    <li>Guide</li>
</ul>

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

1.3 class 与 id

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

<!-- Not so great -->
<div class="j-hook left contentWrapper"></div>

<!-- Better -->
<div id="j-hook" class="sidebar content-wrapper"></div>

1.4 属性顺序

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

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

<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">

1.5 引号

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

<!-- Not so great -->
<a class='home' href=http://www.bigertech.com title=home>bigertech</a>

<!-- Better -->
<a class="home" href="http://www.bigertech.com" title="home">bigertech</a>

1.6 缩进

使用 Tab ( 4 个空格 ) 进行缩进
块级嵌套元素应当缩进一次 ( 4 个空格 )

<ul>
    <li>first</li>
    <li>second</li>
</ul>

1.7 嵌套

语义嵌套
不允许类似在 ul 下出现除了 li 外的其它子元素等等待定
严格嵌套
不允许 inline 元素包含 block 元素待定

1.8 注释

模块注释

<!-- 文章列表列表模块 -->
<div class="article-list">
...
</div>

<!-- 视频模块 -->
<div class="vedio">
...
</div>

区块注释

<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->

1.9 代码验证

使用 W3C HTML Validator 来验证你的HTML代码有效性
使用 W3C CSS Validator 来验证你的CSS代码有效性

代码验证不是最终目的，真的目的在于让开发者在经过多次的这种验证过程后，能够深刻理解到怎样的语法或写法是非标准和不推荐的，即使在某些场景下被迫要使用非标准写法，也可以做到心中有数

1.10 文档目录结构

待定

2 HEAD

2.1 文档类型

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的表现

<!DOCTYPE html>

2.2 语言属性

<!-- 简体中文 -->
<html lang="zh-cmn-Hans">

<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">

<!-- English -->
<html lang="en">

为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢? 请参考网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"？

2.3 字符编码

以无 BOM 的 UTF-8 编码作为文件格式
指定字符编码的 meta 必须是 head 的第一个直接子元素. 参考 HTML5 Charset能用吗？

<html>
    <head>
        <meta charset="UTF-8">
        ......
    </head>
    <body>
        ......
    </body>
</html>

2.4 IE 兼容模式

优先使用 IE 最新版本和 Chrome

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

2.5 SEO 优化

2.5.1 title

页面必须包含 title 标签声明标题

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Bigertech</title>
    ......
</head>

2.5.2 keyword

<meta name="keywords" content="your keywords">

2.5.3 description

<meta name="description" content="your description">

2.5.4 author

<meta name="author" content="author,email address">

2.6 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.7 iOS 图标

apple-touch-icon 图片自动处理成圆角和高光等效果
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图

iPhone 和 iTouch，默认 57x57 像素，必须有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

iPad，72x72 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">

Retina iPad，144x144 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

2.8 favicon

在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问，避免404，必须遵循以下两种方法之一：

在 Web Server 根目录放置 favicon.ico 文件
使用 link 指定 favicon

<link rel="shortcut icon" href="path/to/favicon.ico">

2.9 引入 CSS 和 JavaScript 文件

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值

<!-- External CSS -->
<link rel="stylesheet" href="bigertech.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="bigertech.js"></script>

2.10 HEAD 模板

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Bigertech</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-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    <link rel="shortcut icon" href="path/to/favicon.ico">
</head>

3 BODY

img

form

button

模块命名

每个模块必须有一个模块名
每个模块的基本组成部分应该一致
模块的子节点类名需带上模块名(防止模块间嵌套时产生不必要的覆盖)
孙辈节点无需再带模块名

<section class="m-detail">
    <header class="m-detail-hd">
        <h1 class="title">模块标题</h1>
    </header>
    <div class="m-detail-bd">
        <p class="info">一些实际内容</p>
    </div>
    <footer class="m-detail-ft">
        <a href="#" class="more">更多</a>
    </footer>
</section>

模板中的 HTML

CSS

Javascript

引用

mdo/code-guide
Baidu 前端规范
 Qunar 前端规范
 常用的 HTML 头部标签
 20 Snippets You should be using from Html5 Boilerplate

Files

前端开发规范.md

Latest commit

History