HTML表格、表单及其美化

一、列表

列表是信息资源的一种展示形式，使信息结构化、条理化

1、无序列表

• 没有顺序，每个<li></li>标签独占一行(块元素)
• 默认<li></li>标签项前面有个实心小圆点
• 每一项平级

语法格式如下

	<ul>
		<li>...</li>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>

2、有序列表

• 有顺序,每个<li></li>标签独占一行(块元素)
• 默认<li></li>标签项前面有顺序标记
• 一般用于排序类型的列表

语法格式如下

	<ol>
		<li>...</li>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ol>

3、自定义列表

• 没有顺序,每个<dt></dt>、<dd></dd>标签独占一行（块元素）
• 默认没有标记
• 一般用于一个标题下有一个或多个列表项的情况

语法格式如下

	<dl>
		<dt>水果</dt>
		<dd>香蕉</dd>
		<dd>苹果</dd>
		<dd>樱桃</dd>
	</dl>

4、列表样式

控制标记：list-style-type

• none：无标记符号
• disc：实心圆，默认类型
• circle：空心圆
• square：实心正方形
• decimal：数字

	<dl list-style-type:none>
		<dt>水果</dt>
		<dd>香蕉</dd>
		<dd>苹果</dd>
		<dd>樱桃</dd>
	</dl>

二、表格

1、表格基本语法

简单通用、结构稳定，表格结构如下

• 一对<tr></tr>标签代表一行
• 一对<th></th>标签代表首行
• 一对<td></td>标签代表一列

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">学生成绩</th>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>99</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>99</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

2、合并单元格

（1）合并列：colspan

• 合并 n 列

<td colspan="n">...</td>

（2）合并行：rowspan

• 合并 n 行

<td rowspan="n">...</td>

三、表单

1、表单基本标签<form></form>

所有表单元素放在表单基本标签中，标签基本属性：

• name：表单名
• method：表单提交方式（get、post）
• action：提交目的地

2、<input />标签属性

• 表单元素属性：type
• 文本宽度：size
• 输入的最大字符数：maxlength
• 元素的初始值：value

<input name="name" size="12" type="text" class="input" id="fname" value="123456" maxlength="6">

type属性值

（1）文本框：text

• 用于输入文本

（2）密码框：password

• 以密码形式输入文本，隐藏输入信息

（3）单选按钮：radio

• 在给出的按钮中做单选
• 注意 name 相同
• checked 为默认选择项

        <input type="radio" name="gen" class="input" value="男" checked/>男
        <input type="radio" name="gen" class="input" value="女" />女

（4）复选框：checked

• 多项选择
• 注意 name 相同
• checked 为默认选择项

    <p>
        爱好：
        <input type="checkbox" name="interest" value="sports" checked/>运动
        <input type="checkbox" name="interest" value="talk"/>聊天
        <input type="checkbox" name="interest" value="play"/>玩游戏
    </p>

（5）下拉框：select

• 下拉框选择值
• selected 为默认选择项

    <p>
        <select name="bmon" id="" size="1">
            <option value="" selected>[选择月份]</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
    </p>

（6）按钮：reset

• 重置按钮（清空表单中以填好的信息）

        <input type="reset" name="butRest" value="reset按钮">

（7）按钮：submit

• 提交按钮，提交表单信息

        <input type="submit" name="butSubmit" value="submit按钮">

（8）按钮：button

• 普通按钮

        <input type="button" name="butButton" value="button按钮" onclick="alert(this.value)">
        <button class="btn">按钮</button>2

（9）图片按钮：image

• 图片按钮
• src 为图片路径
• width、height 设置图片按钮大小

        <input type="image" src="images/1.jpg" width="300" height="200">

（10）多行文本域：textarea

• 用于输入多行文本内容
• cols 列数
• rows 行数

		<textarea name="showText" cols="30" rows="10">自行、活泼...</textarea>

（11）文件域：file

• 用于选择本地文件

        <input type="file" name="files"/>

（12）邮箱：file

• 自动验证邮箱格式是否正确

    <p>
        邮箱：
        <input type="email" name="email">
    </p>

（13）网址：url

• 自动验证网址格式是否正确

    <p>
        请输入网址：
        <input type="url" name="url">
    </p>

（14）数字：number

• 自动验证输入数字是否符合条件
• min：允许的最小值
• max：允许的最大值
• step：合法的数字间隔

    <p>
        请输入数字：
        <input type="number" name="num" min="0" max="100" step="10" />
    </p>

（15）滑块：range

• 滑块选择数字大小
• value：默认位置
• min：允许的最小值
• max：允许的最大值
• step：合法的数字间隔

    <p>
        <input type="range" name="range" min="0" max="100" step="10"/>
    </p>

（16）搜索框：search

    <p>
        <input type="search" name="sousou"/>
    </p> 

（17）隐藏域：hidden

• readonly：只读（input属性）
• disable：禁用（input属性）

    <p>
        <input type="hidden" value="666" name="userid" />
    </p> 

（18）表单标注

• 增强鼠标的可用性
• 自动将焦点转移到与该标注相关的表单元素上

<label for="pass">标注文本</label>
<input type="password" name="pass" id="pass">

四、CSS3高级选择器

1、层次选择器

（1）后代选择器：body p{...}

• body下所有子元素p都被选择

（2）子选择器：body>p{...}

• body下一级中子元素p都被选择

（3）相邻兄弟选择器：.active+p{...}

• 并列相邻的一个元素

（4）通用兄弟选择器：.active~p{...}

• 同级中的所有元素

2、结构伪类选择器

（1）p:first-child{...}

• 第一个子元素的元素 P

（2）p:last-child{...}

• 最后一个子元素的元素 P

（3）E F:nth-child(n){...}

• 选择父级元素E的第n个子元素;关键字为even(偶)、odd(奇)

（4）E:first-of-type

• 选择父元素内具有指定类型的第一个E元素

（5）E:last-of-type

• 选择父元素内具有指定类型的最后一个E元素

（6）E F:nth-of-type(n)

• 选择父元素内具有指定类型的第n个F元素

3、属性选择器

（1）a[id]{...}

• 选择匹配具有属性 id 的 a 元素

（2）a[id=first]{...}

• 选择匹配具有属性 id 的 a 元素，并且属性值为 val

（3）a[id^=f]{...}

• 选择匹配元素 a，且 a 元素定义了属性 id，其属性值是以 val 开头的任意字符串

（4）a[id$=t]{...}

• 选择匹配元素 a，且 a 元素定义了属性 id，其属性值是以 val 结尾的任意字符串

（5）a[id*=ir]{...}

• 选择匹配元素 a，且 a 元素定义了属性 id，其属性值包含了 val 的任意字符