前端规范-HTML规范

合集下载

前端代码规范文档

前端代码规范文档前端代码规范文档一、命名规范1. HTML/CSS命名规范- 使用小写字母和连字符（-）作为单词分隔符；- 尽量避免使用缩写，除非是广泛接受的缩写；- 使用有意义的命名，不使用无意义的命名；- 使用统一的命名方式来表示特殊类型的元素（例如：头部、侧边栏等）；2. JavaScript命名规范- 使用驼峰命名法（camelCase）；- 使用有意义的命名来描述变量、函数或类的作用；- 避免使用单个字符的命名，除非是临时变量；- 使用全大写的命名方式来表示常量；二、缩进和空格规范1. 使用4个空格来进行缩进；2. 在括号前后留一个空格；3. 在运算符前后留一个空格；4. 在函数名和参数列表之间留一个空格；三、注释规范1. 使用注释来解释代码的功能和用途；2. 对于复杂的代码块或关键算法，应提供详细的注释；3. 注释应该是清晰明了的，避免使用不恰当的术语或缩写；4. 重要的注释可以使用大写字母或星号来标记；四、代码风格规范1. 使用一致的缩进和空格；2. 合理使用换行符，避免一行代码过长；3. 尽量避免使用行尾的空格或制表符；4. 使用一致的括号风格，例如在函数或语句块的开头和结尾都使用大括号；5. 使用分号来结束语句；6. 使用合理的命名方式来描述变量、函数和类的作用；7. 避免使用全局变量，使用局部变量或封装变量的方式来控制变量的作用范围；8. 避免使用多层嵌套的条件语句，可以使用条件判断的方法来简化代码；9. 使用恰当的函数和类来封装可重用的代码；五、代码结构规范1. 尽量避免大而复杂的函数，使用小而简单的函数来实现功能；2. 模块化代码，将相关联的函数和类放在同一个文件中；3. 合理使用空行来分隔不同的代码块；4. 将页面的结构和样式分离开来，使得HTML文件更加简洁和易于维护；5. 对于重要的功能块，使用代码块注释来标记开头和结尾；六、代码审查规范1. 对新提交的代码进行审查，确保其符合代码规范；2. 对代码中的错误和潜在问题进行识别和修复；3. 鼓励团队成员进行代码审查和互相学习，提高代码质量；4. 定期审核项目中的代码，找出不符合规范的代码并进行修正。

阿里前端开发规范

阿里前端开发规范阿里前端开发规范包括代码、命名、HTML、CSS、JavaScript、图片方面的规范。

1. 代码规范：- 使用四个空格缩进，不使用制表符。

- 代码行长度不超过80个字符。

- 使用驼峰命名法，变量和函数名用小写开头，构造函数用大写开头。

- 使用严格相等运算符（===和!==）替代宽松相等运算符（==和!=）。

- 在条件表达式中，使用括号来提高可读性。

- 避免在循环中使用等号赋值（例如，for (var i = 0; i < array.length; i++)）。

- 避免使用eval()函数。

2. 命名规范：- 文件名应该全部小写，可以包含破折号（-）或下划线（_）。

- 文件夹名应该全部小写，可以包含破折号（-）或下划线（_）。

- CSS文件名应该以.css结尾。

- JavaScript文件名应该以.js结尾。

3. HTML规范：- 使用两个空格缩进，不使用制表符。

- 使用双引号而不是单引号作为属性值的引号。

- 在自定义属性中使用小写字母和破折号（-）。

- 为所有非自闭合标签使用闭合标签。

- 避免在HTML标签中使用行内样式。

4. CSS规范：- 使用两个空格缩进，不使用制表符。

- 使用小写字母和破折号（-）作为选择器和属性名的命名方式。

- 为每个选择器之间使用空行分隔。

- 使用简写属性来减少代码量。

- 使用预处理器（如Less或Sass）来编写CSS。

5. JavaScript规范：- 使用两个空格缩进，不使用制表符。

- 使用分号作为语句的结束符号。

- 避免使用全局变量。

- 避免使用with语句。

- 使用模块化的开发方式，避免全局作用域污染。

6. 图片规范：- 使用有意义的命名来描述图片内容。

- 使用适当的格式和压缩技术来减小图片文件大小。

- 将页面上的图片引用写成相对路径。

以上是阿里前端开发规范的一些主要内容。

在实际开发中，遵循这些规范可以提高代码的可读性和可维护性，使团队成员之间更容易协同工作。

前端命名规范

前端命名规范前端命名规范是一种约定俗成的规则，旨在保证代码的可读性和维护性，使团队成员能够更加高效地协作开发。

下面是一些常见的前端命名规范：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。

WEB前端开发代码使用要求规范

WEB前端开发代码使用要求规范1.编码规范- 使用标准的HTML、CSS和JavaScript语法。

-使用缩进和空格来提高代码的可读性。

-使用注释来解释代码的目的和功能。

2.文件和目录结构规范-使用有意义的文件和目录命名，方便其他开发人员寻找代码。

-在项目中使用统一的目录结构，例如将HTML文件存放在一个文件夹中，将样式文件存放在另一个文件夹中，以此类推。

3.HTML规范- 避免在HTML中直接写入样式和脚本代码，应将样式和脚本代码分离到对应的CSS和JavaScript文件中。

4.CSS规范-使用适当的选择器，避免过多的嵌套。

-避免使用内联样式，应将样式写在CSS文件中，以提高可维护性。

- 使用合适的样式命名规则，例如使用BEM(Block-Element-Modifier)命名规则，或其他约定俗成的命名规则。

5. JavaScript规范-使用合适的变量和函数命名，提高代码的可读性。

-避免使用全局变量，应将变量和函数封装在模块中。

- 使用严格模式(`use strict`)，避免不规范的语法和行为。

- 避免使用`eval`和`with`等不安全的代码。

-在循环中使用合适的终止条件，避免死循环。

6.代码结构规范-代码应具有良好的组织结构，例如使用模块化的方式来组织代码。

-尽量遵循单一职责原则，每个函数和类应该只负责一件事情。

-提取重复的代码块，封装成函数或类，以提高代码的复用性。

-不要写过长的函数或类，应该根据需要进行拆分和重构。

7.注释规范-使用注释来解释代码的目的和功能，特别是代码的复杂部分。

-注释应该清晰、简洁，方便其他开发人员理解代码。

-避免使用无用的注释，注释应该随着代码的变化而更新。

总之，遵守WEB前端开发代码使用要求规范能够提高代码的质量和开发效率，减少错误和维护成本。

同时，还能提高团队合作的效率，方便其他开发人员理解和修改代码。

因此，在进行WEB前端开发时应该积极遵守和推崇相关规范。

前端代码编写规范标准

前端代码编写规命名规则1.项目名称项目名称驼峰式命名。

例：myProject2.目录命名采用单数命名法。

例：css img font js3.JS文件命名字母全部小写，单词之间用“-”。

例：popup-window.js4.CSS文件命名字母全部小写，单词之间用“-”。

例：popup-window.css5.HTML文件命名文件名称驼峰式命名。

例：riverMonitor.htmlHTML1.语法缩进使用Tab（4个空格）;解释：对于非HTML标签之间的缩进,比如script或style标签容缩进，与script或style标签的缩进同级。

<html><head><title>Page title</title></head><body><img src="images/company_logo.png"alt="Company"><h1class="hello-world">Hello, world!</h1></body></html>2.HTML5 doctype页面开头的doctype大写，html小写。

WEB前端开发规范文档

WEB前端开发规范文档目录WEB前端开发规范文档 (1)规范目的 (2)基本准则 (2)文件规范 (2)html书写规范 (2)html其他规范 (3)css书写规范 (4)JavaScript书写规范 (5)jQuery部分 (5)开发及测试工具约定 (6)其他规范 (6)规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档: 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发: 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改:基本准则1：符合web标准, 语义化html,遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的代码组织模式。

2：代码格式化，保持干净整洁。

3：换行必须缩进一个tab。

4：编写所有前台页面时，请使用已有模板进行复制，在模板的基础上进行开发。

5：每一个页面都必须有一个独立的css，js文件。

6：如果不是用HTML5编写的网站，请用IE7，IE8，IE9，火狐，谷歌，webkit，safari内核进行测试兼容性。

7：如果是HTML5编写的网站，请用IE9，火狐，谷歌，webkit，safari内核进行测试兼容性。

文件规范1: html, css, js, images文件均归档至<系统开发规范>约定的目录中;2: html文件命名: 英文命名, 后缀:htm: 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;3: css文件命名: 英文命名, 后缀:css: 共用base:css, 首页index:css, 其他页面依实际模块需求命名:;4: Js文件命名: 英文命名, 后缀:js: 共用common:js, 其他依实际模块需求命名:html书写规范1：所有元素都必须小写，属性也是，如： <input type=”text”id=”idName”/>正确<INPUT TYPE=”text”ID=”idName”/>错误2：元素必须成对出现，如<span>必须写成<span></span>特殊元素除外，如：<br /><hr /><img /><input />3：标签中不允许出现样式，必须用class来声明样式，如：<input type=”text”id=”idName”style=”text-align:right;”/>错误<input type=”text”id=”idName”class=”class-name”/>正确4：元素id命名必须是驼峰式命名如：<input type=”text”id=”idName”/>正确<input type=”text”id=”idname”/>错误<input type=”text”id=”id-name”/>错误5：元素class命名规范是：元素简写+”-”+功能名，如：<button calss=”btn-save”></button>正确<button calss=”btnSave”></button>错误<button calss=”save”></button>错误6：元素name命名必须遵循驼峰式命名法。

前端开发规范文档

前端开发规范文档一、概述。

本文档旨在规范前端开发工作，统一团队成员的开发风格，提高代码质量和可维护性。

在前端开发中，规范是非常重要的，它可以让团队成员之间的合作更加顺畅，代码更加易读易懂。

本规范文档将涵盖HTML、CSS、JavaScript等前端开发的相关规范，希望每位开发人员都能认真遵守。

二、HTML规范。

1. 文件命名规范。

文件名应使用小写字母，单词之间可以使用连字符“-”连接，例如，index.html、about-us.html。

文件名应简洁明了，不使用无意义的数字或字符。

2. 代码缩进规范。

使用两个空格进行代码缩进，不使用Tab键。

3. 标签规范。

标签名应使用小写字母。

标签属性值应使用双引号。

4. 注释规范。

在需要注释的地方使用<!--->进行注释。

5. 其他规范。

应尽量避免使用行内样式和行内脚本。

尽量减少标签的嵌套层级，保持HTML结构的简洁性。

三、CSS规范。

1. 文件组织规范。

将CSS文件统一放置在一个文件夹中，不要将CSS文件散落在各个目录中。

可以根据模块或页面的不同，将CSS文件拆分为多个文件，使用@import进行引入。

2. 类名规范。

类名应使用小写字母，单词之间可以使用连字符“-”连接，例如，header-nav、footer-content。

类名应简洁明了，不使用无意义的数字或字符。

3. 属性顺序规范。

CSS属性应按照一定的顺序书写，例如，布局定位属性、盒模型属性、文字排版属性、视觉效果属性等。

4. 其他规范。

尽量避免使用!important，除非必要情况下。

尽量使用缩写属性，减少代码量。

四、JavaScript规范。

1. 变量命名规范。

变量名应使用驼峰命名法，例如，myName、isShow。

变量名应简洁明了，不使用无意义的单个字母。

2. 代码缩进规范。

使用两个空格进行代码缩进，不使用Tab键。

3. 注释规范。

在需要注释的地方使用//进行单行注释，使用/ /进行多行注释。

前端代码规范

目录一 HTML规范 (1)1.基础规范 (1)2.属性顺序 (2)3. id/class命名规则 (2)4. 标签使用 (2)二 CSS规范 (3)1. 属性顺序 (3)2. 选择器 (4)3. 属性使用缩写 (4)4. a标签伪类书写顺序 (4)5. 使用sass的项目 (4)三 JS规范 (5)1. 命名 (5)2. 语言规范 (5)3. 编码风格 (5)前端代码规范一 HTML规范1.基础规范1.1 为每个HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。

(Line1)1.2 html根元素指定lang属性，从而为文档设置正确的语言。

(Line2)1.3 声明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码。

根据页面内容和需求填写适当的keywords和description。

(Line4)1.4 每个页面必须有且仅有一个title元素。

(Line5)1.5 在引入CSS和JavaScript文件时一般不需要指定type属性，因为text/css 和text/javascript分别是它们的默认值。

(Line6/7)1.6 当link元素用于引用CSS文档时, 默认media是screen, 如为特殊终端提供样式, 请指定media属性, 如media=“print”。

1.7 css 引用置于头部<head>标签内。

1.8 js 引用置于底部</body>标签前。

2.属性顺序∙class （class是为高可复用组件设计的，所以应处在第一位）∙id、name （id更加具体且应该尽量少使用，所以将它放在第二位）∙data-*∙src、for、type、href、value∙placeholder、title、alt∙aria-*、role∙required、readonly、 disabled3. id/class命名规则3.1 遵循“内容优先，表现为辅”的基本原则首先根据内容命名，如header、footer。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

来源：NEJ-更好的JS解决方案搬运工：陈晓勉HTML规范- 整体结构∙文件应以“<!DOCTYPE ......>”首行顶格开始，推荐使用“<!DOCTYPE html>”。

∙必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码。

∙根据页面内容和需求填写适当的keywords和description。

∙页面title是极为重要的不可缺少的一项。

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>锐诺互动</title><meta name="keywords" content=""/><meta name="description" content=""/><meta name="viewport" content="width=device-width"/><link rel="stylesheet" href="css/style.css"/><link rel="shortcut icon" href="img/favicon.ico"/><link rel="apple-touch-icon" href="img/touchicon.png"/></head><body></body></html>结构顺序和视觉顺序基本保持一致∙按照从上至下、从左到右的视觉顺序书写HTML结构。

∙有时候为了便于搜索引擎抓取，我们也会将重要内容在HTML结构顺序上提前。

∙用div代替table布局，可以使HTML更具灵活性，也方便利用CSS控制。

∙table不建议用于布局，但表现具有明显表格形式的数据，table还是首选。

结构、表现、行为三者分离，避免内联∙使用link将css文件引入，并置于head中。

∙使用script将js文件引入，并置于body底部。

保持良好的简洁的树形结构∙每一个块级元素都另起一行，每一行都使用T ab缩进对齐（head和body的子元素不需要缩进）。

删除冗余的行尾的空格。

∙使用4个空格代替1个Tab（大多数编辑器中可设置）。

∙对于内容较为简单的表格，建议将tr写成单行。

∙你也可以在大的模块之间用空行隔开，使模块更清晰。

<body><div class="m-side"><div class="side"><div class="sidein"><div class="sideblk"><div class="m-hd3"><h3 class="tit">热门标签</h3></div>...</div><div class="sideblk"><div class="m-hd3"><h3 class="tit">最热TOP5</h3><a href="#" class="s-fc02 f-fr">更多»</a></div>...</div></div></div></div></body>另外，请做到以下几点∙结构上如果可以并列书写，就不要嵌套。

如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>∙∙如果结构已经可以满足视觉和语义的要求，那么就不要有额外的冗余的结构。

比如<div><h2></h2></div>已经能满足要求，那么就不要再写成<div><div><h2></h2></div></div>∙∙一个标签上引用的className不要过多，越少越好。

比如不要出现这种情况：<divclass="class1 class2 class3 class4"></div>∙∙对于一个语义化的内部标签，应尽量避免使用className。

比如在这样一个列表中，li标签中的itm应去除：<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>∙HTML规范- 代码格式说明文案的注释方法采用类似标签闭合的写法，与HTML统一格式；注释文案两头空格，与CSS注释统一格式。

∙开始注释：（文案两头空格）。

∙结束注释：（文案前加“/”符号，类似标签的闭合）。

∙允许只有开始注释！<div class="g-hd"><h1 class="m-logo"><a href="#">LOGO</a></h1><ul class="m-nav"><li><a href="#">NAV1</a></li><li><a href="#">NAV2</a></li></ul></div>代码本身的注释方法单行代码的注释也保持同行，两端空格；多行代码的注释起始和结尾都另起一行并左缩进对齐。

严格的嵌套∙尽可能以最严格的xhtml strict 标准来嵌套，比如内联元素不能包含块级元素等等。

∙ 正确闭合标签且必须闭合。

严格的属性∙属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。

∙没有值的属性必须使用自己的名称做为值（checked 、disabled 、readonly 、selected 等等）。

∙ 可以省略style 标签和script 标签的type 属性。

常用的标签常见标签表标签语义嵌套常见错误常用属性（加粗的为不可缺少的或建议的） <a></a> 超链接/锚a 不可嵌套a href,name,title,rel,target <br /> 换行<button></button> 按钮不可嵌套表单元素 type,disabled<dd></dd> 定义只能以dl标签语义嵌套常见错误常用属性（加粗的为不可缺少的或建议的）列表中的定义（描述内容）为父容器，对应一个dt<del></del> 文本删除<div></div> 块级容器<dl></dl> 定义列表只能嵌套dt和dd<dt></dt> 定义列表中的定义术语只能以dl为父容器，对应多个dd标签语义嵌套常见错误常用属性（加粗的为不可缺少的或建议的）<em></em> 强调文本<form></form> 表单action,target,method,name<h1></h1> 标题从h1到h6，不可嵌套块级元素<iframe></ifra me> 内嵌一个网页frameborder,width,height,src,scrolling,name<img /> 图像alt,src,width,height<input /> 各种表单控件type,name,value,checked,disabled,maxlength,readonly,accesskey<label></label > 标签为inpfor标签语义嵌套常见错误常用属性（加粗的为不可缺少的或建议的）ut元素定义标注<li></li> 列表项只能以ul或ol为父容器<link /> 引用样式或icon不可嵌套任何元素type,rel,href<meta /> 文档信息只用于headcontent,http-equiv,name<ol></ol> 有序列表只能嵌套li<option></opti on> select中的一仅用于selectvalue,selected,disabled标签语义嵌套常见错误常用属性（加粗的为不可缺少的或建议的）个选项<p></p> 段落不能嵌套块级元素<script></scrip t> 引用脚本不可嵌套任何元素type,src<select></sele ct> 列表框或下拉框只能嵌套option或optgroupname,disabled,multiple<span></span > 内联容器<strong></stro ng> 强调文本<style></style > 引用样式不可嵌套任何元素type,media标签语义嵌套常见错误常用属性（加粗的为不可缺少的或建议的）<sub></sub> 下标<sup></sup> 上标<table></table > 表格只可嵌套表格元素width,align,background,cellpadding,cellspacing,summary,border<tbody></tbod y> 表格主体只用于table<td></td> 表格中的单元格只用于trcolspan,rowspan<textarea></te xtarea> 多行文本输入控件name,accesskey,disabled,readonly,rows,cols<tfoot></tfoot> 表格表尾只用于table常见标签表标签语义嵌套常见错误常用属性（加粗的为不可缺少的或建议的）<th></th> 表格中的标题单元格只用于trcolspan,rowspan<thead></thea d> 表格表头只用于table<title></title> 文档标题只用于head<tr></tr> 表格行嵌套于table或thead、tbody、tfoot<ul></ul> 无序列表只能嵌套liHTML规范- 内容语义加强“资源型”内容的可访问性和可用性在资源型的内容上加入描述文案，比如给img添加alt属性，在audio内加入文案和链接等等。