在上一篇博客中，我们已经一起学习了HTML这门标记语言的基本语法和使用，是不是跃跃欲试想要小露一手呢？这篇博客以例子为主导，每个例子侧重点不同，循循善诱，实践了大多数的标签，大量涉及到标签的嵌套、HTML分块等用法，是新手小白不得不尝试的实践练习。
一、复杂列表的实现
目标效果
复杂列表
分析
HTML中列表一共有三种：有序列表、无序列表和定义列表。有序列表是一列使用数字进行标记的项目；无序列表是一组使用黑点状进行标记的项目；定义列表语义上表示项目及其注释的组合。分析目标图可以得出以下想法：
- 主要涉及到的标签：有序列表
<ol>、无序列表<ul>、列表项<li> - 涉及到中文，需要设置字符集，在
<head>中用<meta> - 多次用到标签的嵌套：最外层为两个无序列表，每个无序列表中嵌套两个有序列表，每个有序列表中嵌套两个无序列表
- 注意到两次使用无序列表时，前面的黑点状形状不一样，可以通过设置
<ul>的属性type，“disc“黑色圆点，“circle“白色圆点，“square‘黑色方块。但通过实践发现不需要使用这个属性设置就可以实现目标效果
我的效果
my复杂列表
代码
代码可以进入我的GitHub进行查看
二、复杂表格的实现
目标效果
复杂表格
分析
- 主要涉及的标签：表格
<table>、表格行<tr>、表格列<td> - 涉及到中文，需要设置字符集，在
<head>中用<meta> - 复杂表格涉及到跨行
rowspan、跨列colspan - 表格标题用
<caption>，必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 - 表格使用属性：主体主体有边框，使用属性
border；有内容加粗，使用属性<b>(应该算作标签类)；有内容居中，使用属性align
我的效果
my复杂表格
代码
代码可以进入我的GitHub进行查看
三、考试页面的实现
目标效果
考试页面
分析
- 主要分为三部分：标题部分、试卷信息、试卷内容
- 主要涉及到的标签：标题
<h1> <h3>、块分割<div>、行内分割<span>、输入<input>、有序列表<ol>、文本输入框<input>、表单<form>，其中输入<input>可以通过改变type属性设置文本框text、单选radio、多选checkbox、提交按钮submit - 涉及到分块
<div>和<span>的使用和区分，二者都是为了逻辑分块，<div>表示一个单独的块，<span>表示一个行内的块。要注意开发中推荐使用<div>，使得代码结构上和逻辑上更清楚
我的效果
my考试页面
代码
代码可以进入我的GitHub进行查看
