【前端web入门第二天】01 html语法实现列表与表格

html语法实现列表与表格

文章目录:

1.列表
- 1.1 无序列表
- 1.2 有序列表
- 1.3 定义列表
2.表格
- 2.1 表格基本结构
- 2.2 表格结构标签

写在最前,第二天学习目标:

列表表格表单

元素为嵌套关系

1.列表

作用:布局内容排列整齐的区域。
列表分类:无序列表、有序列表、定义列表。

在这里插入图片描述

1.1 无序列表

作用:布局排列整齐的不需要规定顺序的区域。
标签:ul嵌套li,ul是无序列表，li是列表条目。

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
......
</ul>

效果如下:
在这里插入图片描述

注意事项:

ul标签里面只能包裹li标签
li标签里面可以包裹任何内容,li标签内容自动换行

1.2 有序列表

作用:布局排列整齐的需要规定顺序的区域。
标签:ol嵌套li，ol是有序列表，li是列表条目。

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
......
</ol>

效果如下:
在这里插入图片描述
多了1,2,3的序号

1.3 定义列表

标签:dl嵌套dt和dd,
dl是定义列表,dt是定义列表的标题,dd是定义列表的描述 / 详情。

<d>
<dt>列表标题</dt>
<dd>列表描述/详情</dd>
....
</dI>

注意事项:

dl里面只能包含dt和dd
dt和dd 里面可以包含任何内容

 <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
    </dl>

效果如下:
在这里插入图片描述

2.表格

2.1 表格基本结构

标签: table嵌套tr , tr 嵌套 td / th。

标签名	说明
table	表格
tr	行
th	表格单元头
td	内容单元头

提示:在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。

样例如下:

<table border="1"> 
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <th>张三</th>
            <th>99</th>
            <th>100</th>
            <th>199</th>
        </tr>
        <tr>
            <th>李四</th>
            <th>98</th>
            <th>100</th>
            <th>198</th>
        </tr>
        <tr>
            <th>总结</th>
            <th>全市第一</th>
            <th>全市第一</th>
            <th>全市第一</th>
        </tr>
    </table>