欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-14 22:17:00
...

九层之台——Web开发教程：2. 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文件（如果双击打开不行的话，就右击打开方式，实在不行就把这个文件拖进浏览器），是不是很神奇呢？

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

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

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

我们可以看到，在这一段最基础的代码中，真正起到显示作用的是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>

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

<div>&nbsp;</div>

在HTML中，有许多特殊字符不能直接输入，可以使用对应的字符实体编码（形如&copy;这样的，在网页上会显示为©）。这些字符实体编码可以在这里查到：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元素之间的关系，嵌套和排列在整个网页上。

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

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

  • 内联元素：比如a（链接元素）、br（转行元素）、span（行内元素）以及img（图片元素，属于不完全的内联元素），它们之间的默认排列方式是从左到右按顺序排列。
  • 块级元素：例如h1（标题元素）、p（段落元素）、div（块元素），它们会从上到下排列。

也就是说，即使并列写两个img元素引入两张图片，它们会默认从左到右排列。
但是如果并列用p元素写两个段落，即使它们没有占满一行，它们也会从上到下排列。

文档流是浏览器渲染HTML的固有属性，真正的问题是，如何改变默认的文档流，按照自己的想法去排列元素。如果我偏要让段落元素从左到右排列怎么办呢？此外，有的时候还需要脱离文档流，例如：我想让一行字和一张背景图片重叠起来，怎么办呢？

事实上，我们可以通过设置特殊的样式来解决这些问题，这些都是下一章的内容啦！

思考题：如果不设置样式，但是我偏要让几张图片从上到下排列，可以怎么做呢？（提示：不要忘了元素嵌套，不要忘了最好用div哦）

DOM以及网页调试

DOM是Document Object Model文档对象模型的简称，这是一个很复杂的概念，是浏览器用来管理和跟踪网页上的每个元素所用的技术。我们只需要了解到，它是按照元素嵌套层级来组织结构的。因此，合理安排元素的嵌套至关重要。

在开发网页和调试的时候，我们往往需要查看网页的DOM状态和各个元素的状态，这个时候我们可以在浏览器中使用F12或者右击 - 检查来打开浏览器的调试控制台，其中元素控制台中显示的内容就是浏览器的DOM结构，也就是各个元素的嵌套结构。

将鼠标悬浮在你想要关注的元素上，该元素就会在网页上被高亮标注出来。同时你可以关注它的各项属性和CSS样式，也可以展开查看它所有的子元素。

如果你觉得从body元素一层一层展开过于麻烦，可以右击页面上你想要关注的元素，并点击检查。元素控制台会自动展开到你关注的元素上。

HTML5和其他

HTML5是HTML的最新规范，从2008年提出。其中包含了很多新的元素和属性，例如video元素，可能会在网页中使用到。你可以通过查看W3School上的教程来学习HTML5标准下新增的内容。

HTML还有很多很多可以学习的知识和本篇教程没有提到的元素，例如可以用它实现上标下标，以及列表和表格等排版，这些内容都可以在互联网上找到，并且自己学习。

HTML作为一个划时代的Web核心语言，它真正的意义在于：在开发的各个环节中，多如繁星的程序员只要能够认定同一套标准，那么它就是这个时代的珍宝。网页的开发者，到浏览器的开发者，正是因为同一套标准的确立和认同，才有浩如烟海的网页应用推动我们的文明。

而你，也可以是其中的一环。

相关标签： 技术 教程

上一篇： 基于ROS的OPCV的人脸识别

下一篇： Base64编码原理与实现

推荐阅读