3.1 HTML_Python高效开发实战：Django、Tornado、Flask、Twisted（第3版）-QQ阅读男生武侠网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

3.1　HTML

HTML（HyperText Markup Language，超文本标记语言）是Internet上网页最主要的表现技术。超文本标记语言的文档制作并不复杂，但功能强大，在本身提供经典的UI标签呈现网页内容的同时，还支持不同数据格式的文件嵌入，这使得HTML在Internet上盛行。最新的HTML 5标准增加了更多的强大呈现功能。

3.1.1　HTML介绍

因为HTML是文本语言，所以可以用任何编辑器对其进行编辑，只需将文件以*.html或*.htm命名即可。HTML的第1个版本由Internet工程工作小组（Internet Engineering Task Force，IETF）发布于1993年6月，当前最常见的4.01版本由W3C（World Wide Web Consortium，万维网联盟）发布于1999年12月，目前不同的操作系统和浏览器都对4.01版本完全支持。最新的HTML 5于2008年1月形成第1份正式草案，该版本对4.01版本有较大改进。目前HTML 5已获得大多数浏览器的支持，但不同的浏览器对一些特性的支持程度并不一致。

HTML的框架格式如下：

HTML语言的特点如下。

• HTML本身由尖括号表达的标签组成，如<html>、<br/>等。

• 一般标签成对出现，如<html></html>、<body> </body>，在成对标签之间放入标签内容。

• 个别标签没有内容时，则可以用单个标签组成，如<br />。注意尖括号等特殊标签一定要写成半角形式，不能是中文全角形式。

• 标签对用于表达注释，注释只在查看HTML代码时出现，在浏览器解析时将不显示其中的内容。

• 标签之间可以嵌套，但不可以交错，例如，下面的代码不正确：

注意：虽然一般标签可以嵌套使用，但不可以在注释标签中嵌套另外一个注释标签。

• 有些标签有属性字段，在尖括号中通过键值对的方式设置，例如，超链接标签的href属性的设置方法如下：

• 标签本身不区分大小写，例如，可以这样写：

注意：虽然本例语法正确，但建议开发者遵循所有标签都小写的惯用做法。

• 超文本标记语言的文件有一个基本的整体结构：<html>是整个文件的顶层标签，包含文件中的所有内容；<html>的内容由头和实体两部分组成，即<head></head>和<body></body>。头和实体的内容则由网页设计者通过其他HTML标签进行开发。

注意：HTML头与HTTP头是两个完全不同的概念，读者应该注意区分。

• 浏览器一般忽略文件中的回车符，对文件中的空格通常也不按源程序中的效果显示。对于确实需要显示空格和回车符的地方，HTML通过特殊的符号来表达。例如，HTML源文件如下：

在浏览器解析后，很多空格将被忽略，只显示一个空格，如图3.1所示。

图3.1　浏览器解析后会忽略多余的空格

【示例3-1】如果开发者确实希望在浏览器中显示空格，则需用特殊字符“ ”进行表示。例如，把源文件改为：

浏览器的显示效果如图3.2所示。

图3.2　浏览器对特殊字符的显示效果

除“ ”外，HTML还有很多其他特殊字符，常用的如表3.1所示。

表3.1　常用的HTML特殊字符

3.1.2　HTML基本标签

我们已经掌握了HTML的基本语法，本节开始讲解HTML的常用标签，建议读者通过边看书、边实践的方式学习，这样能够快速掌握HTML的基本技巧。

注意：本节只列出了常用标签的普通使用方法，能够帮助读者迅速上手HTML语言。但本书不是HTML的参考手册，关于HTML的全面知识还需读者查阅其他文献。

1. 段落

HTML会忽略源文件中的回车符和换行符，所以需要用特别的标签来表示段落。段落的标签是<p>，比如：

【示例3-2】<hr/>标签表示单行横线显示，<br/>标签表示换行，比如：

上述HTML代码的显示效果如图3.3所示。

图3.3　显示效果

注意：嵌在<head>中的<meta charset="utf-8"/>标签是为了让浏览器以UTF-8方式解析文件内容，以便在不同的操作系统和语言环境中能正常显示汉字。本章的所有带汉字页面中都加入该标签，后续不再重复说明。

2. 标题

HTML有特殊的标签用于显示标题，浏览器会根据显示器的分辨率自动设置标题的字号。标题由大到小分别有6个标签：从<h1>到<h6>。

【示例3-3】如下示例用于比较标题字体和普通字体：

显示效果如图3.4所示。

图3.4　HTML标题字体的显示效果

3. 字体格式

除了标题字体，HTML还允许对显示格式进行更多风格的控制。例如，<b>定义粗体字、<i>定义斜体字、<del>定义删除字等：

显示效果如图3.5所示。

图3.5　HTML字体风格控制的显示效果

HTML还有很多控制显示字体格式的标签，常用的如表3.2所示。

表3.2　常用的字体格式的标签

4. 链接和图像

网页之间的链接是HTML的重要功能，链接功能用<a>标签实现，比如：

上述代码中的<a>标签定义了两个属性，href设置被跳转的URL，target设置在什么窗口中打开链接。

链接除了可以是上述文字（“单击进入百度”），还可以是图片。图片用标签<img>表达，比如：

标签<img>有两个常用的属性：src设置图片文件名，可以是绝对路径或相对路径；alt设置图片显示失败时替换的显示文字。用图片实现超链接的示例代码如下：

5. 表格

HTML中的表格有两种作用：一种是显示真实的表结构及数据，另一种是控制网页布局。两种方式都通过<table>、<tr>、<td>、<th> 4个标签分别声明表格、表行、表单元、表头。显示表结构及数据时通常需要为表格设置边框；而控制网页布局时通常需要用到表格嵌套，即在一个表格的标签<td>中设置另外一个表格。

【示例3-4】表格的示例如下：

表格常用的属性有border、colspan、rowspan等，分别设置边框宽度、跨列单元、跨行单元等。上述示例的显示效果如图3.6所示。

图3.6　HTML表格的显示效果

6. 列表

列表是常用的显示方式，HTML中的列表有以下3种。

• 无序列表：用标签<ul>表示列表，用<li>表示表项。

• 有序列表：用标签<ol>表示列表，用<li>表示表项。

• 定义列表：用标签<dl>表示列表，用<dt>表示被定义词，用<dd>表示定义描述。

【示例3-5】列表的示例如下：

HTML列表的显示效果如图3.7所示。

图3.7　HTML列表的显示效果

7. 颜色及背景

HTML的颜色有3种表达方式：十六进制数字、RGB值或者颜色名称。颜色可以用于设置字体、网页背景等。例如，通过如下3种方式都可以设置页面背景为红色：

8. Flash及音视频播放

除了上述基本页面呈现方式，HTML还支持声音、视频、Flash集成，这才使得当今的网页丰富多彩。可以用<object>标签播放嵌入式Flash，举例如下：

音频及视频可以通过<audio>及<video>标签嵌入HTML中，浏览器遇到它们时会将本地可用的音频及视频播放器嵌入页面中，比如：

HTML可以识别的音频格式包括*.mid、*.midi、*.rm、*.wav、*.wma、*.mp3等，视频格式包括*.avi、*.wmv、*.mpg、*.mpeg、*.mov、*.rm、*.ram、*.swf、*.flv、*.mp4等。

3.1.3　HTML表单

HTML表单用于从客户端收集用户在浏览器中的输入，是HTML实现客户端与服务器交互的核心方法。作为连接客户端与服务器的纽带，HTML表单也是Python中各Web框架编程都要用到的技术。HTML表单用<form>标签表达，其内容由输入控件和提交控件组成，表单的基本工作方式如下。

• 用户在浏览器中输入数据并提交，输入数据的方式可以是文本、单选、多选等。

• 浏览器将输入的数据封装到HTTP Body中并以POST方式提交给服务器。

• 服务器收到请求后将结果Response给浏览器。

1. 文本输入

HTML表单中的文本输入有单行文本、多行文本、密码框等，分别用标签<input type="text">、<textarea>、<input type="password">表示，示例如下：

需要给每个输入控件设置一个不同的“name”属性，该属性用于在表单被提交到服务器后，使服务器识别各个输入控件。还可以通过设置rows和cols属性控制输入框的大小。

2. 单项选择

单项选择有两种表达方式：单选按钮或者下拉列表，它们分别用标签<input type="radio">、<select>/<option>表达，示例如下：

通过在<input type="radio">中设置check属性可以标识哪一项默认被选择，<option>标签的selected属性有同样的作用。此外，需要给每一个选项设置value属性，该属性用于在服务器端检查哪一个选项被选择，例如，当本例中的“学历”下拉列表被选为“研究生及以上”时，服务器端在检查Post消息体时将可以收到“grade: master”的输入。

3. 多项选择

多项选择用复选框表达，相应的HTML标签是<input type="checkbox">，示例如下：