HTML简介

从其历史和基本构建块中发现HTML

HTML是由工作组,是Web超文本应用程序技术工作组(Web Hypertext Application Technology Working Group)的缩写,该组织由使用最流行的Web浏览器的人员组成。这意味着它基本上由Google,Mozilla,Apple和Microsoft控制。

过去的W3C(万维网联盟)是负责创建HTML标准的组织。

当很明显W3C向XHTML推进不是一个好主意时,该控件非正式地从W3C转移到WHATWG。

如果您从未听说过XHTML,那么这里有个简短的故事。在2000年初,我们都相信Web的未来(严重)是XML。因此,HTML已从基于SGML的创作语言转变为XML标记语言。

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

最终,浏览器供应商意识到这不是Web的正确路径,于是他们推迟了,创建了现在称为HTML5的东西。

W3C并未真正同意放弃对HTML的控制,多年来,我们获得了2个相互竞争的标准,每个标准都旨在成为官方标准。最终,W3C于2019年5月28日正式宣布,“真正的” HTML版本是WHATWG发布的版本。

我提到了HTML5。让我解释一下这个小故事。我知道,到目前为止,这还有些令人困惑,就像生活中涉及许多演员的许多事情一样,它也令人着迷。

我们在1993年拥有HTML版本1。[这里是原始RFC]。

HTML 2于1995年问世。

我们有HTML 3在1997年1月,以及HTML 4 in December 1997.

繁忙的时候!

20多年过去了,我们拥有了所有这些XHTML东西,最终我们现在处在这个HTML5“东西”上,这并不是真的只是HTML还有。

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

这里要了解的关键是:现在没有(像)HTML版本这样的东西。这是生活水平。像CSS一样,我们将其称为3,但实际上,它是一堆单独开发的独立模块。像JavaScript一样,我们每年都有一个新版本,但是这与引擎实现了哪些单独功能无关紧要。

是的,我们称之为HTML5,但HTML4是1997年发布的。对于任何事物来说,这都是很长的时间,想想网络。

这是标准“生存”的地方:[https://html.spec.whatwg.org/multipage]。

HTML基础

HTML是用于构造我们在Web上消费的内容的标记语言。

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>

然后我们有html元素,具有开始和结束标签:

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

所有标签都有一个开始和结束标签。除了一些自闭标签外,因为它们不包含任何东西,因此不需要合上标签在他们中

结束标记与开始标记相同,但带有一个/

html在文档类型声明之后,在文档的开始处使用了开始标记。

html结束标记是HTML文档中的最后一件事。

在 - 的里面html元素,我们有2个元素:headbody

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

里面head我们将拥有创建网页必不可少的标签,例如标题,元数据以及内部或外部CSS和JavaScript。通常情况下,不会直接显示在页面上的东西只会帮助浏览器(或Google搜索机器人等机器人)正确显示它。

里面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>

classid属性是您会发现最常用的两个属性。

它们具有特殊的含义,并且在CSS和JavaScript中都非常有用。

两者之间的区别在于id在网页的上下文中是唯一的,不能重复。

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

另外,id只是一个价值。class可以容纳多个值,以空格分隔:

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

破折号很常见-在类值中分隔单词,但这只是一个约定。

这些只是您可以拥有的可能属性中的2个。有些属性仅用于一个标签。他们是高度专业化的。

可以以更通用的方式使用其他属性。你刚刚看到idclass,但我们还有其他人,例如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-spaceCSS属性您可以更改事物的行为方式。您可以在中找到有关CSS如何处理空白的更多信息。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属性:

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

type默认情况下,属性设置为text/javascript,因此完全是可选的。

关于此标签,有一些非常重要的知识。

有时在页面底部使用此标记。为什么?出于性能原因。

默认情况下,加载脚本会阻止页面的呈现,直到解析并加载脚本为止。

这样,在所有页面都已被解析和加载之后,脚本便被加载并执行,与将脚本保留在页面中相比,该脚本为用户提供了更好的体验。head标签。

我的看法是,这现在是不好的做法。让script住在head标签。

在现代JavaScript中,除了将脚本保留在页面底部之外,我们还有一种更有效的选择-defer属性:

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

这种情况触发了到快速加载页面和快速加载JavaScript的更快路径。

注意:async属性是相似的,但是我认为比defer。我会在页面中详细说明原因https://flaviocopes.com/javascript-async-defer/

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>
	...
&lt;/<span style="color:#f92672">head</span>&gt;
...

</html>

让我们解决另一种情况:如果放在正文中,它可以包含在UI中呈现的内容,例如段落和其他标签。

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">

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

例如,我们可以使用

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

我们可以使用以下方式关联收藏夹图标:

<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". Mostly for Google. In 2019 Google宣布不再使用此标签因为它可以找到没有它的正确页面结构。

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">

可能如果Google发现比页面上的内容更好地描述了页面,请使用Google来在其结果页面中生成页面描述(不要问我怎么做)。

charsetmeta标签用于设置页面字符编码。utf-8大多数情况下:

<meta charset="utf-8">

robotsmeta标签可指示搜索引擎机器人是否将网页编入索引:

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

或者他们是否应该遵循链接:

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

您也可以在单个链接上设置nofollow。这是你可以设置的nofollow全球范围。

您可以将它们结合起来:

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

默认行为是index, follow

您可以使用其他属性,包括nosnippetnoarchivenoimageindex和更多。

您也可以只告诉Google而不是定位全部搜索引擎:

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

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

说到这一点,我们可以告诉Google禁用某些功能。这会阻止搜索引擎结果中的翻译功能:

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

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

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

看到更多关于这个标签

另一个颇受欢迎的meta标签是http-equiv="refresh"一。此行告诉浏览器等待3秒钟,然后重定向到该其他页面:

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

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

这不是完整的参考,存在其他使用较少的元标记。

介绍完本文档标题后,我们就可以开始深入研究文档正文了。

文件主体

在结束head标签之后,我们在HTML文档中只能有一件东西:body元素。

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

就像headhtml标签,我们只能有一个body在一页中标记。

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

从技术上讲,开始和结束标记是可选的。但是我认为添加它们是一个好习惯。只是为了清楚起见。

在下一章中,我们将定义可在页面正文中使用的各种标签。

但在此之前,我们必须在块元素和内联元素之间引入区别。

块元素与内联元素

在页面正文中定义的视觉元素通常可以分为两类:

  • 块元素(pdiv,标题元素,列表和列表项,…)
  • 内联元素(aspanimg,…)

有什么区别?

块元素位于页面中时,不允许其旁边有其他元素。在左边或右边。

相反,内联元素可以坐在其他内联元素旁边。

区别还在于我们可以使用CSS编辑的视觉属性。我们可以更改宽度/高度,边距,填充和边框或块元素。我们不能对内联元素执行此操作。

请注意,使用CSS我们可以更改每个元素的默认设置,p标记为内联(例如)或span成为一个块元素。

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

某些块元素可以包含其他块元素,但这要视情况而定。这p例如,标记不允许这种选项。

免费下载我的HTML手册


更多HTML教程: