Article 正文
使用说明
ax-article表示正文内容，在标签内的图片、文字、视频、音频、列表等样式都已经做了预设。已经优化的标签如下：
img最大宽度是100%video最大宽度是100%audio最大宽度是100%blockquote引用h1一级标题h2二级标题ol和li有序列表ul和li无序列表a和spandisplay属性为inline
伟大的中国
一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。
一、简介
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。
二、词义
中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。
“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。
三、历史
- 古代史
- 近代史
- 现代史
四、地理
- 中国地势西高东低，山地、高原和丘陵约占陆地面积的67%，盆地和平原约占陆地面积的33%。
- 几百万年前，青藏高原隆起，地球历史上此一重大地壳运动形成了中国的地貌。
<div class="ax-article">
<h2>标题</h2>
<blockquote>引用</blockquote>
<p>内容</p>
<video></video>
<audio></audio>
<ol>
<li>列表</li>
<li>列表</li>
</ol>
<ul>
<li>列表</li>
<li>列表</li>
</ul>
</div>
出处
一般介于标题和正文中间，包含作者、发布时间、信息来源等。
<div class="ax-from">
<div class="ax-left">
2020年04月24日 23:16:37<br>来自：纽约时报
</div>
<div class="ax-right"><br><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
</div>
<div class="ax-break"></div>
<div class="ax-break-line"></div>
<div class="ax-break"></div>
<div class="ax-from">
<a href="###" class="ax-avatar ax-lg ax-round" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a>
<div class="ax-left">
2020年04月24日 23:16:37<br>来自：纽约时报
</div>
<div class="ax-right"><br><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
</div>
<div class="ax-break"></div>
<div class="ax-break-line"></div>
<div class="ax-break"></div>
<div class="ax-from">
<div class="ax-left">
编辑：庄自强/2天前
</div>
<div class="ax-right"><a href="###" class=""><i class="ax-iconfont ax-icon-edit"></i> 纠错</a></div>
</div>
<div class="ax-break"></div>
<div class="ax-break-line"></div>
<div class="ax-break"></div>
<div class="ax-from">
<a href="###" class="ax-avatar ax-xs ax-round" style="background-image: url(https://src.axui.cn/v2.0/public/images/head02.jpg)"></a>
<div class="ax-left">
编辑：庄自强/2天前
</div>
<div class="ax-right"><a href="###" class=""><i class="ax-iconfont ax-icon-edit"></i> 纠错</a></div>
</div>
<div class="ax-break"></div>
<div class="ax-break-line"></div>
<div class="ax-break"></div>
<div class="ax-from">
<a href="###" class="ax-avatar ax-xs ax-round" style="background-image: url(https://src.axui.cn/v2.0/public/images/head03.jpg)"></a>
<div class="ax-left">
编辑：庄自强/2天前
</div>
<div class="ax-right"><a href="###" class="ax-btn ax-primary ax-sm ax-round"><i class="ax-iconfont ax-icon-plus"></i> 关注</a></div>
</div>
作者
一般放在正文底部，包含作者、职位、评论数等。本框架做了几个简单的风格供参考使用。
<div class="ax-author">
<div class="ax-left">
<div class="ax-title">庄自强</div>
<div class="ax-des">新华日报社高级编辑</div>
</div>
<div class="ax-right"><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
</div>
<div class="ax-break"></div>
<div class="ax-break-line"></div>
<div class="ax-break"></div>
<div class="ax-author">
<a href="###" class="ax-avatar ax-md ax-round" style="background-image: url(https://src.axui.cn/v2.0/public/images/head01.jpg)"></a>
<div class="ax-left">
<div class="ax-title">庄自强</div>
<div class="ax-des">新华日报社高级编辑</div>
</div>
<div class="ax-right"><i class="ax-color-primary">258</i>人查看<span class="ax-gutter-lg"></span><i class="ax-color-primary">195</i>条评论</div>
</div>
<div class="ax-break"></div>
<div class="ax-break-line"></div>
<div class="ax-break"></div>
<div class="ax-author">
<a href="###" class="ax-avatar ax-md ax-round" style="background-image: url(https://src.axui.cn/v2.0/public/images/head02.jpg)"></a>
<div class="ax-left">
<div class="ax-title">庄自强 <span class="ax-badge ax-badge-success ax-badge-border">推荐</span></div>
<div class="ax-des">新华日报社高级编辑</div>
</div>
<div class="ax-right"><a href="###" class="ax-btn ax-primary ax-round"><i class="ax-iconfont ax-icon-plus"></i> 关注</a></div>
</div>
点赞
一般放在正文底部，有默认和已点赞两种状态。ax-good表示点赞，ax-done表示已经赞过了。
<div class="ax-good">
<a href="###"><i class="ax-iconfont ax-icon-good-f"></i><span class="num">0</span><span class="ax-text"></span></a>
</div>
<div class="ax-good ax-done">
<a href="###"><i class="ax-iconfont ax-icon-good-f"></i><span class="ax-num">16</span><span class="ax-text">您已经点赞了！</span></a>
</div>
借助框架的ax-btn类和ax-line类制作点赞按钮，用户可自由发挥。
<a href="###" class="ax-btn ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-primary ax-round"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-round ax-long"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round ax-long"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<div class="ax-break"></div>
<a href="###" class="ax-btn ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-primary ax-round ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-round ax-longer ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round ax-longer ax-lg"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<div class="ax-break"></div>
<a href="###" class="ax-btn ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-line ax-primary ax-round ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-round ax-long ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
<a href="###" class="ax-btn ax-primary ax-round ax-long ax-sm"><i class="ax-iconfont ax-icon-good-f"></i> 125</a>
分享按钮
<!--ax-btn-->
<div class="ax-share">
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-line-->
<div class="ax-share">
<a href="###" class="ax-btn ax-line ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-line ax-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-line ax-danger ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-line ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-line ax-secondary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-line ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-btn加颜色-->
<div class="ax-share">
<a href="###" class="ax-btn ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-danger ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-secondary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-btn大-->
<div class="ax-share">
<a href="###" class="ax-btn ax-success ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-ad ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-danger ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-secondary ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-info ax-icon ax-lg ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-btn小-->
<div class="ax-share">
<a href="###" class="ax-btn ax-success ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-ad ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-danger ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-primary ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-secondary ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-info ax-icon ax-sm ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-btn ax-text-->
<div class="ax-share">
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-text ax-icon"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--ax-btn ax-text颜色-->
<div class="ax-share">
<a href="###" class="ax-btn ax-text ax-success ax-icon"><i class="ax-iconfont ax-icon-wechat-f"></i></a>
<a href="###" class="ax-btn ax-text ax-ad ax-icon"><i class="ax-iconfont ax-icon-qq-f"></i></a>
<a href="###" class="ax-btn ax-text ax-danger ax-icon"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
<a href="###" class="ax-btn ax-text ax-primary ax-icon"><i class="ax-iconfont ax-icon-renren-f"></i></a>
<a href="###" class="ax-btn ax-text ax-secondary ax-icon"><i class="ax-iconfont ax-icon-facebook-f"></i></a>
<a href="###" class="ax-btn ax-text ax-info ax-icon"><i class="ax-iconfont ax-icon-twitter-f"></i></a>
</div>
<!--layout-->
<div class="ax-row ax-share">
<div class="ax-col"><a href="###" class="ax-btn ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a></div>
<div class="ax-col"><a href="###" class="ax-btn ax-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-danger ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a></div>
<div class="ax-col"><a href="###" class="ax-btn ax-secondary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a></div>
</div>
<!--layout定宽-->
<div class="ax-row ax-share" style="width: 600px;">
<div class="ax-col"><a href="###" class="ax-btn ax-success ax-icon ax-round"><i class="ax-iconfont ax-icon-wechat-f"></i></a></div>
<div class="ax-col"><a href="###" class="ax-btn ax-ad ax-icon ax-round"><i class="ax-iconfont ax-icon-qq-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-danger ax-icon ax-round"><i class="ax-iconfont ax-icon-weibo-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-primary ax-icon ax-round"><i class="ax-iconfont ax-icon-renren-f"></i></a></div>
<div class="ax-col"><a href="###" class="ax-btn ax-secondary ax-icon ax-round"><i class="ax-iconfont ax-icon-facebook-f"></i></a></div>
<div class="ax-col"> <a href="###" class="ax-btn ax-info ax-icon ax-round"><i class="ax-iconfont ax-icon-twitter-f"></i></a></div>
</div>
分享插件
百度分享插件已经不再维护也不再提供使用，本团队在浏览github中意外发现国人自主创作的分享插件share.js，觉得思路挺好，想到中国的网站喜欢使用分享平台功能，于是借鉴了精髓创作了axShare。
使用具有axShare属性的div作为父层，内部放置具有share="*"属性的a作为子元素，即可实现分享功能。
<div axShare>
<a href="###" class="ax-btn ax-danger ax-icon ax-round" target="_blank" share="weibo"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
</div>
分享按钮只要是a标签即可，不管是文字还是图标均可。
<div axShare>
<a href="###" class="ax-btn ax-danger ax-icon ax-round" target="_blank" share="weibo"><i class="ax-iconfont ax-icon-weibo-f"></i></a>
</div>
分享平台
目前支持以下平台分享：
- qzone
- tumblr
如果需要使用微信二维码分享功能，请在页面中ax.js前面加载qrcode.min.js
-
<div class="ax-share ax-align-left-center"> 分享到： <div axShare data-url="https://www.axui.cn"> <a href="###" class="ax-btn ax-primary ax-icon ax-round" target="_blank" share="qq"><i class="ax-iconfont ax-icon-qq-f"></i></a> <a href="###" class="ax-btn ax-ad ax-icon ax-round" target="_blank" share="qzone"><i class="ax-iconfont ax-icon-qzone-f"></i></a> <a href="###" class="ax-btn ax-danger ax-icon ax-round" target="_blank" share="weibo"><i class="ax-iconfont ax-icon-weibo-f"></i></a> <a href="###" class="ax-btn ax-success ax-icon ax-round" share="wechat"><i class="ax-iconfont ax-icon-wechat-f"></i></a> <a href="###" class="ax-btn ax-secondary ax-icon ax-round" target="_blank" share="facebook"><i class="ax-iconfont ax-icon-facebook-f"></i></a> <a href="###" class="ax-btn ax-info ax-icon ax-round" target="_blank" share="twitter"><i class="ax-iconfont ax-icon-twitter-f"></i></a> <a href="###" class="ax-btn ax-primary ax-icon ax-round" target="_blank" share="google"><i class="ax-iconfont ax-icon-google-f"></i></a> <a href="###" class="ax-btn ax-danger ax-icon ax-round" target="_blank" share="pinterest"><i class="ax-iconfont ax-icon-pinterest-f"></i></a> <a href="###" class="ax-btn ax-secondary ax-icon ax-round" target="_blank" share="tumblr"><i class="ax-iconfont ax-icon-tumblr-f"></i></a> </div> </div> -
<script src="https://src.axui.cn/v2.0/dist/plugins/qrcode/v1.0.0-ax/qrcode.min.js"></script>
分享前窗口
点击分享按钮直接调走会显得突兀，有时候用户仅仅是好奇点一下而已并不是真正想跳转页面，所以在跳转前使用对话框询问以便于撤销分享是蛮有用的。
如果要启用分享前对话框询问，值需要再分享按钮上加上confirm属性即可。
<div axShare>
<a href="###" class="ax-btn ax-danger ax-icon ax-round" target="_blank" share="weibo" confirm><i class="ax-iconfont ax-icon-weibo-f"></i></a>
</div>
页面跳转方式
用户可对分享按钮使用target="*"属性实现新页面跳转或当页跳转。
也可以使用newPage属性修改跳转方式，默认为true即新页面跳转分享，可设为false当页跳转分享。
<div axShare='newPage:false'>
<a href="###" share="weibo" class="ax-color-danger" confirm>点击分享到微博</a>
<a href="###" share="qq" class="ax-color-primary">点击分享到QQ</a>
</div>
回调函数
本插件支持onShare回调函数，在点击分享按钮后触发。支持参数name，也就是平台名称。
-
<div id="callback"> <a href="###" share="weibo" target="_blank" class="ax-color-danger">点击分享到微博</a> </div> -
new axShare('#callback',{ onShare:function(name){ alert(name+'已经分享了！'); } });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axShare({
source: '',//类似分享页面的标题
title: '',//分享页面的标题
des: '',//分享页面的简介
url: window.location.href,//分享的页面，默认是当前页面的网址，比如：http://www.axui.cn/examples/index.html
image: '',//分享的图片，数量一张
key: '',//微博的key，仅微博分享使用
origin: window.location.origin,//根域名，默认是当前页面的根域名,比如：http://www.axui.cn
qrTitle: '在微信里点击“发现”，再点击“扫一扫，”
便可将本文分享至朋友圈。
',//微信分享中的文字
qrSize: 180,//QR系统中尺寸单位是px
newPage: true,//点击后是否在新页面打开分享页面，默认打开新页面
dialogText: '确定分享本页面？',//跳转提示窗口的文字
onShare: '',//回调函数
});
});
本插件支持data-*属性方式使用参数。如果在插件元素上通过data-*属性方式使用参数，参数层级使用短横区分，比如要设置student：{name:'',school:''}中的name参数，那么在插件元素的data属性中应该这样书写：data-student-name="Lily"。