Web前端开发规范(记录一):团队约定-基本原则

更新时间:

2020年7月27日10:36:38  更新 9。

2020年7月21日17:05:26  重新编写,以团队约定为主。

Web前端开发规范-团队约定-基本原则 记录一:

前言: 

每一次规范,都是为了下一次能更好的开发~

不要因为你在网上看到过规范文章,mark到你的收藏夹。你就会规范。

这个需要自己记录,自己做项目前,翻出来先看一遍。

1、结构、样式、行为分离


 尽量确保文档和模板只包含 HTML 结构,样式都放到样式表里,行为都放到脚本里。

2、缩进



网上有两种说法,不能说谁对,谁错。

自己团队约定自己的规范就好。

1)统一两个空格缩进(总之缩进统一即可),不建议使用 Tab 或者 Tab、空格混搭

2)倡议:

如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位(一个tab是4个空格)。如果是并列关系,最好上下对齐。

 

3、一律使用小写字母


 团队约定大小写

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

推荐:

<head>     
        <title>页面标题</title>
</head>

不推荐:

<HEAD>     
        <TITLE>我的第一个页面</TITLE>
</HEAD>

  

 4、文档类型<!DOCTYPE>


 团队约定:

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

 5、页面语言lang


<html lang="en">  指定html 语言种类

最常见的2个:

1.  en 定义语言为英语
2.  zh-CN 定义语言为中文

团队约定:

考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN 属性值

@拓展阅读:

简单来说,可能对于程序来说没有太大的作用,但是它可以告诉浏览器,搜索引擎,一些处理Html的程序对页面语言内容来做一些对应的处理或者事情。 比如可以

  • 根据根据lang属性来设定不同语言的css样式,或者字体

  • 告诉搜索引擎做精确的识别

  • 让语法检查程序做语言识别

  • 帮助翻译工具做识别

  • 帮助网页阅读程序做识别 等等

 

6、字符集 - 文件编码


 使用不带 BOM 的 UTF-8 编码。

    • 在 HTML中指定编码 <meta charset="utf-8"> 
    • 无需使用 @charset 指定样式表的编码,它默认为 UTF-8 (参考 @charset);

团队约定:

一般情况下统一使用 "UTF-8" 编码, 请尽量统一写成标准的 "UTF-8",不要写成 "utf-8" 或 "utf8" 或 "UTF8"。

 

7、注释


团队约定:

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

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

推荐:

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

不推荐:

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

8、HTML标签的语义化


语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。( 裸奔起来一样好看 )

遵循的原则: 先确定语义的HTML ,再选合适的CSS。

 这里有个小知识点:

 

 div span 是没有语义的,但是我们网页布局主要的2个盒子。

在不做特殊处理的情况下,

  • div标签 布局特点,一行只能放一个div

  • span标签 布局特点,一行上可以放好多个span

9、特殊字符处理



团队约定:

推荐:

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

不推荐:

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

by不言谢

不要和别人比,要赢得是自己。(ง •̀_•́)ง
原文地址:https://www.cnblogs.com/byx1024/p/12785662.html