前端开发规范

最新推荐文章于 2024-06-23 13:40:22 发布

szbszb1

最新推荐文章于 2024-06-23 13:40:22 发布

阅读量449

点赞数

分类专栏：前端开发规范文章标签： html css css3 javascript

本文链接：https://blog.csdn.net/szbszb1/article/details/109645520

版权

本文档详细阐述了前端开发中的HTML、CSS和JavaScript规范，包括代码规范、注释规范、图片规范、命名规范以及JS语言规范。HTML规范涵盖团队约定、编码规则和元素标签的闭合；CSS规范涉及选择器、属性、注释和媒体查询；图片规范讨论了不同格式的选择和大小优化；命名规范明确了目录、图片和类名的命名规则；JS规范包括语言规范、代码风格和变量声明。整体旨在提升代码质量和可维护性。

摘要由CSDN通过智能技术生成

HTML 规范

代码规范

团队约定

HTML 文件必须加上 DOCTYPE 声明，统一使用 HTML5 的文档声明：

<!DOCTYPE html>

页面语言 LANG

推荐使用属性值cmn-Hans-CN（简体，中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用zh-CN属性值

<html lang="zh-CN">

CHARSET

HTML5 中默认的字符编码是 UTF-8

团队约定：一般情况下统一使用“UTF-8"编码

<meta charset="UTF-8">

由于历史原因，有些业务可能会使用 "GBK"编码

<meta charset="GBK">

请尽量统一写成标准的"UTF-8"，不要写成"utf-8"或"utf8"或“UTF8"。根据IETF对UTF-8的定义，其编码标准的写法是"UTF-8"；

元素及标签闭合

HTML 元素共有一下 5 种：

空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
原始文本元素：script、style
RCDATA元素：textarea、title
外来元素：来自MathML命名空间的SVG命名空间的元素
常规元素：其他HTML允许的元素都被称为常规元素

元素标签的闭合应遵循以下原则：

原始文本元素、RCDATA元素以及常规元素都有一个开始标签来表示开始，一个结束标签来表示结束。
某些元素的开始和结束标签是可以省略的，如果规定标签不能被省略，那么就绝对不能省略它。
空元素只有一个开始标签，且不能为空元素设置结束标签。
外来元素可以有一个开始标签和配对的结束标签，或则只有一个自闭合的开始标签，且后者情况下该元素不能有结束标签。

为了能让浏览器更好地解析代码以及能让代码有更好的可读性，有如下约定：

所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签和结束标签的元素亦都要写上。
空元素标签都不加"/"字符。

推荐：

<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>

<br>

不推荐：

<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始无终，浏览器能正确解析
</div>

<br/>

HTML 代码大小写

HTML 标签名、类名、标签属性和大部分属性值统一用小写

推荐：

<div class="demo"></div>

不推荐：

<div class="DEMO"></div>

<DIV CLASS="DEMO"></DIV>

HTML 文本、CDATA、JavaScript、meta标签某些属性等内容可大小写混合

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

<!-- HTML文本内容 -->
<h1>I AM WHAT I AM </h1>

<!-- JavaScript 内容 -->
<script type="text/javascript">
	var demoName = 'demoName';
	...
</script>
	
<!-- CDATA 内容 -->
<script type="text/javascript"><![CDATA[
...
]]></script>

属性类型

不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含

推荐：

<link rel="stylesheet" href="" >
<script src=""></script>

不推荐：

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

元素属性

元素属性值使用双引号语法
元素属性值可以写上的都写上

推荐：

<input type="text">
	
<input type="radio" name="name" checked="checked" >

不推荐：

<input type=text>	
<input type='text'>
	
<input type="radio" name="name" checked >

特殊字符引用

文本可以和字符引用混合出现。这种写法可以用来转义在文本中不能合法出现的字符。

在 HTML 中不能使用小于号”<“和大于号”>"特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体

推荐：

<a href="#">more&gt;&gt;</a>

不推荐：

<a href="#">more>></a>

代码缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

纯数字输入框

使用type="tel"而不是type="number"

<input type="tel">

代码嵌套

元素嵌套规范，每个块状元素独立一行，内联元素可选

推荐：

<div>
    <h1></h1>
    <p></p>
</div>	
<p><span></span><span></span></p>

不推荐：

<div>
    <h1></h1><p></p>
</div>	
<p> 
    <span></span>
    <span></span>
</p>

段落元素与标题元素只能嵌套内联元素

推荐：

<h1><span></span></h1>
<p><span></span><span></span></p>

不推荐：

<h1><div></div></h1>
<p><div></div><div></div></p>

注释规范

标准写法：

<!--Comment Text-->

错误的写法：

<!-->The Wrong Comment Text-->

<!--->The Wrong Comment Text-->

<!--The--Wrong--Comment Text-->

<!--The Wrong Comment Text--->

单行注释

一般用于简单的描述，如某些状态描述、属性描述等

注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

推荐：

<!-- Comment Text -->
<div>...</div>

不推荐：

<div>...</div><!-- Comment Text -->	
	
<div><!-- Comment Text -->
    ...
</div>

模块注释

一般用于描述模块的名称以及模块开始与结束的位置

注释内容前后各一个空格字符，表示模块开始，表示模块结束，模块与模块之间相隔一行

推荐写法：

<!-- S Comment Text A -->	
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
	
<!-- S Comment Text B -->	
<div class="mod_b">
    ...
</div