列表、表格与表单

一、列表

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>：表示列头,文字会自动加粗、自动居中,特殊的单元格

---

table常用属性

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属性用来设置鼠标经过时的提示文字