关于HTML你不得不知道的知识

2025-03-04

HTML

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

你好，我是Even。

HTML你肯定听说过，那么什么是HTML呢？

HTML全称超文本标记语言（英语：HyperText Markup Language，简称：HTML），是用来定义网页内容的含义和结构的标记语言。

如何理解超文本标记语言呢？首先看“超文本”，超文本指的就是超链接，它能够从一个页面跳转到另一个页面，这意味着它能将非常非常多的页面像网一个连接起来，这就是我们平时说的万维网Web。然后是“标记语言”，要理解标记，首先要理解为什么要标记，怎么标记。假设网页的作者要将一段文本"Hello, Even"放在网页中，它可以是文章的标题，可以是文章的一个段落，也可以是目录里某个章节，这取决于网页作者的意图。当网页作者确定了要将它放在一个段落中，如何描述呢？在HTML里，我们会用一个标签把这段文本标记为段落，比如 <p>Hello, Even</p>，这样网页的读者就明白，噢！这是一个段落。HTML就是这样用标签来赋予文本不同的含义的语言。

当我们用标签包裹了一个文本后，这就形成了一个最简单的元素。什么是元素呢？

一个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。
内容（Content）：元素的内容，本例中就是段落的文本。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。

有些元素没有结束标记，这样的元素叫做: 空元素，例如

<!-- 元素meta -->
<meta charset="UTF-8">
<meta charset="UTF-8" />

<!-- 元素img -->
<img src="url_path" alt="Firefox 图标" />

每一个元素都是有属性的

属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性是一个识别名称，以后为元素设置样式信息时更加方便。

属性必须包含：

一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。
属性名称，后面跟着一个等于号。
一个属性值，由一对引号（""）引起来。

你也可以把元素放到其他元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将 very 一词嵌套在 <strong> 元素中，意味着这个单词被着重强调：

<p>My cat is <strong>very</strong> grumpy.</p>

你需要确保元素被正确的嵌套：在上面的例子中我们先打开 p 元素，然后才打开 strong 元素，因此必须先将 strong 元素关闭，然后再去关闭 p 元素。下面的例子是错误的：

<p>My cat is <strong>very grumpy.</p></strong>

所有的元素都需要正确的打开和关闭，这样才能按你所想的方式展现。由于上述示例中的那种重叠，浏览器不得不猜测你的意图。这种猜测可能会导致意想不到的结果。

单独的 HTML 元素本身并不十分有用。接下来，我们来看看单个元素是如何组合成整个 HTML 页面的：

<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>我的测试站点</title>
	</head>
	<body>
		<p>这是我的页面</p>
	</body>
</html>

这里我们有：

<!DOCTYPE html>: 声明文档类型。早期的 HTML（大约 1991-1992 年）文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。文档类型使用类似于这样：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。文档类型是一个历史遗留问题，需要包含它才能使其他东西正常工作。现在，只需要知道 <!DOCTYPE html> 是最短的有效文档声明！
<html></html>: <html> 元素。这个元素包裹了页面中所有的内容，有时被称为根元素。
<head></head>: <head> 元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述、CSS 样式、字符集声明等等。以后的章节中会学到更多相关的内容。
<meta charset="utf-8">: <meta> 元素。这个元素代表了不能由其他 HTML 元相关元素表示的元数据，比如 <base>、<link>、<script>、<style> 或 <title>。charset 属性将你的文档的字符集设置为 UTF-8，其中包括绝大多数人类书面语言的大多数字符。有了这个设置，页面现在可以处理它可能包含的任何文本内容。没有理由不对它进行设置，它可以帮助避免以后的一些问题。
<title></title>: <title> 元素。这设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容。当页面被加入书签时，页面标题也被用来描述该页面。
<body></body>: <body> 元素。包含了你访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。

现在我们就能理解文章开头那句对HTML的定义了。每一个HTML元素都有具体的含义，比如a元素是个超链接，p元素是个段落，h1元素是个一级标题。这样一个个不同的元素以不同的顺序和嵌套关系组合在一起，就有了结构。因此，HTML就有了能够定义网页内容的含义和结构的能力。

但要记住，所有元素与展示效果无关。元素展示到页面中的效果，应该由CSS决定。因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。重要：选择什么元素，取决于内容的含义，而不是显示出的效果。

现在，我们来回答最后一个问题。为什么需要语义化？最主要的两个原因，一是为了搜索引擎优化（SEO），像是百度、搜搜、Bing、Google这样的搜索引擎每隔一段时间就会从整个互联网中抓取页面源代码，为了让搜索引擎更好的理解你网页的内容就需要语义化。只有知道你网页的标题是什么，内容有哪些，用户才会点进你的网站。二是为了让浏览器理解你的网页，举两个例子，阅读模式和语音模式，大家有兴趣的可以去搜一搜，这里就不细说了。

好了，这就是HTML的一些基本知识，HTML5里又新增了很多不同含义的元素，大家快去学习吧～加油！

你好Even

关于HTML你不得不知道的知识

评论区 (0)

发布评论