HTML的介绍

前端小工
178 阅读14分钟

HTML是由WHATWG定义的标准，WHATWG是Web超文本应用技术工作组的首字母缩写，该组织由从事最流行的网络浏览器的人组成。这意味着它基本上由谷歌、Mozilla、苹果和微软控制。

在过去，W3C（万维网联盟）是负责创建HTML标准的机构。

当W3C对XHTML的推动显然不是一个好主意时，控制权非正式地从W3C转移到了WHATWG。

如果你没有听说过XHTML，这里有一个简短的故事。在2000年初，我们都相信网络的未来是XML（真的）。因此，HTML从一种基于SGML的创作语言转变为一种XML标记语言。

这是一个很大的变化。我们必须了解并尊重更多的规则。更严格的规则。

最终，浏览器供应商意识到这不是正确的网络发展之路，他们进行了反击，创造了现在所称的HTML5。

W3C并没有真正同意离开对HTML的控制，多年来，我们得到了两个相互竞争的标准，每一个都旨在成为官方标准。最终在2019年5月28日，W3C正式宣布，"真正的 "HTML版本是由WHATWG发布的版本。

我提到了HTML5。让我解释一下这个小故事。我知道，到现在为止还有点混乱，就像生活中很多事情涉及到很多演员时一样，它也很吸引人。

我们在1993年有了HTML版本1。[这里是最初的RFC]。

1995年，HTML 2问世。

1997年1月，我们有了HTML 3，1997年12月又有了HTML 4。

忙碌的时代!

20多年过去了，我们有了所有这些XHTML的东西，最终我们现在到了HTML5这个 "东西"，它不再是真正的HTML了。

HTML5是一个术语，现在定义了一整套技术，其中包括HTML，但增加了许多API和标准，如WebGL、SVG等等。

这里需要理解的关键是：现在没有所谓的HTML版本（不再有）。它是一个活的标准。就像CSS，我们称它为3，但实际上它是一堆独立的模块，分别开发。像JavaScript一样，我们每年都有一个新版本，但这已经不重要了，而是引擎实现了哪些单独的功能。

是的，我们叫它HTML5，但HTML4是1997年的。对于任何事物来说，这都是一段很长的时间，想象一下网络的情况。

这就是标准的 "生命 "所在。[html.spec.whatwg.org/multipage\]…

HTML的基础知识

HTML是一种标记语言，我们用它来组织我们在网络上消费的内容。

HTML是以不同的方式提供给浏览器的。

它可以由一个服务器端的应用程序生成，该应用程序根据请求或会话数据来构建它，例如Rails或Laravel或Django应用程序。

或者，它可以由一个JavaScript客户端应用程序生成，该程序在运行中生成HTML。

或者，在最简单的情况下，它可以被存储到一个文件中，并由一个Web服务器提供给浏览器。

让我们深入了解这种情况，尽管在实践中这可能是最不受欢迎的生成HTML的方式，但了解基本的构件仍然是必要的。

按照惯例，一个HTML文件以.html 或.htm 为扩展名保存。

在这个文件中，我们使用标签来组织内容。

标签包裹着内容，每个标签都对它所包裹的文本赋予特殊的意义。

让我们举几个例子。

这个HTML片段使用p 标签创建了一个段落。

<p>A paragraph of text</p>

这个HTML片段使用ul 标签和li 标签创建了一个项目列表，前者表示无序列表，后者表示列表项。

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

当浏览器为一个HTML页面提供服务时，标签会被解释，浏览器会根据定义元素的视觉外观的规则渲染这些元素。

其中有些规则是内置的。比如说，一个列表是如何呈现的。或者一个链接是如何以蓝色、下划线呈现的。

其他一些规则是由你用CSS设置的。

HTML不是呈现性的。它不关注事物的外观。相反，它关注的是事物的含义。

由浏览器来决定事物的外观，由建立页面的人用CSS语言来定义指令。

现在，我举的这两个例子是在页面背景之外的HTML片段。

一个HTML页面的结构

让我们举一个适当的HTML页面的例子。

事情从文档类型声明（又称doctype）开始，这是一种告诉浏览器这是一个HTML页面的方式，以及我们所使用的HTML版本。

现代的HTML使用这个doctype。

然后，我们有html 元素，它有一个打开和关闭标签。

<!DOCTYPE html>
<html>
...
</html>

所有的标签都有一个打开和关闭的标签。除了一些自闭标签，它们不需要闭合标签，因为它们里面不包含任何东西。

结束标签与开始标签相同，但有一个/ 。

html 起始标签用在文档的开头，紧接着文档类型声明。

html 结束标签是HTML文档中最后出现的东西。

在html 元素里面，我们有2个元素：head 和body 。

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

在head 里面，我们会有一些对创建网页至关重要的标签，如标题、元数据以及内部或外部的CSS和JavaScript。大多数是不直接出现在页面上的东西，只是帮助浏览器（或像谷歌搜索机器人这样的机器人）正确显示它。

在body ，我们将有页面的内容。可见的东西。

标签与元素

我提到了标签和元素。有什么区别呢？

元素有一个开始标签和结束标签。

在这种情况下，我们使用p 开始和结束标签来创建一个p 元素。

<p>A paragraph of text</p>

所以，一个元素构成了整个包装。

  • 起始标签
  • 文本内容（可能还有其他元素）
  • 结束标签

如果一个元素没有闭合标签，它只能用起始标签来写，而且不能包含任何文本内容。

也就是说，我可能会在书中使用标签或元素这个术语，意思是一样的，只不过我明确提到了起始标签或结束标签。

属性

一个元素的起始标签可以有我们可以附加的特殊信息片段，称为属性。

属性的语法是key="value" 。

<p class="a-class">A paragraph of text</p>

你也可以使用单引号，但在HTML中使用双引号是一个很好的惯例。

我们可以有多个属性。

<p class="a-class" id="an-id">A paragraph of text</p>

而有些属性是布尔型的，意味着你只需要键。

<script defer src="file.js"></script>

class 和id 属性是你会发现的两个最常用的属性。

它们有一个特殊的含义，在CSS和JavaScript中都很有用。

两者之间的区别是，id 在一个网页的上下文中是唯一的，它不能被复制。

而另一方面，类可以在多个元素上多次出现。

另外，一个id 只是一个值。class 可以容纳多个值，用一个空格隔开。

<p class="a-class another-class">A paragraph of text</p>

通常使用破折号- ，以分隔类值中的单词，但这只是一个惯例。

这些只是你可以拥有的两个可能的属性。有些属性只用于一个标签。它们是高度专业化的。

其他属性可以以更普遍的方式使用。你刚刚看到id 和class ，但我们也有其他属性，比如style ，它可以用来在一个元素上插入内联CSS规则。

不区分大小写

HTML是不分大小写的。标签可以用全大写，也可以用小写。在早期，大写是标准。今天，小写才是标准。这是一种惯例。

你通常这样写。

<p>A paragraph of text</p>

而不是像这样。

<P>A paragraph of text</P>

白色空间

相当重要。在HTML中，即使你在一行中加入多个留白，它也会被浏览器的CSS引擎折叠。

例如，这一段的呈现方式

<p>A paragraph of text</p>

与此相同。

<p>        A paragraph of text</p>

和这个一样。

<p>A paragraph

of
           text          </p>

使用white-space CSS属性，你可以改变事物的行为方式。你可以在CSS Spec中找到更多关于CSS如何处理空白的信息。

我想说的是，使用使事情在视觉上更有条理、更容易阅读的语法，但你可以使用你喜欢的任何语法。

我通常使用的是

<p>A paragraph of text</p>

或

<p>
	A paragraph of text
</p>

嵌套标签应缩进2或4个字符，这取决于你的偏好。

<body>
	<p>
		A paragraph of text
	</p>
	<ul>
		<li>A list item</li>
	</ul>
</body>

注意：这意味着，如果你想增加一个额外的空格，会让你很生气。我建议在需要时使用CSS来增加空间。

注意：在特殊情况下，你可以使用&nbsp; HTML实体（一个缩写，意思是非断裂空间）--后面会有更多关于HTML实体的内容。我认为这不应该被滥用。CSS始终是改变视觉表现的首选。

文档标题

head 标签包含定义文档属性的特殊标签。

它总是写在body 标签之前，紧随开头的html 标签之后。

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	...
</html>

我们从不在这个标签上使用属性。而且我们不在其中写内容。

它只是其他标签的一个容器。 在它里面，我们可以有各种各样的标签，这取决于你需要做什么。

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

title 标签

title 标签决定了页面的标题。标题会在浏览器中显示，它特别重要，因为它是搜索引擎优化的关键因素之一。

script 标签

这个标签用于在页面中添加JavaScript。

你可以在内联中包含它，使用开头标签、JavaScript代码，然后是结束标签。

<script>
..some JS
</script>

或者你可以通过使用src 属性加载一个外部的JavaScript文件。

<script src="file.js"></script>

type 属性默认设置为text/javascript ，所以它是完全可选的。

关于这个标签，有一些相当重要的东西需要了解。

有时，这个标签被用在页面的底部。为什么？因为性能原因。

默认情况下，加载脚本会阻止页面的渲染，直到脚本被解析和加载。

这样做，在所有的页面已经被解析和加载后，脚本才会被加载和执行，比起把它放在head 标签中，给用户带来更好的体验。

我的意见是，现在这种做法很不好。让script 住在head 标签中。

在现代的JavaScript中，我们有一个替代方案，比把脚本放在页面底部更有性能--defer 属性。

<script defer src="file.js"></script>

这是触发快速加载页面的更快路径的情况，也是快速加载JavaScript的情况。

注意：async 属性是类似的，但在我看来是比defer 更差的选择。我在flaviocopes.com/javascript-…页面中详细描述了原因。

noscript 标签

这个标签是用来检测浏览器中的脚本是否被禁用。

注意：用户可以在浏览器设置中选择禁用JavaScript脚本。或者浏览器可能在默认情况下不支持它们。

不管是放在文档头部，还是放在文档主体，它的用法都不一样。

我们现在讨论的是文档头部，所以我们先介绍一下这种用法。

在这种情况下，noscript 标签只能包含其他标签。

  • link 标签
  • style 标签
  • meta 标签

来改变页面所提供的资源，如果脚本被禁用，则改变meta 信息。

在这个例子中，我设置了一个具有no-script-alert 类的元素，如果脚本被禁用，就会显示，因为它默认是display: none 。

<!DOCTYPE html>
<html>
	<head>
		...
		<noscript>
			<style>
				.no-script-alert {
					display: block;
				}
			</style>
		</noscript>

		...
	</head>
	...
</html>

让我们来解决另一种情况：如果放在正文中，它可以包含内容，比如段落和其他标签，这些内容会在用户界面中呈现。

link 标签

link 标签用于设置一个文档和其他资源之间的关系。

它主要用于链接一个要加载的外部CSS文件。

这个元素没有关闭标签。

使用方法。

<!DOCTYPE html>
<html>
	<head>
		...
		<link href="file.css" rel="stylesheet">
		...
	</head>
	...
</html>

media 属性允许根据设备能力加载不同的样式表。

<link href="file.css" media="screen" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

我们可以链接到不同的资源而不是样式表。

例如，我们可以通过以下方式链接到一个RSS feed

<link rel="alternate" type="application/rss+xml" href="/index.xml">

我们可以通过以下方式链接一个favicon。

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">

这个标签也被用于多页内容，用rel="prev" 和rel="next" 来表示上一页和下一页。主要是针对谷歌。2019年，谷歌宣布不再使用这个标签，因为没有这个标签它也能找到正确的页面结构。

style 标签

这个标签可以用来将样式添加到文档中，而不是加载一个外部样式表。

使用方法。

<style>
.some-css {}
</style>

与link 标签一样，你可以使用media 属性来只在指定的媒介上使用该CSS。

<style media="print">
.some-css {}
</style>

你也可以在文档正文中添加这个标签。说到这里，很有意思的是scoped 属性，只把该CSS分配给当前文档子树。换句话说，是为了避免将CSS泄露到父元素之外。

base 标签

这个标签用于为页面中包含的所有相对URL设置一个基础URL。

<!DOCTYPE html>
<html>
	<head>
		...
		<base href="https://flaviocopes.com/">
		...
	</head>
	...
</html>

meta 标签

元标签执行各种任务，它们非常、非常重要。

特别是对于SEO来说。

meta 元素只有起始标签。

最基本的是description 元标签。

<meta name="description" content="A nice page">

这可能被谷歌用来在其结果页中生成页面描述，如果它发现它比页面上的内容更好地描述该页面（不要问我怎么做）。

charset 元标签用于设置页面字符编码。在大多数情况下，utf-8 。

robots 元标签指示搜索引擎的机器人是否对一个页面进行索引。

<meta name="robots" content="noindex">

或者它们是否应该跟踪链接。

<meta name="robots" content="nofollow">

你也可以在单个链接上设置nofollow。这就是你如何在全球范围内设置nofollow 。

你可以把它们结合起来。

<meta name="robots" content="noindex, nofollow">

默认行为是index, follow 。

你可以使用其他属性，包括nosnippet,noarchive,noimageindex 等。

你也可以只告诉谷歌，而不是针对所有的搜索引擎。

<meta name="googlebot" content="noindex, nofollow">

和其他搜索引擎可能也有自己的元标签。

说到这一点，我们可以告诉谷歌禁用一些功能。这可以防止搜索引擎结果中的翻译功能。

<meta name="google" content="notranslate">

viewport 元标签用于告诉浏览器根据设备宽度来设置页面宽度。

<meta name="viewport" content="width=device-width, initial-scale=1">

请看关于这个标签的更多信息。

另一个相当流行的元标签是http-equiv="refresh" 。这一行告诉浏览器等待3秒，然后重定向到其他页面。

<meta http-equiv="refresh" content="3;url=http://flaviocopes.com/another-page">

使用0而不是3将尽快重定向。

这并不是一个完整的参考，还有其他不太常用的元标签存在。

在这个文档标题介绍之后，我们可以开始潜入文档正文。

文档主体

在标题标签结束后，我们在一个HTML文档中只能有一样东西：body 元素。

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

就像head 和html 标签一样，我们在一个页面中只能有一个body 标签。

在body 标签里面，我们有定义页面内容的所有标签。

从技术上讲，开始和结束标签是可选的。但我认为添加它们是一个好的做法。只是为了清晰起见。

在接下来的章节中，我们将定义你可以在页面主体中使用的各种标签。

但在此之前，我们必须介绍一下块状元素和内联元素的区别。

块状元素与内联元素

视觉元素，即定义在页面主体中的元素，一般可以分为两类。

  • 块元素 (p,div, 标题元素, 列表和列表项, ...)
  • 内联元素 (a,span,img, ...)

有什么区别？

块状元素，在页面中定位时，不允许其他元素在其旁边。在左边，或在右边。

而内联元素可以坐在其他内联元素的旁边。

区别还在于我们可以用CSS编辑的视觉属性。我们可以改变宽度/高度、边距、填充和边框或块元素。对于内联元素，我们不能这样做。

请注意，使用CSS我们可以改变每个元素的默认值，例如，将p 标签设置为内联，或将span 设置为块状元素。

另一个区别是，内联元素可以包含在块元素中。反之，则不然。

一些块状元素可以包含其他块状元素，但这取决于。例如，p 标签就不允许这样的选择。

avatar
文章
阅读
粉丝