列表
- 列表可分为有序列表、无序列表和定义列表
- 有序列表
<ol>
<ol type="列表类型" start="起始编号"> <li>...</li> </ol>
type的属性值：
1：数字（默认）
a：小写字母
A：大些字母
i：小写罗马数字
l：大写罗马数字
- 无序列表
<ul>
<ul type="列表类型"> <li>...</li> </ul>
type的属性值：
disc：实心圆（默认）
circle：空心圆
square：实心矩形
- 定义列表
<dl>
<dl> <dt>一个术语</dt> <dd>这个术语的定义</dd> </dl>
dl：定义一个定义列表
dt：定义了定义列表中的一个术语
dd：对定义列表中的术语提供定义
- 列表嵌套
<ul>
<li>列表
<ul>
<li>有序列表</li>
<li>无序列表</li>
<li>定义列表</li>
</ul>
</li>
</ul>
表格
- 表格用来组织结构化的信息，由许多单元格组成，表格的数据保存在单元格中。表格是由<table>来定义的，<caption>是表头，<tr>是表格的行，<td>是表格的列。
- 表格常用的属性：
- width：设置表格的宽
- height：设置表格的高
- align：设置表格的对齐方式
- border：设置表格的边框宽度
- cellpadding：设置内边距
- cellspacing:设置外边距
- 行分组
- 表格可以分为三个部分：表头、表主体和表尾。
-
表头：
<thead></thead> -
表主体：
<tbody></tbody> -
表尾：
<tfoot></tfoot> - 如九宫格就可以将第一行作为表头，第二行作为表主体，第三行作为表尾，但是在浏览器中显示的不会变化。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="就是喜欢浪">
<title>Document</title>
</head>
<body>
<table align="center" border="1" width="300"
height="300px" cellspacing="10"
cellpadding="10">
<caption>九宫格</caption>
<thead>
<tr align="center" valign="bottom">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr align="center" valign="bottom">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr align="center" valign="bottom">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tfoot>
</table>
</body>
</html>
九宫格.png
- 不规则表格
- 跨行：colspan
-
跨列：rowspan
下面是一个跨行跨列的表格
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="就是喜欢浪">
<title>Document</title>
</head>
<body>
<table border="1" bordercolor="red" width="300" height="300" align="center" cellspacing="0" cellpadding="20" >
<tr height="80" align="center" valign="top">
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
跨行跨列表格.png
-
嵌套表格
嵌套表格是在表格的一个单元格中再放置一个表格，就是在td中再包含一个table元素。
<!DOCTYPE html>
<html>
<head>
<title>嵌套表格</title>
<meta charset="UTF-8">
<meta name="Author" content="就是喜欢浪">
</head>
<body>
<table align="center" border="1" width="100"
height="50px" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td><table border="1">
<tr>
<td>a</td>
<td>b</td>
</tr>
</td>
</tr>
</table>
</body>
</html>
嵌套表格.png
表单
- 表单的作用
- 搜集不同类型的用户输入，通过form创建表单，在form中添加其他表单可以包含的控件元素。
- 用于显示信息，并提交到服务器。
- 表单元素
-
form定义表单
主要属性：- method：表单数据提交的方式，取值为get或post。get是将数据放在url中，并且对数据的大小有限制，不安全。post是不要将数据显示在url中，而且传输的数据一般无限制，安全。
- action：指定将数据提交到哪里。
- name：表单名称。
-
部分表单控件元素
- 表单可以包含许多不同的表单控件，表单控件元素用来让访问者输入信息
-
input是最重要的表单元素，<input>有很多形态，根据不同的type属性有不同的作用。
- type：text（文本输入）、password（密码）、radio（单选输入）、checkbox（多选输入）。PS：设置单选时一定要将name设置一致
- name：提交表单数据必须要有name属性
- required：设置表单控件必须填写
- readonly：设置内容只读
- value：设置默认值
- checked：设置radio和checkbox的默认值
- maxlength：设置最大字符数
-
Select下拉列表
- selected：默认选中项
- size：让用户看到几个选项
- option：列表项
-
textrara文本域
- cols：设置宽，用字符数设置
- rows：设置高
- label实现点击选项按钮和点击文本一样的效果，使用for来绑定另一个元素的id。
-
按钮
- 提交按钮
```<input type="submit"/>`
2. 重置按钮
<input type="reset"/>
3. 普通按钮
<input type="button"/>与JS搭配使用
<button></button>
- 隐藏域
<input type="hidden"/>
- 下面是一个表格
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="就是喜欢浪">
<title>Document</title>
</head>
<body>
<h1>修改个人信息</h1>
<form name="form1" method="post" action="">
<table border="1" width="300" height="400" cellspacing="0">
<tr>
<td width="100">姓名：</td>
<td>
<input name="user" type="text" required />
</td>
</tr>
<tr>
<td width="100">性别：</td>
<td>
<input type="radio" name="sex" value="man" checked/>男
<input type="radio" name="sex" value="women"/>女
</td>
</tr>
<tr>
<td width="100">爱好：</td>
<td>
<input name="like" type="checkbox" value="game" checked/>游戏
<input name="like" type="checkbox" value="siwim"/>游泳
<input name="like" type="checkbox" value="boll"/>球
<input name="like" type="checkbox" value="huaban"/>滑板
</td>
</tr>
<tr>
<td width="100">学历：</td>
<td>
<select name="xueli">
<option value="ben">本科</option>
<option value="zhuan">专科</option>
<option value="other" selected>其他</option>
</select>
</td>
</tr>
<tr>
<td width="100">意向工作城市：</td>
<td>
<select name="city" size="4">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>南昌</option>
</select>
</td>
</tr>
<tr>
<td width="100">个人描述；</td>
<td>
<textarea name="description" cols="50" rows="8">请输入个人描述
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input name="ispone" type="checkbox" id="isopen"/>
<label for="isopen">请不要公开我的信息</label>
<input name="serect" type="hidden" value="请不要公开我的信息"/><br/>
<input type="file" value="myphone"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="OK"/>
<input type="reset" value="重填"/></td>
</tr>
</table>
</form>
</body>
</html>
表单.png
