【九层之台】Web开发教程：2. HTML

本文主要是介绍【九层之台】Web开发教程：2. HTML，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML

2. HTML

从本章开始，我们正式进入网页制作的教学环节。本章的主要内容是HTML，简单地说，HTML是一个网页的核心部分，同时它也指定了网页上的内容和排布的模式。

HTML是HyperText Markup Language超文本标记语言的简称，所谓超文本，就是指用纯文本的方式去表达超越文字的内容。

接下来我们就要学习如何使用纯文本来描述一个网页的内容。

标签和元素

顾名思义，标记语言的本质就是标签。也就是，在英文半角模式下输入的左右尖号<>，他们以特定的组合方式形成HTML元素。

通常来说，一个元素有以下格式：

<元素名称> 元素的内部内容 </元素名称>

其中<元素名称>被称为开始标签，</元素名称>被称为结束标签，他们之间的内容就是这个元素的内部内容，内部内容可以为空，也可以是另一些元素。通常情况下结束标签需要和开始标签配套出现。

HTML中的换行和空格都会被忽略，也就是说，上述代码完全等效于：
<元素名称>元素的内部内容
</元素名称>
请注意，元素内部需要有两个空格的缩进（html元素不需要），特别是在元素嵌套的情况下会帮助我们了解元素之间的层级关系。

在sublime中，如果在html文件中书写<，会弹出自动补全辅助，按下回车即可自动补全元素的结束标签。当然还有更多好用的插件，可以自行百度。

同时，也有一些标签是不需要标签结束符号的，例如<br>，它们不具有元素的内部内容。

元素除了名称和内部内容以外，还可以具有一些属性。它们用key="value"的形式，并被包含在元素开始标签内部。例如：

<a href="#">内部内容</a>

在这里，元素名称为a，元素内容为内部内容，元素的属性有href="#"。

懂了吗？

开始！

让我们打开sublime！~~一章不见如隔三秋啊~~
在0. 准备章节中我们新建了index.html文件，现在把它打开，并输入以下内容：

<!DOCTYPE HTML>
<html>
<head><title>第一个网页</title>
</head>
<body><h1>Hello, World!</h1>
</body>
</html>
<!-- 这是一行注释 -->

然后用浏览器打开这个index.html文件（如果双击打开不行的话，就右击打开方式，实在不行就把这个文件拖进浏览器），是不是很神奇呢？

下面的很多例子代码，也鼓励大家多多尝试！

接下来我们细细地解释一下这一段代码：

<!DOCTYPE HTML> 文档类型说明标签。告诉浏览器，这是一段符合HTML5标准的代码。
<html> html元素开始标签。一段HTML代码都应该包含在一个名为html的元素当中。
<head> head元素开始标签。head元素用于指定一些不直接显示的信息。
<title>第一个网页</title> title元素，用于定义文档的标题，设置浏览器标题栏的内容是“第一个网页”。
</head> head元素结束标签。
<body> body元素开始标签。body元素标记了网页的显示内容。
<h1>Hello, World!</h1> h1元素标签。是一个一级标题，标题的内容是“Hello, World!”
</body> body元素结束标签。
</html> html元素结束标签。
 被标签包裹的内容会被浏览器忽略，可以用于开发时的一些标记等。

我们可以看到，在这一段最基础的代码中，真正起到显示作用的是title和h1元素，它们分别指定了浏览器标签上的网页标题和实际显示的一行标题。其余的内容都是一个HTML文件的基本框架：

第一行是文件类型说明
剩余部分都被包含在html元素当中
html元素包含两个子元素，是head和body

那么，除了这些最基础的元素以外，还有哪些标签呢？

资源：W3School上有完整的默认标签列表：https://www.w3school.com.cn/tags/index.asp
需要的时候可以自行查询。本篇教程不会涵盖所有的HTML标签。

head

html元素中的一个子元素，用于指定网页的一些不直接显示的信息，也经常用于引入网页需要使用的其他内容（例如CSS文件和JS文件）。

在head中经常使用的元素有如下几个：

元素名称	用途	例子
title	定义文档的标题	`<title>这是标题</title>`
link	引入网页所需的文件	（在3. CSS章节中演示）
script	引入网页所需要的脚本	（在4. JS章节中演示）

*base、meta、style等元素如果下文有所使用会特殊说明。

body

body是HTML中最重要的元素，它的元素内容就是网页显示的内容。在body中，有很多很多元素可以使用，详细可以参考W3School上的html教程，上面很全面。这里重点介绍几个非常常用的元素，其余元素可以有空自行学习，或者使用到的时候再进行查找。

div 块元素

最最最最强大而常用的元素，没有什么特殊之处，具有极少的默认样式，但也因此非常灵活。

块元素经常用于将很多元素包裹在其内部，以方便形成特殊的布局，或者设置它们的样式。有时块元素内部只包含文字，可以方便地设置文字的格式。

<div><h1>这是一个一级标题</h1><p>这是一个段落。</p>
</div>

如果块元素内部不包含任何内容，块元素会坍缩。因此，如果想在网页上实现空白的块，需要在块元素中包含占位空格 

<div>&nbsp;</div>

在HTML中，有许多特殊字符不能直接输入，可以使用对应的字符实体编码（形如©这样的，在网页上会显示为©）。这些字符实体编码可以在这里查到：https://www.w3school.com.cn/html/html_entities.asp

h1-h6 标题元素

一共有六种不同级别的标题元素，它们自带有一定的样式，会独占一行。同时，使用不同级别的标题元素可以让搜索引擎等自动化网页处理程序了解你的网页结构。

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

p 段落元素

用于显示一段文字，也有一定的默认样式。使用段落元素也可以让你的网页结构更容易被搜索引擎处理。

<p>这里是一个段落。</p>
<p>这里是另一段。</p>

br 转行元素

转行元素不需要结束标签，用于在一段文字内转行。注意，在HTML文件中直接转行是没有用的哦！

<p>给你讲个故事：<br>从前有座山，
山里有个庙，
庙里有个小和尚......</p>

a 链接元素

通过设置链接元素的href属性来实现超链接，链接元素的内部内容则是显示的部分（可以是文字，也可以是其他元素）。（别傻乎乎地在代码上点哦，要复制进body元素并用浏览器打开！）

<a href="https://www.baidu.com/">点击我可以去百度！</a>

img 图片元素

不需要结束标签，通过设置src属性来打开指定图片。

<img src="https://www.baidu.com/img/bd_logo1.png">

span 行内元素

行内元素可以单独选中一段文字中的某些文字，而不会引起段落被分割为几块。

“万物皆框”的文档流

当我们稍稍了解了一部分HTML的元素以后，我们就可以通过简单的拼拼凑凑的方法将我们需要的内容拼起来形成网页了。然而，为了我们下一步的样式设置，我们还需要理解HTML的几个重要概念。

什么叫“万物皆框”呢？在浏览器渲染网页的时候，每一个HTML元素都会被渲染为一个框(box)，框的形态大小和位置等等属性由下一章的样式指定，框内的内容则是该元素的内部内容。如果我们把整个网页（也就是body元素）理解为最大的一个框，那么各种标题啊、段落啊、图片啊，都是大框中的小框。即使是我们的文字，也是在一个宛如文本框的box当中。所以，整个网页本质上就是无数的框按照HTML元素之间的关系，嵌套和排列在整个网页上。

嵌套关系还好理解，就是大框里面套小框。但是如果若干个元素并列，它们是怎么排列的呢？这就是我们所说的文档流了。

在文档流中，所有的元素（框）被分成两类：