<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 关键字 供搜做引擎用-->
<meta name="keyword" content="xxx,xxx">
<!-- 网页描述 在网页上显示-->
<meta name="description" content="xx,xx,xx,xx">
<!-- 网页重定向 5秒跳转一次 -->
<!-- <meta http-equiv="refresh" content="5; http//:www.xiaomi.com"> -->
<link rel="stylesheet" href="">
<!-- 浏览器上面显示的图标 -->
<link rel="icon" href="xx/xx.icon">
<title>Document</title>
</head>
<body>
<!-- border是边框,cellspacing是单元格之间的距离 -->
<!-- cellpadding是内容到边框的距离 -->
<!-- allign:left,right,center -->
<!-- bgcolor:背景颜色 -->
<!-- valign内容垂直 top middle bottoms-->
<table border="5" width="500" height="100" cellspacing="20" cellpadding="15" align="center" bgcolor="red">
<tr>
<td align="center">1,1</td>
<td valign="top">1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</table>
<!-- table标准结构 -->
<!-- thead是头部 -->
<!-- tbody表示身体 -->
<!-- tfoot表示脚 -->
<!-- 这三个只是一个标记,在里面写属性没有,要在tr,td里写 -->
<table border="10" width="500" height="300" align="center">
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<!-- caption表示表头,自动居中 -->
<!-- colspan横向合并 rowspan纵向合并 -->
<!-- th是表格标题 和td用法一样-->
<table align="center" border="4" height="300" width="500">
<caption>表头</caption>
<tr>
<th colspan="2" rowspan="2"></th>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- 细线表格 -->
<!-- 思路:table表格设置背景色作为细线颜色,设置celspacing为1,每个单元格设置为白色 -->
<!-- bgcolor是背景颜色,bordercolder是边框颜色 -->
<table width="500" height="300" bgcolor="red" align="center" cellspacing="1">
<tr bgcolor="white">
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期h</th>
</tr>
<tr bgcolor="white">
<td rowspan="2">上午</td>
<td>1</td>
<td>语文</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr bgcolor="white">
<td>2</td>
<td>体育</td>
<td>音乐</td>
<td>几何</td>
<td>画画</td>
<td>舞蹈</td>
</tr>
</table>
<!-- input属性:maxlength和minlength限定输入输出最大最小字符 -->
<input type="text" maxlength="" minlength="">
<!-- multiple="multiple" 多选 -->
<!-- optgroup是分组 -->
<select name="" id="" multiple="multiple">
<optgroup label="数字">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</optgroup>
<optgroup label="字母">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
</optgroup>
</select>
<fieldset>分组
<legend>分组信息</legend>
<form action="">
<input type="text">
</form>
</fieldset>
<!-- 输入网址,日期,时间,邮件,数字的的控件 -->
<input type="url">
<input type="data">年月日
<input type="time">几点几分
<input type="email">邮件
<input type="number" step="5">数字
每次增加5个1+5+5+5...
<!-- 滑块控件 --><!-- 一次滑50 -->
<input type="range" step="50">
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 关键字 供搜做引擎用-->
<meta name="keyword" content="xxx,xxx">
<!-- 网页描述 在网页上显示-->
<meta name="description" content="xx,xx,xx,xx">
<!-- 网页重定向 5秒跳转一次 -->
<!-- <meta http-equiv="refresh" content="5; http//:www.xiaomi.com"> -->
<link rel="stylesheet" href="">
<!-- 浏览器上面显示的图标 -->
<link rel="icon" href="xx/xx.icon">
<title>Document</title>
</head>
<body>
<!-- border是边框,cellspacing是单元格之间的距离 -->
<!-- cellpadding是内容到边框的距离 -->
<!-- allign:left,right,center -->
<!-- bgcolor:背景颜色 -->
<!-- valign内容垂直 top middle bottoms-->
<table border="5" width="500" height="100" cellspacing="20" cellpadding="15" align="center" bgcolor="red">
<tr>
<td align="center">1,1</td>
<td valign="top">1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</table>
<!-- table标准结构 -->
<!-- thead是头部 -->
<!-- tbody表示身体 -->
<!-- tfoot表示脚 -->
<!-- 这三个只是一个标记,在里面写属性没有,要在tr,td里写 -->
<table border="10" width="500" height="300" align="center">
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<!-- caption表示表头,自动居中 -->
<!-- colspan横向合并 rowspan纵向合并 -->
<!-- th是表格标题 和td用法一样-->
<table align="center" border="4" height="300" width="500">
<caption>表头</caption>
<tr>
<th colspan="2" rowspan="2"></th>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- 细线表格 -->
<!-- 思路:table表格设置背景色作为细线颜色,设置celspacing为1,每个单元格设置为白色 -->
<!-- bgcolor是背景颜色,bordercolder是边框颜色 -->
<table width="500" height="300" bgcolor="red" align="center" cellspacing="1">
<tr bgcolor="white">
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期h</th>
</tr>
<tr bgcolor="white">
<td rowspan="2">上午</td>
<td>1</td>
<td>语文</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr bgcolor="white">
<td>2</td>
<td>体育</td>
<td>音乐</td>
<td>几何</td>
<td>画画</td>
<td>舞蹈</td>
</tr>
</table>
<!-- input属性:maxlength和minlength限定输入输出最大最小字符 -->
<input type="text" maxlength="" minlength="">
<!-- multiple="multiple" 多选 -->
<!-- optgroup是分组 -->
<select name="" id="" multiple="multiple">
<optgroup label="数字">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</optgroup>
<optgroup label="字母">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
</optgroup>
</select>
<fieldset>分组
<legend>分组信息</legend>
<form action="">
<input type="text">
</form>
</fieldset>
<!-- 输入网址,日期,时间,邮件,数字的的控件 -->
<input type="url">
<input type="data">年月日
<input type="time">几点几分
<input type="email">邮件
<input type="number" step="5">数字
每次增加5个1+5+5+5...
<!-- 滑块控件 --><!-- 一次滑50 -->
<input type="range" step="50">
</body>
</html>