请先学习往期内容：HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签
请先学习往期内容：HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签
作业分析
上一篇《HTML 基础【1】 – 入门介绍 / 基本结构 / 块级标签 / 行内标签》给大家留了一个作业：
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <!-- Banner --> <div align="center"> <img src="https://ucc.alicdn.com/images/user-upload-01/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://ucc.alicdn.com/images/user-upload-01/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> <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> 标签属性
为了使创建的表格更加美观、醒目，可以对表格的属性进行设置，以达到诸如调整表格的颜色、单元格背景图像和背景颜色等目的。下表对每个属性对应的可取值和其作用作了解释。
下面通过一个简单的例子，演示设置 <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 属性。
<td> 属性
<td> 标签定义 HTML 表格中的标准单元格，td 元素中的文本一般显示为正常字体且左对齐。<td> 标签有以下一些常用属性，本文主要介绍跨行（rowspan）和跨列（colspan）两个属性。
下表是对其属性的可取值和作用作了说明。
单元格跨行跨列的基本语法：
<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 的常用属性如下表：
文本类表单元素
以文本框为代表的表单元素称之为文本类元素。示例如下：
<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>
