html简介_HTML简介

html简介

HTML is a standard defined by the WHATWG, an acronym for Web Hypertext Application Technology Working Group, an organization formed by people working on the most popular web browser. This means it’s basically controlled by Google, Mozilla, Apple and Microsoft.

HTML是WHATWG定义的标准， WHATWG是Web超文本应用程序技术工作组的缩写，该组织由使用最流行的Web浏览器的人们组成。 这意味着它基本上由Google，Mozilla，Apple和Microsoft控制。

In the past the W3C (World Wide Web Consortium) was the organism in charge of creating the HTML standard.

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

The control informally moved from W3C to WHATWG when it became clear that the W3C push towards XHTML was not a good idea.

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

If you’ve never heard of XHTML, here’s a short story. In the early 2000, we all believed the future of the Web was XML (seriously). So HTML moved from being a SGML-based authoring language to a XML markup language.

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

It was a big change. We had to know, and respect, more rules. Stricter rules.

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

Eventually browser vendors realized this was not the right path for the Web and they pushed back, creating what is now known as HTML5.

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

W3C did not really agree on leaving control of HTML and for years we got 2 competing standards, each one aiming to be the official one. Eventually on 28 May 2019 it was made official by W3C that the “true” HTML version was the one published by WHATWG.

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

I mentioned HTML5. Let me explain this little story. I know, it’s kinda confusing up to now, as with many things in life when many actors are involved, it’s also fascinating.

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

We had HTML version 1 in 1993. [Here’s the original RFC].

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

HTML 2 followed in 1995.

HTML 2于1995年问世。

We got HTML 3 in January 1997, and HTML 4 in December 1997.

我们在1997年1月获得HTML 3，在1997年12月获得HTML 4 。

Busy times!

繁忙的时候！

20+ years went by, we had all this XHTML thing, and eventually we are now at this HTML5 “thing”, which is not really just HTML any more.

20多年过去了，我们拥有了所有这些XHTML东西，最终我们现在处在这个HTML5“东西”上，它不再仅仅是HTML 。

HTML5 is a term that now defines a whole set of technologies, which includes HTML but adds a lot of APIs and standards like WebGL, SVG and more.

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

The key thing to understand here is this: there is no such thing (any more) as an HTML version now. It’s a living standard. Like CSS, we call it 3 but in reality it’s a bunch of independent modules developed separately. Like JavaScript, we have one new edition each year, but it does not matter much any more rather than which individual features are implemented by the engine.

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

Yes we call it HTML5 but HTML4 is from 1997. It’s a long time for anything, imagine for the web.

是的，我们称它为HTML5，但HTML4是1997年发布的。

This is where the standard “lives”: [https://html.spec.whatwg.org/multipage].

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

HTML基础 (The HTML basics)

HTML is the markup language we use to structure content that we consume on the Web.

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

HTML is served to the browser, in different ways.

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

It can be generated by a server-side application that builds it depending on the request or the session data, for example a Rails or Laravel or Django application.

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

Or it can be generated by a JavaScript client-side application that generates HTML on the fly.

或者可以由JavaScript客户端应用程序生成，该客户端应用程序可以动态生成HTML。

Or, in the simplest case, it can be stored into a file, and served to the browser by a Web server.

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

Let’s dive into this case, although in practice it’s probably the least popular way to generate HTML, it’s still essential to know the basic building blocks.

让我们深入研究这种情况，尽管在实践中它可能是生成HTML的最不流行的方法，但了解基本的构建块仍然很重要。

By convention, an HTML file is saved with a .html or .htm extension.

按照约定，HTML文件以.html或.htm扩展名保存。

Inside this file, we organize the content using tags.

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

Tags wrap the content, and each tag give a special meaning to the text it wraps.

标签包装内容，每个标签为其包装的文本赋予特殊含义。

Let’s make a few examples.

让我们举几个例子。

This HTML snippet creates a paragraph using the p tag:

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

<p>A paragraph of text</p>

This HTML snippet creates a list of items using the ul tag, which means unordered list, and the li tags, which mean list item:

该HTML代码段使用ul标签(表示无序列表 )和li标签(表示list item)创建项目列表 ：

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

When an HTML page is served by the browser, the tags are interpreted and the browser renders the elements according to the rules that define the visual appearance of them.

当浏览器为HTML页面提供服务时，标记将被解释，浏览器将根据定义元素视觉外观的规则来渲染元素。

Some of those rules are built-in. Like how a list renders, for example. Or how a link is rendered in blue, underlined.

其中一些规则是内置的。 例如，类似列表的呈现方式。 或如何用蓝色下划线显示链接。

Some other rules are set by you with CSS.

其他一些规则由您使用CSS设置。

HTML is not presentational. It’s not concerned with how things look. Instead, it’s concerned with what things mean.

HTML不是演示性的。 它与事物的外观无关。 相反，它与事物的含义有关 。

It’s up to the browser to determine how things look, with the directives defined by who builds the page, with the CSS language.

浏览器由CSS语言来决定外观，由谁来构建页面来定义指令。

Now, those 2 examples I made are HTML snippets taken outside of a page context.

现在，我做的这两个示例是在页面上下文之外获取HTML代码段。

HTML页面结构 (An HTML page structure)

Let’s make an example of a proper HTML page.

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

Things start with the Document Type Declaration (aka doctype), a way to tell the browser this is an HTML page, and which version of HTML we are using.

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

Modern HTML uses this doctype:

现代HTML使用以下文档类型：

<!DOCTYPE html>

Then we have the html element, which has an opening and closing tag:

然后，我们有了html元素，该元素具有一个开始和结束标记：

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

All tags have an opening and closing tag. Except a few self-closing tags which don’t need a closing one because they don’t contain anything in them.

所有标签都有一个开始和结束标签。 除了它不需要关闭一个，因为它们不包含在他们任何一个数自闭的标签。

The closing tag is same as the opening one, but with a /.

结束标记与开始标记相同，但带有/ 。

The html starting tag is used at the beginning of the document, right after the document type declaration.

html起始标记用于文档的开头，紧随文档类型声明之后。

The html ending tag is the last thing present in an HTML document.

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

Inside the html element we have 2 elements: head and body:

在html元素内部，我们有2个元素： head和body ：

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

Inside head we will have tags that are essential to creating a web page, like the title, the metadata, and internal or external CSS and JavaScript. Mostly things that do not directly appear on the page, but only help the browser (or bots like the Google search bot) display it properly.

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

Inside body we will have the content of the page. The visible stuff.

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

标签与元素 (Tags vs elements)

I mentioned tags and elements. What’s the difference?

我提到了标签和元素。 有什么不同？

Elements have a starting tag, and closing tag.

元素具有开始标签和结束标签。

In this case, we use the p starting and closing tags to create a p element.

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

<p>A paragraph of text</p>

So, an element constitutes the whole package:

因此，一个元素构成了整个包 ：

• starting tag
  起始标签
• text content (and possibly other elements)
  文字内容(可能还有其他元素)
• closing tag
  结束标签

If an element has no closing tag, it is only written with the starting tag, and it cannot contain any text content.

如果元素没有结束标签，则仅使用开始标签编写，并且不能包含任何文本内容。

That said, I might use the tag or element term in the book meaning the same thing, except I explicitly mention starting tag or ending tag.

就是说，我可能会在书中使用标签或元素的含义相同，除了我明确提到开始标签或结束标签。

属性 (Attributes)

The starting tag of an element can have special snippets of information we can attach, called attributes.

元素的开始标记可以包含我们可以附加的特殊信息片段，称为属性 。

Attributes have the key="value" syntax:

属性具有key="value"语法：

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

You can also use single quotes, but using double quotes in HTML is a nice convention.

您也可以使用单引号，但是在HTML中使用双引号是一个很好的约定。

We can have multiple of them:

我们可以有多个：

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

and some attributes are boolean, meaning you only need the key:

并且一些属性是布尔值，这意味着您只需要键：

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

The class and id attributes are two of the most common you will find used.

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

They have a special meaning, and they are useful both in CSS and JavaScript.

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

The difference between the two is that an id is unique in the context of a web page, it cannot be duplicated.

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

Classes, on the other hand, can appear multiple times on multiple elements.

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

Plus, an id is just one value. class can hold multiple values, separated by a space:

另外， id只是一个值。 class可以包含多个值，以空格分隔：

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

It’s common to use the dash - to separate words in a class value, but it’s just a convention.

通常使用破折号-将类值中的单词分开，但这只是一个约定。

Those are just 2 of the possible attributes you can have. Some attributes are only used for one tag. They are highly specialized.

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

Other attributes can be used in a more general way. You just saw id and class, but we have other ones too, like style which can be used to insert inline CSS rules on an element.

其他属性可以更一般的方式使用。 您刚刚看到了id和class ，但是我们还有其他一些，例如style ，可以用于在元素上插入内联CSS规则。

不区分大小写 (Case insensitive)

HTML is case insensitive. Tags can be written in all caps, or lowercase. In the early days, caps were the norm. Today lowercase is the norm. It is a convention.

HTML不区分大小写。 标签可以全部大写，也可以小写。 在早期，上限是常态。 今天，小写字母已成为常态。 这是一个惯例。

You usually write like this:

您通常这样写：

<p>A paragraph of text</p>

not like this:

不像这样：

<P>A paragraph of text</P>

空格 (White space)

Pretty important. In HTML, even if you add multiple white spaces into a line, it’s collapsed by the browser’s CSS engine.

相当重要 在HTML中，即使您在一行中添加了多个空格，浏览器CSS引擎也会将其折叠。

For example the rendering of this paragraph

例如本段的呈现

<p>A paragraph of text</p>

is the same as this:

与此相同：

<p>        A paragraph of text</p>

and the same as this:

与此相同：

<p>A paragraph

of
           text          </p>

Using the white-space CSS property you can change how things behave. You can find more information on how CSS processes white space in the CSS Spec

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

I’d say use the syntax that makes things visually more organized and easier to read, but you can use any syntax you like.

我想说的是，使用使语法在视觉上更具组织性和易于阅读的语法，但是您可以使用任何喜欢的语法。

I typically route for

我通常会前往

<p>A paragraph of text</p>

or

要么

<p>
	A paragraph of text
</p>

Nested tags should be indented with 2 or 4 characters, depending on your preference:

嵌套标签应缩进2或4个字符，具体取决于您的偏好：

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

Note: this means that if you want to add an additional space, it can make you pretty mad. I suggest to use CSS to make more space when needed.

注意：这意味着，如果要添加额外的空间，可能会使您发疯。 我建议在需要时使用CSS腾出更多空间。

Note: in special cases, you can use the   HTML entity (an acronym that means non-breaking space) - more on HTML entities later on. I think this should not be abused. CSS is always preferred to alter the visual presentation.

注意：在特殊情况下，您可以使用  HTML实体(缩写，表示不间断空格 )-有关HTML实体的更多信息。 我认为这不应被滥用。 始终首选使用CSS来更改视觉呈现。

文件标题 (The document heading)

The head tag contains special tags that define the document properties.

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

It’s always written before the body tag, right after the opening html tag:

它总是写在body标签之前，紧接在html标签之后：

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

We never use attributes on this tag. And we don’t write content in it.

我们永远不会在此标签上使用属性。 而且我们不会在其中编写内容。

It’s just a container for other tags. Inside it we can have a wide variety of tags, depending on what you need to do:

它只是其他标签的容器。 在其中，根据您需要执行的操作，我们可以使用多种标签：

• title

  title

• script

  script

• noscript

  noscript

• link

  link

• style

  style

• base

  base

• meta

  meta

title标签 (The title tag)

The title tag determines the page title. The title is displayed in the browser, and it’s especially important as it’s one of the key factors for Search Engines Optimization.

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

script标签 (The script tag)

This tag is used to add JavaScript into the page.

此标记用于将JavaScript添加到页面中。

You can include it inline, using an opening tag, the JavaScript code and then the closing tag:

您可以使用开始标记，JavaScript代码和结束标记来内联包含它：

<script>
..some JS
</script>

Or you can load an external JavaScript file by using the src attribute:

或者，您可以使用src属性加载外部JavaScript文件：

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

The type attribute by default is set to text/javascript, so it’s completely optional.

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

There is something pretty important to know about this tag.

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

Sometimes this tag is used at the bottom of the page. Why? For performance reasons.

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

Loading scripts by default blocks the rendering of the page until the script is parsed and loaded.

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

Doing so, the script is loaded and executed after all the page is already parsed and loaded, giving a better experience to the user over keeping it in the head tag.

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

My opinion is that this is now bad practice. Let script live in the head tag.

我的观点是，这现在是不好的做法。 让script保留在head标签中。

In modern JavaScript we have an alternative, more performant than keeping the script at the bottom of the page - defer attribute:

在现代JavaScript中，除了将脚本保留在页面底部之外，我们还有另一种性能更高的选择defer属性：

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

This is the scenario that triggers the faster path to a fast loaded page, and a fast loaded JavaScript.

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

Note: the async attribute is similar, but in my opinion a worse option than defer. I describe why in details in the page https://flaviocopes.com/javascript-async-defer/

注意： async属性是相似的，但在我看来，比defer更糟糕的选择。 我会在https://flaviocopes.com/javascript-async-defer/页面中详细说明为什么

noscript标签 (The noscript tag)

This tag is used to detect when scripts are disabled in the browser.

此标记用于检测何时在浏览器中禁用了脚本。

Note: users can choose to disable JavaScript scripts in the browser settings. Or the browser might not support them by default.

注意：用户可以选择在浏览器设置中禁用JavaScript脚本。 否则，浏览器可能默认不支持它们。

It is used differently whether it’s put in the document head, or in the document body.

无论是放在文档头还是文档正文中，它的用法都不同。

We’re talking about the document head now, so let’s first introduce this usage.

现在我们正在谈论文档头，因此让我们首先介绍这种用法。

In this case, the noscript tag can only contain other tags:

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

• link tags

  link标签

• style tags

  style标签

• meta tags

  meta标记

to alter the resources served by the page, or the meta information, if scripts are disabled.

如果禁用了脚本，则更改页面提供的资源或meta信息。

In this example I set an element with the no-script-alert class to display if scripts are disabled, as it was display: none by default:

在此示例中，我使用no-script-alert类设置了一个元素，以显示是否禁用了脚本，因为它是display: none默认情况下， display: none ：

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

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

Let’s solve the other case: if put in the body, it can contain content, like paragraphs and other tags, which are rendered in the UI.

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

link标签 (The link tag)

The link tag is used to set relationships between a document and other resources.

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

It’s mainly used to link an external CSS file to be loaded.

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

This element has no closing tag.

该元素没有结束标签。

Usage:

用法：

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

The media attribute allows to load different stylesheets depending on the device capabilities:

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

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

We can link to different resources than stylesheets.

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

For example we can associate an RSS feed using

例如，我们可以使用

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

We can associate a favicon using:

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

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

This tag was also used for multi-page content, to indicate the previous and next page using rel="prev" and rel="next". Mostly for Google. In 2019 Google announced it does not use this tag any more because it can find the correct page structure without it.

这个标签也用于多页内容，使用指示一个和下一个页面rel="prev"和rel="next" 。 主要用于Google。 Google在2019年宣布不再使用此标签，因为没有它它可以找到正确的页面结构。

style标签 (The style tag)

This tag can be used to add styles into the document, rather than loading an external stylesheet.

此标记可用于将样式添加到文档中，而不是加载外部样式表。

Usage:

用法：

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

As with the link tag, you can use the media attribute to only use that CSS on the specified medium:

与link标签一样，您可以使用media属性仅在指定的介质上使用该CSS：

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

You can also add this tag in the document body. Speaking of this, it’s interesting the scoped attribute to only assign that CSS to the current document subtree. In other words, to avoid leaking the CSS outside of the parent element.

您也可以在文档正文中添加此标签。 说到这，有趣的是， scoped属性仅将CSS分配给当前文档子树。 换句话说，为了避免CSS泄漏到父元素之外。

base标签 (The base tag)

This tag is used to set a base URL for all relative URLs contained in the page.

此标记用于为页面中包含的所有相对URL设置基本URL。

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

meta标记 (The meta tag)

Meta tags perform a variety of tasks and they are very, very important.

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

Especially for SEO.

特别是对于SEO。

meta elements only have the starting tag.

meta元素仅具有开始标记。

The most basic one is the description meta tag:

最基本的一个是description元标记：

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

This might be used by Google to generate the page description in its result pages, if it finds it better describes the page than the on-page content (don’t ask me how).

这可能是由谷歌被用来生成在结果页面的页面描述，如果找到更好的描述比对网页内容的页面(不要问我怎么样)。

The charset meta tag is used to set the page character encoding. utf-8 in most cases:

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

<meta charset="utf-8">

The robots meta tag instructs the Search Engine bots whether to index a page or not:

robots元标记可指示搜索引擎robots是否对页面建立索引：

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

Or if they should follow links or not:

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

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

You can set nofollow on individual links, too. This is how you can set nofollow globally.

您也可以在单个链接上设置nofollow。 这样可以全局设置nofollow 。

You can combine them:

您可以将它们组合：

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

The default behavior is index, follow.

默认行为是index, follow 。

You can use other properties, including nosnippet, noarchive, noimageindex and more.

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

You can also just tell Google instead of targeting all search engines:

您也可以告诉Google而不是定位所有搜索引擎：

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

and other search engines might have their own meta tag, too.

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

Speaking of which, we can tell Google to disable some features. This prevents the translate functionality in the search engine results:

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

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

The viewport meta tag is used to tell the browser to set the page width depending on the device width.

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

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

See more on this tag.

在此标签上查看更多信息 。

Another rather popular meta tag is the http-equiv="refresh" one. This line tells the browser to wait 3 seconds, then redirect to that other page:

另一个比较流行的meta标签是http-equiv="refresh"标签。 此行告诉浏览器等待3秒钟，然后重定向到该其他页面：

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

Using 0 instead of 3 will redirect as soon as possible.

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

This is not a full reference, other less used meta tags exist.

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

After this document heading introduction, we can start diving into the document body.

在介绍完本文档标题之后，我们可以开始深入研究文档正文。

文件主体 (The document body)

After the closing head tag, we can only have one thing in an HTML document: the body element.

在关闭head标签之后，我们在HTML文档中只能有一件东西： body元素。

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

Just like the head and html tags, we can only have one body tag in one page.

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

Inside the body tag we have all the tags that define the content of the page.

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

Technically, the start and ending tags are optional. But I consider it a good practice to add them. Just for clarity.

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

In the next chapters we’ll define the variety of tags you can use inside the page body.

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

But before, we must introduce a difference between block elements and inline elements.

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

块元素与内联元素 (Block elements vs inline elements)

Visual elements, the ones defined in the page body, can be generally classified in 2 categories:

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

• block elements (p, div, heading elements, lists and list items, …)

  块元素( p ， div ，标题元素，列表和列表项，...)

• inline elements (a, span, img, …)

  内联元素( a ， span ， img等等)

What is the difference?

有什么区别？

Block elements, when positioned in the page, do not allow other elements next to them. To the left, or to the right.

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

Inline elements instead can sit next to other inline elements.

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

The difference also lies in the visual properties we can edit using CSS. We can alter the width/height, margin, padding and border or block elements. We can’t do that for inline elements.

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

Note that using CSS we can change the default for each element, setting a p tag to be inline, for example, or a span to be a block element.

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

Another difference is that inline elements can be contained in block elements. The reverse is not true.

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

Some block elements can contain other block elements, but it depends. The p tag for example does not allow such option.

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

翻译自: https://flaviocopes.com/html-introduction/

html简介