前端编写规范
由于自己刚出来实习，所以积累这一些小知识是必要的！！！！
项目
-
项目名称
项目名全部采用小写方式， 以中划线分隔。 比如：
my-project-name -
目录名称
目录名参照上一条规则,有复数结构时，要采用复数命名法，比如说：
scripts,styles,images,data-models -
js文件命名
所有js文件名，多个单词组成时，采用中划线连接方式，比如说： 账号模型文件
account-model.js -
css&css文件命名
多个单词组成时，采用中划线连接方式，比如说:
retina-sprites.scss -
html文件命名
多个单词组成时，采用中划线连接方式，比如说:
error-report.html
HTML
- 使用四个空格的
soft tabs— 这是保证代码在各种环境下显示一致的唯一方式. - 嵌套的节点应该缩进（四个空格）。
- 在属性上，使用双引号，不要使用单引号。
- 不要在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。
- 不要忽略可选的关闭标签（例如，
</li>和</body>）。
如：
<!DOCTYPE html>
<html>
<head>
<title>这就是一个实例</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
<h1 class="hello-world">hello-world</h1>
</body>
</html>
-
HTML5 doctype
在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。
虽然
doctype不区分大小写，但是按照惯例，doctype大写 。<!DOCTYPE html> <html> <head> </head> </html> -
语言属性
从HTML5规范来看，鼓励作者从html根元素给文档的语言指定一个
lang属性。对搜索引擎和浏览器是有帮助的。<html lang="en-us"> <!-- ... --> </html> -
IE兼容模式
Internet Explorer支持使用一个文件兼容性
< meta >标记指定版本的IE页面应该显示为。除非情况需要,是最有用的指示IE使用最新的支持模式与边缘模式。<meta http-equiv="X-UA-Compatible" content="IE=Edge"> -
字符编码
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。同时你也应该避免使用类似于这种字符
Entities, 而使用他们的entity_code<head> <meta charset="UTF-8"> </head> -
引入 CSS 和 JavaScript
根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明
type，因为text/css和text/javascript分别是他们的默认值。html5规范链接
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>
-
class -
id -
name -
data-* -
src,for,type,href,value,max-length,max,min,pattern -
placeholder,title,alt -
aria-*,role -
required,readonly,disabledClass 是为高可复用组件设计的，理论上他们应处在第一位。Id 更加具体而且应该尽量少使用（例如, 页内书签），所以他们处在第二位。
<a id="..." class="..." data-modal="toggle" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
-
Boolean 属性
Boolean 属性指不需要声明取值的属性。
XHTML需要每个属性声明取值，但是 HTML5 并不需要。了解更多内容，参考 WhatWG section on boolean attributes:
一个元素中 Boolean 属性的存在表示取值
true，不存在则表示取值false。如果你必须为属性添加
并不需要的取值，参照WhatWG的指引:如果属性存在，他的取值必须是空字符串或者 […] 属性的规范名称，不要在首尾包含空白字符。
简而言之，不要为
Boolean属性添加取值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
剩下的css以及JavaScript规范等下一篇文章再看吧！
扫一扫
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
