HTML 的全名是超文本标记语言（HyperText Markup Language），是万维网之父 Tim Berners-Lee 在上世纪90年代发明的，一种用来结构化 Web 网页及其内容的标记语言。浏览器访问网页，就是从服务器下载 HTML 代码，然后渲染出网页的过程。

HTML起手式

在编辑器中新建一个 HTML 文件，输入 ! 按下 Tab 键，Emmet 会自动补全 HTML 的基本结构，如下：

<!DOCTYPE html>
<html lang="en">     
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>
复制代码

<!DOCTYPE html> 表示文档类型声明，告诉浏览器该如何解析这个网页。

<html> 标签是网页的根元素，其他元素都是它的子元素。一个网页只能有一个 <html> 标签。该标签的 lang 表示网页内容的默认语言，若要默认显示中文，将 en 为 zh-CN 即可。

<head> 于放置网页的一些元信息，一般不会出现在网页上。

<meta> 来设置网页的一些元数据，<meta charset="UTF-8"> 明了当前文档的字符编码（字符编码声明应与该文档实际使用的字符编码一致，否则将会出现乱码）。
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 示告诉IE使用最新的浏览器内核。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 示禁用缩放，兼容手机。user-scalable=no 这个 content 表示禁用缩放，name=viewport 的 meta 标签是用来作视口设置的。

*<title> 是网页的标题，会显示在浏览器窗口的标题栏。

常用的标签

表章节的标签

用来表示网页层级，下面是一些常用的表章节的标签：

<h1> ~ <h6> 定义了从大到小的标题。
<section> 表示一个包含主题的独立部分，通常表示网页的一个章节。
<article> 表示文档、页面、应用或网站中的独立结构。
<header> 用来表示网页的头部或者一个文章或者区块的头部，一个页面可以包含多个 <header>，但一个具体的场景只能包含一个 <header>。
<fooer> 表示网页或者文章尾部。
<main> 表示网页的主体，一个网页只能有一个。
<p> 表示文本中的一个段落。
<aside> 表示旁支内容，与页面其他内容几乎无关，可以单独拆分出来而整体不受影响。通常表现为侧边栏或者标注框。
<div> 用来做划分，语义上不表示任何特定内容。

表内容的标签

<ol> 和 <li>

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

<ol>
  <li>列表内容1</li>
  <li>列表内容2</li>
  <li>列表内容3</li>
</ol>
复制代码

渲染结果如下

有序列表.jpg

<ul> 和 <li>

无序列表，两个标签要嵌套使用

<ol>
  <li>列表内容1</li>
  <li>列表内容2</li>
  <li>列表内容3</li>
</ol>
复制代码

渲染结果如下

<dl>，<dt>，<dd>

<dl> 标签是描述列表，术语名由 <dl> 定义，术语解释由 <dd> 定义。

<dl>
  <dt>CPU</dt>
  <dd>中央处理器</dd>

  <dt>Memory</dt>
  <dd>内存</dd>

  <dt>Hard Disk</dt>
  <dd>硬盘</dd>
</dl>
复制代码

渲染结果如下

<pre>

HTML会将多个连续的空格或回车缩减成一个空格，若想保留这些空格，放在<pre>内部即可。

<code>

用来展示计算机代码，默认等宽字体显示。若想展示多行代码，需放在 <pre> 内部。

<hr> 表示分隔线。
<br> 用来换行
<a> 标签用来表示一个跳转链接。
<em> 和 <strong>

均表示强调，区别是 <em> 表示语气上的强调，<strong> 表示内容上的强调。

<quote> 和 <blockquote>

均表示引用，区别是 <quote> 是内联引用，<blockquote> 是块级引用。

全局属性

全局属性是任何标签都具有的属性。以下是常用的一些全局属性：

class 属性用来对标签分类，一个标签可以有多个 class，它们中间用空格隔开。
contenteditable 属性允许用户修改网页内容（HTML网页的内容默认是用户不可编辑）。
hidden，一个元素设置了这个属性，它就不会被显示。
id 属性定义了一个全文档唯一的标识符。可以用来在 CSS 中加样式，也可以用来在 JS 中获取元素。
style 属性用来指定当前元素的 CSS 样式。优先级高于 CSS，但会被 JS 覆盖。
tabindex 属性可以使用户使用tab键来遍历网页元素。属性为正整数，会按照1、2、3… 的顺序来遍历；属性值为0，表示最后访问；属性值为负整数时，表示不访问。
title 属性用来为元素添加附加说明，鼠标浮在元素上面，就会显示 title 的属性值。