HTML小案例
我们这里简单做一个百度百科的界面，涉及我们学到的文本、图片、列表、表格标签，超链接等等知识，也可以换成自己喜欢的做。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>穿越火线</title>
<style>
li {
/* 去掉列表前面的小黑点 */
list-style: none;
}
table{
/* 100%内容撑满整个屏幕 */
width: 100%;
/* 文字居中 */
text-align: center;
}
</style>
</head>
<body>
<h1>穿越火线游戏简介</h1>
<!-- 使用pre进行空行 -->
<pre></pre>
<!-- 设置锚点 -->
<ul>
<li>
<a href="#background">背景设定</a>
</li>
<li>
<a href="#charcter">角色设定</a>
</li>
<li>
<a href="#weapon">武器装备</a>
</li>
<li>
<a href="#evaluation">游戏评测</a>
</li>
</ul>
<pre>
</pre>
<hr />
<!-- 第一段 整体介绍 -->
<p>
<p>
<!--  是空一个格子，使用 顶空格 -->
《穿越火线》（CrossFire，简称CF）是由Smile Gate开发，中国内地由腾讯游戏代理运营的一款第一人称射击游戏。
</p>
<p>
游戏讲述了全球两大佣兵集团Global Risk和Black List间的对决。游戏中有团队竞技模式、战队赛、爆破模式、幽灵模式等多种模式。引进了“缺人补充”形式的即时加入系统。
</p>
<p>
2016年11月，《穿越火线》荣登2016中国泛娱乐指数盛典“中国IP价值榜游戏榜top10”。 [2]2019年3月4号，穿越火线入选2019年世界电子竞技大赛正式比赛项目。 [3]2020年12月6日，情久俱乐部获得CFS2020世界总决赛冠军。 [4]2021年12月5日，AG电子竞技俱乐部获得CFS2021世界总决赛冠军奖杯。
</p>
</div>
<!-- 使用图片，设置宽度和高度 -->
<img src="./cf/简介.jpg" alt="简介" width="400" height="300" />
</p>
<pre>
</pre>
<!-- article表示文档、页面、应用或网站中的独立结构，记住语义 -->
<article>
<!-- 1.背景设定 -->
<!-- section独立章节，记住语义 -->
<section id="background">
<h2>背景设定</h2>
<pre>
</pre>
<h3>潜伏者：</h3>
<p>
没有人知道究竟是谁创建了潜伏者雇佣兵公司，也没有人知道它的总部究竟在哪里。有人说它是为第三世界国家服务，也有人声称它曾为叛军执行“特殊任务”。然而至今为止，无人找到这家公司的负责人，甚至没有任何法律可以约束到它。
</p>
<p>
但至少有一点每个人都清楚：潜伏者从不为强国服务。
</p>
<p>
有人说，潜伏者的成员身上流动的是野性的血——这让他们愿意为弱小国家服务，甚至执行某些“特殊服务”。但对于外人来说，有关他们的一切都仅仅是猜测罢了。
</p>
<pre>
</pre>
<h3>保卫者：</h3>
<p>
早在保卫者佣兵公司成立之初，便开始公开招募从各个著名特种部队中退役的队员。这家佣兵公司以维护和平为名义，服务于强势国家。他们宣称自己拥有最正义的立场，如果战斗违背了他们的信念，即使有再多金钱的诱惑，他们也决不为所动。
<p>
然而，保卫者从不透露他们进行的每一场战斗的具体情况，甚至对内部成员也不愿多说。因此，他们公开宣称的一场场“正义”行动受到了越来越多人的质疑。
</p>
<p>
很快，外界开始指责他们是强势国家和大型财团的工具。甚至更有传言说，因为在保卫者佣兵公司的所作所为违背了自己的理想,许多优秀队员黯然离开了这家公司。
</p>
<img src="./cf/保卫者和潜伏者.jpg" alt="保卫者和潜伏者" width="600" height="300" >
</section>
<pre>
</pre>
<!-- 2.角色设定 -->
<section id="charcter">
<h2>角色设定</h2>
<ul>
<li>
<h3>常规角色</h3>
常规角色会根据阵营的不同，系统自动选择不同的形象特征，所有角色的生命值相同，但是有些角色有特殊属性。
</li>
<pre>
</pre>
<li>
<h3>英雄级角色</h3>
其中付费购买获得的英雄级角色会有经验值、GP点增加，还有特殊攻击方式，如踢腿。在部分模式中还有额外的属性加成，如角色“樱”在挑战模式中按‘E’键，可让角色临时觉醒。发动觉醒时，包括自己在内的所有队友都会获得一段时间的觉醒效果，效果内可连续射击无需装弹。仅适用于本人的觉醒效果：自动恢复血量，使用专属武器攻击时可发射出剑意攻击敌人。
</li>
<pre>
</pre>
<li>
<h3>强化型角色</h3>
<p>
道具卡刷出的强化型角色会有一些特殊属性，如减少闪光时间、防己方手雷、防高空坠落掉血等效果。
</p>
<pre>
</pre>
<img src="./cf/1.jpg" alt="1" width="400" height="200">
<img src="./cf/2.jpg" alt="2" width="400" height="200">
<img src="./cf/3.jpg" alt="3" width="400" height="200">
<br>
<img src="./cf/4.jpg" alt="4" width="400" height="200">
<img src="./cf/5.jpg" alt="5" width="400" height="200">
<img src="./cf/6.jpg" alt="6" width="400" height="200">
</li>
</ul>
</section>
<pre>
</pre>
<pre>
</pre>
<!-- 3.武器装备 -->
<section id="weapon">
<h2>武器装备</h2>
<pre>
</pre>
<p>
游戏中一部分装备拥有特殊属性，这类武器主要都是在普通武器上加强出来的，装备该武器后在创建房间后该房间会有特殊标记，而且得到一些额外的奖励加成、子弹加成等。每把武器在介绍页面会有详细的属性介绍。
</p>
<h4 align="center">常规武器</h4>
<!-- 制作表格 -->
<table border="1" cellspacing="0" >
<thead>
<tr>
<td>名称</td>
<td>描述</td>
</tr>
</thead>
<tbody>
<tr>
<td>步枪</td>
<td>有M4A1、AK、QBZ95等枪械，不同的枪械所产生的攻击力和穿透物体的威力不同。</td>
</tr>
<tr>
<td>霰弹枪</td>
<td>在近距离可以一枪致命，能同时打出多发子弹，在近距离时威力和狙击枪一样大。</td>
</tr>
<tr>
<td>冲锋枪</td>
<td>很高的射速以及换弹速度，部分枪攻击敌人时会产生影响敌人移动的效果。</td>
</tr>
<tr>
<td>狙击枪</td>
<td>有AWM、巴雷特、轻狙等，通过右键可在高倍率瞄镜和机械准星间自由切换，巴雷特狙击枪在游戏中攻击是最大的。</td>
</tr>
<tr>
<td>机枪</td>
<td>只能使用扫射模式，部分枪还有特色属性，例如M240B-苍雷在挑战模式中，一段时间后能量条充满，右键可发出强大的榴弹。</td>
</tr>
<tr>
<td>手枪</td>
<td>手枪有单发也有连发，还有双枪的手枪。</td>
</tr>
<tr>
<td>投掷武器</td>
<td>投掷武器分为手雷，烟雾弹，闪光弹，手雷可以对一定范围内造成较高的伤害，闪光弹无实际杀伤力，利用高频率声音和闪光让敌人暂时失去听觉和视觉，烟雾弹扔到地面后会产生烟雾，阻碍敌人的视野。</td>
<tr>
<td>近战武器</td>
<td>大多数时候指冷兵器，包括棍棒、撬棍、铁锤、刀等，也有现代物品，如手套，扳手等，攻击方式分为轻击和重击。 </td>
</tr>
</tbody>
</table>
</section>
<pre>
</pre>
<!-- 4.游戏评测 -->
<section id="evaluation">
<h2>游戏评测</h2>
<p>
《穿越火线》追求的游戏乐趣不仅仅是开枪的爽快感，而且更加核心的乐趣是来自相互合作及默契带来的战略意义。人物快速移动和瞄准、开枪的打击感洋溢着快节奏FPS游戏的趣味。特别是通过确认玩家的出生点和交战地带后计算最佳路线来不断挖掘地图，并从中得到乐趣。（网易游戏评）
</p>
<p>
《穿越火线》中每个人物都是一个传说，每个传说都有一个故事，在战火纷飞的战场之上，除了精良的武器装备，还有炫酷的角色也是必不可少的。让玩家在战场上特色鲜明，人物的一些隐藏属性，在实际作战当中也是大有用处。（腾讯游戏评）
</p>
<p>
从2008年开始穿越火线长达6年的时间没有做出革命性的变革，在大众玩家眼里，CF的游戏品质就是多年一成不变的，到了2014年12月，在2.0版本中，游戏对画质、用户界面、武器、角色、玩法各个方面都有了全面的提升，虽然游戏画面引擎比较老旧，但老瓶也能装出新酒。（游久网评）
</p>
</section>
</article>
<pre>
</pre>
</body>
</html>
我们画图进行分析：
结语
在这一节，我们使用所学到的知识去完成我们的demo，样式可能不太好看，但没关系，我们接下来做完总结后，就开始学CSS，很快就能让我们的网页更好看了。
