12.列表
列表标签
1.在 html 页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用
2.列表分为两类：一是无序列表，一是有序列表
<ol> | 定义有序列表 |
<dl> | 自定义列表 |
<li> | 列表项目的标记 |
无序列表和有序列表
(1).无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<ul><li>的属性type 拥有的选项
比如下面是一个超链接水平导航栏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color:#74b8fc;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color:blue;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="https://www.itbaizhan.cn/dashboard.html"> 学习中心 </a></li>
<li><a href="https://www.itbaizhan.cn/live.html"> 直播课 </a></li>
<li><a href="https://www.itbaizhan.cn/vips"> 价格 </a></li>
<li><a href="https://www.itbaizhan.cn/teacher/"> 师资 </a></li>
<li><a href="https://www.itbaizhan.cn/trainings"> 实操 </a></li>
<li><a href="https://www.itbaizhan.cn/questions"> 问答 </a></li>
<li><a href="https://www.itbaizhan.cn/about/question"> 常见问题 </a></li>
<li><a href="https://www.itbaizhan.cn/about/example"> 百战故事 </a></li>
<li><a href="https://www.itbaizhan.cn/course/update"> 课程更新 </a></li>
<li><a href="https://www.itbaizhan.cn/abouts"> 关于我们 </a></li>
</ul>
</div>
</body>
</html>
(2).有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<ol><li>的属性type 拥有的选项
- i 表示列表项目用小写罗马数字标号（i,ii,iii…）
- I 表示列表项目用大写罗马数字标号（I,II,III…）
自定义列表
<dl>
<dt>第1项</dt>
<dd>注释1</dd>
<dt>第2项</dt>
<dd>注释2</dd>
<dt>第3项</dt>
<dd>注释3</dd>
</dl>
定义列表默认为两个层次，第一层为列表项标签<DT>，第二层为注释项标签<DD>
13.表格
(1).表格基本结构
<tr> | 行，只能包含<td>或<th>元素定义单元格 |
<td> | 单元格 |
<caption> | 表格标题 |
<th> | 表格页眉的单元格 |
<thead> | 表格头 |
<tbody> | 表格的主体 |
<tfoot> | 表格脚 |
如下，2行2列表格代码示列：
<body>
<table border="1" width="300">
<caption>表格标题</caption>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body>
(2).表格常用属性
| 属性 | 描述 | 说明 |
| width | 表格的宽度 | |
| height | 表格的高度 | |
| align | 表格在页面的水平摆放位置 | |
| background | 表格的背景图片 | |
| bgcolor | 表格的背景颜色 | |
| border | 表格边框的宽度（以像素为单位） | 表格默认没有边框 |
| bordercolor | 表格边框颜色 | 当border> = 1时起作用 |
| cellspacing | 单元格之间的间距 | |
| cellpadding | 单元格内容与单元格边界之间的空白距离大小 | |
(3).表格行和列常用属性
表格行的常用属性
表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签<tr>
| 属性 | 描述 |
| height | 行高 |
| align | 行内容的水平对齐 |
| valign | 行内容的垂直对齐 |
| bgcolor | 行的背景颜色 |
表格列的常用属性
一个表格有几列组成就要有几个列标签<td>
| 属性 | 描述 |
| width/height | 单元格的宽和高 |
| align | 设置水平对齐方式，可取值left，center，right |
| valign | 设置垂直对齐方式，可取值top，middle，bottom |
| bgcolor | 单元格的背景颜色 |
| colspan | 设置单元格跨列 |
| rowspan | 设置单元格跨行 |
(4).合并单元格
| 属性 | 描述 |
| colspan | 跨列合并 |
| rowspan | 跨行合并 |
需要注意：
- 如果合并行（rowspan），需在相应的位置减一个
- 如果合并列（colspan ），需在相应的位置减一个
如下，合并一个2行2列表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合并单元格</title>
</head>
<body>
<table border="1px" width="300px" height="300px" align="center">
<tr>
<td bgcolor="#ffc1cb"></td>
<td rowspan="2" bgcolor="#0000ff"></td>
</tr>
<tr>
<td bgcolor="#8b2ae3"></td>
</tr>
</table>
</body>
</html>
—
14.Iframe框架
Iframe（Inner Frame）内联框架
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
iframe是属于内联框架，它是body的子级，和body是父子关系。
iframe作为一个普通元素放在body里
属性
- scrolling规定是否在 iframe 中显示滚动条（yes，no，auto）
- frameborder规定是否显示框架周围的边框（1默认有边框,0）
15.表单作用
表单在网页中主要负责数据采集功能，它用标签定义。用户输入的信息都要包含在form标签中，点击提交后，和里面包含的数据将被提交到服务器或者电子邮件里。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。
(1).post和get区别：
- 数据提交方式，get提交的数据在浏览器的url可以看到，post看不到
- get一般用于提交少量数据，post用来提交大量数据
- get最多提交1K数据，post理论上没有限制
- get提交的数据在浏览器历史记录中，安全性不好
- 单行文本框
<input type="text" >默认值是type=“text”
- 密码框
<input type="password"/>
- 单选按钮
<input type="radio" name=””/>
- 复选框
<input type="checkbox"/>
- 隐藏域
<input type="hidden"/>
— <select><option value="1">北京</option></select>
- 多行文本
<textarea></textarea>
- 提交按钮
<input type="submit"/>
- 普通按钮
<input type="button"/>
- 重置按钮
<input type="reset"/>
文件
属性：
使用file类型的input时要注意以下几点
- form表单的method属性值要为post
- form要加enctype="multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件，因为我们计算机本身最底层都是以二进制来显示、传输。
默认地，表单数据会编码为 “application/x-www-form-urlencoded”，不能用于文件上传
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file1"/>
</form>
16.文本框和密码
文本框
属性：
密码框
<input type="password" />
属性：
17.单选按钮和复选框
(1).单选按钮
属性：
(2).复选框
<input type="checkbox" />
属性：
18.按钮组
19.下拉列表
select属性：
- size :规定下拉列表中可见选项的数目(显示几行)
option属性：
- value： 用来给指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的value 属性来获得该区域选中的数据项的
20.多行文本和 lable标签
多行文本框
<textarea></textarea>
属性：
<textarea name="" id="" cols="30" rows="10"></textarea>
21.表单域
表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
表单标签的格式:
<form action＝"url" method=get|post name="myform" ></form>
一个完整的表单包含三个基本组成部分：
表单标签、表单域、表单按钮。
(1).表单标签
是指<form>标签本身，它是一个包含表单元素的区域，使用定义
(2).表单域
是<form>标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。（比如：文本域、下拉列表、单选框、复选框等等）
(3).表单按钮
用来提交<form>表单中的所有信息到服务器
