【html】页面制作规范文档

每天都在写html/css/js代码,总结的一些页面制作的规范

文件命名规范

1) 文件目录、文件名称统一用小写的英文字母、数字、下划线组合,文件名要与表现的内容相近,不到万不得已不要以拼音作为名称,如 登录页面:login.html(不要用 denglu.html)。

2) 目录结构规范:清晰的站点目录结构方便文件的维护和整理,同时对增加搜索引擎的友好度和移植也有着重要的影响。

图片制作规范

1) 如果图片作为内容放在html代码里,则必须定义它的宽度和高度。

2) 如果图片不包含任何信息,仅是作为装饰使用,请将该图片从html中分离出来。

3) 检查是否有可能在不损失画质的基础上压缩图片,或者采用不同的文件格式来获得最大程度的压缩。

4) 利用css sprite 将一些小图片合成一张大图片,用 background-position 来定位图片。

5) 如果有用到透明,则用 gif/png
格式图片,确保各个主流浏览器的兼容。

6) 为网站制作favicon.ico,不管有没有favicon.ico,浏览器总是会去请求它。因此,我们需要为网站制作一个小图标,并将其缓存到用户的电脑中去。

Html代码规范

1) 要建立一个符合标准的页面,doctype声明是必不可少的。

2) 每个页面最好有标题、描述、关键字。

3) 大部分javascript的调用应写在最下面,即</html>的后面。

4) html代码要求所有的标签必须小写。

5) 禁止使用frame框架。

6) 属性值必须使用双引号,以免引发不必要的页面问题。

7) 所有标签必须有闭合标签,如<p></p>,<div></div>

如果使用 img 或者 br、hr、input
这样的单体标签,那么必须使用空格加斜线为闭合标签,如<img />,<br />,<input />。

8) 必须设置 img 的 alt 属性,如没替换文本则留空。

9) 必须给 a 标签加上 title 属性,如没有则留空。

10) 如果无特殊说明,所有链接必须新开窗口。

11) 所有的特殊符号编码化。

12) 可以在主要的区域加上注释,但要尽量减少注释的内容。

13) html 标签必须合理嵌套,如<ul><li></li></ul>。

14) 保持页面的整洁,尽量减少 html 的层次,用最少的代码写出符合标准的页面。

15) 正确使用 html 标签定义页面内容,每一个标签都有自己的语义。

如,文字用 span 段落用 p 标题用 h1-h6 布局用 div 等。

16) 每个页面都要有一个<h1></h1>里面的内容为PSD的slogan。

17) 相同域名下的链接用相对路径。

18) 注册类页面,注册按钮必须先锁住,等html加载完成后解锁。

19) 禁止在页面中使用表现级标签,如font、bgcolor等。

禁止不符合web标准的标签,如<font></font>,<b></b>,<u></u>,<i></i>。

Css编写规范


1、Css代码规范

1) 尽量少用或避免使用id来定义css。

2) css命名可以用横线来连接,如 xx-info。

3) 属性值书写顺序应当按照“上右下左”书写。

4) 当用css定义链接的多个状态时,应当遵循正确的书写顺序,即“LVHA”。

5) css代码书写应当写在一行里。

6) 在定义css时,一定要注意默认值这个问题,通常我们会重置css。

7) 删除废弃的CSS,要做到所有声明的类或ID都能用到。

8) 避免使用滤镜,它的兼容性和效率同样不是很好。

2、Css 缩写规则

1) 属性值为0时,省略单位。

2) 颜色缩写:#000000 缩写为 #000 或者 black(推荐)。

3) 字体缩写:font-size:12px;font-family:"宋体";line-height:20px;font-weight:bold; 缩写为 font:bold 12px/20px "宋体";

注意:字体缩写时,至少要定义font-size和font-family两个值。

4) 边距缩写:如

margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px;

缩写成 margin:10px;

margin-top:10px; margin-right:12px; margin-bottom:10px; margin-left:12px;

缩写成 margin:10px 12px;

margin-top:10px; margin-right:12px; margin-bottom:15px; margin-left:12px;

缩写成 margin:10px 12px 15px;

margin-top:10px; margin-right:11px; margin-bottom:12px; margin-left:13px;

缩写成 margin:10px 11px 12px 13px;

5) 边框缩写:

border:border-width | border-style | color,如 border:1px
solid red;

6) 背景缩写:

background:background-color | background-image | background-repeat | background-attachment | background-position,如 background:#000
url(images/bg.jpg) no-repeat 30% 20px;

7) 列表缩写:

list-style:list-style-type | list-style-position | list-style-image,如 list-style:disc
outside none;

时间: 2024-10-13 02:59:24

【html】页面制作规范文档的相关文章

【转载】WEB前端开发规范文档

本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, 片面及有误的地方, 希望大家指正. 另, 本文档部分规范是为我所在项目组所写, 使用时请根据实际项目需求修改.以下为[WEB前端开发规范文档]正文点此查看WEB版本 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量

WEB前端开发规范文档

规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至约定的目录中;

开发备必:WEB前端开发规范文档

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的 解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约

超详细Web前端开发规范文档

规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.文件规范1. html, css, js, images文件均归档至<系统开发规范>约定的

【转】Web前端开发规范文档

规范目的: 使开发流程更加规范化. 通用规范: TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格). CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”. 文件内容编码均统一为UTF-8. CSS.JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示. 文件规范: 文件名用英文单词,多个单词用驼峰命名法. 一些浏览器会将含有这些词的作为广告拦截:ad.ads.adv.banner.spo

前端开发规范文档

  目的 提高团队协作效率,方便前后端功能添加和后期优化及维护. 一,通用规范 1.Tab键用4个空格代替(windows下Tab键占4个空格): 2.统一文档编码为"UTF-8",统一文档类型为<!DOCTYPE html>,统一收藏夹图标,统一字体; 3.禁止在js/json中使用关键字命名: 4.if.while.when.switch语句的执行体用"{}"括起来,禁止省略花括号: 5.禁止在return关键字及要返回的表达式之间换行: 6.必须为

Java代码规范文档

NOTE:以下部分为一个简要的编码规范,更多规范请参考 ORACLE 官方文档. 地址:http://www.oracle.com/technetwork/java/codeconventions-150003.pdf 另外,请使用 UTF-8 格式来查看代码,避免出现中文乱码. 至于注释应该使用中文还是英文,请自己行决定,根据公司或项目的要求而定,推荐使用英文. 1. 整理代码 1.1. Java 代码中不允许出现在警告,无法消除的警告要用 @SuppressWarnings. 1.2. 去掉

规范文档

宗旨:提高合作和代码质量,不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. ? 针对 HTML5 doctype 排版规则 缩进 1个TAB=4个空格 - 所有的代码都用小写字母 行尾空格没必要存在 HTML 不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的.常见无需自闭合标签有 input.br.img.hr 等. 在HTML模板和文件中指定编码 <meta charset="utf-8"> ,

(转)详解PHP编码规范文档

使用驼峰结构命名,即以小写字母开头,从第二个单词开始,每个单词的第一个字母大写. 大半天时间整理的PHP编码规范- 一.命名规范: 1. 常量的命名 1) 字母,全部大写,使用"_" 分隔单词. 如:DEFINE("PHP_DEMO_PRINT","hEllo world"); 2. 变量的命名 1) 使用驼峰结构命名,即以小写字母开头,从第二个单词开始,每个单词的第一个字母大写. 如:$getElement="myodbc"