1、HTML入门——HTML基本语法

[1. 什么是HTML](#1. 什么是HTML)
[2. 剖析一个HTML元素](#2. 剖析一个HTML元素)
- [2.1 创建你的第一个HTML元素](#2.1 创建你的第一个HTML元素)
- [2.2 嵌套元素](#2.2 嵌套元素)
- [2.3 空元素](#2.3 空元素)
[3. 属性](#3. 属性)
- [3.1 为元素添加属性](#3.1 为元素添加属性)
- [3.2 布尔属性](#3.2 布尔属性)
- [3.3 省略属性值周围的引号](#3.3 省略属性值周围的引号)
- [3.4 单引号还是双引号](#3.4 单引号还是双引号)
[4. 剖析HTML文档](#4. 剖析HTML文档)
- [4.1 为HTML文档添加一些特性](#4.1 为HTML文档添加一些特性)
- [4.2 HTML中的空白](#4.2 HTML中的空白)
[5. 字符引用：在HTML中包含特殊字符](#5. 字符引用：在HTML中包含特殊字符)
[6. HTML注释](#6. HTML注释)
参考
待了解

1. 什么是HTML

HyperText Markup Language HTML是一种标记语言，它告诉Web浏览器如何组织你访问的网页。它可以像Web开发者希望的那样复杂或简单。HTML由一系列元素组成，你使用这些元素来包围、包装或标记内容的不同部分，使其以某种方式显示或运作。闭合的标签可以使内容成为一个连接到其他页面的超链接、将文字变为斜体等等。考虑一下文本：

复制代码

My Cat is very grumpy

我们想让这段文本独立成段，我们可以用段落<p>元素来包裹它：

html 复制代码

<p>My Cat is very grumpy</p>

HTML存在于扩展名为.html的文本文件中，这种文件被称为HTML文档，简称文档。一个HTML文档包含了网页的内容并指定了其结构。

你将遇到的最常见的HTML文件是index.html，它通常用于包含网站主页的内容。同样常见的是看到带有各自index.html的子文件夹，因此一个网站可以在不同的位置有多个索引文件。

HTML中的标签不区分大小写。为了保持一致性和可读性，最佳实践是所有标签都用小写书写。

2. 剖析一个HTML元素

&esmp;一个HTML元素的构成如下：

1. 开始标签opening tag：由元素的名称包裹在开、闭角括号中组成。这个开始标签标志着元素开始或生效的位置。

2. 内容content：这是元素的内容。

3. 结束标签closing tag：这与开始标签相同，只是在元素名称前包含一个正斜杠。这标志着元素的结束。

2.1 创建你的第一个HTML元素

在WebStorm中新建一个html文件，在<body></body>之间填入，<em>和</em>标签会让文本变为斜体格式：

html 复制代码

 <p>My Cat is very grumpy</p>
 <em>这是我的文本</em>

2.2 嵌套元素

元素可以放置在其他元素内部。这称为嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将很这个词用<strong>元素包裹起来，这意味这个词将以粗体的文本格式显示：

html 复制代码

<p>我们的小猫脾气<strong>很</strong>暴躁。</p>

嵌套有正确和错误的处理方式。在上面的例子中，我们先打开了p元素，然后打开了strong元素。为了正确嵌套，我们应该先关闭strong元素，然后再关闭p元素。

2.3 空元素

并非所有元素都遵循开始标签、内容和结束标签的模式。有些元素只包含一个标签，通常用于在文档中插入/嵌入某些东西。这类元素被称为空元素。例如，<img>元素可以在页面上嵌入一个图像文件：

html 复制代码

<img
	src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
	alt="Firefox 图标" />

在HTML中，没有要求在空元素的标签末尾添加/。

3. 属性

元素也可以有属性。

html 复制代码

<p class="editor-note">My cat is very grumy</p>

属性包含关于元素的额外信息，这些信息不会出现在内容中。在上面的代码中，class属性是一个标识名称，用于通过样式信息来定位元素。

一个属性应该有：

1. 一个在它和元素名之间的空格。对于拥有多个属性的元素，属性之间也应该用空格分分隔。

2. 属性名，后跟一个等号。

3. 一个属性值，用开始和结束的引号包裹。

3.1 为元素添加属性

以<img>为例，向其添加属性。<img>元素可以接受多个属性，包括：

1. src：一个必须的属性，指定图像的位置。

2. alt：图像的文本描述。

3. width：图像的宽度，单位为像素。

4. height: 图像的高度，单位为像素。

html 复制代码

<img
src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
alt="Firefox 图标"
width="400"
height="400"
/>

3.2 布尔属性

有时你会看到没有值的属性。这是完全可以接受的。这些被称为布尔属性。当一个布尔属性没有值，或有任何值时，该布尔属性总是被设置为true。否则，如果该属性没有写在HTML标签中，该属性就被设置为false。规范要求该属性的值要么是空字符串，要么与属性的名称相同，但其他的值作用也一样。

例如，考虑disabled属性，你可以把它赋给表单输入元素。你可以用它来禁用表单输入元素，这样用户就不能输入内容了。被禁用的元素通常呈现为灰色。

html 复制代码

<input type="text" disabled="disabled" />

简写：

html 复制代码

<!-- 使用disabled属性来防止终端用户输入文本到输入框中-->
<input type="text" disabled />

<!-- 下面这个输入框不包含disabled属性，所以用户可以向其中输入 -->
<input type="text" />

3.3 省略属性值周围的引号

如果你查看许多其他网站的代码，你可能会遇到一些奇怪的标记样式，包括没有引号的属性值。这在某些情况下是允许的，但在其他情况下也可能破坏你的标记。<a>元素被称为锚点。锚点包裹文本，并将其变成链接。href属性指定了链接指向的网址。

html 复制代码

<a href=https://www.mozilla.org/>最喜欢的网站</a>

锚点也可以有一个title属性，用来描述链接的页面。然而，我们一旦像href属性一样添加title，问题就来了：

html 复制代码

<a href=https://www.mozilla.org/ title=The Mozilla homepage>最喜欢的网站</a>

浏览器会误解标记，将title属性误认为三个属性：一个值为The的title属性，以及两个布尔属性Mozilla和homepage。

title显示为The。始终包含属性引号，就可以避免此类问题，并使代码更具可读性。

3.4 单引号还是双引号

在本文中，你会注意到属性都是用双引号包裹的。然而，你可能在某些HTML代码中看到单引号。这是一个风格问题。你可以随意选择你喜欢的一种。下面这两行是等效的：

html 复制代码

<a href='https://www.example.com'>一个指向示例的链接。</a>
<a href="https://www.example.com">一个指向示例的链接。</a>

确保不要混合使用单引号和双引号。

但是，如果你使用一种类型的引号，你可以在属性值内部包含另一种类型的引号：

html 复制代码

<a href="https://www.example.com" title="你觉得'好玩吗'？">
	一个指向示例的链接。
</a>

要在相同类型的引号内使用引号(单引号或双引号)，请使用字符引用。

html 复制代码

<a href="https://www.example.com" title="一个&quot;有趣&quot;的引用">一个指向示例的链接。</a>

4. 剖析HTML文档

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

html 复制代码

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

1. <!doctype html>：文档类型声明doctype。在HTML早期，doctype旨在作为一套规则的链接，HTML页面必须遵循这些规则才能认为是好的HTML。过去的doctype看起来像：

html 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:://www.w3.org/TR/xhtml1/DTDxhmtl1-transitional.dtd">

最近，doctype成为了一个历史遗留物，为了让其他一切正常工作而必须包含它。<!doctype html>是算作有效doctype的最短字符序列。

2. <html></html>：<html>元素。这个元素包裹了页面上的所有内容。它有时被称为根元素。

3. <head></head>：<head>元素。这个元素充当一个容器，用于存放你想包含在HTML页面中但不向页面浏览者显示的内容。这包括会出现在搜索结构中的关键字和页面描述、用于样式化内容的CSS、字符集声明等等。

4. <meta charset="utf-8">：<meta>元素。这个元素代表了不能由其他HTML元相关元素表示的元数据。charset属性将你的文档的字符编码指定为UTF-8。它包含了绝大多数人类书面语言的字符。通过这个设置，页面现在可以处理它可能包含的任何文本内容。没有理由不设置它，而且它可以帮助避免以后的一些问题。

5. <title></title>：<title>元素。它设置了页面的标题，这个标题会出现在加载该页面的浏览器标签页中。当页面被收藏为书签时，页面标题也用于描述该页面。

6. <body></body>：<body>元素。它包含了在页面上显示的所有内容，包括文本、图像、视频、游戏、可播放的音轨或其他任何东西。

4.1 为HTML文档添加一些特性

html 复制代码

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

要求：

1. 在<body>元素的开始标签正下方，为文档添加一个主标题。这应该被包裹在<h1>开始标签和</h1>结束标签内。

2. 编辑段落内容，使其包含一些其他文本。

3. 通过将重要的词语包裹在<strong>元素内，使其以粗体突出显式。

4. 在你的段落中添加两个链接。通过<a>元素实现。

5. 在你的文档中添加一个图片。将其放在段落下方。如果图片太大看不清，可以给它加一个width属性来缩小它。

4.2 HTML中的空白

代码中包含了很多空白。这是可选的。这两个代码片段是等效的：

html 复制代码

<p id="noWhitespace">狗狗很 呆 萌。</p>
<p id="whitespace">狗狗很
    呆
        萌。</p>

无论你在HTML元素内容中使用了多少空白，HTML解析器在渲染代码时都会将每个空白序列减少为单个空格。那么为什么要使用这么多空白呢？答案是可读性。

如果你的代码格式整齐，就更容易理解代码中发生来了什么。在我们的HTML中，每个嵌套的元素都比它所在的元素多缩进两个空格。选择什么样的格式化风格由你决定，但你应该考虑格式化它。

5. 字符引用：在HTML中包含特殊字符

在HTML中，字符<、>、"、'和&是特殊字符。它们是HTML语法本身的一部分。那么你如何在文本中包含这些特殊字符之一呢？例如，如果你想使用一个与号或小于号，而不是让它被解释为代码。

你需要使用字符引用。这些是代表字符的特殊代码，用于在这些确切的情况下使用。每字符引用都以一个与号&开始，并以一个分号;结束。

一部分字符引用：

字面字符	字符引用等效项
<	<
>	>
"	"
'	'
&	&

字符引用的例子：

html 复制代码

<p>HTML中用<p>来定义段落元素。</p>
<p>HTML中用&lt;p&gt;来定义段落元素。</p>

第一个段落出错了。浏览器将第二个<p>实例解释为开始一个新段落。第二段看起来很好，因为它用字符引用替换了尖括号。

6. HTML注释

HTML有一种在代码中写注释的机制。浏览器会忽略注释，实际上使用户看不到注释。注释的目的是让你在代码中包含注释，以解释你的逻辑或编码。如果你在离开很长时间后回到一个代码库，以至于你不能完全记住它，这就非常有用。同样，当不同的人在进行修改和更新时，注释也是非常宝贵的。

要编写HTML注释，请将其包裹在特殊标记中：

html 复制代码

<p>我不在注释里</p>
<!-- <p>但我在注释里</p> -->

参考

1、HTML基本语法

待了解

1、字符参考

1、HTML入门——HTML基本语法

目录

1. 什么是HTML

2. 剖析一个HTML元素

2.1 创建你的第一个HTML元素

2.2 嵌套元素

2.3 空元素

3. 属性

3.1 为元素添加属性

3.2 布尔属性

3.3 省略属性值周围的引号

3.4 单引号还是双引号

4. 剖析HTML文档

4.1 为HTML文档添加一些特性

4.2 HTML中的空白

5. 字符引用：在HTML中包含特殊字符

6. HTML注释

参考

待了解