html中的列表、表格、表单⽬录
我们可以使⽤html来制作列表、表格和表单。
⼀、列表（有序列表和⽆序列表）
1、⽆序列表
(1)需要⽤到<ul></ul>标签和<li></li>标签。
1<body>
2    <h3>⼀个⽆序列表：</h3>
3    <ul>
4        <li>苹果</li>
5        <li>桃⼦</li>
6        <li>栗⼦</li>
7        <li>桔⼦</li>
8    </ul>
9
10</body>
（2）如⽰例所⽰，⽆序列表项⽬符号默认为⼩⿊点。如果需要更改，则令<ul type="需要的形状">，如图:
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>⽆序列表</title>
7</head>
8<body>
9    <h3>⼀个⽆序列表：</h3>
10    <ul type="disc">
11        <li>苹果</li>
12        <li>桃⼦</li>
13        <li>栗⼦</li>
14        <li>桔⼦</li>
15    </ul>
16    <br>
17    <ul type="circle">
18        <li>苹果</li>
19        <li>桃⼦</li>
20        <li>栗⼦</li>
21        <li>桔⼦</li>
22    </ul>
23    <br>
24    <ul type="square">
25        <li>苹果</li>
26        <li>桃⼦</li>
27        <li>栗⼦</li>
28        <li>桔⼦</li>
29    </ul>
30</body>
31</html>
列表项内部可以使⽤段落、换⾏符、图⽚、链接以及其他列表等等。2、有序列表
(1)需要⽤到<ol></ol>标签和<li></li>标签。
(2)有序列表项⽬符号定义举例：
列表项内部可以使⽤段落、换⾏符、图⽚、链接以及其他列表等等。
3、列表的嵌套
有序列表和⽆序列表可以实现嵌套，即在有序列表⾥可以嵌套⽆序列表，⽆序列表也是⾥嵌套有序列表，当然还有其他列表，⽐如说定义列表。
⼆、表格
1、表格所需的主要标签
A、每个表格由 table 标签开始。
B、每个表格⾏由 tr 标签开始。
C、每个表格数据由 td 标签开始
2、详细介绍表格的制作
（1）、标签及其解释
<table border='边框线的宽度' align='表格在页⾯中
的对齐⽅式' bgcolor='表格的背景⾊'表⽰⼀个表格
1
<h3>⼀个有序列表：</h3>2
<ol type="disc">3
<li>苹果</li>4
<li>桃⼦</li>5
<li>栗⼦</li>6
<li>桔⼦</li>7    </ol>
1
<li>你平时休闲经常去的地⽅是哪（）</li>2
<br>3
html中提交表单用什么属性
<ol type="A" start="1">4
<li>郊外</li>5
<li>商场</li>6
<li>公园</li>7
<li>酒吧</li>8        <br>9        </ol>
background='背景图⽚'></table>
<thead></thead>语义标签，表⽰表格的头部
<tr align='⾏的对齐⽅式' bgcolor='⾏的背景⾊' background='背景图⽚'></tr>表⽰表格的⾏,⼀个tr代表⼀⾏
<th width='列宽'></th>表⽰列头,⽂字会⾃动加粗、⾃动居中，特殊的单元格
<tbody></tbody>语义标签，表⽰表格的主体部分
<td align='单元格的对齐⽅式'></td>表⽰的表格中的单元格
<caption></caption>表⽰表格的标题表格的边框属性：border⽤来设置边框线的粗细
表格的填充属性:cellpadding 表⽰的是单元格的内容和单元格边框之间的距离
单元格的间距属性：
cellspacing
表⽰的是单元格之间的距离（2）、⽰例
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>表格</title>
7</head>
8<body>
9    <table border="1" align="center"  >
10        <thead>
11            <tr bgcolor="grey">
12                <th width="400" >
13这是表头
14                </th>
15            </tr>
16        </thead>
17        <tbody>
18            <tr bgcolor="yellow" align="center">
19                <td>第⼀</td>
20                <td>第⼆</td>
21                <td>第三</td>
22                <td>第四</td>
23                <td>第五</td>
24            </tr>
25            <tr>
26                <td align="center">⼆⼀</td>
27                <td bgcolor="blue">⼆⼆</td>
28                <td>⼆三</td>
29                <td>⼆四</td>
30                <td>⼆五</td>
31            </tr>
32            <tr>
33                <td>
34                    <img src="../images/1.gif" alt="">
35                </td>
36                <td>
37                    <img src="../images/1.gif" alt="">
38                </td>
39                <td>
40                    <img src="../images/1.gif" alt="">
41                </td>
42                <td>
43                    <img src="../images/1.gif" alt="">
44                </td>
45                <td>
46                    <img src="../images/1.gif" alt="">
47                </td>
48            </tr>
49        </tbody>
50    </table>
51</body>
52</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。