HTML练习——列表与表格

练习:

1、说明下面这个列表是如何实现的:


列表

2、说明以下表格是如何实现的:


表格

练习一

练习一主要是对于列表的练习。在HTML中,列表主要分为有序和无序两种,非别用block级标签<ol><ul>标记,而列表中的条目则用标签<li>标记。观察练习提供的图片,不难从它的缩进等级发现这是一个三层嵌套的列表,因此html代码如下:

<ul>
    <li>JavaScript</li>
    <ol>
        <li>第一章</li>
        <ul>
            <li>const</li>
            <li>let</li>
        </ul>
        <li>第二章</li>
        <ul>
            <li>function</li>
            <li>object</li>
        </ul>
    </ol>
    <li>Java</li>
    <ol>
        <li>第一章</li>
        <ul>
            <li>class</li>
            <li>package</li>
        </ul>
        <li>第二章</li>
        <ul>
            <li>private</li>
            <li>public</li>
        </ul>
    </ol>
</ul>

完整的源码在这里以及效果列表的嵌套实际上就是用一套<ol><ul>列表放在本该安置<li>的位置,是一种递归。

练习二

练习二是一个表格,表格中有几项是跨行/列的。HTML中的表格用block级标签<table>标记,默认无边框。然后每一行都用<tr>标记,最后该行中的每个单元格用<td>标记。除此之外,<th>作为与<td>同等级的标签标记表头单元格,<caption>作为与<tr>同级的标签标记表格的标题。无论一个单元格是跨行还是夸列,都应该在它所占有的最左上方的单元格的位置使用<td><th>标签标记(换句话说,是在其html代码中第一次出现的那条标记中),并配置rowspan/colspan属性:

<table border=1>
    <caption>购物车</caption>
    <tr>
        <th rowspan=2>名称</th>
        <th colspan=2>2016-11-22</th>
        <th rowspan=2>小计</th>
    </tr>
    <tr>
        <th>重量</th>
        <th>单价</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>3公斤</td>
        <td>5元/公斤</td>
        <td>15元</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>2公斤</td>
        <td>6元/公斤</td>
        <td>12元</td>
    </tr>
    <tr>
        <th colspan=3>总价</th>
        <td>27元</td>
    </tr>
</table>

完整的源码在这里以及效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 一.有序列表 (ordered list) 格式: 语义及运用:给一堆数据添加列表语义,数据有先后之分。常运用于歌...
    饥人谷_刘冲阅读 1,685评论 0 1
  • 癌细胞袭击了我身边的三个人 一个是好友的妈妈 一个是很关心我的孩子同学的妈妈 一个是我高中挚友 一个比一个更震撼我...
    微风茶阅读 159评论 0 0