当前位置：首页 > news >正文

HTML HTML基础(4)

news 2025/9/11 5:28:15

1.列表

(1).有序列表

概念：有顺序或侧重顺序的列表。

<h2>要把大象放冰箱总共分几步</h2>

<ol>

        <li>把冰箱门打开</li>

        <li>把大象放进去</li>

        <li>把冰箱门关上</li>

</ol>

(2).无序列表

概念：无顺序或不侧重顺序的列表。

<h2>我想去的几个城市</h2>

<ul>

        <li>成都</li>

        <li>上海</li>

        <li>西安</li>

        <li>武汉</li>

</ul>

(3).列表嵌套

概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把结构写完整）。

<h2>我想去的几个城市</h2>

<ul>

        <li>成都</li>

        <li>

                <span>上海</span>

                <ul>

                        <li>外滩</li>

                        <li>杜莎夫人蜡像馆</li>

                        <li>

                                <a href="https://www.opg.cn/">东方明珠</a>

                        </li>

                        <li>迪士尼乐园</li>

                </ul>

        </li>

        <li>西安</li>

        <li>武汉</li>

</ul>

注意：li 标签最好写在 ul 或 ol 中，不要单独使用。

(4).自定义列表

(1.概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。

(2.一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多个）。

<h2>如何高效的学习？</h2>

<dl>

        <dt>做好笔记</dt>

        <dd>笔记是我们以后复习的一个抓手</dd>

        <dd>笔记可以是电子版，也可以是纸质版</dd>

        <dt>多加练习</dt>

        <dd>只有敲出来的代码，才是自己的</dd>

        <dt>别怕出错</dt>

        <dd>错很正常，改正后并记住，就是经验</dd>

</dl>

2.表格

(1)基本结构

(1一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。

(2.表格涉及到的标签：

table：表格

caption：表格标题

thead：表格头部

tbody：表格主体

tfoot：表格脚注

tr：每一行

th、td：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td）

(3.具体编码：

<table border="1"><!-- 表格标题 --><caption>学生信息</caption><!-- 表格头部 --><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><!-- 表格主体 --><tbody><tr><td>张三</td><td>男</td><td>18</td><td>汉族</td><td>团员</td></tr><tr><td>李四</td><td>女</td><td>20</td><td>满族</td><td>群众</td></tr><tr><td>王五</td><td>男</td><td>20</td><td>回族</td><td>党员</td></tr><tr><td>赵六</td><td>女</td><td>21</td><td>壮族</td><td>团员</td></tr></tbody><!-- 表格脚注 --><tfoot><tr><td></td><td></td><td></td><td></td><td>共计：4人</td></tr></tfoot>
</table>

(2).常用属性

标签	标签语义	常用属性	单/双标签
table	表格	width：设置表格宽度 height：设置表格最小高度，表格最终可能比设置的值大 border：设置表格边框宽度 cellspacing：设置单元格之间的间距	双
thead	表格头部	height：设置表格头部高度 align：设置单元格的水平对齐方式，可选值如下： 1.left：左对齐 2.center：中间对齐 3.right：右对齐 valign：设置单元格的垂直对齐方式，可选值如下： 1.top：顶部对齐 2.middle：中间对齐 3.bottom：底部对齐	双
tbody	表格主体	常用属性与 thead 相同	双
tr	行	常用属性与 thead 相同	双
tfoot	表格脚注	常用属性与 thead 相同	双
td	普通单元格	width：设置单元格的宽度，同列所有单元格全都受影响 height：设置单元格的高度，同行所有单元格全都受影响 align：设置单元格的水平对齐方式 valign：设置单元格的垂直对齐方式 rowspan：指定要跨的行数 colspan：指定要跨的列数	双
th	表头单元格	常用属性与 td 相同	双

注意：

        1. <table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度，这个问题如何解决？—— 后期靠 CSS 控制。

        2. 默认情况下，每列的宽度，得看这一列单元格最长的那个文字。

        3. 给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。

        4. 给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了。

(3).跨行跨列

(1.rowspan：指定要跨的行数。

(2.colspan：指定要跨的列数。