![Python高效开发实战:Django、Tornado、Flask、Twisted(第3版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/109/40795109/b_40795109.jpg)
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的框架格式如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/109-1.jpg?sign=1739294938-badanL0kCArTGSkNqms4OnkchdsgS9pg-0-2cc02981710212f24efd21a9a070a4b2)
HTML语言的特点如下。
• HTML本身由尖括号表达的标签组成,如<html>、<br/>等。
• 一般标签成对出现,如<html></html>、<body> </body>,在成对标签之间放入标签内容。
• 个别标签没有内容时,则可以用单个标签组成,如<br />。注意尖括号等特殊标签一定要写成半角形式,不能是中文全角形式。
• 标签对<!-- -->用于表达注释,注释只在查看HTML代码时出现,在浏览器解析时将不显示其中的内容。
• 标签之间可以嵌套,但不可以交错,例如,下面的代码不正确:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/110-1.jpg?sign=1739294938-3wJJNAzvK3RvS8AXZ3Y5FjCgkVIqhQQL-0-ed2ba56761b8b88ae93efde69061caee)
注意:虽然一般标签可以嵌套使用,但不可以在注释标签 中嵌套另外一个注释标签。
• 有些标签有属性字段,在尖括号中通过键值对的方式设置,例如,超链接标签的href属性的设置方法如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/110-2.jpg?sign=1739294938-D0grd4jZGuc6jDZd9pRTKZ7GmuT1nqCM-0-f7068902fd38ac65977215910221502a)
• 标签本身不区分大小写,例如,可以这样写:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/110-3.jpg?sign=1739294938-mq1yPCdqYyhf3CINKKrBWUU7n6SUXesb-0-ff6c0b82c0f479901cbc5679b839e8d4)
注意:虽然本例语法正确,但建议开发者遵循所有标签都小写的惯用做法。
• 超文本标记语言的文件有一个基本的整体结构:<html>是整个文件的顶层标签,包含文件中的所有内容;<html>的内容由头和实体两部分组成,即<head></head>和<body></body>。头和实体的内容则由网页设计者通过其他HTML标签进行开发。
注意:HTML头与HTTP头是两个完全不同的概念,读者应该注意区分。
• 浏览器一般忽略文件中的回车符,对文件中的空格通常也不按源程序中的效果显示。对于确实需要显示空格和回车符的地方,HTML通过特殊的符号来表达。例如,HTML源文件如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/110-4.jpg?sign=1739294938-bPQQGAaR2L2EhuwXzKqrL5KF2H1n0DOW-0-2150cdac76482ca2baee8bfad58b38cc)
在浏览器解析后,很多空格将被忽略,只显示一个空格,如图3.1所示。
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/111-1.jpg?sign=1739294938-tBXclDhnCC6Tc4S9Mu7tP4l54DCVPHOt-0-92bc7ce4bc5e5970c36c5e36dda576ef)
图3.1 浏览器解析后会忽略多余的空格
【示例3-1】如果开发者确实希望在浏览器中显示空格,则需用特殊字符“ ”进行表示。例如,把源文件改为:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/111-2.jpg?sign=1739294938-BmmhzQO8j7XMJA6bMkPu6fTzKiNylP0R-0-cd98892b642af7b641933928082f0faa)
浏览器的显示效果如图3.2所示。
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/111-3.jpg?sign=1739294938-wGZzewNrRzan4q0JjVNfHpSzqQUqNGEw-0-e6218c75af2e997319a512399f291d9d)
图3.2 浏览器对特殊字符的显示效果
除“ ”外,HTML还有很多其他特殊字符,常用的如表3.1所示。
表3.1 常用的HTML特殊字符
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/111-4.jpg?sign=1739294938-BTHPXsWr5K7gzu3oWMGVfuOkSmyogU5F-0-1b269190368bd19224a17ca191c252dd)
3.1.2 HTML基本标签
我们已经掌握了HTML的基本语法,本节开始讲解HTML的常用标签,建议读者通过边看书、边实践的方式学习,这样能够快速掌握HTML的基本技巧。
注意:本节只列出了常用标签的普通使用方法,能够帮助读者迅速上手HTML语言。但本书不是HTML的参考手册,关于HTML的全面知识还需读者查阅其他文献。
1. 段落
HTML会忽略源文件中的回车符和换行符,所以需要用特别的标签来表示段落。段落的标签是<p>,比如:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/112-2.jpg?sign=1739294938-2NTgT0anAj9w4OCOyNL4N1gUlGyamDZb-0-c0a58fab132f639312e56e584689ff6b)
【示例3-2】<hr/>标签表示单行横线显示,<br/>标签表示换行,比如:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/112-3.jpg?sign=1739294938-fzdOH0LtEwNWyIScUu6uVTuuQge5sOwr-0-9f822793693378b084ec4fe71f44c4b6)
上述HTML代码的显示效果如图3.3所示。
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/113-1.jpg?sign=1739294938-Z8gACDgLP3UHAtlrWwOAmp1U5BWAu7KO-0-cdc67f09121df561ec4089122cf906f6)
图3.3 显示效果
注意:嵌在<head>中的<meta charset="utf-8"/>标签是为了让浏览器以UTF-8方式解析文件内容,以便在不同的操作系统和语言环境中能正常显示汉字。本章的所有带汉字页面中都加入该标签,后续不再重复说明。
2. 标题
HTML有特殊的标签用于显示标题,浏览器会根据显示器的分辨率自动设置标题的字号。标题由大到小分别有6个标签:从<h1>到<h6>。
【示例3-3】如下示例用于比较标题字体和普通字体:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/113-2.jpg?sign=1739294938-C9uf18du8dwKyzavUOjzTBlMF3f1tvhy-0-d5d8f673e4aa3c55671dbd57084b578f)
显示效果如图3.4所示。
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/113-3.jpg?sign=1739294938-MWJeTlhyV8HU5ca8wQ9ui45t07TN8XAa-0-866ee3fc68a32d447503f8f53e9c5910)
图3.4 HTML标题字体的显示效果
3. 字体格式
除了标题字体,HTML还允许对显示格式进行更多风格的控制。例如,<b>定义粗体字、<i>定义斜体字、<del>定义删除字等:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/114-1.jpg?sign=1739294938-PjUK2FF0Hw6rCuUFUa62Jj6BGLxClsrp-0-3b5a7c49e3903d2f3959d045bea6d820)
显示效果如图3.5所示。
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/114-2.jpg?sign=1739294938-vuEEzpTrQ9roWmYmnESvnUGVdOY4f4Gd-0-cabfcebdc7b8888523448dde48979d45)
图3.5 HTML字体风格控制的显示效果
HTML还有很多控制显示字体格式的标签,常用的如表3.2所示。
表3.2 常用的字体格式的标签
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/114-3.jpg?sign=1739294938-tPxRlgl3wiFc6oEk5QJWdMVegiUgyfsh-0-d3f0812d10ea177281f2348aa1e11145)
4. 链接和图像
网页之间的链接是HTML的重要功能,链接功能用<a>标签实现,比如:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/114-4.jpg?sign=1739294938-loLUzbcynTxz1Jiq3k4YlQ7RdHoOQX8y-0-395d915ff59940005aa8ffc92e487149)
上述代码中的<a>标签定义了两个属性,href设置被跳转的URL,target设置在什么窗口中打开链接。
链接除了可以是上述文字(“单击进入百度”),还可以是图片。图片用标签<img>表达,比如:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/115-1.jpg?sign=1739294938-BLbRnro6mKPodWDjXQSNwdJTSu5wKwK7-0-92dd95b79dc3c2716ed7692b19ebbda2)
标签<img>有两个常用的属性:src设置图片文件名,可以是绝对路径或相对路径;alt设置图片显示失败时替换的显示文字。用图片实现超链接的示例代码如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/115-2.jpg?sign=1739294938-pm46wA9hYaqKCLPRicdONzdcT2ZoMJSJ-0-06201f48ea211e1a98abdbcbf1937bb6)
5. 表格
HTML中的表格有两种作用:一种是显示真实的表结构及数据,另一种是控制网页布局。两种方式都通过<table>、<tr>、<td>、<th> 4个标签分别声明表格、表行、表单元、表头。显示表结构及数据时通常需要为表格设置边框;而控制网页布局时通常需要用到表格嵌套,即在一个表格的标签<td>中设置另外一个表格。
【示例3-4】表格的示例如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/115-3.jpg?sign=1739294938-CHvfvpeXzcsi0Gi8X8iS8xNwapstpI0i-0-a11e646038119a055b574075c99ed665)
表格常用的属性有border、colspan、rowspan等,分别设置边框宽度、跨列单元、跨行单元等。上述示例的显示效果如图3.6所示。
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/116-1.jpg?sign=1739294938-yxEngyzP1AzgdKHUtlDq8cwUY6n2EZZy-0-04afb10c74a26a8c138926d55bcf81b3)
图3.6 HTML表格的显示效果
6. 列表
列表是常用的显示方式,HTML中的列表有以下3种。
• 无序列表:用标签<ul>表示列表,用<li>表示表项。
• 有序列表:用标签<ol>表示列表,用<li>表示表项。
• 定义列表:用标签<dl>表示列表,用<dt>表示被定义词,用<dd>表示定义描述。
【示例3-5】列表的示例如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/116-2.jpg?sign=1739294938-A8SEe0bcnzxTYNtPxNP6ep27hrVz1bzz-0-d2c388e8ad78b14584590c9f6e07b734)
HTML列表的显示效果如图3.7所示。
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/117-2.jpg?sign=1739294938-JuXSSMyAA24ekzCe83f6brbv0pA3Iv9Y-0-c6bb6c81dc8ccd5252e438f60f01adb4)
图3.7 HTML列表的显示效果
7. 颜色及背景
HTML的颜色有3种表达方式:十六进制数字、RGB值或者颜色名称。颜色可以用于设置字体、网页背景等。例如,通过如下3种方式都可以设置页面背景为红色:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/117-3.jpg?sign=1739294938-qn00lS2I6HUom9eSs38hrcG0VzYcrBPA-0-531df2301a3cd8c335ba0e1c1b0dac94)
8. Flash及音视频播放
除了上述基本页面呈现方式,HTML还支持声音、视频、Flash集成,这才使得当今的网页丰富多彩。可以用<object>标签播放嵌入式Flash,举例如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/117-4.jpg?sign=1739294938-YFpKXNruKbNLvQmDH4ppCn8eSo94eZ5W-0-fa0d01495170239399c7a2ce06c382cf)
<object>标签中的classid、codebase等属性用于指明客户端播放插件,开发者在使用中无须修改这部分内容,只需修改<embed>标签的相关属性就可以设置不同的Flash文件、播放窗口的大小等。
音频及视频可以通过<audio>及<video>标签嵌入HTML中,浏览器遇到它们时会将本地可用的音频及视频播放器嵌入页面中,比如:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/118-1.jpg?sign=1739294938-JBxmftZ9YnEqro61E379KZUognfitTec-0-c76f37d2950693af49aaa34b4e01879f)
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">表示,示例如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/118-2.jpg?sign=1739294938-KX645qEwjIcJEG4VseWmmqVIDA86rxKJ-0-06a7237d925e4be6348c961eb62d3fac)
需要给每个输入控件设置一个不同的“name”属性,该属性用于在表单被提交到服务器后,使服务器识别各个输入控件。还可以通过设置rows和cols属性控制输入框的大小。
2. 单项选择
单项选择有两种表达方式:单选按钮或者下拉列表,它们分别用标签<input type="radio">、<select>/<option>表达,示例如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/119-2.jpg?sign=1739294938-eB7UKWLv4PxZ40woELQtZBmzFJi2HS2G-0-93e631f9ddcf755870f330fd49a56078)
通过在<input type="radio">中设置check属性可以标识哪一项默认被选择,<option>标签的selected属性有同样的作用。此外,需要给每一个选项设置value属性,该属性用于在服务器端检查哪一个选项被选择,例如,当本例中的“学历”下拉列表被选为“研究生及以上”时,服务器端在检查Post消息体时将可以收到“grade: master”的输入。
3. 多项选择
多项选择用复选框表达,相应的HTML标签是<input type="checkbox">,示例如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/120-1.jpg?sign=1739294938-Nzvyk9IrUxxiEKErw0ypoLBUDFixCDYX-0-625ec188ee5a3265b958d22b38ed1104)
4. 文件上传
HTML定义了标准的文件上传控件,相应的HTML标签是<input type="file">,示例如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/120-2.jpg?sign=1739294938-I4IOtILzRGtXBq29UYLdTMaMwlXekzq6-0-426b2885395336e82b17e572e3f1243e)
标签虽然简单,但在浏览器中的功能十分强大。如图3.8所示,标签提供了一个文件名输入框,并且有一个浏览按钮通过操作系统的文件选择框进行文件选择,通过accept属性可以设置文件选择框中的文件筛选器。
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/120-3.jpg?sign=1739294938-zcNh3k1WsVi48gP0RvBtm8t1AVzdSZ53-0-4b57ca281c6aa79a469d1ce45347d72e)
图3.8 HTML文件选择
5. 边框及提交
HTML提供了边框控件,可以将所有其他控件包含在一起,以形成较好的视觉效果,边框控件的标签为<fieldset>。完成前面的所有操作后,只需添加提交按钮控件即可,标签为<submit>。表单的整体结构示例如下:
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/121-1.jpg?sign=1739294938-994iy2IlJWqHbAv4SQoUCfDtcdm6nUrc-0-0d5259d90f809bfa4c56ce4b35c93fa9)
集成本节学习的所有控件,显示效果如图3.9所示。
![](https://epubservercos.yuewen.com/B61ED0/21190707201160906/epubprivate/OEBPS/Images/121-2.jpg?sign=1739294938-LTCnZxBTmyPB4KCb0qcA1IWwRHqTerGl-0-ec8e2e1c132bb496cb2d0d26a952436a)
图3.9 集成HTML表单控件的显示效果