制作网页的第一步，就是编写 HTML 文件。

HTML（HyperText Markup Language，超文本标记语言）并不是真正的编程语言，它是一种标记语言，用于定义一个网页的结构。它详细地说明了网页的各部分内容应该被理解为段落、列表、链接、图像或者是其他形式的内容。

HTML 的标准规范由 W3C 组织制定，我们先来认识一下 W3C。

一、W3C 和 MDN

1.1 W3C

W3C（World Wide Web Consortium，万维网联盟）是万维网之父 Sir Timothy John Berners-Lee 于1994年建立的组织。

为解决网络应用中不同平台、技术和开发者带来的不兼容问题，保障网络信息的顺利和完整流通，W3C制定了一系列标准并督促网络应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。除了 HTML，W3C 还制定了包括 XML 和 CSS 等的众多影响深远的标准规范。

在 W3C 的官网可以查看 HTML 的官方规范文档。

1.2 MDN

MDN（Mozilla Developer Network），Mozilla 开发者社区，是一个完整的学习平台，汇集了众多 Mozilla 基金会产品和网络技术开发文档。W3C 网站上提供的官方规范文档冗长复杂，而且只有英文的版本。MDN 则提供了一种简洁的文档形式，并且保证了内容的严谨性和准确性。基于这些特点，我们可以把 MDN 作为官方文档一个替代品，更加便捷地查询相关资料。

二、HTML

如前文所述，HTML 是一种标记语言，它由一系列元素（element）组成，这些元素可以用来封装、包装或标记不同内容，使其以特定的方式显示或执行。

2.1 开始写 HTML

现代的编辑器通常都内置了 Emmet 工具，它可以使我们非常便捷地编写 HTML 代码，以VSCode为例，新建一个 HTML 文件，输入!，按Enter或Tab，即可自动填充 HTMl 的基本结构。

<!DOCTYPE html>为文档类型声明，向浏览器声明这是一个 HTML 文档。

<html>是根元素，lang属性为文档语言，en即英语，可改为zh-CN即简体中文。

<head>里一般为一些不可见内容：

<meta>用来设置一些元数据，如<meta charset="UTF-8" />声明当前文档的字符编码
<title>是网页的标题，显示在浏览器的标签上

<body>就是网页的主体内容。

2.2 常用标签介绍

HTML 的一大特点就是它的标签都是语义化的，也就是说我们可以通过标签对应词汇的含义大致理解它所标记的是何种形式的内容，因此在写 HTML 的时候，要尽量准确地使用标签，避免使用无含义的标签。

我们可以把标签大致分为两种类型，表章节的标签和表内容的标签。

2.2.1 章节标签

h1~h6，这六个标签表示不同级别的标题，以h1为最高级，h6为最低级
section，表示网页的一个章节
article，表示一篇文章
p，表示一个段落
header，表示头部，一般位于网页开头
footer，和 header 相对应，表示尾部
main，表示主要内容
aside，和 main 相对应，表示旁支或次要的内容
div，表示一个无意义的划分，一般来说在不能明确该部分内容到底属于段落，还是章节，还是任何其他形式的时候才使用 div

2.2.2 内容标签

内容标签一般用在章节标签内部，来标记该章节中的不同内容。

ol + li

有序列表，这两个标签要嵌套使用：

<ol>
  <li>项目</li>
  <li>项目2</li>
</ol>

ul + li

无序列表，用法同上。

dl + dt + dd

描述列表，用<dl>嵌套<dt>和<dd>:

<dl>
  <dt>姓名</dt>
  <dd>张三</dd>
  <dt>性别</dt>
  <dd>男</dd>
</dl>

效果：

a

<a>标签用来表示一个跳转链接。

pre

HTML 会自动将内容中的所有空格和回车缩为一个空格，若用<pre>标签包围，则会保留所有空格。

code

<code>用来标记代码片段。

em 和 strong

这两个标签均表示强调，其区别在于，em 表示语气上的强调，更像是一种主观上的情感，strong 表示内容本身的重要性，属于客观上的特性。

q 和 blockquote

q-内联引用
blockquote-块级引用

2.3 全局属性

HTML 的标签都具有一些属性，这些属性中有一些是所有标签所共有的，称为全局属性，以下主要介绍一下常用的全局属性。

class，给元素添加一个类名，一个元素可以有多个类名，以空格分开，类名通常用于给元素添加样式
id，一般用来表示全局唯一的标签，但是这个特性没有保障，因为即使出现了两个重复的 id ，也不会有任何报错
style，这是元素的内联样式，和 CSS 语法一致，并且样式的优先级要高于 CSS
contenteditable，这是布尔属性，不需要值，有该属性的元素其内容是可编辑的
hidden，布尔属性，具有该属性的元素为隐藏状态
title，它的值为鼠标悬停在元素上时会显示的内容
tabindex，它的值可以是任意正整数、0和-1，表示按Tab键时各个元素的定位次序，0表示最后被Tab键访问到的元素，-1表示该元素不能被Tab键访问

HTML学习笔记 - 基本语法