您的位置：首页 > Web前端 > HTML

开发规范2：HTML

2016-03-10 09:49 357 查看

1、代码风格

1.1、缩进与换行【强制】使用webstorm 编辑器自带的格式化功能（alt + command +L）格式化代码，层级结构使用'tab'(4个空格)区分开。【建议】每行代码不得超出编辑器边界线，过长的代码不容易阅读与维护1.2、命名
【强制】标签、属性都使用小写，属性值可以是大小写【强制】class 必须单词全字母小写，单词间以 - 分隔，名称代表相应模块的内容或功能，不得以样式信息进行命名【强制】其中'ID'使用驼峰命名法,并且命名必须保证页面唯一（因为ID是给JS使用的，遵循 JS的命名规范）

<!-- good --><input type="text" name="name" data-name="Jack" id="frontEndDevDocs" class="j-hook"><!-- bad --><INPUT TYPE="TEXT" NAME="NAME" DATA-NAME="Jack" id="front-end-dev-docs">

【注意】供JS调用的class,使用'j-***'命名。布尔属性('disabled'、'readonly'、'checked'、'selected'),不需要赋值1.3、标签【强制】对于无需自闭合的标签，不允许自闭合。（常见无需自闭合标签有input、br、img、hr等）

<!-- good --><input type="text" name="title"><!-- bad --><input type="text" name="title" />

【强制】对 html5中规定允许省略的闭合标签，不允许省略闭合标签

<!-- good --><ul>
<li>first</li>
<li>second</li>
</ul><!-- bad --><ul>
<li>first
<li>second
</ul>

【强制】标签使用必须符合标签嵌套规则

- 块元素可以包含内联元素或某些块元素, 但内联元素却不能包含块元素（比如 `span`、`a`中不能包含`div`、`p`）, 它只能包含其它的内联元素
- 块级元素不能放在`<p>`里面
- 有几个特殊的块级元素只能包含内嵌元素, 不能再包含块级元素, 这几个特殊的标签是：`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `dt`

【建议】标签的使用应该遵循标签的语义下面是常见标签语义p - 段落

h1,h2,h3,h4,h5,h6 - 层级标题

strong,em - 强调

ins - 插入

del - 删除

abbr - 缩写

code - 代码标识

cite - 引述来源作品的标题

q - 引用

blockquote - 一段或长篇引用

ul - 无序列表

ol - 有序列表

dl,dt,dd - 定义列表

【建议】在css 可以实现相同需求的情况下不得使用表格进行布局

2、文档声明

2.1、DOCTYPE 使用html5文档声明

<!DOCTYPE html>
<!--
- 文件描述
- @author yj
- @create 2016-02-24 11:16
-->
<!-- 语言 -->
<html lang="zh-Hans">
<head>
<!-- 编码 -->
<meta charset="UTF-8">
<!-- 匹配IE最新版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 使用 360 webkit 内核渲染 -->
<meta name="renderer" content="webkit">
<!-- 视口-->
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,minimal-ui">
<!-- 缓存控制 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 是否可以添加到桌面 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 是否隐藏 safari 全屏 -->
<meta name="apple-touch-fullscreen" content="yes">
<!-- 是否隐藏 safari 顶部颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 是否开启内容格式检测 -->
<meta name="format-detection" content="telephone=no">
<!-- 作者 -->
<meta name="author" content="驴管家;http://lv-guanjia.com">
<!-- 关键词 -->
<meta name="keywords" content="关键词1,关键词2">
<!-- 描述 -->
<meta name="description" content="描述语句">
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<!-- 标题 -->
<title>1.html</title>
</head>

<!-- 支持 webkit 按钮的 active -->
<body ontouchstart="">

</body>
</html>

【建议】在html 标签上设置正确的lang属性（有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其语言等）

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

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

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

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

【建议】在head 中引入页面需要的所有css 资源，并用coolie包裹，例：

<!--基础样式库-->
<!--coolie-->
<link rel="stylesheet" href="/static/css/common/0-normalize.css"/>
<link rel="stylesheet" href="/static/css/common/1-base.css"/>
<link rel="stylesheet" href="/static/css/common/2-text.css"/>
<link rel="stylesheet" href="/static/css/common/2-list.css"/>
<link rel="stylesheet" href="/static/css/common/2-layout.css"/>
<link rel="stylesheet" href="/static/css/common/2-breadcrumb.css"/>
<link rel="stylesheet" href="/static/css/common/2-input.css"/>
<link rel="stylesheet" href="/static/css/common/2-button.css"/>
<link rel="stylesheet" href="/static/css/common/2-form.css"/>
<link rel="stylesheet" href="/static/css/common/2-table.css"/>
<link rel="stylesheet" href="/static/css/common/2-alert.css"/>
<link rel="stylesheet" href="/static/css/common/2-kvlist.css"/>
<!--/coolie-->

<!--业务模块样式库-->
<!--coolie-->
<link rel="stylesheet" href="/static/css/modules/erp/header.css"/>
<link rel="stylesheet" href="/static/css/modules/erp/sidebar.css"/>
<link rel="stylesheet" href="/static/css/modules/erp/footer.css"/>
<link rel="stylesheet" href="/static/css/modules/erp/layout.css"/>
<link rel="stylesheet" href="/static/css/modules/erp/icons.css"/>
<link rel="stylesheet" href="/static/css/modules/erp/step.css"/>
<link rel="stylesheet" href="/static/css/modules/erp/tab.css"/>
<!--/coolie-->

<!--业务样式库-->
<!--coolie-->
<link rel="stylesheet" href="/static/css/app/erp/activity/index.css"/>
<!--/coolie-->

【建议】javascript 应当在页面末尾引入例：

<!--coolie-->
<script src="/static/js/3rd/vue.min.js"></script>
<!--/coolie-->

<script coolie src="/static/js/coolie.js"
data-config="~/static/js/coolie-config.js"
data-main="index.js"></script>

【注意】不允许在页面书写与配置无关的脚本

3、分隔与注释

3.1、分隔【建议】每个模块、区域之间使用换行符区分开3.2、注释

<!--
- 这样的注释会被构建工具删除掉
- 这样的注释会被构建工具删除掉
- 这样的注释会被构建工具删除掉
-->

<!--
这样的注释会被构建工具保留
这样的注释会被构建工具保留
-->

<!-- module --> <= 左边的单行注释会被构建工具删除
<div class="module">
<div class="module-header"></div>
<div class="module-body">
<div class="module-text">文本</div>
</div>
</div>
<!-- /module -->

<!-- module -->
<div class="module"></div>
<!-- /module -->

4、安全

4.1、文本中的html代码都需要转换成实体符

< 小于号转成 <
> 大于号转成 >
& 和号转成 &
"" 双引号转成"
'' 单引号转成 '

5、页面配置

【建议】单个页面的所有配置信息都放在'APP'变量下。而页面的可能有多个'template'组成，所以'APP'的声明需要判断一次。

单个页面的所有配置信息都放在`APP`变量下。而页面的可能有多个`template`组成，
所以`APP`的声明需要判断一次。

<script>
var APP = APP || {};

APP.someValue = 'some value';
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航