12.列表
列表标签
1.在 html 页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用
2.列表分为两类：一是无序列表，一是有序列表
| 标签 | 描述 |
<ul> |
定义无序列表 |
<ol> |
定义有序列表 |
<dl> |
自定义列表 |
<li> |
列表项目的标记 |
无序列表和有序列表
(1).无序列表
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
<ul><li>的属性type 拥有的选项
- disc 默认实心圆
- circle 空心圆
- square 小方块
- none 不显示
比如下面是一个超链接水平导航栏：
<!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 拥有的选项
- 1 表示列表项目用数字标号（1,2,3…）
- a 表示列表项目用小写字母标号（a,b,c…）
- A 表示列表项目用大写字母标号（A,B,C…）
- 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).表格基本结构
| 标签 | 作用 |
< table> |
表格 |
<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里
属性
- width 可设置内联框架的宽
- height 可设置内联框架的高
- name 设置框架名称
- src 设置页面的路径
- 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"/>
- 文件上传
<input type="file"/>
- 下拉框
<select>标签
— <select><option value="1">北京</option></select>
- 多行文本
<textarea></textarea>
- 提交按钮
<input type="submit"/>
- 普通按钮
<input type="button"/>
- 重置按钮
<input type="reset"/>
文件
<input type="file"/>
属性：
- name:定义控件名称
使用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="text" />
属性：
- name:定义控件名称
- value：指定控件初始值
密码框
<input type="password" />
属性：
- name:定义控件名称
- value：指定控件初始值
17.单选按钮和复选框
(1).单选按钮
<input type="radio" />
属性：
- name:定义控件名称
- value：指定控件初始值
- checked：设置控件初始状态是否被选中
(2).复选框
<input type="checkbox" />
属性：
- name:定义控件名称
- value：指定控件初始值
- checked：设置控件初始状态是否被选中
18.按钮组
19.下拉列表
select属性：
- name:此列表框的名字
- multiple：多选，不用赋值
- size :规定下拉列表中可见选项的数目(显示几行)
- disabled:规定禁用该下拉列表
option属性：
- selected ：用来指定默认的选项
- value： 用来给指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的value 属性来获得该区域选中的数据项的
20.多行文本和 lable标签
多行文本框
<textarea></textarea>
属性：
- cols ：这文字区块的宽度
- rows ：这文字区块的行数，即其高度
<textarea name="" id="" cols="30" rows="10"></textarea>
21.表单域
表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
表单标签的格式:
<form action＝"url" method=get|post name="myform" ></form>
- name：表单提交时的名称
- action：提交到的地址
- method：提交方式，默认为get
一个完整的表单包含三个基本组成部分：
表单标签、表单域、表单按钮。
(1).表单标签
是指<form>标签本身，它是一个包含表单元素的区域，使用定义
(2).表单域
是<form>标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。（比如：文本域、下拉列表、单选框、复选框等等）
(3).表单按钮
用来提交<form>表单中的所有信息到服务器
*表单域和表单按钮都属于表单元素。
