## 列表标签
### 1、无序列表`<ul>`，无序列表中的每一项是`<li>`
```html
<ul>
<li>默认1</li>
<li>默认2</li>
<li>默认3</li>
</ul>
```
**属性：**
- `type="属性值"`。属性值： `disc`(实心原点，默认)，`square`(实心方点)，`circle`(空心圆)。
列表之间是可以**嵌套**的。代码：
```html
<ul>
<li><b>北京市</b>
<ul>
<li>海淀区</li>
</ul>
</li>
</ul>
```
**li里面什么都能放，甚至可以再放一个ul**。
```css
list-style-position: inside /* 给 ul 设置这个属性后，将小圆点包含在 li 元素的内部 */
```
### 2、有序列表`<ol>`
**属性：**
- `type="属性值"`。属性值：1(阿拉伯数字，默认)、a、A、i、I。结合`start`属性表示`从几开始`。
```html
<ol type="1">
<li>呵呵</li>
</ol>
<ol type="i" start="4">
<li>哈哈</li>
</ol>
```
### 3、定义列表`<dl>`
备注：dt、dd只能在dl里面
```html
<dl>
<dt>购物指南</dt>
<dd>
<a href="#">购物流程</a>
<a href="#">会员介绍</a>
<a href="#">生活旅行</a>
</dd>
</dl>
```
## 表格标签:`<table>`表示。
一个表格`<table>`是由每行`<tr>`组成的，每行是由每个单元格`<td>`组成的。
```html
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
```
例如，3行4列的单元格：3个tr 4个td
**`<table>`的属性：** (记觉得重要的)
- `border`：边框。像素为单位。
- `style="border-collapse:collapse;"`：单元格的线和表格的边框线合并（表格的两边框合并为一条）
- `bordercolor`：表格的边框颜色。
- `cellpadding`：单元格内容到边的距离，像素为单位。设置属性`dir="rtl"`，指的是内容到右边那条线的距离。
- `cellspacing`：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
- `bgcolor="#99cc66"`：表格的背景颜色。
- `background="路径src/..."`：背景图片。
- `bordercolorlight`：表格的上、左边框，以及单元格的右、下边框的颜色
- `bordercolordark`：表格的右、下边框，以及单元格的上、左的边框的颜色
- `dir`：公有属性，单元格内容的排列方式(direction)。 可以 取值：`ltr`：从左到右（left to right，默认），`rtl`：从右到左（right to left）
单元格带边框的效果：
```css
style="border-collapse:collapse;"
```
### `<tr>`：行
**属性：**
- `dir`：公有属性，设置这一行单元格内容的排列方式。可以取值：
- `ltr`：从左到右（left to right，默认）
- `rtl`：从右到左（right to left）
- `align="center"`：一行的内容水平居中显示，取值：left、center、right
- `valign="center"`：一行的内容垂直居中，取值：top、middle、bottom
### `<td>`：单元格
**属性：**
- `align`：内容的横向对齐方式。属性值：left right center。
- `valign`：内容的纵向对齐方式。属性值：top middle bottom
- `background`：设置这个单元格的背景图片。
### 单元格的合并
单元格的属性：
- `colspan`：横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。
- `rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。
### `<th>`：加粗的单元格。相当于`<td>` + `<b>`
### `<caption>`：表格的标题。使用时和`tr`标签并列
- 属性：`align`，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom
## 表单标签:`<form>`表示，用于与服务器的交互。
**属性：**
- `name`：表单的名称，用于JS来操作或控制表单时使用；
- `id`：表单的名称，用于JS来操作或控制表单时使用；
- `action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
- `method`：表单数据的提交方式，一般取值：get(默认)和post
注意：表单和表格嵌套时，是在`<form>`标记中套`<table>`标记。
### `<input>`：输入标签（文本框）'用于接收用户输入。
```html
<input type="text" />
```
**属性：**
- **`type="属性值"`**：文本类型。属性值可以是：
- `text`（默认）
- `password`：密码类型
- `radio`：单选按钮，如果想互斥，必须要有相同的name属性。
- `checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。
- `checked`：将单选按钮或多选按钮默认处于选中状态。当`<input>`标签设置为`type="radio"`或者`type=checkbox`时，可以用这个属性。
- `hidden`：隐藏框，在表单中包含不希望用户看见的信息
- `button`：普通按钮，结合js代码进行使用。
- `submit`：提交按钮，传送当前表单的数据给服务器或其他程序处理。
- `reset`：重置按钮，清空当前表单的内容，并设置为最初的默认值
- `image`：图片按钮。
- `file`：文件选择框。
- **`value="内容"`**：文本框里的默认内容（已经被填好了的）
- `size="50"`：表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。
注意**size属性值的单位不是像素哦**。
- `readonly`：文本框只读，不能编辑。
- `disabled`：文本框只读，不能编辑，光标点不进去。属性值可以不写。
```html
<form>
姓名：<input value="呵呵" >逗比<br>
昵称：<input value="哈哈" readonly=""><br>
名字：<input type="text" value="name" disabled=""><br>
密码：<input type="password" value="pwd" size="50"><br>
性别：<input type="radio" name="gender" id="radio1" value="male" checked="">男
<input type="radio" name="gender" id="radio2" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="button" value="普通按钮"><br>
<input type="image" value="图片按钮1"><br>
<input type="image" src="1.jpg" width="800" value="图片按钮2"><br>
<input type="file" value="文件选择框">
</form>
```
### `<select>`：下拉列表标签
**属性：**
- `multiple`：可以对下拉列表中的选项进行多选。可以写成 `multiple=""`，`multiple="multiple"`。
- `size="3"`：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
- `<option>`标签的属性：`selected`：预选中。没有属性值。
```html
<form>
<select>
<option>小学</option>
<option selected="">研究生</option>
</select>
<br><br><br>
<select size="3">
<option>高中</option>
<option>研究生</option>
</select>
<br><br><br>
<select multiple="">
<option>小学</option>
<option selected="">大学</option>
<option>研究生</option>
</select>
<br><br><br>
</form>
```
### `<textarea>`标签：多行文本输入框
**属性：**
- `rows="4"`：指定文本区域的行数。
- `cols="20"`：指定文本区域的列数。
- `readonly`：只读。
```html
<form>
<textarea name="txtInfo" rows="4" cols="20">1、不爱摄影不懂设计的程序猿不是一个好的产品经理。</textarea>
</form>
```
### `<label>`标签
```html
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
```
```html
<input type="checkbox" id="kk" />
<label for="kk">10天内免登陆</label>
```
扫一扫
2375
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
