一、表格、框架和层
(一)与表相关的标记
<table>...</table>表标记
<tr>...</tr>行标记
<td>...</td>单元格标记
<th>...</th>表头单元格标记
<caption>...<caption>标题标记
(二)单元间隔和单元填充
cellspacing——定义单元格之间的间距(以像素为单位)
cellpadding——定义表的单元格边界与单元格内容之间的间距(以像素为单位)
<html>
<head>
<meta http-equiv="Content-Type" content ="text/html; charset=utf-8"/>
<title>我的HTML</title>
</head>
<body>
<div>
<!-- 表格元素table放在最外面,border代表边框宽度 -->
<table border="2" align="center">
<!-- caption为表格标题,紧跟table元素 -->
<caption>信息统计</caption>
<!-- tr代表行 -->
<tr>
<!-- th代表加粗单元格,一般放置标题 -->
<th>姓名</th>
<th>性别</th>
<th>分数</th>
</tr>
<tr>
<!-- td代表普通单元格,一般放置数值 -->
<td>Robdert</td>
<!-- align水平对齐方式:left、center、right -->
<!-- valign垂直对齐方式:top、middle、bottom -->
<td align="center" valign="top">M</td>
<td>80</td>
</tr>
<tr>
<td>Mary</td>
<td>F</td>
<td>18</td>
</tr>
</table>
<table border="2" align="center">
<tr>
<th colspan="3">第一学期</th>
<th colspan="3">第二学期</th>
</tr>
<tr>
<td>数学</td>
<td>科学</td>
<td>英语</td>
<td>数学</td>
<td>科学</td>
<td>英语</td>
</tr>
<tr>
<td>98</td>
<td>95</td>
<td>80</td>
<td>95</td>
<td>87</td>
<td>88</td>
</tr>
</table>
<!-- cellspacing代表单元格之间的距离,cellpadding代表单元格边框与字之间的距离 -->
<table border="2" align="center" cellspacing="20" cellpadding="20">
<tr>
<th colspan="2"></th>
<th>螺母</th>
<th>螺栓</th>
<th>锤子</th>
</tr>
<tr>
<th rowspan="3">第一季度</th>
<td>一月</td>
<td>2000</td>
<td>1800</td>
<td>1200</td>
</tr>
<tr>
<td>二月</td>
<td>2500</td>
<td>3000</td>
<td>3200</td>
</tr>
<tr>
<td>三月</td>
<td>3200</td>
<td>1000</td>
<td>2400</td>
</tr>
</table>
</div>
</body>
</html>
(三)表单的设计
form表单是HTML的一个重要部分,主要用于采集和提交用户输入的信息。
1、<input>元素type属性分类
input type =“text” | 单行文本输入框 |
input type =“password” | 密码输入框 |
input type =“file” | 上传文件输入框 |
input type =“checkbox” | 复选框 |
input type =“radio” | 单选框 |
input type =“submit” | 提交按钮 |
input type =“reset” | 重置按钮 |
input type =“button” | 普通按钮 |
input type =“image” | 图片按钮 |
input type =“hidden” | 隐藏输入框 |
<html>
<head>
<meta http-equiv="Content-Type" content ="text/html; charset=utf-8"/>
<title>我的HTML</title>
</head>
<body background="6.jpg">
<div align="center">
<form action="https://www.baidu.com/" method="get">
<input type="text" name="name" placeholder="请输入账号"/>
</br>
<input type="password" name="password" placeholder="请输入密码"/>
</br>
<font color="white">
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>女
</br>
<input type="checkbox" name="inster" value="0"/>动漫
<input type="checkbox" name="inster" value="1"/>小说
<input type="checkbox" name="inster" value="2"/>游戏
<input type="checkbox" name="inster" value="3"/>美食
</br>
<select name="address">
<option value="0">山东</option>
<option value="0">菏泽</option>
<option value="0">曹县</option>
<option value="0">牛逼</option>
<option value="0">666</option>
</select>
</br>
<textarea name="remark">
</textarea>
</form>
</div>
</body>
</html>