Html 书写规范

页面标签组合

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

                                <!DOCTYPE html>
                                <html>
                                <head></head>
                                <body>
                                    <!--页面头部区域-->
                                    <header></header>
                                    <!--页面主导航区域-->
                                    <nav></nav>
                                    <!--页面主内容区域-->
                                    <main>
                                        <!--页面菜单区域-->
                                        <menu></menu>
                                        <!--子板块区域-->
                                        <section>
                                            <!--标题区域-->
                                            <h1></h1>
                                            <!--正文区域-->
                                            <article></article>
                                        </section>
                                        <section>
                                            <!--标题区域-->
                                            <h1></h1>
                                            <!--正文区域-->
                                            <article></article>
                                        </section>
                                        <!--侧边栏区域-->
                                        <aside></aside>
                                    </main>
                                    <!--页面底部版权区域-->
                                    <footer></footer>
                                </body>
                                </html>

文章标签组合

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

                            <!--主标题-->
                            <h1></h1>
                            <!--作者和地址-->
                            <address></address>
                            <!--发布时间-->
                            <time></time>
                            <!--正文-->
                            <article>
                                <!--引用-->
                                <blockquote></blockquote>
                                <!--子标题-->
                                <h2></h2>
                                <h3></h3>
                                <!--音频-->
                                <audio></audio>
                                <!--视频-->
                                <video></video>
                                <!--图片-->
                                <img></img>
                                <!--有序列表-->
                                <ol></ol>
                                <!--无序列表-->
                                <ul></ul>
                                <!--代码-->
                                <pre></pre>
                                <!--文本-->
                                <p></p>
                            </article>

示例可点击这里查看。

列表标签组合

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

                            <!--有序列表-->
                            <ol>
                                <!--列表项-->
                                <li></li>
                                <li></li>
                            </ol>
                            <!--无序列表-->
                            <ul>
                                <!--列表项-->
                                <li></li>
                                <li></li>
                            </ul>
                            <!--键值对列表-->
                            <dl>
                                <!--列表项键-->
                                <dt></dt>
                                <!--列表项值-->
                                <dd></dd>
                            </dl>

北京
上海
深圳

北京
上海
深圳

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

                                    <article>
                                        <ol>
                                            <li>北京</li>
                                            <li>上海</li>
                                            <li>深圳</li>
                                        </ol>
                                        <ul>
                                            <li>北京</li>
                                            <li>上海</li>
                                            <li>深圳</li>
                                        </ul>
                                        <dl>
                                            <dt>北京</dt>
                                            <dd>2184.3万人</dd>
                                            <dt>上海</dt>
                                            <dd>2475.9万人</dd>
                                            <dt>北京</dt>
                                            <dd>1766.2万人</dd>
                                        </dl>
                                    </article>

引用

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

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

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

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

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

图形块

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

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

                            <figure>
                                <img src="https://src.axui.cn/v2.0/public/images/china01.jpg" />
                                <figcaption>伟大的中国</figcaption>
                            </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：关键字节点

                            <div>
                                <i rank>1</i>
                                <img src="" avatar/>
                                <h1 label>北京</h1>
                                <div brief>中国首都</div>
                                <div flag>热</div>
                            </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节点是不可见的

                            <ul>
                                <li>北京</li>
                                <li>上海</li>
                                <li>重庆</li>
                            </ul>
                            <hr />
                            <ol>
                                <li>北京</li>
                                <li>上海</li>
                                <li>重庆</li>
                            </ol>
                            <hr />
                            <datalist>
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                            </datalist>
                            datalist节点是不可见的
                            <select>
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="重庆">重庆</option>
                            </select>

列表模板

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

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

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

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

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

                            <template id="tpl">
                                <li value="<# this.value #>"><# this.label #></li>
                            </template>
                            <script type="text/template" id="tpl">
                                <li value="<# this.value #>"><# this.label #></li>
                            </script>

板块结构

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

                            <div class="panel">
                                <div class="panel-wrapper">
                                    <div class="panel-header"></div>
                                    <div class="panel-body">
                                        <h1>页面标题</h1>
                                        <div class="panel-content">
                                            <section>
                                                <h3>板块标题</h3>
                                                <div>板块内容</div>
                                            </section>
                                            <section>
                                                <h3>板块标题</h3>
                                                <div>板块内容</div>
                                            </section>
                                        </div>
                                    </div>
                                    <div class="panel-footer"></div>
                                </div>
                            </div>

图片

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

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

加载资源

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

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

                                <img src="" data-src="">
                                <video src="" data-src=""></video>
                                <audio src="" data-src=""></audio>
                                <iframe src="" data-src=""></iframe>

链接

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

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

网站图标

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

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

清除浮动

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

<div style="float:left"></div>
<div style="float:right"></div>
<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

                        <div class="ax-break-xxs"></div>
                        <div class="ax-break-xs"></div>
                        <div class="ax-break-sm"></div>
                        <div class="ax-break-md"></div>
                        <div class="ax-break-lg"></div>
                        <div class="ax-break-xl"></div>
                        <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

                        <span class="ax-gutter-xxs"></span>
                        <span class="ax-gutter-xs"></span>
                        <span class="ax-gutter-sm"></span>
                        <span class="ax-gutterk-md"></span>
                        <span class="ax-gutter-lg"></span>
                        <span class="ax-gutter-xl"></span>
                        <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	™
·	间隔符号	·
"	双引号	"
&	&符	&
<	左尖括号（小于号）	<
>	右尖括号（大于号）	>
	半角空格
×	乘号	×
÷	除号	÷