练习用代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>蒙古四大汗国重要事迹</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header,footer {bakcground-color: #f0#f0#f0;
padding : 10px; text-align: center;}
nav {background-color: #e0e0e0;
padding : 5px; margin : 10px 0;}
article { border : 1px solid #ddd; padding : 15px;
margin : 10px 0;}
h2 {color : #8B4513;}
</style>
</head>
<body>
<!-- 页面头部 -->
<header>
<h1><strong>蒙古四大汗国</strong>重要事迹</h1>
<p><em>探索蒙古帝国的辉煌历史</em></p>
</header>
<!-- 导航栏 -->
<nav>
<a href="#jochi-ulus">金帐汗国</a> |
<a href="#chagatai">察合台汗国</a> |
<a href="#ilkhanate">伊尔汗国</a>
</nav>
<!-- 金帐汗国部分 -->
<article id="jochi-ulus">
<h2><u>金帐汗国</u>重要事迹</h2>
<p>金帐汗国是蒙古帝国的重要历史时期,它的历史可以追溯到蒙古帝国的鼎盛时期。</p>
<!--有序列表-->
<ol>
<li><b>建立过程:</b>:
<ul>
<li>1236-1242年,拔都西征</li>
<li>1242-1245年,金帐汗国建立</li>
<li>定都萨莱城(拔都萨莱和别尔哥萨莱)</li>
</ul>
</li>
</ol>
<!--定义列表-->
<dl>
<dt><i>重要影响</i></dt>
<dd>促进了欧亚草原东西方的贸易往来。</dd>
<dd>加速了俄罗斯的统一进程。</dd>
</dl>
<p>了解更多:<a href = "https://zh.wikipedia.org/wiki/金帐汗国"
target = "_blank" > 维基百科-金帐汗国</a></p>
</article>
<!-- 察合台汗国部分 -->
<article id="chagatai">
<h2><u>察合台汗国</u>重要事迹</h2>
<!--嵌套列表-->
<ul>
<li><mark>中亚统治</mark>:
<ol>
<li>1227年察合台受封中亚领地</li>
<li>统治中心在阿力麻里</li>
</ol>
</li>
<li><mark>伊斯兰化</mark>:
<ol>
<li>14世纪开始伊斯兰化进程</li>
<li>秃忽鲁帖木儿率先皈依伊斯兰教</li>
</ol>
</li>
</ul>
<p>参考阅读:<a href = "#golden-horde" > 比较金帐汗国</a></p>
</article>
<!-- 伊尔汗国部分 -->
<article id="ilkhanate">
<h2><u>伊尔汗国</u>重要事迹</h2>
<p>伊尔汗国是蒙古帝国的重要历史时期,它的历史可以追溯到蒙古帝国的鼎盛时期。</p>
<!--复杂嵌套列表-->
<ol type = "I">
<li><del>初期政策</del> → <ins>伊斯兰化后的政策</ins>
<ul>
<li>旭烈兀西征:
<dl>
<dt>1258年</dt>
<dd>攻陷巴格达,灭亡阿拔斯王朝</dd>
</dl>
</li>
</ul>
</li>
<li>文化融合
<ul>
<li>拉施特编纂《史集》</li>
<li>合赞汗改革:
<ol>
<li>1295年改信伊斯兰教</li>
<li>推行波斯化税制改革</li>
</ol>
</li>
</ul>
</li>
</ol>
<p><small>注:伊尔汗国是蒙古帝国在西亚的重要分支。</small></p>
</article>
<!-- 页面底部 -->
<footer>
<p><sup>@</sup>2023 <sub>蒙古历史研究</sub> | <a href = "#" > 返回顶部</a></p>
</footer>
</body>
</html>