一、列表
1、无序列表标签<ul>
- 用于页面中没有顺序的列举项。
格式： <ul type=“项目符号的类别”>
type属性设置标号的类型，值可以取：
1 disc ：实心圆点
2 circle ：空心圆点
3 square ：实心方块
<p>四大传说：</p>
<ul type='disc'>
<li>梁山伯与祝英台</li>
<li>白蛇传</li>
<li>牛郎织女</li>
<li>孟姜女哭长城</li>
</ul>
<p>四大名著：</p>
<ul type='circle'>
<li>红楼梦</li>
<li>西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
<p>四大美女：</p>
<ul type='square'>
<li>西施</li>
<li>貂蝉</li>
<li>王昭君</li>
<li>杨玉环</li>
</ul>2、有序列表<ol>
- 用于说明页面中的某些成分，需要按特定的顺序排列。有序列表的每项都有连续的编号。
格式： <ol type='项目符号的类别' start='起始值'>
type设置标号的类型，值可以取：
1 1：显示数字
2 A：显示大写字母
3 a：显示小写字母
4 I：显示大写罗马数字
5 i：显示小写罗马数字
<p>四大古都：</p>
<ol type="1" start="1"> <!-- 表示以数字作为项目符号,起始的数字是1 -->
<li>北京</li>
<li>南京</li>
<li>西安</li>
<li>洛阳</li>
</ol>
<p>常用的Web技术：</p>
<ol type="A" start="3"><!-- 表示以大写字母作为项目符号,起始的字母是第三个大写字母('C') -->
<li>JavaScript</li>
<li>JSP</li>
<li>ASP</li>
</ol>
<p>四大名酒：</p>
<ol type="I" start="1"><!-- 表示以大写罗马数字作为项目符号,起始的罗马数字是第三个大写 -->
<li>茅台</li>
<li>泸州老窖</li>
<li>汾酒</li>
<li>西凤酒</li>
</ol>
- HTML注释符( Ctrl+/)： <!-- 注释的内容 --> 注释的内容在页面中不显示
3、嵌套列表
- 一个列表作为另一个列表的一部分，即多层列表。
<p>中国的行政区划：</p>
<ul>
<li>陕西</li>
<ol>
<li>西安</li>
<li>咸阳</li>
<li>宝鸡</li>
</ol>
<li>北京</li>
<ul type='circle'>
<li>朝阳区</li>
<li>海淀区</li>
<li>大兴区</li>
</ul>
</ul>二、表格
1、表格的作用
- 用来布局：内容比较整齐时使用
- 作为信息管理页面的控件使用
2、表格标签
基本结构：
<table>
<caption>标题</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小沛</td>
<td>18</td>
</tr>
</tbody>
</table>- <table> </table> ---------表格标签
- <tr></tr> ---------行
- <th></th> ---------表头单元格（文字会自动加粗、自动居中）
- <td></td> ---------单元格
- <caption></caption> ---------表格标题
- <thead></thead> ---------表格的头部
- <tbody></tbody> ---------表格的主题部分
3、table 的基本属性
| 属性 | 属性值 |
|---|---|
| border | 边框线的宽度，默认没有边框，border的数值越大，则边框线越粗 |
| align | 表格在页面中的对齐方式，left/center/right |
| bgcolor | 表格的背景色 |
| background | 背景图片 |
| cellpadding | 单元格的内容和单元格边框之间的距离 |
| cellspacing | 单元格之间的距离 |
4、合并单元格
4.1、合并单元格的方式
- 跨行合并：rowspan=‘合并单元格的个数’
- 跨列合并：colspan=‘合并单元格的个数’
4.2、目标单元格：（写合并代码）
- 跨行：最上侧单元格为目标单，写合并代码
- 跨列：最左侧单元格为目标单，写合并代码
4.3、合并单元格三部曲
-
先确定是跨行还是跨列合并
-
找到目标单元格，写上 合并方式=‘合并的单元格格数’ 例： <td colspan=‘2’ >1</td>
- 删除多余的单元格
三、表单
1、用途：
-
用户注册
-
收集信息
-
信息反馈--调查问卷
-
搜索引擎
2、标签
2.1、表单标签：所有的表单控件必须放在该标签下
<form action=“远程服务器地址” method=“提交方式” name=“表单域名称”>
…各种表单元素控件…
</form>
A、action属性：表单数据提交的远程服务器的地址(服务器的URL)
B、method属性：表单数据的提交方式，其取值为get(对数据大小有限制，速度快但数据会在地址栏出现，不安全)/post(对数据大小无限制，安全但速度慢)C、name属性：用于指定表单的名称，以区分同一个页面中的多个表单域
2.2 、表单控件
A、input控件：<input type='属性值'/>
| 属性值 | |
|---|---|
| 单行输入文本框 | text，<input type='text'/> |
| 重置按钮 | reset，<input type='reset' value='按钮上显示的文字'/>,若没有value属性,按钮上默认显示'重置' 只有放在<form></form>中才有效 |
| 密码框 | password，<input type='password' />该字段的字符被掩码 |
| 提交按钮 | submit，<input type='submit'/>，将表单数据提交给action指定的URL |
| 单选按钮 | radio，<input type='radio' name='控件的名称' checked/> ,属性'checked'表示选中 例如： <input type="radio" name='sex' id='s1'/> <label for="s1">男</label> <input type="radio" name='sex' id='s2' checked/> <label for="s2">女</label> 让单选按钮和文本进行绑定：radio的id属性值和label的for属性值必须一致 |
| 复选框 | checkbox，<input type='checkbox' /> |
| 数字 | number，<input type='number' /> |
| 日期选择框 | date，<input type='date' /> |
| 时间选择框 | time'，<input type='time'' /> |
| 隐藏控件 | hidden，<input type='hidden' /> |
B、select控件：下拉列表控件
<select>
<option value=''>列表项</option>
<option value=''>列表项</option>
<option value=''>列表项</option>
</select>
C、textarea控件：文本区,可以输入多行、多列数据
<textarea cols="30" rows="10"></textarea>
D、button控件：按钮控件
<button type='按钮的类型'></button>
type属性的取值：
a、type='button'：普通按钮,不含默认的动作(功能)
b、type='reset'：重置按钮,重置表单控件
c、type='submit'：提交按钮,将表单控
E、label控件：用于显示文本
-
强调：
(1)所有的表单控件(标签)都可以有id属性,id的属性值不能重复
(2)所有的表单控件都有value属性,value属性的值会提交给远程服务器
(3)所有的表单控件都有name属性,在后台可以通过name属性值找到对应的标签
(4)disabled属性表示input是否可用(置灰)
(5)readonly属性表示input的值是只读的
(6)单行文本输入框(<input type='text'/>)的属性placeholder起提示的作用
(7)required属性表示input是必须要输入的
(8)maxlength属性表示input输入的最大长度
(9)tabIndex属性用于设置表单控件的tab顺序
(10)title属性用来设置鼠标经过时的提示文字