4.1 HTML基础知识
超文本标记语言（Hyper Text Markup Language，HTML）是一种用于创建网页的标准标记语言。HTML运行在浏览器上，通过浏览器来解析。
4.1.1 创建HTML文件
我们可以通过PyCharm来创建HTML文件，步骤如图4-1所示。
图4-1 创建HTML文件
这里，我们创建了一个名为“html4_1.html”的文件，PyCharm会自动创建HTML的框架内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
简单分析一下。
●HTML文件的扩展名是“.html”或者“.htm”。
●<!DOCTYPE html>声明该文件为HTML5文件。
●<html>元素是HTML页面的根元素。
●<head>元素包含了文件的元数据（metadata），如<meta charset="UTF-8">定义网页编码格式为UTF-8。
●<title>元素描述了文件的标题。
●<body>元素包含了可见的页面内容。
再来看一下HTML的标签概念。
●HTML标记标签通常被称为HTML标签（HTML tag）。
●HTML标签是由尖括号括起来的关键字，如<html>。
●HTML标签通常是成对出现的，如<b>和</b>。
●标签对中的第一个标签是开始标签，第二个标签是结束标签。
●开始标签和结束标签也分别被称为开放标签和闭合标签。
<标签>内容</标签>
4.1.2 HTML元素
HTML文件由各种元素构成，接下来，我们认识一些常见元素。
（1）HTML标题
HTML标题（heading）是通过<h1>～<h6>标签来定义的，示例代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是一个h1标题</h1>
<h2>这是一个h2标题</h2>
<h3>这是一个h3标题</h3>
</body>
</html>
当鼠标指针在PyCharm中的HTML代码输入区移动的时候，该区域右上角会出现浏览器的图标，单击某个浏览器图标即可选择对应的浏览器解析当前的HTML文件，这里我们单击Chrome浏览器图标，如图4-2所示。
图4-2 选择浏览器
通过Chrome浏览器查看该HTML文件，效果如图4-3所示。
图4-3 查看HTML文件（1）
（2）HTML段落、链接、图像
●HTML段落是通过标签<p>来定义的。
●HTML链接是通过标签<a>来定义的。
●HTML图像是通过标签<img>来定义的。
创建一个HTML文件，包含上述3个标签，如下所示。
<body> <p>这是一个段落。</p> <a href="https://www.ptpress.com.cn/">链接到人民邮电出版社官网</a> <p>这是另外一个段落。</p> <img src="https://www.ptpress.com.cn/static/portal/img/logo.png" width="258" height="39" /> </body>
通过浏览器查看该HTML文件，效果如图4-4所示。
图4-4 查看HTML文件（2）
4.1.3 HTML元素属性
上一小节，我们认识了HTML文件中的标题、段落、链接、图像共4个简单元素，而元素本身还有一些属性，我们来认识一下。
属性是HTML元素提供的附加信息，HTML元素的属性有以下特征。
●HTML元素可以设置属性。
●属性可以在元素中添加附加信息。
●属性一般描述于开始标签。
●属性总是以“名称/值”对的形式出现，如name="value"。
●属性值应该始终在引号内，双引号最常用。
表4-1所示为一些较为常用的HTML元素的属性。
表4-1 HTML元素的属性
4.1.4 复杂元素
本小节我们再来看几个稍微复杂一些的HTML元素。
（1）表格
表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。td指表格数据（table data），即数据单元格的内容。表格的表头由<th>标签定义，大多数浏览器会把表头显示为粗体居中的文本。
示例HTML文件如下。
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
效果如图4-5所示。
这是一个带表头的表格。除去表头外，还有两行数据，每行有两个单元格。
（2）列表
HTML支持有序、无序和自定义列表，我们来分别演示一下。
◆有序列表
有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签，每个列表项目始于<li>标签。
<body> <ol> <li>风暴之灵</li> <li>大地之灵</li> <li>灰烬之灵</li> </ol> </body>
效果如图4-6所示。
图4-5 查看表格显示效果
图4-6 有序列表
◆无序列表
再来看一下无序列表，无序列表同样是一个包含项目的列表，此列表项目使用粗体圆点（典型的小黑圆点）进行标记，无序列表始于<ul>标签。
<body> <ul> <li>风暴之灵</li> <li>大地之灵</li> <li>灰烬之灵</li> </ul> </body>
效果如图4-7所示。
◆自定义列表
最后，来看一下自定义列表。自定义列表不是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始，每个自定义列表项目以<dt>标签开始，每个自定义列表项目的定义以<dd>标签开始。
示例HTML文件如下。
<body> <dl> <dt>风暴之灵</dt> <dd>-蓝色的猫猫</dd> <dt>大地之灵</dt> <dd>-土色的猫猫</dd> </dl> </body>
效果如图4-8所示。
图4-7 无序列表
图4-8 自定义列表
列表标签的简单总结如表4-2所示。
表4-2 列表标签
（3）表单
HTML表单用于收集不同类型的用户输入，表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入的内容，例如文本域（textarea）、下拉列表、单选按钮（radio-button）、复选框（checkbox）等。表单使用表单标签<form>来设置。
多数情况下被用到的表单标签是输入标签（<input>），输入类型是由类型属性（type）定义的，常用的输入类型如下。
◆文本域
文本域通过<input type="text">标签来定义，当用户需要在表单中输入字母、数字等内容时，就会用到文本域。
<body> <form> 姓名: <input type="text" name="firstname"><br> 密码: <input type="text" name="lastname"> </form> </body>
效果如图4-9所示。
◆密码字段
密码字段通过标签<input type="password">来定义。
示例HTML文件如下。
<body> <form> 用户名: <input type="text" name="pwd"> <br> 密码: <input type="password" name="pwd"> </form> </body>
输入内容后的效果如图4-10所示。
图4-9 文本域
图4-10 密码字段
注意▶ 大家可以看到，当type为text时，输入的内容明文显示；当type为password时，输入的内容密文显示。
◆单选按钮
<input type="radio">标签用于定义表单单选按钮。
示例HTML文件如下。
<body> <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> </body>
效果如图4-11所示。
◆复选框
<input type="checkbox">用于定义复选框，用户需要从若干给定的选项中选取一个或若干选项。
示例HTML文件如下。
<body> <form> 多选题： <br> <input type="checkbox" name="hero" value="storm">风暴之灵 <br> <input type="checkbox" name="hero" value="sk">沙王 </form> </body>
效果如图4-12所示。
图4-11 单选按钮
图4-12 复选框
（4）框架
使用框架（主要是iframe）可以在同一个浏览器窗口中显示多个页面。
iframe的语法如下。
<iframe src="URL"></iframe>
height和width属性用来定义<iframe>标签的高度与宽度。属性默认以像素为单位，但是用户可以指定其按比例显示，如"80%"。
示例HTML文件如下。
<body> <iframe src="https://www.ptpress.com.cn/" width="500" height="600"></iframe> <iframe src="https://www.ptpress.com.cn/" width="500" height="600"></iframe> </body>
效果如图4-13所示（一个窗口中嵌套了两个人民邮电出版社的官网页面）。
注意▶ 框架除了iframe以外，还有frameset和frame，但后面两种在HTML5中已不再被支持，我们的项目中应用最多的还是iframe，因此本小节不再赘述。
最后，我们再来总结一下什么是HTML。
●HTML是用来描述网页的一种语言。
图4-13 iframe
●HTML指的是超文本标记语言，英文全称为Hyper Text Markup Language。
●HTML不是一种编程语言，而是一种标记语言。
●标记语言是一套标记标签（markup tag）。
●HTML使用标记标签来描述网页。
●HTML文档包含了HTML标签及文本内容。
●HTML文档也称为Web页面。