脑图如下
1.表格
1.1表格标签
1.<table>：表格标签；双标签。
2.<tr>：行标签； 双标签。
3.<td>：单元格标签；双标签。
总结：表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
实现代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>黎明</td> <td>男</td> <td>55</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>54</td></tr>
<tr><td>张学友</td> <td>男</td> <td>55</td></tr>
</table>
</body>
</html>
复制代码结果如下：
4.<th>：表头标签；默认加黑，加粗，居中;双标签。
代码如下：
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>黎明</td> <td>男</td> <td>55</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>54</td></tr>
<tr><td>张学友</td> <td>男</td> <td>53</td></tr>
</table>
</body>
</html>
复制代码结果如下：
5.<caption>：表格标题；默认显示外部居中；双标题。
代码如下：
<html>
<body>
<h4>这个表格有一个标题，以及粗边框：</h4>
<table >
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
复制代码结果如下:
不常用（了解）
6.<thead>：结构头；双标签。
7.<tbody>：结构体；双标签。
8.<tfoot>：结构底；双标签。
1.2表格属性
1.border：表格的边框
2.width:宽度
3.height：高度
4.cellspacing：单元格与单元格之间的距离
5.align: left/center/right
注意： 当给表格设置居中整个表格会居中（文字不会居中） 当指定tr 或者td 文字居中
6.cellspadding：单元格与内容之间的距离
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- align为居中 border=边框 cellspacing=单元格与单元格的距离 cell padding为单元格与文字的距离 -->
<table align="center" border="1" cellspacing="0" cellpadding="20" width="500px" height="240px">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>刘德华</td> <td>男</td> <td>56</td></tr>
<tr><td>黎明</td> <td>男</td> <td>55</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>54</td></tr>
<tr><td>张学友</td> <td>男</td> <td>53</td></tr>
</table>
</body>
</html>
复制代码运行结果：
7.colspan:列合并
8.rowspan：行合并
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
<!-- 跨列去掉的单元格<td></td> -->
</tr>
<tr>
<td rowspan="2"></td>
<td ></td>
<td></td>
</tr>
<tr>
<!-- 跨行去掉的单元格<td></td> -->
<td></td>
<td></td>
</tr>
<!-- 跨行合并：rowspan="合并单元格的个数" -->
<!-- 跨列合并：colspan="合并单元格的个数" -->
<!-- 行竖列横 -->
</table>
</body>
</html>
复制代码运行结果：
2. 列表
1.无序列表
<ul><li></li></ul>
复制代码代码如下：
复制代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body>
<h4>你喜欢的食物</h4>
<ul>
<!-- 无序列表的各个列表项之间没有顺序之分，是并列关系，ul里面只能放li li里面可以放任何标签 -->
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
复制代码运行结果：
2.有序列表
<ol><li></li></ol>
复制代码代码如下：
复制代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<h4>好吃排名</h4>
<ol>
<!-- ol里面只能嵌套li，li里面可以放任何 -->
<li>榴莲 1W</li>
<li>臭豆腐 1K</li>
<li>鲱鱼罐头 100</li>
</ol>
</body>
</html>
复制代码运行结果：
3.自定义列表
<dl><dt></dt><dd></dd></dl>
复制代码代码如下：
复制代码<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表</title>
</head>
<body>
<dl>
<!-- dl里面只能放dt和dd，dt和dd数量是不限制的，一般一个dt有几个dd -->
<!-- dl标签用于定义描述列表（或定义列表）dt（定义项目/名字）dd(描述项目/名字) -->
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
</body>
</html>
复制代码运行结果：
3.表单
3.1 input属性
1.text：文本框
2.password：密码框
3.radio：单选按钮
4.checkbox：复选框
5.button：普通按钮
6.reset：重置按钮 需要配合form表单才有作用
7.submit：提交按钮
8.image 属性 src
9.file 文件按钮 上传图片
## **属性说明**
name属性
1.发送后台......
2.name的标识 对于单选按钮 只能选择一个
复制代码value：文本框默认显示的文字
checked：默认选中
可以写一个属性 也可以 属性名=属性值
label用法
1.<label>请输入 <input type="text"> <input type="text"></label>
2.`<label for="a">`请输入`</label>` `<input type="text" id="a">`
代码如下：
复制代码<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>input 表单元素</title>
</head>
<body>
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" > <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> 人妖 <input type="radio" name="sex" value="人妖"> <br>
<!-- checkbox 复选框 可以实现多选 -->
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file" >
</form>
</body>
</html>
复制代码运行结果：
3.2文本域
<textarea>：用户留言；双标签；可以设置每行显示几个字符，显示几行文字后需下滑才能看到后面的文字。
属性说明：
cols=”50″：每行50个字符。
rows=”5″：显示5行。
代码如下：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>textarea 文本域</title>
</head>
<body>
<form>
今日反馈:
<textarea cols="50" rows="5">
我
来
留
言
啦
啦
</textarea>
</form>
</body>
</html>
复制代码
3.3下拉表单
<select>：双标签
属性：
selected：设置改内容为默认选择的内容。
代码如下：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>select下拉表单</title>
</head>
<body>
<form>
籍贯:
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>
复制代码运行结果：
第二天结束啦，每天继续，冲啊！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
