代码规范

DOCTYPE 声明

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

<!DOCTYPE html>

页面语言LANG

<html lang="zh-CN">

CHARSET

<!-- 注意大小写 -->
<meta charset="UTF-8">

页面标题(Title)

页面名称-产品中文全称-官方网站，28个汉字以内

<title>我的套件 - 开发者后台 - 凌云</title>

页面关键字(Keywords)

Keywords为产品名、专题名、专题相关名词，之间用英文半角逗号隔开

<meta name="keywords" content="业务流程建模工具,workflow,开发者后台,developer,凌云,flyrise" />

页面描述(Description)

不超过150个字符，描述内容要和页面内容相关。

<meta name="description" content="业务流程建模工具提供业务流程引擎工具，使用方法请参考开发文档。" />

页面Meta

PC端Meta：

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta name="robots" content="all">
<meta name="author" content="Flyrise" />
<meta name="Copyright" content="LINGYUN" />
<meta name="Description" content="页面的描述内容" />
<meta name="Keywords" content="页面关键字" />

?移动端Meta：

<meta charset="gbk" /> 
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<!-- 为了防止页面数字被识别为电话号码，可根据实际需要添加： -->
<meta name="format-detection" content="telephone=no"> 
<!-- 让添加到主屏幕的网页再次打开时全屏展示，可添加：   -->
<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="robots" content="all">
<meta name="author" content="Tencent-CP" />
<meta name="Copyright" content="Tencent" />
<meta name="Description" content="页面的描述内容" />
<meta name="Keywords" content="页面关键字" />

HTML代码大小写

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

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>

元素属性

元素属性值使用双引号语法。

特殊字符引用

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

代码缩进

参考目录《格式化》

纯数字输入框

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

<input type="tel">

代码嵌套

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

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

注释规范

遵循标准

标准写法：

<!-- Comment Text -->

单行注释

占据一行：

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

模块注释

般用于描述模块的名称以及模块开始与结束的位置，模块与模块之间相隔一行

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

<!-- S: Comment Text B -->    
<div class="mod_b">
    ...
</div>2021-01-15 11:07:41 星期五
<!-- E: Comment Text B -->

嵌套模块注释

当模块注释内再出现模块注释的时候，为了突出主要模块，嵌套模块不再使用

<!-- S: Comment Text A -->
<div class="mod_a">

    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->

    <div class="mod_c">
        ...
    </div>
    <!-- /mod_c -->

</div>
<!-- E: Comment Text A -->
文档更新时间: 2021-05-13 08:50   作者：姚连洲