Html 书写规范

页面标签组合

页面布局应该遵守HTML5的语义化标签，一个普通的页面HTML结构应该如下：

01<!DOCTYPE html>
02<html>
03<head></head>
04<body>
05    <!--页面头部区域-->
06    <header></header>
07    <!--页面主导航区域-->
08    <nav></nav>
09    <!--页面主内容区域-->
10    <main>
11        <!--页面菜单区域-->
12        <menu></menu>
13        <!--子板块区域-->
14        <section>
15            <!--标题区域-->
16            <h1></h1>
17            <!--正文区域-->
18            <article></article>
19        </section>
20        <section>
21            <!--标题区域-->
22            <h1></h1>
23            <!--正文区域-->
24            <article></article>
25        </section>
26        <!--侧边栏区域-->
27        <aside></aside>
28    </main>
29    <!--页面底部版权区域-->
30    <footer></footer>
31</body>
32</html>

文章标签组合

一篇文章会有主标题、副标题、作者、发布时间、正文等要素，语义化HTML结构应该如下：

01<!--主标题-->
02<h1></h1>
03<!--作者和地址-->
04<address></address>
05<!--发布时间-->
06<time></time>
07<!--正文-->
08<article>
09    <!--引用-->
10    <blockquote></blockquote>
11    <!--子标题-->
12    <h2></h2>
13    <h3></h3>
14    <!--音频-->
15    <audio></audio>
16    <!--视频-->
17    <video></video>
18    <!--图片-->
19    <img></img>
20    <!--有序列表-->
21    <ol></ol>
22    <!--无序列表-->
23    <ul></ul>
24    <!--代码-->
25    <pre></pre>
26    <!--文本-->
27    <p></p>
28</article>

示例可点击这里查看。

列表标签组合

通常使用三种列表ol+li、ul+li和dl+dt+dd，用途各不相同，详细如下：

01<!--有序列表-->
02<ol>
03    <!--列表项-->
04    <li></li>
05    <li></li>
06</ol>
07<!--无序列表-->
08<ul>
09    <!--列表项-->
10    <li></li>
11    <li></li>
12</ul>
13<!--键值对列表-->
14<dl>
15    <!--列表项键-->
16    <dt></dt>
17    <!--列表项值-->
18    <dd></dd>
19</dl>

北京
上海
深圳

北京
上海
深圳

北京: 2184.3万人
上海: 2475.9万人
北京: 1766.2万人

01<article>
02    <ol>
03        <li>北京</li>
04        <li>上海</li>
05        <li>深圳</li>
06    </ol>
07    <ul>
08        <li>北京</li>
09        <li>上海</li>
10        <li>深圳</li>
11    </ul>
12    <dl>
13        <dt>北京</dt>
14        <dd>2184.3万人</dd>
15        <dt>上海</dt>
16        <dd>2475.9万人</dd>
17        <dt>北京</dt>
18        <dd>1766.2万人</dd>
19    </dl>
20</article>

引用

有三种引用标签，分别是blockquote大段引用，q小段引用和cite标题引用，他们的意思和用途不尽相同。

blockquote：表现为浅蓝色底的文字块
q：表现为左右有双引号或单引号
cite：表现为底部有波浪线

一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家。

1<blockquote>
2    一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。
3</blockquote>
4<p>
5    中国是<cite>世界四大文明古国</cite>之一，有着悠久的历史，距今约<q>5000年</q>前，以<q>中原地区</q>为中心开始出现聚落组织进而形成国家。  
6</p>

图形块

应当使用figure、img和figcaption标签来构建图形块。

figure：图形块容器
img：引入一个或多个图片
figcaption：存放图形文字说明，可多行

1<figure>
2    <img src="https://src.axui.cn/v2.0/public/images/china01.jpg" />
3    <figcaption>伟大的中国</figcaption>
4</figure>

信息状态

列表中每一项均可能绑定不同的状态，本框架建议统一使用以下属性表示信息状态。

selected：项目已经被选中
disabled：项目已经被禁用，不可进行任何操作，包括选中和编辑
enabled：项目已经被启用，与disabled相反
readonly：项目只读不可编辑，但是可被选中
active：项目已经被激活，是焦点状态
checked：项目已经已经被勾选（复选或单选）
expanded：父项目已经展开
shown：项目已经显示可见
hidden：项目已经隐藏不可见

内容属性

为了简明而要的表示节点，可用属性标记节点，注意这不是HTML5标准属性；以属性标记节点之后，可通过document.querySeletor('[label]')方法获取节点。三大原则如下：

原则一：不推荐使用HTML5标签的自身属性，例如value、type、name、title等，以免获取数据错误
原则二：节点组中的节点属性互斥，即同一个属性节点只存在一个
原则三：对有多层子元素的节点不以属性标记，避免混淆

以下为信息中常用的属性：

legend：图标节点
tip：提示信息节点
arrow：指示箭头节点
caption：标题节点
label：名节点，与caption可同意义
sub：副名/副标题节点
brief：简介节点
avatar：头像节点
image：图片节点，可如avatar同意义
rank：排名节点
time：时间节点
editor：作者节点
source：出处节点
count：计数节点，比如：360次点击
state：状态节点，比如：一周内更新
flag：标记节点，比如：热、荐、新
remark：备注节点
clear：清除按钮节点
close：关闭按钮节点
update：更新按钮节点
add：新增按钮节点
edit：编辑按钮节点
remove：移出按钮节点
review：评论按钮节点
tools：工具箱节点，子元素可能有：新增，编辑，删除等操作
keywords：关键字节点

1<div>
2    <i rank>1</i>
3    <img src="" avatar/>
4    <h1 label>北京</h1>
5    <div brief>中国首都</div>
6    <div flag>热</div>
7</div>

列表信息

如果不从数组变量、json文件或sql文件获取信息，那么可从当页物理节点获取列表信息，推荐以以下四种HTML结构获取列表信息。

ul+li：可获得多维树信息
ol+li：可获得多维树信息，与ul+li相同用法
datalist：可获得一维分组信息，每一项的value值应该必填
select：可获得一维分组信息，每一项的value值应该必填

datalist元素是不可见的，仅用作数据源使用，选项HTML结构可简化为<option value="北京"/>；datalist和select均可通过optgroup元素对选项进行分组。

ul+li和ol+li数据可通过axUlToArr函数获得；select和datalist数据可通过axSelectToArr函数获得，两个函数详细用法请点击这里查看。

在使用以上两个函数情况下，可使用常用属性传值：'sub','tip', 'legend', 'image', 'avatar', 'brief','rank','time','editor','source','count','keyword','state','flag','type','visit','review','selected', 'disabled','readonly', 'active', 'checked', 'expanded'等，例如<option value="北京" rank="1" tip="中国首都" selected/>

北京
上海
重庆

北京
上海
重庆

datalist节点是不可见的

01<ul>
02    <li>北京</li>
03    <li>上海</li>
04    <li>重庆</li>
05</ul>
06<hr />
07<ol>
08    <li>北京</li>
09    <li>上海</li>
10    <li>重庆</li>
11</ol>
12<hr />
13<datalist>
14    <option value="北京">北京</option>
15    <option value="上海">上海</option>
16    <option value="重庆">重庆</option>
17</datalist>
18datalist节点是不可见的
19<select>
20    <option value="北京">北京</option>
21    <option value="上海">上海</option>
22    <option value="重庆">重庆</option>
23</select>

列表模板

列表的每一项均有固定的数据格式和HTML结构，如果需要动态创建列表，有两个方法从模板渲染数据。

template节点：将模板信息放在template节点内
type="text/template"的js片段：将模板信息放在template节点内

这两个方法均不会在页面显示内容，所以不需要对节点使用style="display:none"样式。

如果使用axTplEngine函数渲染数据，那么模板内的变量部分请使用'<#'和'#>'包裹，变量使用this.*方式引用。

axTplEngine函数详细用法请点击这里查看。

1<template id="tpl">
2    <li value="<# this.value #>"><# this.label #></li>
3</template>
4<script type="text/template" id="tpl">
5    <li value="<# this.value #>"><# this.label #></li>
6</script>

板块结构

网页有很多排版形式，对板块中的子元素使用className应遵循一定规律，父层推荐以*-wrapper，*-header，*-body，*-content和*-footer来命名，子元素则尽可能使用HTML5的语义标签。

01<div class="panel">
02    <div class="panel-wrapper">
03        <div class="panel-header"></div>
04        <div class="panel-body">
05            <h1>页面标题</h1>
06            <div class="panel-content">
07                <section>
08                    <h3>板块标题</h3>
09                    <div>板块内容</div>
10                </section>
11                <section>
12                    <h3>板块标题</h3>
13                    <div>板块内容</div>
14                </section>
15            </div>
16        </div>
17        <div class="panel-footer"></div>
18    </div>
19</div>

图片

给img标签添加src属性之外，尽量添加alt属性，如此当图片加载慢或者不能加载的时候可先知道图片内容。

`1`	`<img` `src="图片路径"` `alt="图片描述">`

加载资源

对于多媒体标签比如img、audio、video、iframe等，使用data-src表示预加载资源；原src属性可能是一张占位图，data-src属性值才是真实的资源地址。

可配合axLazyload插件使用。关于插件详细用法请点击这里。

1<img src="" data-src="">
2<video src="" data-src=""></video>
3<audio src="" data-src=""></audio>
4<iframe src="" data-src=""></iframe>

链接

给a标签添加href属性之外，尽量添加title属性，如此当鼠标移至链接上是可显示链接内容。如果是空链接可以使用href="###"

`1`	`<a` `href="链接路径"` `title="链接描述">链接文字</a>`

网站图标

如果设定了网站的小图标，用浏览器打开网站的时候会在标签处显示该图标。网站图标格式是.ico，可以使用在线工具创建，建议使用32×32大小。标准命名是favicon.ico，直接放入网站根目录即可；如果想个性设置图标的名称和路径，则在头部创建link标记。如源码所示。

`1`	`<link` `rel="shortcut icon"` `href="images/myicon.ico"` `type="image/x-icon"/>`

清除浮动

如果区块使用了浮动样式，希望之后的元素不会随之变化，可插入ax-clear取消浮动。举例说明如下：

1<div style="float:left"></div>
2<div style="float:right"></div>
3<div class="ax-clear"></div>

垂直间隔

本框架定义了5个垂直间隔，分别是4px的ax-break-xxs，8px的ax-break-xs，10px的ax-break-sm，14px的ax-break-md，18px的ax-break-lg，22px的ax-break-xl，28px的ax-break-xxl

1<div class="ax-break-xxs"></div>
2<div class="ax-break-xs"></div>
3<div class="ax-break-sm"></div>
4<div class="ax-break-md"></div>
5<div class="ax-break-lg"></div>
6<div class="ax-break-xl"></div>
7<div class="ax-break-xxl"></div>

水平间隔

本框架定义了5个水平间隔，分别是4px的ax-gutter-xxs，8px的ax-gutter-xs，12px的ax-gutter-sm，14px的ax-gutter-md，16px的ax-gutter-lg，22px的ax-gutter-xl，28px的ax-gutter-xxl

1<span class="ax-gutter-xxs"></span>
2<span class="ax-gutter-xs"></span>
3<span class="ax-gutter-sm"></span>
4<span class="ax-gutterk-md"></span>
5<span class="ax-gutter-lg"></span>
6<span class="ax-gutter-xl"></span>
7<span class="ax-gutter-xxl"></span>

专属标签

为了简化html代码，本框架的组件频繁的使用三个单字符标签，即i（原意是定义斜体）、s（原意是定义删除线）和u（原意是定义下划线），这三个标签均被去掉默认样式，以用于存放文本和图标内容。在AXUI中他们表义如下：

i：代表information（信息）、intel（情报）等，该标签在AXUI中用得最为频繁
s：代表shell（外壳）、swag（包裹或行囊）、surround（围绕或包围）等
u：代表ui（用户界面）、unit（单位）等

如果需要使用语义标签定义文字风格，可用em标签定义斜体，del标签定义删除线，ins标签定义下划线，这三个标签的语义更强烈。使用普通标签+style也可定义文字风格。

常用特殊字符

字符	名称	实体名
yen	人民币符号：元	¥
(c)	版权	©
(R)	注册商标	®
TM	商标TM	™
·	间隔符号	·
"	双引号	"
&	&符	&
<	左尖括号（小于号）	<
>	右尖括号（大于号）	>
	半角空格
×	乘号	×
÷	除号	÷