HTML与CSS规范

388 0 0

作者:网络

此规范主要实现目标：代码一致性和最佳实践.降低代码的成本同时改善多人协作的效率。同时遵守最佳实践，确保页面得到最佳优化和高效代码。

命名规则

项目命名全部采用小写方式，以下划线分隔。 例如:my_project_name
目录命名参照项目命名规则 常用css/images/js/styles
JS文件命名参照项目命名规则 例如 account_check.js
CSS文件命名参照项目命名规则 例如 index_footer.css

HTML编码规范

基本原则

文档类型

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

<!DOCTYPE html>

字符编码

以无 BOM 的 utf-8 编码作为文件格式
指定字符编码的 meta 必须是 head 的第一个直接子元素

......

IE兼容模式

优先使用最新版本的IE 和 Chrome 内核 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO优化

SEO处理方便客户进行网站推广和优化，必须是前端开发人员必须重点处理

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO 相关信息-->
    <title>网站标题</title>
    <meta name="keywords" content="关键字">
    <meta name="description" content="描述">
</head>

viewport

viewport:一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容
width: 浏览器宽度，输出设备中的页面可见区域宽度
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度
initial-scale: 初始缩放比例
maximum-scale: 最大缩放比例

为移动端设备优化，设置可见区域的宽度和初始缩放比例 <meta name="viewport" content="width=device-width, initial-scale=1.0">

IOS图标

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

推荐的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>标题</title>
    <meta name="description" content="不超过150个字符">
    <meta name="keywords" content="关键字">
    <meta name="author" content="其他相关信息">

    <!-- 为移动设备添加 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">
</head>

命名规则

[强��] class须单词全字母小写，单词间以- 分隔
[强制] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名示例:

(去掉'-')
[强制] 元素 id 必须保证页面唯一。
[建议] id 建议单词全字母小写，单词间以 - 分隔。同项目必须保持风格一致。
[建议] id、class 命名，在避免冲突并描述清楚的前提下尽可能短。示例:

CSS编码规范

基本原则

文件编码

CSS文件使用无 BOM 的 UTF-8 编码

空格

[强制] 选择器 与 { 之间必须包含空格示例:

.selector {
}

属性

[强制] 属性定义必须另起一行。

示例:

<!-- good -->
.selector {
    margin: 0;
    padding: 0;
}

<!-- bad -->
.selector { margin: 0; padding: 0; }

[强制] 属性定义后必须以分号结尾。示例:

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

属性书写顺序

[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）的顺序书写，以提高代码的可读性。解释:

Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等

Box Model 相关属性包括：border / margin / padding / width / height 等

Typographic 相关属性包括：font / line-height / text-align / word-wrap 等

Visual 相关属性包括：background / color / transition / list-style 等

示例:

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
}

清除浮动

[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。解释：触发 BFC 的方式很多，常见的有： + float 非 none + position 非 static + overflow 非 visible

如希望使用更小副作用的清除浮动方法，参见 [A new micro clearfix hack][1] 一文。另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。

!important

[建议] 尽量不使用 !important 声明。 [建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。解释：必须注意的是，仅在设计上确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。

文字

[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。解释: 所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：

![常见Family Name][2]

示例:

h1 {
    font-family: "Microsoft YaHei";
}

[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。解释: 由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。

[强制] font-weight 属性必须使用数值方式描述。解释: + CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。 + 浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。

[建议] line-height 在定义文本段落时，应使用数值

解释: + 将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。 + 当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。

开发总结

1.在页面中有相关文章或详情的布局中，必须提前写入 <a href="#"></a>。 2.美工在设计过程中，通常在考虑<ul><li>,<table><tr>,<select><option>等操作时，为后台进行遍历操作提供方便。同时尽量在注释中说明某些属性的作用。示例:

<style>
    .item {
        height:20px;
        line-height:20px
    }
    .current {
        color:red
    }
</style>
<ul>
    <!--默认第一个使用current来进行高亮显示-->
    <li class="current item">导航1</li>
    <li class="item">导航2</li>
    <li class="item">导航3</li>
    <li class="item">导航4</li>
</ul>

3.公用头部与页脚规范。在美工设计页面时，要考虑后模板页提取方便。通常将常用的头部和页脚进行统一处理。避免在头部和页脚引入其他部分造成耦合，不利于后台对页面进行拆分。

1.通常头部一般包括导航条、顶部二维码、联系电话 2.尾部包括友情链接、底部新闻导航、关于我们等信息 3.通常只有在首页使用的banner焦点图，广告图不允许放入到头部

4.多个栏目遍历时候，尽量避免出现要计算折行的问题。示例:

<!--尽量不要出现这种布局-->
<table>
    <tr>
        <td>栏目1</td>
        <td>栏目2</td>
    </tr>
    <tr>
        <td>栏目3</td>
        <td>栏目4</td>
    </tr>
</table>

<!--推荐布局-->
<table>
    <tr>
        <td>栏目1</td>
        <td>栏目2</td>
        <td>栏目3</td>
        <td>栏目4</td>
    </tr>
</table>

5.使用基本清除样式reset.css文件。可参考 [网易css reset重置样式][3]

包括常见的margin,padding,a(text-decoration,color)等。

6.注释。CSS注释需要分块说明每段的作用。HTML需要注释说明每段大体的功能与作用。示例:

<!--推荐注释-->

<!--这里是焦点图-->
<div id="banner">
    <img src=""/>
    <img src=""/>
</div>
<!--焦点图 end -->

<!--页脚 包括友情链接等信息-->
<div id="footer">
    <a href="">链接1</a>
    <a href="">链接2</a>
</div>
<!--页脚 end -->

<style>
/*焦点图样式*/
#banner {
    width:120px;
    height:200px;
    color:#fff;
}

/*页脚样式*/
#footer {
    color:#f0f0f0;
    font-size:12px;
}
</style>

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/zhanlibiao/p/17381009.html

标签： HTML CSS HTML5 CSS3

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

HTML与CSS规范

HTML与CSS规范

命名规则

HTML编码规范

基本原则

文档类型

字符编码

IE兼容模式

SEO优化

viewport

IOS图标

命名规则

标签

CSS编码规范

基本原则

文件编码

空格

属性

属性书写顺序

清除浮动

!important

文字

开发总结

相关课程

热门标签

HTML与CSS规范

HTML与CSS规范

命名规则

HTML编码规范

基本原则

文档类型

字符编码

IE兼容模式

SEO优化

viewport

IOS图标

命名规则

标签

CSS编码规范

基本原则

文件编码

空格

属性

属性书写顺序

清除浮动

!important

文字

开发总结

相关课程

热门标签

推荐文章