HTML 要点¶

使用HTML构建Web | MDN Web Docs

MIT Web Development Crash Course

HTML 基本概念 & 基础¶

HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言，用于定义网页结构¹。

如上图所示，这是一个HTML元素。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。

针对一个制作精良的网页，可将其对应的 HTML 文件分解为多个不同的块，在这些块中也可存在嵌套关系。基于 HTML 的设计理念，可简单将其理解为一个高度嵌套的模块⁴。

Tip

正确理解 HTML 的设计理念对于合理且轻松地应用 HTML 文档有很大的帮助，理解元素之间的嵌套关系是其中最为核心的一点。例如有以下超链接元素：

<p>
    A link to <a href="https://example.com">example site</a>
<p>

其作为一个超链接元素的同时也作为一个文本元素嵌套于它的上级之中；而下面的这个例子同样也是一个超链接：

<a href="https://virtualguard101.com">
    <h1>virtualguard101's Homepage</h1>
</a>

而这时这个超链接元素就是作为一个上级元素包含它下方的一级标题元素了。这两个例子的实际渲染效果如下：

A link to example site

virtualguard101's Homepage

HTML 文档结构基础¶

可参考HTML 基础 | MDN Web Docs

HTML 元素属性¶

属性概述¶

在 HTML 中，元素可以拥有属性。属性包含元素的额外信息，这些信息不会出现在实际的网页内容中²。

Important

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

e.g.

Tip

Markdown 文档在渲染时兼容 HTML 语法，因此在右侧可以直接将示例中的 HTML 代码块的实际渲染效果展示出来
```
<p>A link to my <a href="https://virtualguard101.com/" title="virtualguard101's Homepage" target="_blank">homepage</a>.</p>
```
实际效果：

A link to my homepage.

在上面的例子中：
- href属性声明超链接的 web 地址；
Note

属性href含义是超文本引用(hypertext reference)
- title属性为超链接声明额外的信息，当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示；
- target属性用于指定链接如何呈现出来，在上面的例子中，target="_blank" 表示将在新标签页中显示链接。

布尔属性¶

在 HTML 中，布尔属性是一种特殊的属性类型，它们要么存在（表示true），要么不存在（表示false）。布尔属性只能有一个值，这个值通常与属性名相同或者为空字符串；也可以不需要赋值，仅仅是属性的存在与否就决定了它们的状态。

e.g.

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

<!-- 使用无赋值的 disabled 属性禁用按钮 -->
<button  disabled>Unavailable Button</button>

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

实际效果：

`title`属性¶

HTML title Attribute | GeeksForGeeks

title属性用于指定有关元素的额外信息。当鼠标移动到元素上时，对应元素会显示这些信息，与后文提到的缩略语元素类似，但需要注意title是元素属性。

属性参考列表¶

HTML 属性参考 | MDN Web Docs

HTML 特殊字符¶

在HTML中，有一些字符（如<、&等）会作为HTML语法的一部分被浏览器解释而无法被当作文本信息显示于网页中，这些字符被称为 HTML 特殊字符。这些字符需要使用特定的编码方式来表示，主要包括HTML实体（HTML Entities）。

HTML 实体引用通常有两种表示方法：

命名实体: &entityname;
数字实体: &#number;/&#xhexnumber;

命名实体引用相对较为方便记忆，因为其与自然语言相关。下表中列出了一些常见特殊字符的命名实体引用³：

原义字符	等价字符引用
`<`	`<`
`>`	`>`
`"`	`"`
`'`	`'`
`&`	`amp;`

更多关于实体引用的信息，可参考List of XML and HTML character entity references | Wikipedia

HTML 元信息¶

“头”里有什么——HTML 元信息 | MDN Web Docs

以一个 HTML 文档为例：

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>Test Page</title>
  </head>
  <body>
    <p>Test message</p>
  </body>
</html>

在上面的示例中，由<head></head>包围的元素就是该 HTML 文档的头部，头部中包含的<meta>元素就是元数据

在 HTML 中应用 CSS 和 JavaScript¶

在 HTML 中应用 CSS 和 JavaScript | MDN Web Docs

CSS

在 HTML 中应用 CSS 一般有两种方式：

直接插入 CSS 规则集

<style>
    .example {
        property: value;
        property: value;
    }
</style>

<section>
    <div class="example">
        something here.....
    </div>
</section>

链接 CSS 文件

<link rel="stylesheet" href="path/to/style.css">
<section>
    <div class="example">
        something here.....
    </div>
</section>

在这个方式中，<link>元素的rel属性表明这是样式表；href则表明了样式表文件的路径

JavaScript

有多种方法可以在 HTML 上加载 JS，但对于现代浏览器而言，最可靠的方法还是在 HTML 中使用<script>元素：
```
<script src="path/to/script.js" defer></script>
```
上面的示例中，defer属性表示向浏览器声明在解析完成 HTML 后再加载 JavaScript，可根据实际情况决定是否添加这个属性。

强调语法¶

斜体、粗体、下划线…… | MDN Web Docs

HTML 文档架构与布局¶

文档与网站架构 | MDN Web Docs

其中可重点关注一下无语义元素

HTML 文本格式进阶¶

文本格式进阶 | MDN Web Docs

虽然在 Markdown 文档中我们已经能够很轻松地使用一些常见的、在 HTML 需要各种复杂语法才能实现的效果，但在一些特殊应用场景下，我们仍需通过插入一些 HTML 代码来实现一些当前 Markdown 文档不支持的语法效果。

缩略语就是一个简单但典型的例子，其在 Markdown 中并没有对应的语法支持。