青训营X豆包MarsCode 技术训练营第六课 | 前端知识分享

55 阅读3分钟

HTML 是网页使用的语言,定义了网页的结构和内容。浏览器访问网站,其实就是从服务器下载 HTML 代码,然后渲染出网页。

HTML 的全名是“超文本标记语言”(HyperText Markup Language),上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李(Tim Berners-Lee)发明。它的最大特点就是支持超链接,点击链接就可以跳转到其他网页,从而构成了整个互联网。

1999年,HTML 4.01 版发布,成为广泛接受的 HTML 标准。2014年,HTML 5 发布,这是目前正在使用的版本。

浏览器的网页开发,涉及三种技术:HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容,CSS 样式表定义网页的样式,JavaScript 语言定义网页与用户的互动行为。HTML 语言是网页开发的基础,CSS 和 JavaScript 都是基于 HTML 才能生效,即使没有这两者,HTML 本身也能使用,可以完成基本的内容展示。 网页的 HTML 代码由许许多多不同的标签(tag)构成。学习 HTML 语言,就是学习各种标签的用法。

下面就是标签的一个例子。

<title>网页标题</title>

上面代码中,<title></title>就是一对标签。

标签用来告诉浏览器,如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。

标签放在一对尖括号里面(比如<title>),大多数标签都是成对出现的,分成开始标签和结束标签,结束标签在标签名之前加斜杠(比如</title>)。但是,也有一些标签不是成对使用,而是只有开始标签,没有结束标签,比如上一节示例的<meta>标签。

<meta charset="utf-8">

上面代码中,<meta>标签就没有结束标签</meta>

这种单独使用的标签,通常是因为标签本身就足够完成功能了,不需要标签之间的内容。实际应用中,它们主要用来提示浏览器,做一些特别处理。

标签可以嵌套。

<div><p>hello world</p></div>

上面代码中,<div>标签内部包含了一个<p>标签。

嵌套时,必须保证正确的闭合顺序,不能跨层嵌套,否则会出现意想不到的渲染结果。

<div><p>hello world</div></p>

上面代码就是错误的嵌套,闭合顺序不正确。

HTML 标签名是大小写不敏感,比如<title><TITLE>是同一个标签。不过,一般习惯都是使用小写。

另外,HTML 语言忽略缩进和换行。下面几种写法的渲染结果是一样的。

<title>网页标题</title>

<title>
  网页标题
</title>

<title>网页
标题</title>

进一步说,整个网页的 HTML 代码完全可以写成一行,浏览器照样解析,结果完全一样。所以,正式发布网页之前,开发者有时会把源码压缩成一行,以减少传输的字节数。

各种网页的样式效果,比如内容的缩进和换行,主要靠 CSS 来实现。