请先学习往期内容：HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签
作业分析
上一篇《HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签》给大家留了一个作业：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<!-- Banner -->
<div align="center">
<img
src="https://img-blog.csdnimg.cn/db53b5efbe4943a48b862bfc7a3826ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdWl1aW5nJ3M=,size_16,color_FFFFFF,t_70,g_se,x_16">
</div>
<hr>
<!-- content -->
<div>
<div>
<h2>HTML版本</h2>
<p>
 
HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由CERN的
<a href="#">TimBerners-Lee</a>
发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
[5] HTML历史上有如下版本： [5]
</p>
<ul>
<li>
HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]
</li>
<li>
HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 [5]
</li>
<li>
HTML 3.2：1997年1月14日，W3C推荐标准。 [5]
</li>
<li>
HTML 4.0：1997年12月18日，W3C推荐标准。 [5]
</li>
<li>
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 [5]
</li>
<li>
HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
[6]
</li>
</ul>
<p>
 
HTML在Web迅猛发展的过程中起着重要作用，有着重要的地位。但随着网络应用的深入，特别是电子商务的应用，HTML过于简单的缺陷很快凸现出来：HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式，但没有语义结构，即HTML显示数据是按照布局而非语义的。随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。
</p>
<p>
 
总而言之，HTML的缺点使其交互性差，语义模糊，这些缺陷难以适应Internet飞速发展的要求，因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。
</p>
</div>
<hr>
<div>
<h2>特点</h2>
 
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4]
<ol type="1" start="1">
<li>
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
</li>
<li>
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
</li>
<li>
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
</li>
<li>
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。 [4]
</li>
</ol>
</div>
</div>
</body>
</html>
优化版本：
- 样式与ui分离
- H5语义化
- 禁止图片拖动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/* Global style start */
html,body{
margin: 0;
padding: 0;
}
p {
text-indent: 2em;
}
/* end */
/* Entire paragraph content style */
.content{
margin: auto;
width: 768px;
}
/* Banner style start*/
header{
text-align: center;
margin-top:50px;
}
header > img{
width: 400px;
}
/* end */
</style>
<body>
<div class="content">
<!-- Banner -->
<header>
<img src="https://img-blog.csdnimg.cn/db53b5efbe4943a48b862bfc7a3826ff.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdWl1aW5nJ3M=,size_16,color_FFFFFF,t_70,g_se,x_16" draggable="false">
</header>
<hr>
<!-- content - text -->
<section>
<h2>HTML版本</h2>
<p>
HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由CERN的
<a href="#">TimBerners-Lee</a>
发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
[5] HTML历史上有如下版本： [5]
</p>
<ul>
<li>
HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]
</li>
<li>
HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 [5]
</li>
<li>
HTML 3.2：1997年1月14日，W3C推荐标准。 [5]
</li>
<li>
HTML 4.0：1997年12月18日，W3C推荐标准。 [5]
</li>
<li>
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 [5]
</li>
<li>
HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer
8及以前的版本不支持。
[6]
</li>
</ul>
<p>
HTML在Web迅猛发展的过程中起着重要作用，有着重要的地位。但随着网络应用的深入，特别是电子商务的应用，HTML过于简单的缺陷很快凸现出来：HTML不可扩展。HTML不允许应用程序开发者为具体的应用环境定义自定义的标记。HTML只能用于信息显示。HTML可以设置文本和图片显示方式，但没有语义结构，即HTML显示数据是按照布局而非语义的。随着网络应用的发展，各行业对信息有着不同的需求，这些不同类型的信息未必都是以网页的形式显示出来。例如。当通过搜索引擎进行数据搜索时，按照语义而非按照布局来显示数据会具有更多的优点。
</p>
<p>
总而言之，HTML的缺点使其交互性差，语义模糊，这些缺陷难以适应Internet飞速发展的要求，因此一个标准、简洁、结构严谨以及可高度扩展的XML就产生了。
</p>
</section>
<hr>
<section>
<h2>特点</h2>
<p>
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：[4]
</p>
<ol type="1" start="1">
<li>
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
</li>
<li>
可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
</li>
<li>
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
</li>
<li>
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
[4]
</li>
</ol>
</section>
</div>
</div>
</body>
</html>
表格标签
表格
表格是行和列排列而成的结构，常用来组织和展现数据。下图展示了一个表格的基本形态，并对表格的常用元素给出了标注。
一般而言，表格中除了表格标题外，通常还包含如图所示的其他三类元素。其中，单元格是表格的最小单位，多个单元格的纵横排列形成了表格，由一个或多个单元格的横向排列形成了行，纵向排列则形成了列。
对应于 HTML 文档，一个表格由表格标签<table>、表格行标签 <tr>、单元格标签<td> 组成，还可以包括标题标签 <caption> 、列标题标签 <th>，通过这些标签能构建起 HTML 中的表格。
创建表格
| 标签 | 说明 | 选项 |
|---|---|---|
| table | table 元素用来定义表格，整个表格内容都包含在 <table> 和 </table> 标签之中 |
必选 |
| tr | tr 元素用来定义表格中的一行，它是单元格的容器，每行可以包含多个单元格，由 <tr> 和 </tr> 标签表示 |
必选 |
| td | td 代表一个单元格，所有单元格都在 tr 元素内，每个单元格都由一对 <td> 和 </td> 标签 |
必选 |
| th | th 也代表一个单元格，同时也表示该表格的表头。每个单元格都由一对 <th> 和 </th> 标签 |
可选 |
| caption | caption 代表为该表格的表格标题，位于 table 中的第一行 | 可选 |
基本语法
<table>
<caption>
表格标题
</caption>
<tr>
<th>1列表头</th>
<th>2列表头</th>
…
</tr>
<tr>
<td>1行1列的内容</td>
<td>1行2列的内容</td>
…
</tr>
<tr>
<td>2行1列的内容</td>
<td>2行2列的内容</td>
…
</tr>
…
</table>
示例代码
<table border="1">
<caption>
xxx成绩表
</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>70</td>
<td>80</td>
<td>70</td>
</tr>
</table>
表格标签属性
<table> 标签属性
为了使创建的表格更加美观、醒目，可以对表格的属性进行设置，以达到诸如调整表格的颜色、单元格背景图像和背景颜色等目的。下表对每个属性对应的可取值和其作用作了解释。
| 属性 | 可取值 | 描述 |
|---|---|---|
| align | left、center、right | 定义表格相对周围元素的对齐方式 |
| border | pixels | 定义表格边框的宽度 |
| width | pixels、% | 定义表格的宽度 |
| bordercolor | 颜色的表示方法 | 定义表格边框的颜色 |
| bgcolor | 颜色的表示方法 | 定义表格的背景颜色 |
| background | URL | 定义表格背景图像 |
下面通过一个简单的例子，演示设置 <table> 标签 align、border、width 这三个属性的作用
<table align="left" border="5" width="400">
<caption>
xxx成绩表
</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>70</td>
<td>80</td>
<td>70</td>
</tr>
</table>
效果
<tr> 属性
标签定义 HTML 表格中的行，tr 元素可包含一个或多个 th 或 td 元素。 标签有如下一些常用属性，下表列出了每个属性、可取值及其简单描述，接下来介绍其中的 valign 属性。
| 值 | 描 述 |
|---|---|
| top | 对内容进行上对齐 |
| middle | 对内容进行居中对齐（默认值） |
| bottom | 对内容进行下对齐 |
| baseline | 与基线对齐 |
<td> 属性
<td> 标签定义 HTML 表格中的标准单元格，td 元素中的文本一般显示为正常字体且左对齐。<td> 标签有以下一些常用属性，本文主要介绍跨行（rowspan）和跨列（colspan）两个属性。
下表是对其属性的可取值和作用作了说明。
| 属 性 | 可 取 值 | 描 述 |
|---|---|---|
| align | left、right、center、justify | 定义单元格中内容的水平对齐方式 |
| valign | top、middle、bottom、baseline | 定义单元格中内容的垂直对齐方式 |
| bgcolor | 颜色的表示方法 | 定义单元格的背景颜色 |
| height | pixels、% | 定义单元格的高度 |
| width | pixels、% | 定义单元格的宽度 |
| colspan | number | 定义单元格可横跨的列数 |
| rowspan | number | 定义单元格可纵跨的行数 |
| nowrap | nowrap | 定义单元格中的内容是否折行 |
单元格跨行跨列的基本语法：
<td colspan="所跨列数">单元格内容</td>
<td rowspan="所跨行数">单元格内容</td>
示例代码
<table width="800" border="1" cellspacing="1" cellpadding="1">
<tr>
<td colspan="9" align="center">2020年度图书销售统计</td>
</tr>
<tr>
<td rowspan="2" align="center">图书分类</td>
<td colspan="2">一季度</td>
<td colspan="2">二季度</td>
<td colspan="2">三季度</td>
<td colspan="2">四季度</td>
</tr>
<tr>
<th width="60">销售量</th>
<th width="80">销售额</th>
<th width="60">销售量</th>
<th width="80">销售额</th>
<th width="60">销售量</th>
<th width="80">销售额</th>
<th width="60">销售量</th>
<th width="80">销售额</th>
</tr>
<tr>
<td align="center">小说</td>
<td align="center">23521</td>
<td align="center">￥559,940.00</td>
<td align="center">18423</td>
<td align="center">￥44,841.00</td>
<td align="center">32125</td>
<td align="center">￥829,870.00</td>
<td align="center">25188</td>
<td align="center">￥586,564.00</td>
</tr>
…
</table>
效果
页面表格布局
页面可以说是构成网站的基本元素。当在网络中邀游时，轻点鼠标，就会呈现各种类型的网页。那么，页面精彩与否与什么因素相关呢？色彩的搭配、文字格式的变化、图片的处理等都是不可忽略的因素。除了这些不可忽略的因素外，还有一个非常重要的因素—页面布局。
使用 <div> 或 <table> 可进行页面布局。
万维网联盟 W3C 推荐用 <div> 元素和 CSS 来进行布局，而不是用表格进行页面布局，因为 table 元素本来的目的就是显示数据。不过纵观整个网络，仍然有不少网页在使用表格进行布局，而且有些采用 DIV+CSS 布局的页面，其页面内部的一些块也使用了表格进行微布局，此处不具体介绍了。
实例
效果
代码
<table border="1" width="500px" cellpadding="2">
<caption>
xxx 课程表
</caption>
<tr align="center">
<td colspan="2">时间\日期</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
<tr align="center">
<td rowspan="2">上午</td>
<td>8:30-10:00</td>
<td>语文</td>
<td>数学</td>
<td>外语</td>
<td>音乐</td>
<td>体育</td>
</tr>
<tr align="center">
<td>10:20-12:00</td>
<td>数学</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>14:30-15:15</td>
<td>体育</td>
<td>语文</td>
<td>历史</td>
<td>政治</td>
<td>化学</td>
</tr>
<tr align="center">
<td>15:25-16:10</td>
<td>音乐</td>
<td>语文</td>
<td>数学</td>
<td>美术</td>
<td>语文</td>
</tr>
</table>
表单标签
表单是网页中一个特定的区域，或者说是一个特殊的元素。表单用来描述需要用户输入的页面内容，在用户输入具体信息后，提交到指定位置进行处理。
表单的应用范围非常广泛，可以这么说，所有需要将信息提交给服务器的地方都可以使用表单。例如用户注册、用户登录、网上搜索、购物车和调查问卷等。
下图显示的是一个典型的用户注册表单。
input元素
介绍
在表单元素中，input 元素代表的元素最多。除了文本内容以外，还可以表示密码框、单选、多选等元素。这些元素统一使用 标签标识，只是各自的类型不同。通过 type 属性可以控制元素的类型。
input 元素基本语法：
<input type="元素类型" name="表单元素名称" />
input 的常用属性如下表：
| 属 性 | 可 取 值 | 描 述 |
|---|---|---|
| type | text、password、radio、checkbox、file、submit、reset、button、hidden、image | 定义 input 元素的类型 |
| name | name | 定义 input 元素的名称 |
| value | value | 定义 input 元素的值 |
| accept | mime_type | 仅在文件上传中使用 accept 属性，规定能够通过文件上传进行提交的文件类型 |
| align | left、right、top、middle、bottom | 仅能对图像类型使用 align 属性，定义图像的对齐方式 |
| alt | text | 仅能对图像类型使用 alt 属性，定义图像输入的替代文本 |
| src | URL | 仅能对图像类型使用 src 属性，规定图像的 URL |
| checked | checked | 仅能对单选按钮或复选框使用 checked 属性，定义此 input 元素是否默认被选中 |
| disabled | disabled | 禁用此 input 元素 |
| size | number | 定义 input 元素的宽度 |
| maxlength | number | 定义输入字段中字符的最大长度（注意和 size 的区别） |
| readonly | readonly | 规定输入字段为只读 |
文本类表单元素
以文本框为代表的表单元素称之为文本类元素。示例如下：
<p>
用户名：<input type="text" name="name" size="22" maxlength="16" />
</p>
<p> 密 码：<input type="password" name="pass" size="22" /></p>
<p>
<input type="submit" name="submit" value="登录" />
<input type="reset" name="reset" value="重置" />
<input type="button" name="exit" value="退出" disabled="disabled" />
</p>
显示
选择类表单元素
选择类表单元素只要是指单选框和复选框。使用选择类元素需要注意两点：
- 使用相同的 name 属性来控制分组操作。
- value 属性为提交值，显示值为标签后紧跟的内容。
示例代码
性别：<input type="radio" name="sex" value="man" />男
<input type="radio" name="sex" value="woman" />女 <br />
爱好：<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" />足球
显示效果
其他表单元素
input 元素中有几个特殊的元素和其他元素的使用不同。这里例举两个常用的文件上传元素和隐藏元素。
- 文件上传：文件需要以流的形式上传，所以在表单 form 中需要设置上传方式 enctype。
- 隐藏元素：该元素同文本类元素使用方法一致，区别在于该元素无法在文档中显示。
示例代码
<p><input type="file" name="img" accept="image/gif, image/jpeg" /></p>
<p><input type="hidden" name="imgdesc" value="bug截图" /></p>
<p><input type="submit" name="upload" value="上传" /></p>
显示效果
非input元素
在表单中，有两个常用的表单元素不属于 input 元素，它们分别是下拉列表框（<select> 和 <option> 标签实现）和多行文本域（<textarea> 标签实现），接下来将介绍这两个表单元素。
下拉列表框
为了避免用户输入错误，节省页面空间，在可用输入项不是很多的情况下，会经常使用下拉列表框。前面填写用户注册信息页面中的出生年月，使用的就是下拉列表框。下拉列表框通过 <select> 和 <option> 标签实现，<select> 标签用于显示可供用户选择的下拉列表，其中的每个选项都由 <option> 标签标识。
下拉列表框中的内容可以单选或多选，当用户提交表单时，浏览器会将选定的项目合成一个单独的参数列表，随同 <select> 标签的 name 属性提交给服务器。
示例代码
<body>
<h3>请提交就业相关信息</h3>
<form>
<p>
学历：
<select name="edu">
<option value="0">初中</option>
<option value="1">高中</option>
<option value="2">大专</option>
<option value="3" selected="selected">本科</option>
<option value="4">硕士</option>
<option value="5">博士</option>
<option value="6">其他</option>
</select>
就业城市：
<select name="city" multiple="multiple">
<option value="A" selected="selected">北京</option>
<option value="B">上海</option>
<option value="C">深圳</option>
<option value="D">广州</option>
<option value="E">其他</option>
</select>
</p>
<p><input type="submit" name="submit" value="提交" /></p>
</form>
</body>
显示效果
多行文本域
多行文本域用于显示或输入多行的文本，通过 <textarea> 标签来实现。在文本域内可容纳无限数量的文本，通过 cols 和 rows 属性来规定 textarea 元素的尺寸，其中 cols 属性定义了文本域内的可见列数，rows 属性定义了可见行数。
示例代码
<h3>简答题</h3>
<textarea name="content" cols="30" rows="6" readonly="readonly">
内容
</textarea>
<p><input type="button" name="agree" value="同意" /></p>
显示效果
案例
显示效果
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>个人信息提交</title>
</head>
<body>
<p>姓名：<input type="text" name="username" /></p>
<p>密码：<input type="password" name="password" /></p>
<p>
性别：
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
爱好：
<input type="checkbox" name="like" value="sing" />
<input type="checkbox" name="like" value="dancing" />
<input type="checkbox" name="like" value="Learn" />
</p>
<p>
照片：
<input type="file" name="person_pic" />
</p>
<p>
个人描述：
<textarea name="about"></textarea>
</p>
<p>
籍贯：
<select name="select">
<option value="成都">成都</option>
<option value="广州">广州</option>
<option value="四川">四川</option>
<option value="上海">湖南</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交" />
<input type="reset" name="" value="重置" />
</p>
</body>
</html>