本文详细介绍了HTML的基础知识，包括meta标签的charset属性，表格的创建及属性，如border、cellspacing和cellpadding，以及表单的使用，如action和method属性。还强调了标签的语义化，对SEO和无障碍访问的重要性。最后提到了HTML5的新表单控件，并给出了实战案例——京东会员注册页面的制作。
回顾html基础过度型和严格型
html:xt+tab键生成html过度型结构 xhtml
html:xs+tab键生成html严格型结构
！+tab 生成html5标签结构,如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>1.meta的属性
charset utf-8 通用字符集编码 <meta charset="UTF-8">
<meta charset="UTF-8">
<!-- 关键字 -->
<meta name="keywords" content="多个关键字描述">
<!-- 网页描述 -->
<meta name="description" content="在这里对网页进行描述">
<!-- 网页重定向5秒后跳转到百度 -->
<meta http-equiv="refresh" content="5;http://www.baidu.com">
<!-- 链接外部样式表文件XXX.css -->
<link rel="stylesheet" href="XXX.css">
<!-- link添加icon图标1.修改rel的属性为icon,href添加icon文件 -->
<link rel="icon" href="XXX.ico">2.表格 <table></table>
属性：boder（边框）、width、height、cellspacing（单元格与单元格的距离）、cellpadding（内容距边框的距离）、align（表居中center、居左left、居右right）可放在table中控制表格的位置，发那个在tr或td中表格里的内容居中、bgcolor背景颜色
<!--表格2X3 -->
<table border="1" width="500px" height="300px" cellspacing="0" cellpadding="10" align="center">
<tr align="center"> <!--行-->
<td>1</td> <!--单元格 列 -->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>注意：快速新建表格teble>tr*2>td*3+tab键
单元格td合并
列合并 colspan="2"
行合并rowspan="2"
<table border="1" width="500px" height="300px" cellspacing="0" cellpadding="10" align="center" bgcolor="yellow">
<caption>为表格添加表头</caption>
<tr align="center">
<td colspan="2">1 2</td>
<!-- <td>2</td> -->
<td rowspan="2">3 6</td>
</tr>
<tr>
<td>4</td>
<td rowspan="2">5 8</td>
<!-- <td>6</td> -->
</tr>
<tr>
<td>7</td>
<!-- <td>8</td> -->
<td>9</td>
</tr>
</table>表格的标题，边框颜色，内容垂直对齐方式
<table border="1" bordercolor="red" width="500px" height="300px">
<!-- 标题设置带有格式 -->
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td valign="bottom">1</td>
<td valign="top">2</td>
<td valign="middle">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>细线表格的设置（线条比默认的细）设置单元格背景颜色覆盖表格背景颜色，控制单元格之间的距离
<table width="500px" height="300px" bgcolor="yellow" cellspacing="1">
<tr>
<td bgcolor="white"></td>
<td bgcolor="white"></td>
<td bgcolor="white"></td>
</tr>
<tr>
<td bgcolor="white"></td>
<td bgcolor="white"></td>
<td bgcolor="white"></td>
</tr>
</table>细线表格之课程表
<table width="300px" height="200px" bgcolor="green" cellspacing="1" align="center">
<caption>课程表</caption>
<tr bgcolor="white">
<th colspan="2"></th>
<!-- <th></th> -->
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr bgcolor="white">
<td rowspan="2" valign="middle">上午</td>
<td width="30">1</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr bgcolor="white">
<!-- <td></td> -->
<td width="30">2</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr bgcolor="white">
<td rowspan="2" valign="middle">下午</td>
<td width="30">3</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr bgcolor="white">
<!-- <td></td> -->
<td width="30">4</td>
<td>物理</td>
<td>物理</td>
<td>物理</td>
<td>物理</td>
<td>物理</td>
</tr>
</table>表格的标准结构，对seo有好处
<!-- 表格的标准结构 -->
<table border="1" width="500px" height="300px">
<!-- 表头 -->
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<!-- 表内容 -->
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>3.表单<form></form>
表单的作用是搜集信息，常用个人信息注册
表单的组成：提示信息、表单控件、表单域
<form action="" method="GET">
用户名：<input type="text" name="username">
密码：<input type="password" name="password"><br>
<input type="submit">
</form>
属性：action：处理信息
method="get | post"
get通过地址栏提供（传输）信息，安全性差
post通过action来处理信息，安全性高
| 属性 | 说明 |
| type | 指定元素的类型。text（文本）、password（密码）、checkbox（）、radio（单选框）、submit、reset、file、hidden、image 和 button，默认为 text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type 为 radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text 或 password 时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否是被选中 |
| readonly | 将输入设置只读状态，不能编辑 |
| disabled | 输入框为未激活状态 |
1.表单之文本输入框、密码输入框、单选框
<form action="" method="post">
用户名：<input type="text" name="username">
密码：<input type="password" name="password"><br>
<!-- 单选框-->
性别
<input type="radio" name="gender" checked="cheaked">男
<input type="radio" name="gender">女
<input type="submit">
</form>注意：在单选框中只有将name的值设置相同才能实现单选；checked设置默认选择项
2.表单之下拉列表
<!-- 下拉列表 -->
省：
<!-- 默认 -->
<select>
<option selected="selected">湖北</option>
<option >湖南</option>
<option >河北</option>
</select>
<!-- 多选 -->
<select multiple="multiple">
<option >湖北</option>
<option >湖南</option>
<option >河北</option>
</select>
市（区）：
<select>
<optgroup label="湖北省">
<option value="1">襄阳市</option>
<option value="2">武汉市</option>
</optgroup>
<optgroup label="湖南省">
<option value="1">长沙市</option>
<option value="2">武汉市</option>
</optgroup>
</select>3.表单之多选框、按钮、信息分组
<fieldset>
<legend>多选框、按钮、分组信息</legend>
<!-- 多选框 -->
水果：
<input type="checkbox" checked="checked">苹果
<input type="=checkbox">梨
<input type="checkbox">西瓜
<br>
<!-- 上传控件 -->
上传文件：<input type="file">
<!-- 文件提交按钮 可以提交信息按钮 -->
<input type="submit">
<!-- 普通按钮不能提交信息，配合JS使用 -->
<input type="button" value="普通按钮">
<!-- 图片按钮 -->
<input type="image" src="XXX.jpg">
<!-- 重置按钮 -->
<input type="reset">
</fieldset>4.表单之多行文本框
<!-- 多行文本框 字符长度cols、文本行数rows -->
<textarea cols="30" rows="10"></textarea>5.html5之表单控件
<form action="" method="post">
<fieldset>
<legend>H5控件</legend>
<!-- 网址控件 -->
<input type="url">
<input type="submit">
<br>
<input type="date">
<input type="submit">
<br>
<input type="time">
<input type="submit">
<br>
<input type="email">
<input type="submit">
<br>
<input type="number" step="2">
<input type="submit">
<br>
<input type="range">
<input type="submit">
</fieldset>
</form>4.标签语义化
好的语义化的网站标准是去掉样式表文件之后，结构依然很清晰。
1.网页结构合理
2.有利于seo：和搜索引擎建立良好的沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取
3.方便其他设备解析（屏幕阅读器、盲人阅读器、移动设备）
4.便于团队开发和维护
注意：
1.尽可能少使用无语义的标签div、span
2.在语义不明显时，既可以使用div或者p时，尽量使用p，p自带上下间距，对兼容特殊终端有利
3.不要使用纯样式标签，如：b、font、u等，改设置CSS
4.需要强调的文本，可以包含在strong或者em标签中
5.实战之京东会员
<table border="1" width="400px" height="400px" cellspacing="0" align="center" bgcolor="pink">
<tr>
<td colspan="2" align="center">京东会员</td>
<!-- <td></td> -->
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text" value="请输入用户名" maxlength="6">
<font color="red" size="2">最多输入6个字符</font>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" maxlength="6">
<font color="red" size="2">最多输入6个字符</font>
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text">
<br>
<br>
<img src="yzm.jpg" alt="验证码图片" width="100px">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<a href="登陆.html">登陆</a>|
<a href="注册.html">用户注册</a>
</td>
<!-- <td></td> -->
</tr>
</table>效果图
注册.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<form action="1.php" method="post">
<fieldset>
<legend>账户信息</legend>
<font color="red">*</font>用户名：<input type="text">
<br>
<br>
<font color="red">*</font>密 码：<input type="password">
<br>
<br>
性 别：<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender">女
</fieldset>
<fieldset>
<legend>公司信息</legend>
公司名称：<input type="text">
<br>
<br>
公司所在的地址：
<select>
<option selected="selected">--请选择---</option>
<option>湖北省</option>
<option>湖南省</option>
</select>
<select>
<option selected="selected">--请选择---</option>
<!-- 分组 -->
<optgroup label="湖北省">
<option>襄阳市</option>
</optgroup>
<optgroup label="湖南省">
<option>长沙市</option>
</optgroup>
</select>
<select>
<option selected="selected">--请选择---</option>
<option>襄阳市</option>
<option>长沙市</option>
</select>
<br>
<br>
购买类型用途：<input type="checkbox" checked="checked">IT <input type="checkbox">设备通讯 <input type="checkbox">大家电 <input type="checkbox">办公耗材
<br>
<br>
公司行业：
<select multiple="multuple">
<option>IT行业</option>
<option>计算机软件</option>
<option>市场推广</option>
<option>广告</option>
</select>
<br>
<br>
公司介绍：
<textarea cols="50" rows="10"></textarea>
<br>
<br>
营业执照上传：<input type="file">
<br>
<br>
<input type="image" src="reg.jpg">
</fieldset>
</form>
</body>
</html>效果图：
扫一扫
4105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
