HTML 列表和表格

2018-01-09  本文已影响0人  jhl2018

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言,而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

在上图中展示了HTML列表的应用,其中包含了两种不同的列表方式:有序列表和无序列表,列表创建代码如下:

 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表使用<ul >标签。每个列表项使用<li>

有序列表也是一列项目,列表项目使用数字自动进行标记。有序列表使用<ol>标签定义。每个列表项使用<li>标签,每一个列表项依次从1开始列表

ul与ol前的符号是可以修改的。只需要修改它们的type值。

ul的type属性有:disc—实心圆(默认)、circle—空心圆、square—实心方块

ol的type属性有:1—数字(默认)、a—小写字母、A—大写字母、i—小写希腊字母、I—大写希腊字母。

通过CSS也可以在将它们前的符号改为图片,这样列表显示就会更美观了

上图是使用HTML中的table标签创建的表格,实现代码如下:

<table border="1">

        <caption>购物车</caption>

        <tr>

                <th rowspan="2">名称</th>

                <th colspan="2">2018-01-09</th>

                <th rowspan="2">小计</th>

        </tr>

        <tr>

                <th>重量</th>

                <th>单价</th>

        </tr>

    <tr>

            <th>苹果</th>

            <td>3公斤</td>

            <td>5元/公斤</td>

            <td>15元</td>

    </tr>

    <tr>

            <th>香蕉</th>

            <td>2公斤</td>

            <td>6元/公斤<td>

            <td>12元</td>

   </tr>

    <tr>

            <th colspan="3">总价</th>

            <td>27元</td>

    </tr>

</table>

<caption>标签用于定义表格的标题,<th>标签为表格的表头,<tr></tr>为表格行,<td></td>为表格列,rowspan, colspan分别用于表示合并行,和并列,border 定义了表格边框,若无此属性,则表格默认不显示边框,

上一篇 下一篇

猜你喜欢

热点阅读