您的位置：首页 > Web前端

【F2E】前端开发规范（命名规则 & HTML）

2016-03-27 22:31 183 查看

原文链接：http://www.cnblogs.com/viphchok/articles/5327146.html

一、命名规则

1. 项目命名
全部采用小写方式，以下划线分隔。
例：my_project_name

2. JS文件命名
参照项目命名规则。
例：account_model.js

3. CSS, SCSS文件命名
参照项目命名规则。
例：retina_sprites.scss

4. HTML文件命名
参照项目命名规则。
例：error_report.html

二、HTML

1. 语法

缩进使用 soft tab（4个空格）；
嵌套的节点应该缩进；
在属性上，使用双引号，不要使用单引号；
属性名全小写，用中划线做分隔符；
不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；
不要忽略可选的关闭标签，例：</li> 和 </body>。

<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company_logo.png" alt="Company">

<h1 class="hello-world">Hello, world!</h1>
</body>
</html>

2. HTML5 doctype
在页面开头使用这个简单地 doctype 来启用标准模式，使其在每个浏览器中尽可能一致的展现；
虽然 doctype 不区分大小写，但是按照惯例，doctype大写（关于html属性，大写还是小写）。

<!DOCTYPE html>
<html>
...
</html>

3. lang属性
根据HTML5规范：
　　应在 html 标签上加上 lang 属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
更多关于 lang 属性的说明在这里；
在 sitepoint 上可以查到语言列表；
但 sitepoint 只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的语言列表，其中细分了zh-cn, zh-hk, zh-tw。

<!DOCTYPE html>
<html lang="en-us">
...
</html>

4. 字符编码
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。

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

5. IE兼容模式
用 <meta> 标签可以指定页面应该用什么版本的 IE 来渲染；
如果你想要了解更多，请点击这里；
不同 doctype 在不同浏览器下会触发不同的渲染模式（这篇文章总结的很到位）。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>

6. 引入CSS, JS
根据 HTML5 规范, 通常在引入 CSS 和 JS 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。
HTML5 规范链接

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

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

<!-- External JS -->
<script src="code_guide.js"></script>

<!-- In-document JS -->
<script>
...
</script>

7. 属性顺序
属性应该按照特定的顺序出现以保证易读性；

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class 是为高可复用组件设计的，所以应处在第一位；
id 更加具体且应该尽量少使用，所以将它放在第二位。

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

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

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

8. boolean属性
boolean 属性指不需要声明取值的属性，XHTML 需要每个属性声明取值，但是 HTML5 并不需要；
更多内容可以参考 WhatWG section on boolean attributes：
　　boolean 属性的存在表示取值为 true，不存在则表示取值为 false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
<option value="1" selected>1</option>
</select>

9. JS生成标签
在 JS 文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。

10. 减少标签数量
在编写 HTML 代码时，需要尽量避免多余的父节点；
很多时候，需要通过迭代和重构来使 HTML 变得更少。

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

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

11. 实用高于完美
尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

转载于:https://www.cnblogs.com/viphchok/articles/5327146.html

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

标签：

相关文章推荐

新的分享

章节导航