HTML功能元素——列表、表格、表单_htlm 数字表单

列表标签

无序列表（unordered list）

<!-- 无序列表ul ul li 块级元素 ul配合li使用-->
    <ul type="circle">
        <li>苹果</li>
        <li>香蕉</li>
        <li>榴莲</li>
    </ul>
1
2
3
4
5
6

1、li 是英文 list item 的缩写。

2、有关 type 属性值：

• disc 实心圆（ 默认值）
• circle 空心圆
• square 实心方块

3、无序列表应用场景

• 新闻列表
• 商品列表
• 导航条

有序列表 (ordered list)

<!-- 有序列表ol -->
    <ol type="A">
        <li>苹果</li>
        <li>香蕉</li>
        <li>榴莲</li>
    </ol>
1
2
3
4
5
6

1、有关type属性
1 默认值。数字有序列表。（1、2、3、4）
a 按字母顺序排列的有序列表，小写。（a、b、c、d）
A 按字母顺序排列的有序列表，大写。（A、B、C、D）
i 罗马字母，小写。（i, ii, iii, iv）
I 罗马字母，大写。（I, II, III, IV）

定义列表 (definition list)

<!-- 定义列表dl dt dd  块级元素-->
    <dl>
        <!-- 列表标题 -->
        <dt>1</dt>
        <!-- 对列表标题的描述 -->
        <dd>111111</dd>
        <dt>2</dt>
        <dd>222222</dd>
    </dl>
1
2
3
4
5
6
7
8
9

1、可以写多组 dt ~ dd
2、一个dt 也可以对应多个 dd，也可以没有对应的 dd（推荐一个dt 对应一个dd）
3、应用场景

• 做网站尾部的相关信息
• 做图文混排

表格标签

格式：

<table border="1">
<!-- 一个tr 代表一行 -->
<!-- 一个td 代表一个单元格或一列 -->
  <tr>
  <!-- th 是表头标签，默认居中加粗的效果 
	th内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本
-->
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>19</td>
    <td>男</td>
  </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1、表格边框
表格标签有一个border边框属性, 这个属性决定了边框的宽度。默认情况下这个属性的值是0, 所以看不到边框。

我们可以在 table 里面设置 border=“1” ，就可以看到边框了（这里不用写单位）

2、宽度和高度（默认是按照内容的尺寸来调整的）
可以给table标签和td标签使用

给table设置：设置的是整个表格的宽高
给td设置：设置的是当前单元格的宽高

3、水平对齐和垂直对齐属性
水平对齐 可以给 table 标签和 tr 标签和 td 标签使用
垂直对齐 只能给 tr 标签和 td 标签使用
水平对齐 align：left center right
垂直对齐 valign：top bottom mid

给 table 设置水平对齐：设置的是表格相对浏览器窗口的位置

注意: 如果td中设置了align / valign 属性, tr中也设置了align / valign 属性, 那么单元格中的内容会按照td中设置的来对齐（就近原则）

4、外边距和内边距属性
只能给table标签使用
使用：
cellspacing=“1”
cellpadding=“3”

• cellspacing 外边距 ，单元格和单元格之间的距离（默认情况下单元格和单元格之间的外边距的距离是2px）
• cellpadding 内边距，单元格的边框和文字之间的间隙（默认情况下内边距是1）

边框合并的两种方法：

• 设置 cellspacing=“0” （实际上是两条线挨在一起）
• 利用css样式 border-collapse：collapse （线条重合，只有一条线）

5、细线表格

<!-- 细线表格 -->
    <table bgcolor="black" cellspacing="1px">
        <tr bgcolor="white">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr bgcolor="white">
            <td>张三</td>
            <td>19</td>
            <td>男</td>
        </tr>
    </table>
1
2
3
4
5
6
7
8
9
10
11
12
13

• 给table标签设置bgcolor=“black”，cellspacing = “1px”
• 给tr标签设置bgcolor=“white”

6、表格完整结构

表格结构包括：

• 表格的标题
• 表格的表头信息
• 表格的主体信息
• 表格的页尾信息

<!-- 完整的表格结构 -->
    <table border="1">
        <!-- 标题 默认居中-->
        <caption align="left">个人信息</caption>
        <!-- 表头标签 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <!-- 表体标签 tbody标签如果没写 浏览器自动补充-->
        <tbody>
            <tr>
                <td>张三</td>
                <td>11</td>
                <td>男</td>
            </tr>
        </tbody>
        <!-- 表脚标签 -->
        <tfoot></tfoot>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

7、单元格合并
水平方向上的单元格合并：给td标签添加一个colspan属性
垂直方向上的单元格合并：给td标签设置一个rowspan属性

注意：
由于把某一个单元格当做了多个单元格来看待, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示。
一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并。

<table align="center" border="1"> 
        <tr>
            <!-- 列合并 colspan='3' 合并3列 -->
            <!-- 行合并 rowspan='3' 合并3列 -->
            <td colspan="3">11</td>
            <!-- <td>12</td>
            <td>13</td> -->
            <td>14</td>
            <td>15</td>
            <td>16</td>
        </tr>
        <tr>
            <td>21</td>
            <td rowspan="2">22</td>
            <td>23</td>
            <td colspan="3" rowspan="2">24</td>
            <!-- <td>25</td>
            <td>26</td> -->
        </tr>
        <tr>
            <td>31</td>
            <!-- <td>32</td> -->
            <td>33</td>
            <!-- <td>34</td> -->
            <!-- <td>35</td> -->
            <!-- <td>36</td> -->
        </tr>
    </table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Form表单

表单格式：

<form action="提交的服务器接口地址">
    <表单元素>
</form>
1
2
3

注意:表单元素一定要写在表单中

常见表单元素

1、input 标签
type属性决定input标签的功能和外观：

readonly 只读  disabled 禁用  默认选中checked
设置默认值 value="xxx"
设置提示内容 placeholder="xxxx"
name 属性: 表单提交时，会作为参数的名称，结合输入的值进行匹配，组成 参数名=参数值的结构

    -1、明文输入框 
		<input readonly type="text" name="account" placeholder="请输入用户名">
    -2、暗文输入框 
		<input disabled type="password" name="password" placeholder="请输入密码">
    -3、单选框 
		角色：
        管理员：<input type="radio" name="role" value="admin">
        顾客：<input type="radio" name="role" value="customer">
        员工：<input type="radio" name="role" value="employee">
       （注意： 默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值）
	-4、多选框
		爱好：
        唱<input checked type="checkbox" name="hobbies" value="sing" id="">
        跳<input type="checkbox" name="hobbies" value="dance" id="">
        rap<input type="checkbox" name="hobbies" value="rap" id="">
    -5、提交按钮   通过value属性来给按钮指定标题
		<input type="submit" value="提交">
	（注意:
      要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
      1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
      2.需要给需要提交到服务器的表单元素添加一个name属性）
      
    -6、普通按钮 
		<input type="button" value="xxx">
      作用: 配合JS完成一些操作

    -7、图片按钮 
		<input type="image" src="">
       作用: 配合JS完成一些操作
	
    -8、重置按钮 
		<input type="reset" value="xx">
      作用: 用于清空表单中已经填写好的数据

    -7、隐藏域 
		<input type="hidden" name="xx" value="xxx">
        隐藏域作用 : 配合提交按钮将一些数据悄悄的提交到服务器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

2、label标签
使我们的文字和输入框关联，用户点击文字和输入框都能够聚焦输入框。
绑定的格式:
1. 将文字利用label标签包裹起来
2. 给输入框添加一个id属性
3. 在label标签中通过for属性和输入框中的id进行绑定即可

<label for="one">用户名：</label>
<input type="text" id="one" name="username">
1
2

3、select标签
作用: 用于定义下拉列表

<!-- 下拉框 -->
        <select name="city" id="">
            <optgroup label="一线城市" disabled>
                <option value="sh">上海</option>
                <option value="bj">北京</option>
                <option value="lz" selected>柳州</option>
            </optgroup>
        </select>
1
2
3
4
5
6
7
8

注意:

• 下拉列表不能输入内容, 但是可以直接在列表中选择内容
• 可以通过给option标签添加一个selected属性来指定列表的默认值
• 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

4、textarea标签
作用: 定义一个多行输入框

<!-- 多行文本框 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
1
2

注意:

• 默认情况下输入框可以无限换行
• 默认情况下输入框有自己的宽度和高度
• 可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
• 默认情况下输入框是可以手动拉伸的

5、fieldset组件

<form action="">
      <!-- fieldset 类似div加边框 -->
        <fieldset>
            <legend>请登录</legend>
            账号：<input type="text"><br>
            密码：<input type="password">
            <input type="submit" value="提交">
        </fieldset>
  </form>
1
2
3
4
5
6
7
8
9

H5新增表单元素

<form action="xxx">
		<!-- datalist  作用: 给输入框绑定待选项。
		如何给输入框绑定待选列表
    	1.一个输入框
    	2.一个datalist列表
    	3.给datalist列表标签添加一个id
    	4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
-->
        <input type="text" list="input_ref" name="" id="">
        <datalist id="input_ref">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </datalist>
        <!-- 进度条 -->
        <progress value="70" max="100"></progress>
        <!-- 滑块 -->
        <input type="range" value="80" step="20" max="100" min="0">
        <!-- 邮箱 -->
        <input type="email">
        <!-- 电话 利用正则表达式 pattern-->
        <input type="tel" pattern="1[0-9]{10}">
        <!-- 数字 -->
        <input type="number" name="" id="">
        <!-- 域名 -->
        <input type="url" name="" id="">
        <!-- 时间日期 -->
        <input type="datetime-local" name="" id="">
        <!-- 日期 -->
        <input type="date" name="" id="">
        <!-- 颜色 -->
        <input type="color" name="" id="">
        <input type="submit" value="提交">
        <!-- 其他h5新特性 -->
        <mark>高亮效果</mark>
        <cite>倾斜效果</cite>
        <pre>
            <code>var a=1;</code>
        </pre>
        <strike>删除线</strike>
    </form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41