镇楼图
Pixiv:_LM7_
〇、表格标签
生成表格
媒介：表格
作用：用一组标签生成一个表格
<table>定义表格标签
以下标签必须嵌套在table里
<tr>定义表格中的行(row)
<td>定义表格的单元格(data)
<th>定义表头单元格，会使文字加粗居中(head)
table表格属性
| 属性 | 作用 |
|---|---|
| align | 设置对齐方式 left表格向左对齐 center表格*对齐 right表格向右对齐 |
| border | 设置表格边框的宽度，默认为0(px) |
| cellpadding | 单元格内容与边框的距离(px) |
| cellspacing | 单元格之间的距离(px) |
| width | 规定表格的宽度(px或%) |
<!DOCTYPE html>
<html lang=zh-CN>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border=1 align="center" cellpadding="30" cellspacing="0">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>Alice</td> <td>female</td> <td>15</td></tr>
<tr><td>Wendy</td> <td>male</td> <td>19</td></tr>
</table>
</body>
</html>
注：一个表格元素内也可以放置其他的元素（图片、超链接等）
为了更好的表示一个表格的结构，我们可以用
<thead>、<tbody>标签
thead表示表头
tbody表示主体部分
<!DOCTYPE html>
<html lang=zh-CN>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border=1 align="center" cellpadding="30" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>female</td>
<td>15</td>
</tr>
<tr>
<td>Wendy</td>
<td>male</td>
<td>19</td>
</tr>
</tbody>
</table>
</body>
</html>
合并单元格
有的时候我们会用到合并单元格，HTML为td、th提供了两种属性实现合并
? 按方式来分：
? ■跨行合并rowspan="合并个数"（竖着来）
? ■跨列合并colspan="合并个数"（横着来）
<!DOCTYPE html>
<html lang=zh-CN>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border=1 align="center" cellpadding="30" cellspacing="0">
<thead>
<tr>
<th bgcolor="grey" colspan="5">个人简历</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名</td>
<td> </td>
<td>性别</td>
<td> </td>
<td rowspan="4">照片</td>
</tr>
<tr>
<td>婚姻状况</td>
<td> </td>
<td>出生年月</td>
<td> </td>
</tr>
<tr>
<td>民族</td>
<td> </td>
<td>政治面貌</td>
<td> </td>
</tr>
<tr>
<td>身高</td>
<td> </td>
<td>学历</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
一、无序列表
媒介：列表
作用：布局页面
无序列表的每一项左侧自动生成一个点
生成无序列表
<ul>用来定义无序列表的框架
<li>用来定义列表中的项
注：ul标签里只能存在li标签，而li标签里可以放其他标签
<h4>
特 销 水 果
</h4>
<ul>
<li>苹果</li>
<li>车厘子</li>
<li>榴莲</li>
</ul>
二、有序列表
媒介：列表
作用：布局页面
有序列表的左侧自动生成一个序数
注：ol标签里只能存在li标签，而li标签里可以放其他标签
生成有序列表
<ol>用来定义有序列表的框架
<li>用来定义列表中的项
<h4>
特 销 水 果 排 行 榜
</h4>
<ol>
<li>苹果</li>
<li>车厘子</li>
<li>榴莲</li>
</ul>
三、自定义列表
媒介：列表
作用：布局页面
自定义列表能生成一个标题，下面具有和上面相关的项
<dl>用来定义自定义列表的框架
<dt>用来定义自定义列表中的首项
<dd>用来定义自定义列表中的其他项
<dl>
<dt>友链链接</dt>
<dd><a href="https://www.baidu.com">sick wolf</a></dd>
<dd><a href="https://www.baidu.com">助教</a></dd>
<dd><a href="https://www.baidu.com">***</a></dd>
</dl>
四、表单
媒介：表单
作用:具有一定格式可填写的表格，主要负责数据采集的功能
组成部分:
■表单域（也就是表单的框架）
■表单元素
■提示信息
生成表单域
<form>用来生成表单的框架
| 属性 | 作用 |
|---|---|
| action | 数据采集后所接受的服务器地址 属性值为服务器url地址 |
| method | 表单数据的提交方式 get或post（暂时不用区分） |
| name | 表单的名称，用来区分其他表单 |
<input>表单元素
input可以使得用户输入数据，其核心属性是type，type可以定义不同类型的input，type具有以下属性值
| type属性值 | 含义 |
|---|---|
| text | 文本框，可以输入文本 |
| password | 密码框，可以输入密码，显示为·或* |
| radio | 单选按钮 |
| checkbox | 复选框 |
| hidden | 隐藏的输入字段 |
| submit | 提交按钮，会将表单数据发送给服务器 |
| image | 图像形式的提交按钮 |
| reset | 将表单的数据进行重置 |
| button | 这一般由JS来搭配使用，暂时不用考虑 |
| file | 可以提供文件上传的功能 |
input其他属性
input光有一个type属性无法满足一些制定的要求，比如你只用input的type属性去写一个性别的选择框会出现很诡异的情况——每个都能选
<form action="data.html" method="POST" name="register">
<!-- 单选按钮 -->
性别<br/>少男 <input type="radio"> 少女 <input type="radio">
保密 <input type="radio"><br/><br/>
</form>
为了解决这个问题，你需要学习更多属性来解决一些问题
| input其他属性 | 作用 |
|---|---|
| name | 用来区分不同input，也可以解决上述单选按钮可以多选的问题 |
| value | value为input的值，在text框能很显著的显示其作用 但最主要是为后台人员所使用 |
| checked | 默认首次加载时是否被选中 |
| minlength | 规定输入字段的最小长度 |
| maxlength | 规定输入字段的最大长度 |
提交、重置数据
<input type="submit" value="可以将值输入至此来改变按钮显示的文本"/>
在页面点击提交后，会将数据提交到指定服务器，在form属性中可以将method改成get这样你就知道提交了什么数据
另外可以使用reset按钮将数据重置
<input type="reset" value="可以将值输入至此来改变按钮显示的文本"/>
五、<label>标签
媒介:label
作用:改善用户体验，只要点击被label绑定的内容，即可完成一些相应操作
具有以下属性
| 属性 | 作用 |
|---|---|
| for | 指定一个id，被指定的元素可以通过label来完成操作 |
<label for="read">点我也可以选中checkbox</label>
我已阅读条例<input type="checkbox" name="read" id="read"/>
六、下拉表单
媒介:下拉表单
作用:提供一个可以下拉的选择框，同时可以限制一些选择
<select>定义一个下拉表单的框架
<option>定义下拉表单的选项，在option内可以写上selected选项表示初始默认选中什么
<p>选择职业</p>
<select>
<option>战士</option>
<option>法师</option>
<option>弓手</option>
<option selected>...</option>
</select>
七、文本域
媒介:文本域
作用:是一种可以输入多行文本的文本框
<textarea>用来定义一个文本域
你也可以用rows、cols来指定这个文本域的长宽（但实际上是用CSS来定义的，可以不用记这个）
<textarea rows="5" cols="5">
首次加载时的文本内容
</textarea>
END、例子——制作注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" width="300">
<tr>
<th align="center" colspan="2"><strong>注册页面</strong></th>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="boy"/><label for="boy">男</label>
<input type="radio" name="sex" id="gal"/><label for="gal">女</label>
</td>
</tr>
<tr>
<td>生日<br/></td>
<td>
<input type="date">
</td>
</tr>
<tr>
<td>所在地区<br/></td>
<td>
<input type="text" name="locale">
</td>
</tr>
<tr>
<td>婚姻状况<br/></td>
<td>
<input type="radio" name="marry">未婚
<input type="radio" name="marry">已婚
<input type="radio" name="marry">离婚
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select>
<option>---</option>
<option>初中</option>
<option>高中/中专</option>
<option>本科/大专</option>
<option>研究生</option>
<option>博士</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td><br/></td>
<td>
<input type="checkbox" checked>我同意此白嫖指南
</td>
</tr>
<tr>
<td><br/></td>
<td>
<input type="submit" value="点击注册">
</td>
</tr>
</table>
</body>
</html>