这是全栈数据工程师养成攻略系列教程的第十九期：19 Web基础网页的骨骼HTML。

写Web网页的基础三件套是HTML、CSS和JavaScript，这一节让我们先来了解下HTML。

什么是HTML

HTML全拼是Hyper Text Markup Language，即超文本标记语言。之所以将HTML比喻成网页的骨骼，是因为它是Web网页的基本组成部分，而且HTML中所定义的元素，决定了网页的内容和结构。

Python是一门编程语言，可以用来处理数据、编写程序、完成任务，重在做什么和怎么做。而HTML是一门标记语言，如同画画一样，HTML告诉浏览器，应该在网页上画出哪些内容，重点在是什么和有什么。

基本结构

使用HTML所写的代码保存时后缀名可以取成.html，一般来说会包含以下基本结构。Web网页都是由一些HTML标签（或者称作HTML元素）组成的，即用尖括号扩起来的内容，并且呈现出层级嵌套结构。

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

第一行代码声明了以下使用HTML5语法，HTML5是HTML的最新版本，在原本HTML的基础上增加了一些新的扩展和功能。接下来是一个html标签，包括开始标签<html>和结束标签</html>，两者之间中便是网页的全部内容。html中包括head标签和body标签，分别代表网页的头部和主体，并且head、body都有各自对应的开始标签和结束标签。head中会记录网页的基本信息和引用的资源链接等，而body中则存放着网页详细的主体结构。可以向head和body中添加更多HTML标签，从而进一步丰富对应网页的内容。

可以发现，因为head和body包裹在html中，所以相对于html标签存在一级缩进。这正是HTML的层级嵌套结构，内层标签相对于直接外层标签都会保持一级缩进，因此在编写HTML代码时需要注意标签的缩进和对齐。

常用标签

HTML标签主要分为单标签和双标签两类。单标签只有开始标签，所以需要在开始的同时关闭，例如meta标签，用于定义Web网页的基本信息。以下meta标签指定了网页使用UTF-8字符集，通过标签的属性值进行设定，即将属性名和属性值都写在标签内部。

<meta charset="UTF-8"/>

而双标签既有开始标签又有结束标签，所以可以在其中包裹一些标签的内容，例如title标签，用于定义Web网页的标题。因此，双标签包含标签内容并且一般会直接显示在Web网页上，而单标签则主要是为了完成某些功能。

<title>我爱HTML</title>

meta和title标签需要放入head之中。可以将以上例子添加到之前提供的基本结构里，然后双击.html运行，在浏览器中观察网页中出现了什么变化。

再来介绍一些常用的内容标签，这些标签都需要放入body之中，可以尝试添加并刷新浏览器，观察标签对应的效果。

首先是h1至h6，分别表示一级标题至六级标题，标题文字会依次减小。

<h1>这里是一级标题</h1>
<h2>这里是二级标题</h2>
<h3>这里是三级标题</h3>
<h4>这里是四级标题</h4>
<h5>这里是五级标题</h5>
<h6>这里是六级标题</h6>

p表示正文中的段落。

<p>这里是段落内容</p>

a表示超链接，提供Web网页之间的跳转，或者从网页的一部分跳转到另一部分。在a标签中需要指定href属性，即跳转的目标链接，target="_blank"表示链接点击后在新标签页中打开目标链接，以下代码即生成一个跳转到我的个人博客的超链接。

<a href="http://zhanghonglun.cn" target="_blank">一个干货满满的地方</a>

img用于生成图片，src属性指定图片源文件的地址，可以使用相对路径调用本地图片，或者使用互联网上能访问到的图片链接。width和height属性分别指定图片的宽度和高度，单位是像素，如果仅提供其中一个的值，则保持图片原始比例并计算另一个的值。

<img src="http://zhanghonglun.cn/blog/wp-content/uploads/2015/04/136670958113.jpg" width="200" height="200"/>

需要注意的是，Web网页中使用的图片资源应当在满足清晰度条件下尽可能地使用小文件。平面设计和网页设计不同，前者会尽量使用高清图片，便于后期修改细节、打印海报等；而后者只需满足在浏览器上的显示清晰度即可，文件越小则加载越快，过大的高清图片只会导致长时间的加载等待和完全可以避免的流量浪费。

再介绍两个新的概念：块级标签和内联标签。块级标签单独占据一行，其后面的标签会在下一行出现，而多个内联标签则会显示在同一行中，直到总宽度超过了浏览器宽度才换行。之前介绍的h1至h6、p都是块级标签，而a、img则是内联标签。浏览器在渲染HTML页面时会遵循默认的文档流，从上往下依次显示每个HTML标签，对于块级标签则独占一行，对于内联标签则放置在同一行，直到总宽度超过浏览器宽度才换行。

可以在HTML标签之间或者p等标签内容中添加br，用于添加空白行或换行。

<p>这是一段<br/>换行的段落</p>

div和span分别属于块级标签和内联标签，都可以用作其他HTML标签或页面文本的容器。它们本身没有具体的语义，仅作为其他内容的容器，从而将Web页面更加结构化地组织起来。我们在设计网页时，往往会将页面划分为多个区域，例如导航栏、侧边栏、第一部分、第二部分、第三部分、底栏等，如果将全部内容都直接写在body的下一级中，则会给开发带来很大的不便。相比之下，合理使用div勾勒出网页内容的结构和层次，可以使代码编写和阅读变得更加清晰明朗。

<div>
    div里面可以包含其他HTML标签或者文本内容
    <p>这个div是页面的第一块内容</p>
</div>

<div>
    <p>这个div是页面的第二块内容</p>
    <div>
        <span>span是内联标签，后面的文本不换行</span>
        <span>div里面还可以嵌套其他div</span>
        <p>div的使用可以让页面内容更加结构化、有层次</p>
    </div>
</div>

使用table标签可以定义表格，用tr表示表格中的每一行，用td表示每一行中的单元格，用th表示表头行中的单元格。以下是一个简单的例子，当然可以通过更复杂的语法实现合并单元格等效果，在我们掌握了CSS之后，也可以进一步美化表格样式，使得表格看起来更美观。

<table>
    <tr>
        <th>语言</th>
        <th>难度</th>
        <th>功能</th>
    </tr>
    <tr>
        <td>Python</td>
        <td>简单</td>
        <td>强大</td>
    </tr>
    <tr>
        <td>R</td>
        <td>简单</td>
        <td>强大</td>
    </tr>
</table>

使用ul和ol定义列表，分别对应无序列表和有序列表，用于展示多个并列项，每一项用li定义。

<ol>
    有序列表
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ol>

<ul>
    无序列表
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>

标签的属性

很多HTML标签都有对应的属性，即写在标签开始部分中的属性名和属性值，例如a的href、img的src等。这里再介绍四种重要而且通用的属性：id、class、name和style。

id属性可以给标签取一个id，id值应当在整个页面中是独一无二的，使用id可以针对性地操作某一个标签，例如控制样式、绑定事件等。另外，如果将a的href设置为#加上某一标签的id，则点击链接后页面将跳转到对应标签所在位置。

<p id="main">这是最主要的一段话</p>
<a href="#main">跳到main所在位置</a>

class属性可以给标签取一个class，同一个class值可以应用于多个标签，从而使用class可以同时操作多个标签，例如控制它们的样式、为它们绑定事件等。

<p class="content">这些段落都是普通内容</p>
<p class="content">这些段落都是普通内容</p>
<p class="content">这些段落都是普通内容</p>

name属性和class类似，只是基于name控制相应的标签没有class那么方便，可以将id、class和name理解成一个人的身份证号、姓、名等。

style属性可以为标签添加内联样式，即使用CSS的一种方法，等我们了解CSS之后再详细讨论，这里提供一个简单的示例。

<p style="color:red;">这是一段有颜值的内容</p>

注释

在HTML中满足以下格式的内容即为注释，被注释的内容将不会渲染和显示。

<!--这是一个注释！-->

表单

能够接受用户输入并且可以被赋值的标签统称为表单标签，例如常见的文本框、单选框、多选框、下拉菜单等。表单标签一般都会放在form标签之中，使得在触发提交时可以一并上传全部表单标签的值。

<form action="" method="post">
    用户名 <input type="text" placeholder="用户名" name="username"/>
    密码 <input type="password" placeholder="密码" name="password"/>
    <select>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
    </select>
    一大段文本 <textarea rows="10" cols="10" placeholder="一大段文本" name="content"></textarea>
    <button type="submit">登陆</button>
</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中并未指定相应的响应处理函数，因此点击后页面只是简单地刷新一下。处理表单提交涉及到一些后端的内容，所以等我们掌握了相应知识之后再回过头来讲解。

颜色

HTML中可以用三种方法来表示颜色，用于修改HTML标签的外观，例如标签的文字颜色、背景色、边框色等。

第一种方法是RGB表示法。网页渲染使用R、G、B来合成任意一种颜色，分别表示颜色的红色分量、绿色分量和蓝色分量，0为最小值，255为最大值，因此rgb(0, 0, 0)表示黑色，rgb(255, 255, 255)表示白色，rgb(255, 0, 0)表示纯红色，依此类推。如果是rgba(255, 0, 0, 0.5)，则第四个分量表示颜色的透明度。

第二种方法是十六进制表示法，同样基于RGB色彩合成原理，只不过用十六进制来表示相应的值，例如#000表示黑色，#fff表示白色，#f00表示纯红色。

第三种方法是使用颜色名称，例如red、green、blue等，这些内置的名称分别对应一些预先设定好的颜色。

<p style="color:rgb(255,0,0);">红色</p>
<p style="color:#0f0;">绿色</p>
<p style="color:blue;">蓝色</p>

如果对颜色没有准确的把握，可以在需要控制颜色的地方打开开发者工具，点击右边对应的色块，交互式地进行调整直到满意。

DOM

DOM的全拼是Document Object Model，即文档对象模型。我们之前提到HTML是层次结构化的，如果将内层标签看作直接外层标签的子节点，那么整个HTML页面可以整理成树形结构，树的根节点即html，下一层即head和body，以树形结构不断展开，这便是HTML页面的文档对象模型。

在后续内容中，我们也会将HTML标签称作DOM元素。DOM的概念在遍历和操作HTML标签时非常有用，我们经常需要找到一个DOM元素的父节点、兄弟节点以及子节点，而遍历一颗DOM树也是通过先访问根节点，然后递归地遍历根节点的全部子树来实现的。

HTML5

HTML5是HTML的最新版本，在原本HTML的基础上增加了一些新的扩展和功能，例如在手机上可以检测抖动、获取地理位置等，因此受到了广泛关注，并且在移动端引爆了一股开发狂潮。

HTML5中添加了一些新的功能标签，例如支持更加高级、复杂和精细绘图功能的canvas和svg，支持直接播放音频和视频的audio和video，支持嵌入多种类型资源的embed。关于svg的更多内容可以查看http://www.runoob.com/svg/svg-tutorial.html，关于canvas的更多内容可以查看http://zhanghonglun.cn/blog/canvas初探：基本语法。

HTML5中也引入了一些新的语义标签，例如header、nav、section、article、aside、figcaption、figure、footer等。这些标签的使用方法和div大同小异，只是像p代表段落一样，赋予了一些用途语义。以下两种写法在实际应用中没有任何区别，都能够很好地说明这一块内容对应网页的导航栏部分，只不过前者稍微简洁一些而已。

<header>导航栏部分</header>
<div id="header">导航栏部分</div>

除此之外，HTML5中还增加了一些新的功能，例如元素拖拽、地理定位、更丰富的input type、Web存储等，限于篇幅这里就不展开介绍了，有兴趣的话可以访问以下链接获取更多内容，http://www.runoob.com/html/html5-intro.html。

补充学习

HTML语法比较简单，没有复杂的编程逻辑，只需要根据自己的设计排列HTML标签即可，因此对HTML的掌握关键在于多写多练、熟能生巧。关于HTML的更多内容可以访问以下链接，http://www.runoob.com/html/html-tutorial.html，里面提供了更为详细和系统的讲解，并结合大量实例代码加以巩固，推荐完整地浏览和尝试一遍。

最后，推荐安装一个Sublime插件，Emmet，可以极大地加速和简化HTML代码编写，功能十分强大，详细使用方法可以参考这里，https://juejin.cn/post/6844903456801554445。

视频链接：

如果觉得文章不错，不妨点一下左下方的喜欢～