下载文档原格式
css命名及书写规范CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link信息框：manage……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如―搜索框‖则应命名为―searchInput‖、―搜索图标‖命名这―searchIcon‖、―搜索按钮‖命名为―searchBtn‖……CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd―>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Strict//EN‖―/TR/xhtml1/DTD/xhtml1-strict.dtd―>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
html命名规范HTML命名规范是为了保持代码的可读性和可维护性而制定的一些规则。
下面是一套常用的HTML命名规范，包括标签、类名、ID等的命名方式。
标签的命名规范：1. 标签名应该采用小写字母。
2. 标签名应该能准确地描述元素的内容和用途，尽量避免使用无意义的标签名。
例如使用`<div>`来表示一个段落就不够准确。
类名的命名规范：1. 类名应该由小写字母、数字和破折号（-）组成。
2. 类名应该能准确地描述元素的样式和用途。
例如，如果一个类名表示一个按钮的样式，可以使用类似`btn`的命名。
3. 类名应该简洁明了，尽量避免过长的类名。
ID的命名规范：1. ID应该由小写字母、数字和破折号（-）组成。
2. ID应该唯一，每个元素只能拥有一个ID。
3. ID应该用于唯一标识一个元素，而不是用于样式。
注释的命名规范：1. 注释应该清晰地描述代码的作用和用途。
2. 注释应该放置在代码的上方，可以在注释前加上一行分割线，增加可读性。
文件和文件夹的命名规范：1. 文件名应该采用小写字母，单词之间可以使用破折号（-）或下划线（_）分隔。
2. 文件夹名应该采用小写字母，单词之间可以使用破折号（-）或下划线（_）分隔。
属性的命名规范：1. 属性名应该采用小写字母。
2. 属性名应该能准确地描述属性的用途，尽量避免使用无意义的属性名。
总结：HTML命名规范是为了提高代码的可读性和可维护性而制定的一些规则。
通过合理地命名标签、类名、ID等，我们可以更好地理解和维护代码。
同时，命名规范也有助于团队间的协作，提高代码的一致性和可扩展性。
前端命名规范前端命名规范是一种约定俗成的规则，旨在保证代码的可读性和维护性，使团队成员能够更加高效地协作开发。
下面是一些常见的前端命名规范：1. 文件和文件夹命名规范- 文件名应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：index.html, main.css。
- 文件夹名也应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：images, scripts。
2. HTML/CSS命名规范- HTML和CSS中的类名和ID名应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：header-wrapper, main-content。
- 避免使用无意义的命名，应该根据元素的作用和意义来命名。
3. JavaScript命名规范- 变量和函数名应该使用驼峰式命名法，即第一个单词的首字母小写，后面的单词的首字母大写，例如：firstName, getUserInfo。
- 常量名应该使用全大写字母，多个单词之间使用下划线“_”分隔，例如：MAX_NUM, API_URL。
- 类名应该使用帕斯卡命名法，即所有单词的首字母都大写，例如：Person, UserService。
4. 图片命名规范- 图片命名应该使用有意义的名词或描述性的名词短语，多个单词之间使用连字符“-”分隔，例如：logo.png, slide-image.jpg。
5. URL命名规范- URL路径应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：/news-list, /contact-us。
6. Git分支和提交规范- Git分支名应该使用有意义的名词或描述性的名词短语，多个单词之间使用连字符“-”分隔，例如：feature/login,hotfix/bug-fix。
- Git提交消息应该简明扼要地描述所做的更改，可以包括关键词和操作，例如：Add login form validation, Fix broken link。
HTML、CSS编码规范1.基本原则* 遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的代码组织模式* 代码格式化，保持干净整洁2.HTML部分2.1.添加必须的utf-8的字符集，并且使用HTML5的简洁方式：<meta charset="utf-8" />2.2.遵循xhtml 1.0规则：1)所有标签必须小写2)标签属性必须使用成对引号（单引号或双引号）3)标签属性必须有值：<select><option selected="selected"></option></select><input type="checkbox" checked="checked" />4)特殊符号必须转义（&、<、>、©、»…）2.3.标签属性命名规范id：_连接符命名法“hello_world”class: -连接符命名法“hello-world”name：骆驼式命名法“helloWorld”1)表单元素的id必须加以下前缀label：lbltext：txtpassword：txttextarea：txtfile：txtradio：radcheckbox：chksubmit：btnreset：btnbutton：btnhidden：hid2)应使用统一的结构布局的元素id命名3)name命名一般用于表单元素，根据当前元素id属性值命名，去掉id属性值的前缀和所有连接符，使用骆骆式命名法命名，例如id=”txt_id_card”，那么name=”idCard”。
2.4.要合理使用标签，语义化结构1)标签合理嵌套a、span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p2)避免多余的div、span、table标签，正确使用标签表现DOM结构，在文档去除css的情况下，仍然具有结构和可读性，以下是html标记的使用规范：p：文本段落；dl：定义列表，可包括标题和内容简介的列表；ul：无序列表；ol：有序列表；h1~h6：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；strong/em：强调文本；img：图像，必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css 处理，不使用img元素；3)合理化表单结构a)使用fieldset元素包裹相同类别的字段；b)使用legend元素表示字段类别名称；c)使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点；d)文本框不使用size属性定义宽度，而使用css的width属性；e)要添加maxlength属性限制输入字符的长度。
前端开发规范文档规范目的为提高团队协作效率，便于后端开发人员添加功能及前端后期优化维护，输出高质量的代码，特制定该文档。
本规范文档一经确认, 前端开发人员必须按本文档规范进行前端开发。
本文档如有不对或者不合适的地方请及时提出。
经讨论决定后方可更改。
基本准则符合web标准，语义化html，结构表现行为分离，兼容性优良。
页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。
一、html 文件命名及编写规范1、命名规则采用小写英文字母|| _的组合命名，菜单名_功能名称，后缀.html。
如：manage_list.html（管理列表）、manage_add.html（新增）、manage_edit.html（修改）、manage_detail.html（详情）。
同时将页面放在其对应的模块划分目录中。
2、编写规范：(1)文档类型声明及编码统一为html5声明类型“<!DOCTYPE html>”;(2)编码统一为<meta charset="utf-8" />, 书写时利用IDE实现层次分明的缩进;(3)区域块、功能组件以及需要标注的地方，插入注释。
(4)在布局文件结构时，应遵循语义化标签（该用p不要用div、该用ul、li不要用p，h标签应根据标题层级合理利用）、代码结构简单、清晰明了，少用标签、少套结构（一段结构布局中 1个标签能解决的不要用2个，套2层结构能解决的不要套3层）的基本原则。
代码标签、结构嵌套示例：目标效果图代码结构嵌套<ul><li><h4>罗田县九资河徐冲药材</h4><img src=”***.jpg”><div><h3>茯苓</h3><p>小丁</p><p class=”color_red”>32元/公斤</p></div></li></ul>代码分析：根据目标效果图，实现的代码部分别使用了ul/li /h4/ img /div /h3/ p 这些标签。
HTML编码规范1、样式表的引用样式表通过外部引用的方式调用，不建议在页面中新定义样式。
页面元素中的展现形式不建议通过html代码进行定义，都统一使用样式表进行。
比如要显示红色字体，用Html代码可以这样进行定义：<font clolor=”red”>红色字体</font>但最好的方法是通过样式表来定义。
<span class=”RedText”>红色字段</font>这样可以将对网站样式的定义集中到一个样式表文件中去，如果对网站进行修改，可以很快进行。
而如果分散到各个网页文件中去，改动起来就非常麻烦了。
2、缩进、换行约定a、网页代码的缩进使用两个空格因为网页嵌套标签可能比较多，所以使用四个空格进行缩进会导致最深层的代码缩进太多，因而使用两个空格进行缩进。
如果一行中代码太长，请换行。
比如这样一行代码：<tr><td><input type=”text” name=”test” value=”test”class=”MyInput” onclick=”alert(‘test’)”></td></tr>可以改成：<tr><td><input type=”text” name=”test” value=”test”class=”MyInput” onclick=”alert(‘test’)”></td></tr>b、如果多行相似的代码出现，属性尽量对齐<input type="hidden" name="ProjectID" value="{$ProjectID}"><input type="hidden" name="ModuleID" value="{$ModuleID}"><input type="hidden" name="BugID" value="{$BugID}"><input type="hidden" name="AssignedTo" value="{$AssignedTo}"> type、name和value属性对齐以后阅读起来比较方便。
前端开发设计规范目录前端开发设计规范 (1)一、HTML使用规范 (1)1.1、页面文件命名规范 (1)1.2、页面head部分书写规范 (1)1.3、HTML元素开发规范 (2)1.3.1、HTML元素书写规范 (2)1.3.2、HTML元素命名规范 (3)二、WEB页面开发规范 (4)2.1、错误跳转页面的处理 (4)2.2、提示信息的处理 (4)2.3、页面的返回 (4)2.4、提交前数据的判断验证 (4)2.5、删除操作 (5)2.6、页面中java代码的使用 (5)2.7、网站页面布局规范 (5)2.7.1、前台页面尺寸 (5)2.7.2、标准网页广告图标规格（参考） (6)2.7.3、页面字体 (6)2.7.4、字体颜色 (7)三、javaScript开发规范 (7)3.1、javaScript文件命名规范： (7)3.2、javaScript开发规范 (7)3.2.1、javaScript书写规范 (7)3.2.2、javaScript命名规范 (8)四、css样式规范 (9)4.1、css样式文件命名规范 (9)4.1.1、通用样式文件命名规范： (9)4.1.2、业务类样式文件命名规范 (10)4.1.3、css样式文件命名须知 (10)4.2、css样式文件存放目录规范 (10)4.3、css样式定义规范 (11)4.3.1、css样式内容顶部注释规范 (11)4.3.2、css样式内容注释规范 (11)4.3.3、css样式定义规范 (12)4.3.4、css样式常用id的命名 (13)4.3.5、css样式常用class的命名 (14)4.4、css样式书写规范 (15)4.4.1、css样式排版规范 (15)4.4.2、css样式书写风格规范 (15)4.4.3、css样式属性定义顺序规范 (16)4.4.4、css样式其他规范 (16)4.4.5、css样式Hack的使用 (17)4.4.6、字体定义规范 (18)4.4.7、css样式检测 (18)4.4.8、注意事项 (18)4.5、css样式引用规范 (19)4.6、媒体内容命名规范 (19)五、项目文件存放规范 (19)六、前端开发规则 (20)一、HTML使用规范1.1、页面文件命名规范命名格式为：项目名缩写_所属功能_所属功能子项_... .jsp/html…，文件命名下划线不能超过三个，命名尽量使用简短的能明确表明文件用途的英文或者英文简写。
认识HTML和CSS网页设计语言第一章：HTML的介绍和基本语法HTML（HyperText Markup Language）是一种用于创建网页的标记语言。
它包含一系列的标记，这些标记用于描述网页的结构和内容。
HTML的基本语法由标签、元素和属性组成。
1.1 标签HTML中的标签是一对尖括号包围的关键字，它们定义了元素的开始和结束。
例如，<head>和</head>标签用于定义网页的头部部分。
1.2 元素在HTML中，元素是由起始标签、内容和结束标签组成的。
起始标签用于定义元素的开始，结束标签用于定义元素的结束。
元素的内容位于起始标签和结束标签之间，可以包含文本、图片、链接等。
1.3 属性HTML中的属性用于为元素提供额外的信息。
属性通常包含在起始标签中，由属性名和属性值组成。
例如，<imgsrc="image.jpg">中的src属性指定了图片的链接地址。
第二章：HTML常用标签和属性2.1 文本标签HTML中的文本标签用于定义文本的样式和结构。
常用的文本标签包括<p>（段落）、<h1>-<h6>（标题）、<strong>（加粗）、<em>（斜体）等。
2.2 图片标签图片标签用于在网页中插入图片。
<img>标签是HTML中用于插入图片的标签，它需要指定图片的链接地址、宽度、高度等属性。
2.3 链接标签链接标签用于创建网页之间的链接。
<a>标签用于定义链接，它需要指定链接的目标地址，可以是其他网页、文件或者锚点。
2.4 列表标签列表标签用于创建有序或无序的列表。
<ul>标签用于创建无序列表，<ol>标签用于创建有序列表，<li>标签用于定义列表项。
第三章：CSS的介绍和基本语法CSS（Cascading Style Sheets）是用于描述网页样式的语言。
htmlclass命名规则HTML Class命名规则是一种约定俗成的方法，用于给HTML元素添加class属性的命名。
以下是一些常用的HTML Class命名规则：1. 使用有意义的名称：为了增加代码的可读性和可维护性，应该使用有意义的名称来命名class。
名称应该准确地描述元素的用途或特征，避免使用模糊或不相关的名称。
2.使用小写字母和破折号：无论使用哪种命名约定，都应该使用小写字母和破折号来分隔单词。
这样可以提高代码的可读性，并且与HTML和CSS的语法保持一致。
3. 使用BEM命名约定：BEM（Block Element Modifier）是一种广泛使用的HTML/CSS命名约定，用于创建可重用、模块化的代码。
BEM约定的格式是：`block__element--modifier`，其中block代表一个独立的块，element代表block中的子元素，modifier代表block或element的状态或变化。
5. 不使用具体的样式名称：尽量避免使用具体的样式名称作为class名称，因为这会导致class的重用性降低。
相反，应该使用更一般性的名称来描述元素的用途、位置或结构。
6. 避免使用缩写和简写：为了避免命名歧义，应该尽量避免使用缩写和简写。
使用完整的单词来命名class可以提高代码的可读性和可维护性。
7. 使用有序的命名规则：为了保证class的一致性，可以使用有序的命名规则。
例如，按照字母顺序对class进行排列，或按照功能顺序对class进行排列。
8. 使用语义化的名称：尽量使用语义化的名称来命名class，以便更好地描述元素的用途和功能。
例如，使用`.navigation`来表示导航栏，使用`.card`来表示卡片容器。
9. 避免使用ID选择器作为class名称：将ID选择器用于CSS样式，而不是用作class名称。
ID选择器具有更高的优先级，并且只能在页面中使用一次，这限制了class的灵活性和复用性。
css 命名规范CSS命名规范是一种约定俗成的标准，用于统一命名CSS类、ID、选择器等，以确保代码的一致性和可维护性。
以下是一个约1000字的CSS命名规范的例子：一、命名规则：1. 采用英文小写字母、数字或连字符（-），不使用大写字母、下划线（_）或其他特殊字符。
2. 以字母开头，不以数字开头。
3. 使用有意义的名称，避免使用缩写或简写。
命名应反映元素的功能或用途。
4. 使用短小、精准的名称，不使用冗长或复杂的名称。
二、选择器命名：1. 使用有意义的名称来定义选择器。
例如，使用类名来表示元素的特征或功能。
（例如：.header，.sidebar）2. 避免使用无意义或单一的选择器名称。
可以使用多个类名来表示一个元素的多个特征或功能。
（例如：.primary-button.button）3. 不要使用ID选择器来定义样式，ID选择器具有较高的优先级，会导致样式难以重用和维护。
三、类名命名：1. 使用小写字母或连字符来分隔单词。
例如：.nav-bar，.info-box。
2. 使用有意义的名称来描述元素的功能或用途。
例如：.card，.container。
3. 使用简洁明了的名称，不要出现冗长或复杂的类名。
4. 避免使用HTML标签名称作为类名，以免混淆和难以维护。
四、ID命名：1. 使用小写字母或连字符来分隔单词。
例如：#home-page，#top-header。
2. ID命名应尽量避免使用，因为ID具有较高的优先级且唯一性，会导致样式难以重用和维护。
五、样式规则：1. 使用短小、精确的样式规则名称，可以简洁明了地反映样式的用途或作用。
（例如：.bold，.highlight）2. 选择器和样式命名应保持一致性，以提高代码的可读性和维护性。
3. 避免使用内联样式，尽量使用外部CSS样式文件来管理样式规则，以便代码的复用和维护。
六、注释规范：1. 使用注释来解释代码的用途、作用和相关信息，以便开发人员和维护人员理解代码的意图。
博图广告html页面以及CSS函数命名规则
页面插入FLASH标准方法
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cab#version= 9,0,19,0" width="400" height="495" name="Movie1" id="Movie1">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="swf/Video.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent"><!--此处根据页面需要决定是否添加-->
<embed src="swf/Video.swf" quality="high" allowscriptaccess="sameDomain" wmode="transparent" pluginspage="/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="495" name="Movie1" id="Movie1"></embed>
</object>
参数，ID和NAME根据需要命名
插入常规视频代码（avi,mov,wmv,rm,asf）(实际调用系统mediaplayer)
<embed src="320-180-2.mov" type="video/x-ms-wmv" width="480" height="360" autoStart="1" showControls="1" showstatusbar="1" />
参数autoStart=-1表示循环0 表示停止1表示播放1次其它的1表示显示0表示隐藏
页面HTML标准布局
常规页面只有上下，上中下，左右，左中右等布局，其它基本就是常规布局的组合，所以我们在定义页面时，从一开始就要考虑清楚，需要共用部分一定要单独定义，确保每个页面调用同一样式显示效果都一致。
先确定HTML页面的命名
首页index.html/asp/php
所有网站的第一个载入页面都以index 命名，后缀由程序最后决定
活动说明rules
作品列表pro_list
作品展示pro_show
个人中心personal
获奖名单awards
联系方式contact
排行榜top_list 多个排行榜时直接加后缀分类，如:top_list_luck
所含文件类型不同必须单独建立文件夹，如下：
HTML页面的代码必须干净，整齐，条理清晰
页面CSS命名方式
页头样式，尽量考虑全站共用，若首页和内页有差异，以下划线区分，
如:head_home, head_page，其它样式同理处理
页头整体head, head_left, head_right
全站主标志logo
主菜单nav, nav_menu, nav_menu_over
主内容部分main
主内容布局main_left, main_center, main_right, main_top, main_mid, main_bot
内容布局内部新闻：main_left_news,登录：main_left_login，依此类推
作品列表pro_list ul li,多种作品则pro_list_img, pro_list_txt, pro_list_mov
页脚整体foot, foot_left, foot_right
当范围定位标签定义完毕，内部标签可适当简洁，如:
.main_left_news .tt{ }
.main_left_news .tt h1{ }
以避免样式书写过长带来不必要的工作量
关于<P>标签的使用
涉及段落性文字必须使用p标签，并且标题部分配合使用<h4>标签
关于ul li , dl dt dd的使用
做活动站时，通常只使用ul li,多个列表时通过定义<ul class=”pro_list_img”>
样式表直接定义.pro_list_img .pro_list_img li .pro_list_img li img等定义此ul的内容
只有信息类列表采用dl dt dd，其中dl 代表范围，dt表示标题dd表示内容，
定义共用标签时注意对次级同类型标签的影响，不要对控制范围大的共用标签属性定义过多。
常规css属性重置汇总
html{height:100%}
body{font-size:12px;color:#787878;margin:0;padding-top:0px; }
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p,blockquote ,th,table,td{margin:0;padding:0}
ol,ul{list-style:none}
input,label,select,option,textarea,button,fieldset,legend{font-size:1}
i,em{font-style:normal}
img{ border:none; display:block }
button::-moz-focus-inner,input::-moz-focus-inner{ border-color:transparent!important;}
button{ cursor:pointer;}
textarea{border-color:#000 #ccc #dcdcdc #9f9f9f; border-style:solid;border-width:1px;padding:5px}
a{ text-decoration:none; outline:none;}
/**强效clear ，用于修正换行和清除前期定义效果以及FLOAT闭合**/
.fix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.fix{display:inline-block;min-height:1%}
*html .fix{zoom:1}
.fix{display:block}。
