Frontend playbook

让好代码，
成为团队习惯。

面向政府静态网页的开发规范。左边说明统一约定，右边给出可直接参考的标准写法。

01HTML

HTML 规范

使用结构完整、语义明确且格式化的 HTML。

文档基础

使用 HTML5 文档声明。
字符编码放在 head 的最前部；必须设置 viewport。
样式表、jQuery 放到 head 中；其它脚本放在 body 末尾；部分第三方脚本可以使用 async，避免阻塞页面解析，例如 jiucuo.js。

结构与语义

使用 header nav main footer 语义元素，其余使用 div。

class 约定

使用 wrapper-xxx 表示外层。
使用 container-1200 表示内层，数字代表页面宽度。

id 约定

每个 id 不要重复。

css 约定

样式尽量写入到 css 文件。

编码约定

使用 2 个空格缩进，标签名和属性名使用小写，属性值统一使用双引号。
CMSPRO_ 标签使用大写，如 CMSPRO_DOCUMENTS CMSPRO_CHANNEL。

推荐的页面骨架

wrapper-xxx 定义背景样式。
container-1200 定义页面宽度。
侧边栏因为不用页面宽度，就只使用 wrapper-sidebar，不用加 container-1200。

主要内容中，使用 line line-xxx 表示每行。
每行中，使用 xxx-left xxx-center xxx-right 表示左中右列。

1<!doctype html>2<html lang="zh-CN">3  <head>4    <meta charset="UTF-8" />5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />6    <title>网站标题</title>7  </head>8  <body>9    <!-- 头部 -->10    <header class="wrapper-header">11      <div class="container-1200"></div>12    </header>13
14    <!-- 导航栏 -->15    <nav class="wrapper-nav">16      <div class="container-1200">17        <ul>18          <li></li>19        </ul>20      </div>21    </nav>22
23    <!-- 主要内容 -->24    <main class="wrapper-main">25      <div class="container-1200">26        <!-- 主要内容 - 新闻 -->27        <div class="line line-news clearfix">28            <div class="news-left"></div>29            <div class="news-right"></div>30        </div>31
32        <!-- 主要内容 - 专题专栏 -->33        <div class="line line-ztzl"></div>34
35        <!-- 主要内容 - 政民互动 -->36        <div class="line line-zmhd"></div>37      </div>38    </main>39
40    <!-- 页脚 -->41    <footer class="wrapper-footer">42      <div class="container-1200"></div>43    </footer>44
45    <!-- 侧边栏 -->46    <div class="wrapper-sidebar">47        <ul>48            <li></li>49        </ul>50    </div>51  </body>52</html>

常见meta标签

1<!-- 必选 -->2<meta name="SiteName" content="<CMSPRO_WEBSITE FIELD='name' code=''></CMSPRO_WEBSITE>">3<meta name="SiteDomain" content="http://jtt.sc.gov.cn/">4<meta name="SiteIDCode" content="5100000085">5
6<!-- 栏目页必选 -->7<meta name="ColumnName" content="<CMSPRO_CHANNEL CODE='' FIELD='channelName'></CMSPRO_CHANNEL>">8<meta name="ColumnDescription" content="<CMSPRO_CHANNEL CODE='' FIELD='channelName'></CMSPRO_CHANNEL>">9<meta name="ColumnKeywords" content="<CMSPRO_CHANNEL CODE='' FIELD='channelName'></CMSPRO_CHANNEL>">10<meta name="ColumnType" content="<CMSPRO_CHANNEL CODE='' FIELD='channelName'></CMSPRO_CHANNEL>">11
12<!-- 详情页必选 -->13<meta name="ArticleTitle" content="<CMSPRO_DOCUMENT FIELD='title' num='100'>标题 </CMSPRO_DOCUMENT>">14<meta name="PubDate" content="<CMSPRO_DOCUMENT field='publishedTime' dateformat='yyyy-MM-dd HH:mm'></CMSPRO_DOCUMENT>">15<meta name="ContentSource" content="<CMSPRO_DOCUMENT FIELD='infoSource' DOMAINMETADATANAME='稿件元数据'>信息来源</CMSPRO_DOCUMENT>">

02CSS

CSS 规范

使用统一样式命名规范和文件命名规范。

基础原则

使用 reset.css 清除不同浏览器差异。
优先使用外部样式表，页面尽量不写 style 标签，如果要写，放到 head 中。

命名与作用域

class 使用小写短横线命名，名称表达组件或职责，不描述颜色、位置等易变外观。
组件采用清晰的块、元素、状态结构，例如 search search_input search_button。
激活的块，使用 on。
每块组件写入注释。

响应式与兼容性

在内容出现挤压或失衡的实际位置设置断点。
注意常见断点：1200px 1000px 768px 425px 320px。
最低兼容宽度：360px？。
是否可以使用 flex 布局？。

文件命名

reset.css：清除不同浏览器差异。
common.css：通用样式。包括公共头、公共尾、导航栏、侧边栏、面包屑导航等。
index.css：首页样式。
zmhd.css zwgk.css zjxx.css：频道页样式。每个样式量较大，使用单独css。
secondary.css：二级页面样式。每个样式量不多，可以合并到一起。包括列表页、网站地图等页面。

css 文件开头都要加上 @charset "UTF-8";，避免中文字符乱码。

基础命名规则

都以 search 开头，表示是同一组件。
便于后续快速复制到其它网站使用，一目了然。

1@charset "UTF-8";2/* 通用样式 */3
4.search {} // 搜索功能5
6.search .search_inner {} /* 搜索子级 */7
8.search .search_input {} /* 搜索框 */9
10.search .search_button {} /* 搜索按钮 */11.search .search_button a {} /* 搜索子元素 */12
13/* 响应式 */14@media screen and (max-width: 1200px){}

1@charset "UTF-8";2/* 二级页面样式 */3
4/* 列表页 */5...6
7/* 图片列表 */8...9
10/* 网站地图 */11...

03JS / jQuery

JavaScript 与 jQuery 规范

以 jQuery 为默认方案，配合原生 JavaScript。

语言与代码风格

新代码默认使用 jQuery 保证兼容性。
每个模板仅引入一个 jQuery 文件。在 head 中引入，以避免部分代码在 main 中无法执行。
尽量使用 var，以低版本浏览器保证兼容性。
变量和函数使用 camelCase。如：getYjzjList、encryptJSON
常量使用 UPPER_SNAKE_CASE。如：HD_INTERFACE_URL、HD_PAGE_URL
统一使用分号和单引号。
函数、不容易理解的地方加上注释。

常用约定

common.js：公共 js。
index.js：首页 js。
zmhd.js zwgk.js：频道页 js。
hd_common.js aes.js：互动功能。
jianfanti.js：简繁体。
alert.min.js：外链弹窗。
jquery.min.js：jQuery。文件名中不带版本，避免扫描出漏洞。使用 3.x 版本。
jquery.SuperSlide.js：superslide。文件名中不带版本，避免扫描出漏洞。使用 2.3.1 版本。

jQuery 示例

1// 通用 js2
3$(function () {4  // 页脚友情链接5  $('.link-list-item').hover(6    function () {7      $(this).addClass('on').siblings().removeClass('on');8      $(this).find('.down-box').toggle();9      $(this).siblings().find('.down-box').hide();10    },11    function () {12      $(this).removeClass('on');13      $(this).find('.down-box').hide();14    }15  );16
17  // 页头导航栏高亮18  highlightChannel('.nav li', '.breadcrumb');19
20  // 侧边两个导航条随高度滚动21  initialSidebarScroll();22});23
24/**25 * 切换栏目26 * @param triggerEl 鼠标 click 或 hover 的标题元素27 * @param targetEl 需要展示的内容元素28 * @param method 切换方式，'click' 或 'hover'，默认 'hover'29 * @param callback 回调函数30 */31function switchPanel(triggerEl, targetEl, method, callback) {...}

04文件结构

文件结构规范

统一文件、资源命名与引用方式。

目录职责

常见文件夹名：css images js ztzl 2026
改版文件夹使用年份，不要月份和日期：2026
HTML 模板放在项目根目录或改版年份目录。
专题资源文件放到 ztzl 文件夹下 images css js 中。

文件命名

文件和目录统一使用小写字母、数字与短横线，不使用空格、中文和特殊符号。
专题资源前加 zt_。

1index.html 首页2header.html 公共头3footer.html 公共尾4
5list.html 通用列表页6list_img.html 通用图片列表页7
8wzdt.html 网站地图9
10zt_rszp.html 专题_人事招聘

1logo.png2
3// 侧边栏图片4sidebar_icon1.png5sidebar_icon2.png6
7// 人事招聘专题图片8rszp_title.png9rszp_bg.png

资源目录示例

html 模板放根目录或改版年份目录
专题资源（image、css、js）放到 ztzl 下
改版资源（image、css、js、html）放到年份文件夹下

1根目录/2├─ index.html3├─ zmhd.html4├─ header.html5├─ footer.html6├─ css/7│  ├─ index.css8│  └─ reset.css9├─ images/10│  ├─ logo.png11│  └─ sidebar_icon1.png12├─ js/13│  ├─ jQuery.min.js14│  └─ common.js15├─ 2026/16│  ├─ css/17│  ├─ js/18│  └─ images/19└─ ztzl/20   ├─ css/21   │  ├─ ztzl.css22   │  └─ ztzl_xxx.css23   ├─ js/24   └─ images/25      ├─ zfxxgk_title.png26      └─ jczwgk_icon1.png

资源加载

1<!-- css -->2<link rel="stylesheet" href="css/common.css">3
4<!-- js -->5<script src="js/jquery.min.js"></script>6<script src="js/index.js"></script>7<script id="_jiucuo_" sitecode="5101220004" src="https://zfwzgl.www.gov.cn/exposure/jiucuo.js" async></script> <!-- async 异步加载 -->8
9<!-- image -->10<img src="images/logo.png" />

05实用技巧

编码小技巧

汇总静态网页开发中常用且易复用的小技巧。

后台使用

大改动前，先下载模板备份。
视频文件尽量传到稿件中，不要传到文件目录，避免备份模板时体积过大下载慢。
后台建栏目
- 辅助栏目：友情链接、网站地图、测试栏目等。
- 公共栏目：各公共模板。
站点配置中，站点域名最后不加 /。
删除栏目前，撤销稿件，撤销栏目。

模板使用

检查模板 meta 标签。
详情页
- 无论是否展示访问量，都请求。
- 没有分享功能，可先预留位置。

HTML 小技巧

政务服务外链 a 标签补充 rel="noopener noreferrer"。

其它参考

政府网站发展指引

模板用法

1<!-- 站点 -->2<CMSPRO_WEBSITE FIELD="url"></CMSPRO_WEBSITE>3
4<!-- 栏目 -->5<CMSPRO_CHANNEL CODE="" FIELD="url"></CMSPRO_CHANNEL>6<CMSPRO_CHANNEL CODE="" FIELD="channelName"></CMSPRO_CHANNEL>7<CMSPRO_CHANNEL CODE="" FIELD="memo">栏目描述</CMSPRO_CHANNEL>8<CMSPRO_CHANNEL CODE="" FIELD="codeName">栏目code</CMSPRO_CHANNEL>9
10<!-- 文章 -->11<CMSPRO_DOCUMENTS CHANNELCODE="" DOCUMENTTYPE="0|1|2|3|8|9" NUM="5" STARTPOS="0"></CMSPRO_DOCUMENTS>12<CMSPRO_DOCUMENTS CHANNELCODE="" DOCUMENTTYPE="0|1|2|3|8|9" NUM="1000" STARTPOS="0" PAGENAVIGATIONID="page-div" PAGENAVIGATIONCLASS="" PAGESIZE="15"></CMSPRO_DOCUMENTS>13（DOCUMENTTYPE中：0代表普通稿件、123未知、8代表图片新闻、9代表头条新闻）14（SITECODE="chengdu" 跨站点读取数据）15（ORDER="PUBLISHED_TIME DESC" 文章列表排序字段）16（ORDER="PUBLISHED_TIME ASC" 文章列表排序字段 倒序）17<CMSPRO_APPENDIXS MODE="IMG" NUM="1" STARTPOS="0"></CMSPRO_APPENDIXS>18<CMSPRO_APPENDIX FIELD='path'></CMSPRO_APPENDIX>19<CMSPRO_DOCUMENT FIELD='url'></CMSPRO_DOCUMENT>20<CMSPRO_DOCUMENT FIELD="title">文章标题</CMSPRO_DOCUMENT>21<CMSPRO_DOCUMENT FIELD="content">文章内容</CMSPRO_DOCUMENT>22<CMSPRO_DOCUMENT FIELD="publishedTime" DATEFORMAT="yyyy-MM-dd">时间</CMSPRO_DOCUMENT>23
24<!-- 子栏目 -->25<CMSPRO_CHANNELS CODE="" CHILDLEVEL="1" CHILDTYPE="0|1|2|3" NUM="" STARTPOS="0"></CMSPRO_CHANNELS>26（CHILDTYPE中：0普通栏目，1未知，2外链栏目，3未知）27<CMSPRO_CHANNEL CODE='' FIELD='url'></CMSPRO_CHANNEL>28<CMSPRO_CHANNEL CODE='' FIELD="channelName"></CMSPRO_CHANNEL>29
30<!-- 子栏目logo -->31<img src="<CMSPRO_CHANNEL LOGOINDEX='0'></CMSPRO_CHANNEL>" alt=""/>32<img src="<CMSPRO_CHANNEL CODE='' LOGOINDEX='0'></CMSPRO_CHANNEL>" alt=""/>33
34<!-- 关联稿件 -->35（MODE参数：USER<用户手工设置的关联稿件>、KEYWORDS<提取包含当前稿件中设置的关键词的所有稿件>、ALL<前两者结合>）36<CMSPRO_RELDOCUMENTS STARTPOS='0' NUM='5' MODE='USER'>37    <li>38        <CMSPRO_DOCUMENT field='subTitle' autolink='true' target='_blank' num="100"></CMSPRO_DOCUMENT>39    </li>40</CMSPRO_RELDOCUMENTS>41
42<!-- 面包屑导航 -->43<CMSPRO_LOCATION LINK="&nbsp;&gt;&nbsp;" SELFONLY="false" AUTOLINK="true" TARGET="_blank" LINKEXTRA="" HOMEPAGEDESC="首页">当前位置</CMSPRO_LOCATION>44
45<!-- 来源 -->46<CMSPRO_DOCUMENT FIELD="source" DOMAINMETADATANAME="默认元数据集">信息来源</CMSPRO_DOCUMENT>47
48<!-- 公共头和公共尾 -->49<!--header-->50<!--#include virtual="<CMSPRO_CHANNEL CODE='c104734' FIELD='url'></CMSPRO_CHANNEL>"-->51<!--header end-->52
53<!--footer-->54<!--#include virtual="<CMSPRO_CHANNEL CODE='c104735' FIELD='url'></CMSPRO_CHANNEL>"-->55<!--footer end-->56
57<!-- 自动产生 a 标签 -->58<CMSPRO_CHANNEL CODE="c103022" AUTOLINK="true" LINKALT="true" target="_blank" FIELD="channelName">政府采购</CMSPRO_CHANNEL>59<CMSPRO_DOCUMENT FIELD="title" NUM="22" AUTOLINK="true" LINKALT="true" LINKALTTEXT="">标题</CMSPRO_DOCUMENT>60
61<!-- 循环的时候自动编号 -->62<CMSPRO_ROWNO>当前记录序号</CMSPRO_ROWNO>