一、列表
1.无序列表
<ul type=“”></ul>,type属性设置标号的类型,值可以取:
1 disc :实心圆点
2 circle :空心圆点
3 square :实心方块
<ul type='disc'>
<li>梁山伯与祝英台</li>
<li>白蛇传</li>
<li>牛郎织女</li>
<li>孟姜女哭长城</li>
</ul>
2.有序列表
<ol type=“” start=“”></ol>
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>
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.标签
(1)<table></table>:表示一个表格
(2)<caption></caption>:表示表格的标题
(3)<thead></thead>:语义标签,表示表格的头部
(4)<tbody></tbody>:语义标签,表示表格的主体部分
(5)<tr align='行的对齐方式' bgcolor='行的背景色' background='背景图片'></tr>: 表示表格的行,一个tr代表一行
(6)<th width='列宽'></th>:表示列头,文字会自动加粗、自动居中,特殊的单元格
border | 边框线的宽度 |
align | 表格在页面中的对齐方式 |
bgcolor | 表格的背景色 |
background | 背景图片 |
cellpadding | 单元格的内容和单元格边框之间的距离 |
cellspacing | 单元格之间的距离 |
2.单元格的合并
(1)跨列(合并列):一个单元格占据多列,在<td>中添加属性colspan,该属性的值为占据的列数
(2)跨行(合并行):一个单元格占据多行,在<td>中添加属性rowspan,该属性的值为占据的行数
<th width='200' colspan="2">操作</th>
三、表单
<form action=“http://www.it.com” method=“post”>
……
</form>
A、action属性:表单数据提交的远程服务器的地址(服务器的URL)
B、method属性:表单数据的提交方式
1.表单标签
1.1 input 控件
单行输入文本框 | <input type='text'/> |
密码框 | <input type='password' / |
重置按钮 | <input type='reset' value='按钮上显示的文字'/>,若没有value属性,按钮上默认显示'重置',只有放在<form></form>中才有效 |
提交按钮 | <input type='submit'/>,将表单数据提交给action指定的URL |
单选按钮 | <input type='radio' name='控件的名称' checked/> ,属性'checked'表示选中 |
复选框 | <input type='checkbox' /> |
数字 | <input type='number' /> |
日期选择框 | <input type='date' /> |
时间选择框 | <input type='time' /> |
隐藏控件 | <input type='hidden' /> |
1.2 select控件:下拉列表控件
<select>
<option value=''>列表项</option>
<option value=''>列表项</option>
</select>
1.3 textarea控件:文本区,可以输入多行、多列数据
<textarea cols="30" rows="10"></textarea>
1.4 button控件:按钮控件
<button type='按钮的类型'></button>
type属性的取值:
a、type='button':普通按钮,不含默认的动作(功能)
b、type='reset':重置按钮,重置表单控件
c、type='submit':提交按钮,将表单控件的值提交给远程服务器
1.5 label控件:用于显示文本
2.*强调*
(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属性用来设置鼠标经过时的提示文字