1.网页的骨骼：HTML
编写Web网页的基础三件套是HTML、CSS和JavaScript，这一节先了解HTML。
1.1HTML是什么
HTML（HyperTextMarkupLanguage）即超文本标记语言。之所以将HTML比喻成网页的骨骼，是因为它是Web网页的基本组成部分，而且HTML中定义的元素，决定了网页的内容和结构。
Python是一门编程语言，可以用来处理数据、编写程序、完成任务，重在做什么和怎么做。而HTML是一门标记语言，如同画画一样，HTML告诉浏览器，应该在网页上画出哪些内容，重点在是什么和有什么。
1.2基本结构
使用HTML编写的代码保存时，后缀名可以取成．html，一般来说会包含以下基本结构。Web网页都是由一些HTML标签（或者称作HTML元素）组成的，即用尖括号扩起来的内容，并且呈现出层级嵌套结构。
第一行代码声明了以下使用HTML5语法，HTML5是HTML的最新版本，在原本HTML的基础上增加了一些新的扩展和功能。接下来是一个HTML标签，包括开始标签＜html＞和结束标签＜/html＞，两者之间便是网页的全部内容。HTML中包括head标签和body标签，分别代表网页的头部和主体，并且head、body都有各自对应的开始标签和结束标签。head中会记录网页的基本信息和引用的资源链接等，而body中存放网页详细的主体结构。可以向head和body中添加更多HTML标签，从而进一步丰富对应网页的内容。
可以发现，因为head和body包裹在HTML中，所以相对于HTML标签存在一级缩进。这正是HTML的层级嵌套结构，内层标签相对于直接外层标签都会保持一级缩进，因此在编写HTML代码时需要注意标签的缩进和对齐。
1.常用标签
（1）单标签和双标签
HTML标签主要分为单标签和双标签两类。因为单标签只有开始标签，所以需要在开始的同时关闭，例如，meta标签用于定义Web网页的基本信息。以下meta标签指定了网页使用UTF-8字符集，通过标签的属性值进行设定，即将属性名和属性值都写在标签内部。
而双标签因为既有开始标签又有结束标签，所以可以在其中包裹一些标签的内容。例如，title标签用于定义Web网页的标题。因此，双标签包含标签内容并且一般会直接显示在Web网页上，而单标签则主要是为了完成某些功能。
meta和title标签需要放入head之中。可以将以上例子添加到之前提供的基本结构里，然后双击．html运行，或者通过Web环境访问文件，在浏览器中观察网页中出现了什么变化。
（2）内容标签
内容标签都需要放入body中，可以尝试添加并刷新浏览器，观察标签对应的效果。h1～h6分别表示一级标题至六级标题，标题文字会依次减小。
p表示正文中的段落。
a表示超链接，提供Web网页之间的跳转，或者从网页的一部分跳转到另一部分。在a标签中需要指定href属性，即跳转的目标链接，target="_blank"表示单击链接后在新标签页中打开目标链接，以下代码即生成一个跳转到博客的超链接。
img用于生成图片，src属性指定图片源文件的地址，可以使用相对路径调用本地图片，或者使用互联网上能访问到的图片链接。width和height属性分别指定图片的宽度和高度，单位是像素，如果仅提供其中一个的值，则保持图片原始比例并计算另一个的值。
需要注意的是，在Web网页中使用图片资源时应当在满足清晰度条件下尽可能地使用小文件。平面设计和网页设计不同，前者会尽量使用高清图片，便于后期修改细节、打印海报等；而后者只需满足在浏览器上的显示清晰度即可，文件越小则加载越快，过大的高清图片只会导致长时间的加载等待和完全可以避免的流量浪费。
（）块级标签和内联标签
再介绍两个新的概念：块级标签和内联标签。块级标签单独占据一行，其后面的标签会在下一行出现，而多个内联标签会显示在同一行中，直到总宽度超过了浏览器宽度才换行。之前介绍的h1至h6、p都是块级标签，而a、img则是内联标签。浏览器在渲染HTML页面时会遵循默认的文档流，从上往下依次显示每个HTML标签，对于块级标签则独占一行，对于内联标签则放置在同一行，直到总宽度超过浏览器宽度才换行。
可以在HTML标签之间或者p等标签内容中添加br，用于添加空白行或换行。
div和span分别属于块级标签和内联标签，都可以用作其他HTML标签或页面文本的容器。它们本身没有具体的语义，仅作为其他内容的容器，从而将Web页面更加结构化地组织起来。我们在设计网页时，都会将页面划分为多个区域，如导航栏、侧边栏、第一部分、第二部分、第三部分、底栏等，如果将全部内容都直接写在body的下一级中，则会给开发带来很大的不便。相比之下，合理使用div勾勒出网页内容的结构和层次，可以使代码编写和阅读变得更加清晰明朗。
table属于块级标签，使用table标签可以定义表格，用tr表示表格中的每一行，用td表示每一行中的单元格，用th表示表头行中的单元格。以下是一个简单的例子，当然可以通过更复杂的语法实现合并单元格等效果，掌握CSS之后，也可以进一步美化表格样式，使表格看起来更美观。
ul和ol属于块级标签，使用ul和ol定义列表，分别对应无序列表和有序列表，用于展示多个并列项，每一项用li定义。
1.4标签的属性
很多HTML标签都有对应的属性，即写在标签开始部分中的属性名和属性值，如a的href、img的src等。这里再介绍4种重要而且通用的属性：id、class、name和style。
（1）id
id属性可以给标签取一个id,id值应当在整个页面中独一无二，使用id可以有针对性地操作某一个标签，如控制样式、绑定事件等。另外，如果将a的href设置为#加上某一标签的id，则单击链接后，页面将跳转到对应标签所在位置。
（2）class
（）name
name属性和class类似，只是基于name控制相应的标签没有class那么方便，可以将id、class和name理解成一个人的身份证号、姓、名等。
（4）style
style属性可以为标签添加内联样式，即使用CSS的一种方法，等我们了解CSS之后再详细讨论，这里提供一个简单的示例。
1.5注释
在HTML中满足以下格式的内容即为注释，被注释的内容将不会渲染和显示。
1.6表单
能够接受用户输入并且可以被赋值的标签统称为表单标签，如常见的文本框、单选框、多选框、下拉菜单等。表单标签一般都会放在form标签中，使得在触发提交时，可以一并上传全部表单标签的值。
·form的action属性指定了用户提交时应当触发的响应函数，method属性指定了提交的HTTP请求类型，这里为post。
·input为输入框，不同的type对应不同的表单元素，可取的值包括button、checkbox、color、date、datetime、email、file、month、number、password、radio、range、submit、text、time等。placeholder指定了当标签内容为空时，在页面上显示的提示信息。
·使用select和option可以定义下拉列表，默认选中第一项。option中的内容会显示在页面上，而value属性则对应每个option的值，处于选中状态的option值将作为整个select的值。
·textarea为文本框，用于显示多行文本，rows和cols分别用于指定文本框的行数和列数。
·button为按钮，type="submit"表示单击按钮之后将触发提交操作，form内全部表单标签的值都会一并提交给action中定义的响应函数处理。
添加以上代码并在浏览器中刷新即可看到表单的效果。input、textarea、button都属于内联标签，因此所有的表单标签都显示在同一行。可以向input和textarea中输入文本，填写完毕后单击button即可提交。但由于这里在action中并未指定相应的响应处理函数，因此单击后，页面只是简单地刷新一下。因为处理表单提交涉及一些后端的内容，所以掌握了相应知识之后再回过头来讲解。
1.7颜色
HTML中可以用三种方法表示颜色，用于修改HTML标签的外观，如标签的文字颜色、背景色、边框色等。
（1）RGB表示法
网页渲染使用R、G、B来合成任意一种颜色，分别表示颜色的红色分量、绿色分量和蓝色分量，0为最小值，为最大值，因此rgb(0,0,0)表示黑色，rgb(,,)表示白色，rgb(,0,0)表示纯红色，以此类推。如果是rgba(,0,0,0.5)，则第四个分量表示颜色的透明度。
（2）十六进制表示法
十六进制表示法同样基于RGB色彩合成原理，只不过用十六进制来表示相应的值。例如，#表示黑色，#fff表示白色，#f00表示纯红色。
（）使用颜色名称
使用颜色名称，如red、green、blue等，这些内置的名称分别对应一些预先设定好的颜色。
如果对颜色没有准确的把握，可以在需要控制颜色的地方打开开发者工具，单击右边对应的色块，交互式地进行调整直到满意，如图1所示。
图1使用开发者工具调整颜色
1.8DOM
DOM（DocumentObjectModel）即文档对象模型。我们之前提到HTML是层次结构化的，如果将内层标签看作直接外层标签的子节点，那么整个HTML页面可以整理成树形结构，树的根节点即html，下一层即head和body，以树形结构不断展开，这便是HTML页面的文档对象模型。
在后续内容中，我们也会将HTML标签称作DOM元素。DOM的概念在遍历和操作HTML标签时非常有用，我们经常需要找到一个DOM元素的父节点、兄弟节点以及子节点，而遍历一棵DOM树也是通过先访问根节点，然后递归地遍历根节点的全部子树来实现的。
1.9HTML5
HTML5是HTML的最新版本，在原本HTML的基础上增加了一些新的扩展和功能，例如在手机上可以检测抖动、获取地理位置等，因此受到了广泛