一、列表

1.无序列表

结构：

<ul type="项目符号的类别">
	<li>列表项</li>
    <li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ul>

2.有序列表

结构：

<ol type='项目符号的类别' start='起始值'>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ol>

3.定义列表

结构：

<dl>
      <dt>定义标题<dt>
      <dd>定义描述<dd>
      <dd>定义描述<dd>
      <dd>定义描述<dd>
</dl>

4.列表的嵌套

列表和列表中可以相互嵌套

有序列表可以嵌套无序列表

无序列表也可以嵌套有序列表

例如：

<ol type="1" start="1">
     <li>你更喜欢吃哪种水果（）
         <ol type="A">
             <li>草莓</li>
             <li>香蕉</li>
             <li>苹果</li>
             <li>西瓜</li>
         </ol>
     </li>
     <li>你平时休闲经常去的地方是哪里（）
         <ol type="A">
             <li>郊外</li>
             <li>商场</li>
             <li>公园</li>
             <li>酒吧</li>
         </ol>
     </li>
     <li>你认为容易吸引你的人是哪类（）
         <ol type="A">
             <li>有才气的人</li>
             <li>依赖你的人</li>
             <li>善良的人</li>
             <li>优雅的人</li>
         </ol>
     </li>
     <li>如果你可以成为一种动物，你希望成为哪种（）
        <ol type="A">
            <li>猫</li>
            <li>狗</li>
            <li>猴子</li>
            <li>小鸟</li>
        </ol>
     </li>
     <li>你最向往的生活是（）
         <ol type="A">
             <li>面朝大海，春暖花开</li>
             <li>采菊东篱下，悠然见南山</li>
             <li>空调WIFI西瓜，晚上有鱼有虾</li>
             <li>职场达人</li>
         </ol>
     </li>
     <li>你最喜欢的电影类型（）
         <ol tyoe="A">
             <li>动作剧</li>
             <li>喜剧</li>
             <li>爱情</li>
             <li>都一般，没有最喜欢的</li>
         </ol>
     </li>
    </ol>

二、表格

1.表格的作用

用来布局：内容比较完整

作为信息管理页面的控件使用

2.表格的标签

标签名	标签常用属性及标签含义
table	表格创建标签 border=边框线的宽度 align=表格在页面中的对齐方式 bgcolor=表格的背景色 background=背景图片
thead	语义标签，表示表格的头部
tr	表示表格的行，一个tr代表一行 align=行的对齐方式 bgcolor=行的背景色 background=行的背景图片
th	表示列头，文字会自动加粗、自动居中，是特殊的单元格 width=列宽
tbody	语义标签，表示表格的主体部分
td	表示表格中的单元格 align=单元格的对齐方式
caption	表示表格的标题

3.单元格的合并

跨列(合并列)：一个单元格占据多列,在<td>中添加属性colspan,该属性的值为占据的列数
跨行(合并行)：一个单元格占据多行,在<td>中添加属性rowspan,该属性的值为占据的行数

4.表格的边框属性

border,用来设置边框线的粗细

5.表格的填充属性

cellpadding,表示的是单元格的内容和单元格边框之间的距离

6.单元格的间距属性

cellspacing,表示的是单元格之间的距离

三、表单

1.用途

用户注册

收集信息

信息反馈-调查问卷

搜索引擎

2.标签

<form></form>

所有表单控件必须放在该标签下，常用属性有

action 表单数据提交的远程服务器的地址

method 表单数据的提交方式

3.表单控件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="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属性值必须一致

复选框:<input type='checkbox' />

数字：<input type='number' />

日期选择框：<input type='date' />

时间选择框：<input type='time' />

隐藏控件：<input type='hidden' />


select控件：下拉列表控件

       <select>
           <option value=''>列表项</option>
               <option value=''>列表项</option>
               <option value=''>列表项</option>
           </select>

textarea控件：文本区,可以输入多行、多列数据

       <textarea cols="30" rows="10"></textarea>

button控件：按钮控件 <button type='按钮的类型'></button>

       type属性的取值：

type='button'：普通按钮,不含默认的动作(功能)

type='reset'：重置按钮,重置表单控件

type='submit'：提交按钮,将表单控件的值提交给远程服务器

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

HTML之列表、表格、表单