html文件模版及编码规范

最新推荐文章于 2024-03-08 11:33:16 发布

十二页书

最新推荐文章于 2024-03-08 11:33:16 发布

阅读量174

点赞数

本文链接：https://blog.csdn.net/qwj515615152/article/details/79102684

版权

这是我在用的html基本文件模版,规范尽可能的参考了bootstrap的编码规范,虽然bootstrap用的不多,但是好的规范往往是共用的.

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <style>
    </style>
</head>

<body>
    <div>
        <br><br/>
    </div>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script>

    </script>

</body>

</html>

剩下还有一些需要注意的规范:

使用多个空格代替tab键,这个可以在IDE中设置,在sublime text3中设置方式为:

Perferences->Settings,在出现的窗口的右列{}中添加

"tab_size": 4,
"translate_tabs_to_spaces": true,
"expand_tabs_on_save": true

往往还有字体等需要设置,我的整体的设置是:

{
	"font_face": "YaHei Consolas Hybrid",
	"font_size": 15,
	"ignored_packages":
	[
		"Vintage"
	],
	"tab_size": 4,
	"translate_tabs_to_spaces": true,
	"expand_tabs_on_save": true
}

HTML规范:

属性定义使用"",不要用''

不推荐在自闭合元素尾部加/,例如<br/>应改为<br>等.

(这个百度了一下,感觉还是看需要符合哪种规范,参考了知乎和stackoverflow)

不要省略可选的结束标签,例如</li></p></tr>>等

具体包括colgroup、dt、dd、li、optgroup、p、rt、rp、thread、tbody、tfoot、tr、td、th

实用为王,任何时候都要尽量使用最少的标签并保持最小的复杂度。

属性顺序应按以下顺序依次排列,确保易读性:

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

class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

boolean型属性不需要赋值

(同样要看实际需要,XHTML 规范要求boolean在声明时赋值,但是 HTML5 规范不用.)

尽量避免多余的父元素,会导致代码冗余臃肿

尽量避免用JS生成标签,这让文件不易检查,且降低性能.

CSS规范:

将单独的选择器单独放一行

每条声明语句应单独占一行,且 : 后应该插入一个空格

{}应当有特对格式,单独成行之类

.后应插入一个空格

参数小于1时省略前面的0,如用-.5px代替-0.5px

参数为十六进制时使用小写且使用简写,方便辨认. 如用#fff代替#FFFFFF.

参数为0时避免指定单位,如用 margin: 0; 代替 margin: 0px;

属性的声明顺序应按照如下顺序(根据影响重要性):

Positioning
Box model
Typographic
Visual

不使用@import指令,它增加了额外的请求次数,还会导致不可预料的问题

只含一条声明的样式,推荐放在一行内,如: .icon { background-position: 0 0; }

不要滥用简写形式的声明,设置需要设置的属性即可

确保你的代码能够自描述注释良好并且易于他人理解

class 名称中只能出现小写字符和-(不是_或驼峰命名法),-用于相关class命名.合适的简写且意义明确

选择器:

对于通用元素使用 class ，这样利于渲染性能的优化。
对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

十二页书

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html文件模版及编码规范

这是我在用的html基本文件模版,规范尽可能的参考了bootstrap的编码规范,虽然bootstrap用的不多,但是好的规范往往是共用的. Demo 剩下还有一些需要注意的规范:使用多个空格代替tab键,这个可以在IDE中设置,在sublim
复制链接

扫一扫