HTML实践:复杂列表+复杂表格+考试页面

在上一篇博客中,我们已经一起学习了HTML这门标记语言的基本语法和使用,是不是跃跃欲试想要小露一手呢?这篇博客以例子为主导,每个例子侧重点不同,循循善诱,实践了大多数的标签,大量涉及到标签的嵌套、HTML分块等用法,是新手小白不得不尝试的实践练习。

一、复杂列表的实现

目标效果
复杂列表
分析

HTML中列表一共有三种:有序列表、无序列表和定义列表。有序列表是一列使用数字进行标记的项目;无序列表是一组使用黑点状进行标记的项目;定义列表语义上表示项目及其注释的组合。分析目标图可以得出以下想法:

  • 主要涉及到的标签:有序列表
      、无序列表
        、列表项
      • 涉及到中文,需要设置字符集,在中用
      • 多次用到标签的嵌套:最外层为两个无序列表,每个无序列表中嵌套两个有序列表,每个有序列表中嵌套两个无序列表
      • 注意到两次使用无序列表时,前面的黑点状形状不一样,可以通过设置
          的属性type“disc“黑色圆点,“circle“白色圆点,“square‘黑色方块。但通过实践发现不需要使用这个属性设置就可以实现目标效果
        我的效果
        HTML实践:复杂列表+复杂表格+考试页面_第1张图片
        my复杂列表
        代码

        代码可以进入我的GitHub进行查看

        二、复杂表格的实现

        目标效果
        复杂表格
        分析
        • 主要涉及的标签:表格、表格行、表格列
        • 涉及到中文,需要设置字符集,在中用
        • 复杂表格涉及到跨行rowspan、跨列colspan
        • 表格标题用
        • ,必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
        • 表格使用属性:主体主体有边框,使用属性border;有内容加粗,使用属性(应该算作标签类);有内容居中,使用属性align
        • 我的效果
          HTML实践:复杂列表+复杂表格+考试页面_第2张图片
          my复杂表格
          代码

          代码可以进入我的GitHub进行查看

          三、考试页面的实现

          目标效果
          考试页面
          分析
          • 主要分为三部分:标题部分、试卷信息、试卷内容
          • 主要涉及到的标签:标题

            、块分割
            、行内分割、输入、有序列表
              、文本输入框、表单
              ,其中输入可以通过改变type属性设置文本框text、单选radio、多选checkbox、提交按钮submit
            1. 涉及到分块
              的使用和区分,二者都是为了逻辑分块,
              表示一个单独的块,表示一个行内的块。要注意开发中推荐使用
              ,使得代码结构上和逻辑上更清楚

          我的效果
          HTML实践:复杂列表+复杂表格+考试页面_第3张图片
          my考试页面
          代码

          代码可以进入我的GitHub进行查看

          参考资料

          W3School上的HTML基础教程
          从零开始的HTML生活

          你可能感兴趣的:(HTML实践:复杂列表+复杂表格+考试页面)