HTML快速入门手册HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML

1. HTML5简介

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。 HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

1.1 HTML页面结构

下面就是一个HTML文件的基本结构：

<!DOCTYPE html>
<html>

<head>
  <style></style>
</head>

<body>
  <div>一些内容</div>
</body>

</html>

文件最开始是doctype(文档声明)，它告诉浏览器这是一个HTML页面，以及我们使用的是哪个版本的HTML。

<!DOCTYPE html>

接下来是 html 元素，包含了开始标签和闭合标签：

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

在HTML5中，大多数标签都有开始标签和结束标签，闭合标签和开始标签一样，但是多了一个 /：

<sometag>一些内容</sometag>

还有一些自闭合的标签，它们不包含任何内容在里面，也不需要一个独立的闭合标签。这些标签在后文中也会有看到。

html开始标签用在HTML文档的开始，在doctype声明后面，html结束标签用在HTML文档的最后。在html元素里面，我们包含了head和body两个元素。

<!DOCTYPE html>
<html>

<head>
  ...
</head>

<body>
  ...
</body>

</html>

在head标签内部，我们会包含一些创建网页必不可少的内容，如title、metadata、内部或者外部的css和JavaScript。大部分这些内容不会直接在页面上显示出来，但是能帮助浏览器正确的显示网页。在body内部是我们整个页面的内容。

1.2 标签和元素的区别

元素包含一个开始标签和闭合标签，下面就是用p开始标签和结束标签，创建了一个p元素：

<p>一段文本内容。</p>

所以一个元素包含了：

开始标签
文本内容或者其它元素
闭合标签

如果一个元素没有闭合标签，它就不能包任何文本内容。

1.3 属性

在开始标签上我们可以添加一些特殊的信息片段，我们称之为属性，属性是key="value"这的语法：

<p class="a-class" id="an-id"></p>

我们可以使用单引号或者双引号，不过一般约定使用双引号。

如果一些属性值是布尔值，那就意味着我们只需要在标签上写下key就行了：

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

class和id是两个最常用的属性之一，它们有着特殊的意义，在CSS和JavaScript中都非常有用。它们的区别在于，id的值不能重复，整个页面唯一，而class相反，它不唯一，可以重复使用。另外，id只能有一个值，而class可以有多个值，用空格分开就行。

<p class="a-class another-class">这是一段文字。</p>

如上代码显示，class的值可以用多个单词来命名，这种情况下，我们一般约定使用中划线-来分隔。

class和id是通用的属性的代表，它们的使用方式是绝大部分属性使用的方式，还有一些专业的属性，只能在特定的标签上使用，这些具体内容后文会详细介绍。

1.4 大小写不敏感

HTML是大小写不敏感的，我们可以用大写字母或者小写字母来写标签，下面两种方式都是可以的：

<p>一段文字。。。</p>

或者

<P>一段文字。。。</P>

不过一般约定小写的方式。

1.5 空格

在HTML中，美化很重要，如果你在一行中添加了多个空格，最后将会被浏览器的css引擎折叠起来。下面三段代码的效果是一样的：

<p>一段文字。。。</p>

或

<p>一段文字。。。        </p>

或

<p>


   一段文字。。。
   
   
   
   </p>

很明显，使用整齐的语法能让代码更直观、更容易阅读和理解。推荐下面的几段写法：

<p>一段文字。。。</p>

<p>
  一段文字。。。
</p>

或者有多个标签嵌套时，我们应该用2个或4个字符缩进，这取决于自己的习惯：

<body>
  <p>一段文字。。</p>
  <ul>
    <li>列表项</li>
  </ul>
</body>

注意：在实际的项目中，会有一系列的插件来自动美化我们的代码，保证格式的统一，例如prettier。

2. 文档头部

head 标签中包含了一系列定义文档属性的特殊标签。它始终在html标签内第一个位置，在body前面。head标签上，我们不会写任何属性，标签内部我们也不会写任何文本内容，我们只会写一系列我们想要的其它标签：

title
script
noscript
link
style
base
meta

下面我们就来看看这些标签的作用。

2.1 `title`标签

title标签定义了页面的标题，然后将在浏览器的标签页上展示，它对于SEO（搜索引擎优化）特别的重要。

<title>百度搜索首页标题</title>

2.2 `script`标签

script标签的作用是在页面上添加JavaScript。我们可以在script标签内容添加JavaScript代码，像这样：

<script> ...一些JS代码 </script>

也可以用src属性来引入外部的JavaScript：

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

script标签的type属性默认为text/javascript，是可选的属性。

关于这个标签，有一些重要的事我们必须知道，大多数时候我们会看到script标签在页面的最底部，在</body>闭合标签前面，而不是放在head标签里。为什么这样写？答案就是性能。默认情况下，script标签会阻塞页面加载，直到它被完全解析出来，把它放到页面底部，脚本就会在整个页面被解析和加载之后才加载和执行，这样会给用户一个比较好的用户体验。在现代JavaScript中，我们可以用在script标签上添加defer属性来替代把它放在页面底部，这能够让页面和JavaScript更快的加载：

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

script标签还有一个属性是 async，它能够触发JavaScript的异步加载，具体介绍后面会说到。

2.3 `noscript`标签

noscript标签用在浏览器禁用script的时候。默认情况下，浏览器不会禁用script，但是用户可以在浏览器的设置中禁用script。该标签可以放在document > head中，也可以放在document > body中，放在head元素中和放在body元素中，它的用法不太一样。这里说明的是noscript标签放在document的body元素里的用法。

当我们把它放在document的head元素里时，noscript标签只能包含下面的标签：

link标签
style标签
meta标签

如果页面脚本被禁用，我们在其中包含的内容将生效。如下面这个例子，默认.no-script-alert为display: none，但是被禁用时，display: block将生效：

<!DOCTYPE html>
<html>

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

</html>

另一种情况，当我们把它放在document的body元素里时，noscript标签可以包含内容，比如一段文本内容和其它标签，这些内容会在页面上进行渲染出来。

2.4 `link`标签

link标签没有闭合标签，常常被用来在页面上引入其它资源，比如引用一个外部的css文件。

<!DOCTYPE html>
<html>

<head>
  ...
  <link href="./normal.css" rel="stylesheet" />
  ...
</head>
...

</html>

它的media属性，能够控制在不同屏幕情况下，加载不同的样式：

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

我们同样可以链接到其它资源上。比如我们可以关联到RSS feed上：

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

或者关联一个favicon上：

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

2.5 `style`标签

style标签用来在HTML文档中添加样式，而不是引入一个外部的样式表：

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

同link标签一样，它也拥有medial属性，用来控制标签内的css在什么样的屏幕条件下生效：

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

2.6 `base`标签

这个标签用来设置这个页面所有相对路径的基础URL路径：

<!DOCTYPE html>
<html>

<head>
  <base href="https://www.XXXABC.com/" />
</head>

</html>

2.7 `meta`标签

meta标签是一个自闭合标签，只有开始标签，没有闭合标签，它是HTML中一个十分重要的标签，尤其是在SEO当中。下面是它的一个基础description meta标签用法：

<meta name="description" content="这个页面是公司官网简介" />

这个用法，有利于搜索引擎，如百度去生成页面描述内容。

charset meta标签用来描述页面的字符编码。下面表示页面字符编码是utf-8：

<meta charset="utf-8" />

下面是meta标签的一些其它用法：

robots meta标签

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

表示搜索引擎机器人是否索引页面。content属性的话还包含了index、follow、nofollow、nosnippet、noarchive、noimageindex等等值，你也可以在content属性中同时写上几个属性值。

viewport meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

表示浏览器根据设备宽度来设置页面宽度，放大倍数为1，禁止缩放。

http-equiv="refresh" meta标签

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

表示浏览器在等待3秒钟之后，重定向到其它页面。

http-equiv="Pragma" meta标签

<meta http-equiv="Pragma" content="no-cache">

这些只是一部分meta的用法，还有更多meta标签用法存在，可以参考资料文档。

3. 文档body

在一个HTML文档里，head闭合标签后面，就是body元素：

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

和head标签和html标签一样，我们在一个页面中也只能拥有一个body标签。在它内部，可以包含所有定义页面内容的标签。在具体介绍那些标签之前，我们先了解一下什么是块级元素(block element)，什么是行内元素(inline element)。

在页面body的元素大致可以分为两种类别：

块级元素（如p，div，head元素，list和list项，等等）
行内元素（如a，span，img等等）

这两种元素有什么区别呢？块级元素在页面上的位置独占一个屏幕的宽度，它的左边或者右边不允许任何元素的存在，而行内元素则不是，在它的左边或者右边可以存在其它的行内元素。从CSS的角度来看，块级元素可以通过CSS来修改宽和高，行内元素不行。

通过CSS，我们可以将块级元素p设置成行内元素，将行内元素span设置成块级元素。

从规范上来讲，块级元素可以包含块级元素和行内元素，但是行内元素不能包含块级元素。

4. 与文本相关的标签

4.1 `p` 标签

<p>这是一段文本...</p>

块级元素。用来定义一段文本，内部可以包含一些行内元素，如span和a。

4.2 `span`标签

<p>一段文字，<span>这段文字是红色的字</span></p>

行内元素。可以在一个段落中创建一个可以应用css样式的部分。

4.3 `br`标签

<p>这是一些文字<br />这段文字会换一行开始</p>

不需要闭合标签，常用来在一段文字中，不需要添加p标签，就能另起一行显示。

4.4 `h1`~`h6`标题标签

HTML提供了6个标题标签，重要程度从大到小分别是h1，h2，h3，h4，h5，h6。这些标签常用来显示一些标题，有组织的使用标题标签也有利于SEO。

在浏览器中，标题标签会有一些默认的样式，不同的标题标签，展示大小不一样，如下图：

标题标签的大小展示

所有的标题标签都是块级元素。

4.5 `strong`标签

行内元素，其内的字体展示会变粗，用来表示这部分内容很重要。

<strong>字体变粗</strong>

4.6 `em`标签

和strong标签类似，也是行内元素，其内的字体展示为斜体，用来表示这部分文字与其它内容有所不同。

<em>斜体文字</em>

4.7 `blockquote`和`q`

两者都是引用标签，用来在文本中插入引文。

blockquote是块级元素，独占一行，浏览器默认会给一个外边距，谷歌浏览器下，左右外边距40px，上下外边距为1em。

q是行内元素，在一行文字内引用。

4.8 `hr` 标签

hr标签用来分隔一段文本，它在页面上会添加一条水平线。

4.9 `code`和`pre`标签

code标签通常用来显示代码块，浏览器默认给它 monospaced 字体。谷歌浏览器下默认的样式：

code { 
  font-family: monospace; 
}

code 标签通常被包裹在pre标签中，因为它会忽略掉空白符，而谷歌浏览器给了pre标签默认的样式：

pre { 
  display: block;
  font-family: monospace; 
  white-space: pre; 
  margin: 1em 0px;
}

用来防止空白符被省略掉。

4.10 List标签`ul`、`ol`、`dl`

HTML中list标签分为三种：

无序列表——ul
有序列表——ol
自定义列表——dl

下面就看看这三种标签有什么不一样的。

无序列表的创建，我们用ul标签包裹li标签来创建：

<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

有序列表的创建，我们用ol标签包裹li标签来创建：

<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

这两种的区别在于，有序列表的每个列表项前面都有数字显示。

自定义列表和前面两种列表有一些差别，你需要用dl、dt、dl标签来创建：

<dl>
  <dt>水果</dt>
  <dd>苹果</dd>
  <dd>香蕉</dd>
  <dt>饮料</dt>
  <dd>可乐</dd>
</dl>

企业微信截图_17006223536436.png

自定义列表中，你可以对列表进行分组、命名，不过相对而言我们用的更多的还是ul和ol。

4.11 其它文本相关的标签

下面是一些带有特殊样式的文本标签：

mark标签——文字背景高亮显示
ins标签——文字下划线
del标签——文字删除线显示
sup标签——文字上标显示
sub标签——文字下标显示
small标签——文字字体显小
i标签——文字斜体
b标签——文字加粗

下面是这些标签在浏览器中显示的效果

<mark>背景高亮</mark>
<ins>下划线</ins>
<del>删除线</del>
<sup>上标</sup>
<sub>下标</sub>
<small>字体小</small>
<i>斜体</i>
<b>粗体</b>

企业微信截图_17006231702483.png

细心的人或者注意到 b标签和strong标签、i标签和em标签的显示效果是一样的，那么它们两者之间有没有区别呢？当然，它们的区别在于strong标签和em标签是语义化的标签，不仅仅提示浏览器要让字体加粗或者倾斜，还拥有特殊的语义，表示对标签内部文字的强调作用，对于浏览器搜索引擎来说，更友好。

5. 链接标签`a`

在HTML中，我们使用a标签来表示一个链接，通过它的href属性来设置链接目标地址，通过点击它之后，会跳转到目标地址上去：

<a href="https://juejin.cn">前往掘金</a>

上面href属性设置了一个绝对路径url，我们也可以设置成相对路径url：

<a href="/aboutUs">关于我们</a>

在这个例子中，用户点击之后，会跳转到当前源地址下/aboutUs URL。

a标签内部除了可以包含文字，还可以包含其它内容，例如包含一张图片：

<a href="https://juejin.cn">
  <img src="juejin.jpg" />
</a>

当你点击一个a标签的时候，默认情况下，浏览器会在原来的页面上打开目标地址的页面，如果你想在新的标签中打开目标地址页面，你可以在a标签上设置target属性_blank：

<a href="https://juejin.cn" target="_blank">新标签页打开掘金</a>

6. 容器标签和页面结构HTML

6.1 容器标签

HTML提供了一系列的容器标签，这些标签可以包含一系列未指定的其它标签的集合：

article
section
div

下面我们来看看它们之间有什么不同。

6.1.1 `article`标签

article标签，标识了其内部的内容是独立于页面内其它内容的。例如，一个页面中包含了一系列的博客内容或者一系列的链接。

<div>
  <article>
    <h2>博客标题一</h2>
    <a ...>阅读更多</a>
  </article>
  <article>
    <h2>博客标题二</h2>
    <a ...>阅读更多</a>
  </article>
</div>

当然，我们也不局限于列表，article也可以是页面中的主要元素，在它内部，我们也可以包含标题标签(h1~h6)和p标签。

<article>
  <h2>博客标题一</h2>
  <p>博客的内容...</p>
</article>

6.1.2 `section`标签

section 标签表示是文档的一部分，可以理解成文章的一小节内容，每个section的内部会包含标题标签（h1~h6），还有这一节的主体内容。如果遇到一篇很长的文章，我们把它分割成几个不同的section还是非常有用的。

<section>
    <h2>一小节文章标题</h2>
    <p>...</p>
    <img ... />
</section>

6.1.3 `div`标签

div标签是最最常用的文字容器标签，它几乎可以用在任何地方来包裹文字，在一个HTML页面中，你可以看到，用到最多的元素，必定会有div标签。

我们可以在它上面添加class和id来给它设置css样式。

<div class="table-container">里面会放一个表格...</div>

6.2 和页面相关的标签

6.2.1 `nav`标签

这个标签常用来创建定义页面的导航，我们通常会添加一个ul或ol列表在它里面：

<nav>
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/blog">博客</a></li>
  </ol>
</nav>

6.2.2 `aside`标签

这个标签通常用来添加一段和主页面内容相关的内容，比如一段引用或者侧边栏内容：

<div>
  <p>一些文字..</p>
  <aside>
    <p>一段引用..</p>
  </aside>
  <p>其它文字...</p>
</div>

当使用aside标签的时候，代表着此标签内的内容不在包含此标签的正常文档流中。

6.2.3 `header`标签

header标签表示这段内容是这页的介绍，在它里面，可以包含1个或多个标题标签（h1~h6）、article标签或者一个img标签。

<article>
  <header>
  <h1>文章标题</h1>
  </header>
  ...
</div>

6.2.4 `main`标签

main标签代表着页面主体内容

<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>

6.2.5 `footer`标签

footer标签代表着文章的页脚或者页面的页脚

<article>
  ....
  <footer>
    <p>页脚内容</p>..
  </footer>
 </div>

7. 表单（Forms）

表单是一种你可以与用 Web 技术构建的页面或者 app 交互的方式，你可以设置一组表单控件，然后你可以通过 "submit" 按钮或者通过编程的方式提交表单，将浏览器数据发送给服务器。默认情况下，通过表单提交数据之后，浏览器默认会重新加载页面，不过我们也可以通过JavaScript来避免此行为。

我们使用form标签来创建一个表单

<form>...</form>

默认情况下，我们使用 get 方式提交表单，不过 get 方式有一些缺点，我们可以通过设置methods属性来设置为 post 方式来提交表单：

<form method="POST"></form>

不管是 get 方式还是 post 方式，表单数据都会提交到页面所在的页面路径上，比如如果说表单在 https://yourwebsite.com/contacts页面上，你点击提交按钮之后，数据会提交到相同的URL上。这可能是导致什么也没有发生，你需要在服务器端一些东西来处理这些事情，通常是定义一些专门的URL来’监听‘这些提交表单提交事件。

我们可以通过 action 参数来指定URL：

<form action="/new-contact" method="POST">...</form>

这会导致浏览器通过 post 将表单数据提交到同一域名下的 /new-contact URL。

如果源（协议+域名+端口）是 https://yourwebsite.com (默认80端口)，这代表着表单数据会发送到 https://yourwebsite.com/new-contact.

正常来说，表单数据是用户通过操作web提供的一系列表单控件来提供的：

单文本输入框（单行文本）
多文本输入框（多行文本）
下拉选择框（从下拉菜单中选择一个选项）
单选按钮组（从始终可见的列表中选择一个选项）
复选按钮组（选择零、一个或多个选项）
文件上传
更多...

接下来我们就一个个来介绍这些表单内容。

7.1 `input`标签

input元素是使用最广泛的表单元素之一，也是一个非常通用的元素，它可以根据type属性来完全改变它的功能。默认行为是一个单行文本输入框：

<input />
// 等同于
<input type="text" />

与下面的所有其他表单字段一样，您需要为它设置一个名称，以便在提交表单时将其内容发送到服务器：

<input type="text" name="username" />

placeholder属性用于在表单字段为空时，使一些文本以浅灰色显示，这在向用户提示添加要输入的内容时非常有用：

<input type="text" name="username" placeholder="请输入你的姓名" />

7.1.1 电子邮箱

type="email"用来在提交之前通过客户端（在浏览器中）验证电子邮箱地址的正确性（只保证其语义的正确性，不保证其地址是否真实存在）

<input type="email" name="email" placeholder="请输入电子邮件地址" />

7.1.2 密码

type="password"让用户输入的每个键都以星号（*）或点（.）的形式显示，这有利于提高输入有关密码字段时的安全性。

<input type="password" name="password" placeholder="请输入密码" />

7.1.3 数字

type="number"用来让用户输入的内容仅为数字。

<input type="number" name="age" placeholder="请输入你的年龄" />

我们可以给它设置输入的最小值和最大值：

<input type="number" name="age" placeholder="请输入你的年龄" min="18" max="110"/>

step属性可以用来设置每个值之间的步进值，比如，我们可以设置输入最小值为10，最大值为50，步进值为5：

<input type="number" name="age" min="10" max="50" step="5" />

7.1.4 隐藏

我们可以隐藏表单元素，但是它上面的值在表单提交时仍然会发送给服务器端：

<input type="hidden" name="some-hidden-field" value="some-value" />

这通常用来存储用于安全和用户识别的CSRF令牌等值，甚至用来检测使用特殊技术发送垃圾邮件的机器人。它也可以仅仅被用来识别一个表单及其行为。

7.1.5 设置默认值

这些所有的表单输入框都可以设置默认值，如果用户没有修改的话，在提交表单时，这些值也会被发送到服务器：

<input type="number" name="age" value="18" />

如果你设置了占位符，如果用户清除了输入框内容的时候，该值将会显示：

<input type="number" name="age" placeholder="请输入年龄" value="18" />

7.2 表单提交

type="submit" 是一个按钮，如果用户点击它，浏览器就会提交表单数据：

<input type="submit" />

type="submit"按钮默认显示“提交”文字，不过我们也可以通过设置value属性来设置按钮的文字：

<input type="submit" value="提交表单" />

7.3 表单校验

浏览器为表单提供了客户端验证功能。您可以设置字段是否必须，来确保它们一定要有输入值，并为每个字段的输入强制执行输入内容格式的校验。下面我们来看看有哪些校验选项：

7.3.1 必填校验

required属性能够帮助我们校验表单字段是不是必填项，如果我们设置了该属性，但是用户没有给表单字段输入值，那么浏览器端校验将不会通过，这个表单也不会提交：

<input type="text" name="username" required />

7.3.2 特殊格式校验

上面我们提到过type="email"的输入框，它能够根据规范自动校验电子邮箱地址，type="number"输入框，我们可以通过min和max来设置数字的输入区间，除此之外，我们可以通过设置pattern属性来进行特定格式的校验，例如我们可以校验输入8个大写或小写的英文字母，除此之外的输入，校验将不会通过：

<input type="text" name="username" pattern="[a-zA-Z]{8}" />

7.4 其他表单字段

7.4.1 文件上传

我们可以通过 type="file"输入框来实现电脑本地文件上传到服务器：

<input type="file" name="secret-documents" />

我们可以添加多个文件：

<input type="file" name="secret-documents" multiple />

我们可以通过accept属性来限定上传文件的格式，例如只上传图片：

<input type="file" name="secret-documents" accept="image/*" />

也可以设置特定MIME类型，如application/json，或者设置文件扩展名,如.pdf，或者设置多个文件扩展名：

<input type="file" name="secret-documents" accept=".jpg, .jpeg, .png, .pdf" />

7.4.2 按钮

我们可以给表单添加type="button"的额外按钮，而不是提交按钮：

<input type="button" value="Click me" />

我们可以通过js代码让按钮实现一些功能，比如点击按钮获取一些列表。

type="button"的按钮可以用来清空表单数据，并将表单恢复至初始状态：

<input type="reset" />

7.4.3 单选按钮

单选按钮用于创建一组选项，其中一个选项被选中，其它的选项将会取消选中的状态，我们定义一组类型type="radio"的输入，它们都具有相同的name属性值和不同的value属性值:

<input type="radio" name="color" value="yellow" />
<input type="radio" name="color" value="red" />
<input type="radio" name="color" value="blue" />

一旦表单被提交了，color数据属性将会拥有唯一的选中值。

一组radio按钮总会有一个是选中的，默认第一个选项的状态是选中的状态。不过我们也可以通过设置checked属性来设置默认选中的选项。

7.4.4 复选框

和单选按钮组类似，但是复选框可以选择多个值或者不选值。我们定义一组type="checkbox"输入框，它们都拥有相同的name属性值和不同的value属性值：

<input type="checkbox" name="color" value="yellow" />
<input type="checkbox" name="color" value="red" />
<input type="checkbox" name="color" value="blue" />

所有的复选框默认都是未被选中的，不过我们可以通过checkded属性设置其页面加载后默认选中。由于复选框可以选择多个值，所以表单提交的时候，它以数组的形式传递给服务器端。

7.4.5 日期和时间

我们还有一些input类型来接受日期值。例如：

type="date"输入框允许用户输入一个日期，在需要的时候也会出现一个日期选择器：

<input type="date" name="birthday" />

type="time"输入框允许用户输入一个时间，和日期输入框一样，它也会弹出一个时间选择器：

<input type="time" name="time-to-pickup" />

type="month"输入框允许用户输入月份和年份：

<input type="month" name="choose-release-month" />

type="week"输入框允许用户输入年份和周

<input type="week" name="choose-week" />

所有的这些输入框，我们都可以设置日期和时间的范围，更多详细的用法，我们可以参考MDN。

type="datetime-local"输入框可以让我们同时选择日期和时间：

<input type="datetime-local" name="date-and-time" />

7.4.6 颜色选择器

type="color"输入框可以让用户去选择一个颜色，浏览器会向用户提供一个颜色选择器：

<input type="color" name="car-color" />

我们可以设置value值来设置一个默认值：

<input type="color" name="car-color" value="#000000" />

7.4.7 范围选择

type="range"输入元素给用户提供了一个滑块，用户可以用它在开始值到结束值之间移动进行选值。

<input type="range" name="age" min="0" max="100" value="30" />

我们也通过step属性来设置一个步进值：

<input type="range" name="age" min="0" max="100" value="30" step="10" />

7.4.8 电话号码

type="tel"输入框用来输入一个电话号码：

<input type="tel" name="telephone-number" />

它和type="text"输入框的最大区别是它们在移动端的表现不一样，tel输入的时候会唤起手机的数字键盘。

我们可以通过pattern属性来进行特定格式的校验：

<input type="tel" pattern="1[0-9]{2}[0-9]{8}" name="telephone-number" />

7.4.9 URL

type="url"输入框用来输入URL：

<input type="url" name="website" />

我们可以通过pattern属性来进行特定格式的校验：

<input type="url" name="website" pattern="https://.*" />

7.5 `textarea`标签

textarea元素用来让用户输入多行文本，和input元素想比，它需要一个闭合标签：

<textarea></textarea>

我们可以用css来设置尺寸，也可以通过rows和cols属性来设置尺寸：

<textarea rows="20" cols="10"></textarea>

和其他的表单元素一样，textarea通过name属性来定义发送到服务器数据的名字：

<textarea name="article"></textarea>

7.6 `select`标签

select标签用来创建一个下拉列表，用户可以选择其中一项。用户通过option标签来创建下拉选项，name属性设置select的名称，value属性来设置每个下拉选项的值。

<select name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

我们也可以禁用一个选项：

<select name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

设置一个空选项：

<select name="fruit">
  <option value="">None</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

我们也可以通过optgroup标签对选项进行分组，每一个optgroup标签选项组会有一个label属性：

<select name="shop">
  <optgroup label="fruit">
     <option value="apple">Apple</option>
     <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="drink">
    <option value="juice">juice</option>
    <option value="coffe">coffe</option>
    <option value="cococola">cococola</option>
  </optgroup>
</select>

8. 表格（Table）

在web早期的时候，table是用来布局的重要组成部分，不过在今天，我们更多使用CSS的布局能力，例如flex布局和Grid布局。Table现在就只是用来创建表格。

8.1 `table`标签

我们通过table标签来创建一个表格：

<table></table>

我们将在它内部定义数据，通过在其内部添加行，在行的内部添加列来展示表格数据。

8.2 `tr`标签 - Rows

我们通过tr标签来添加一行，而在table元素里面只能添加tr标签：

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

示例中添加了一个三行的表格，第一行我们可以让它扮演表格表头的角色。

8.3 `th`标签 - 列表头

表格头部包含列的名称，通常以粗体显示，类似于Excel顶部的A-B-C-D...头。

图片.png

我们通过th来定义列的标题：

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr></tr>
  <tr></tr>
</table>

8.4 `td`标签 - 表格内容

我们通常在tr标签内使用td标签来定义表格的内容，类似于excel表格中的单元格：

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
    <td>Row 2 Column 3</td>
  </tr>
</table>

我们再添加一点css：

th,td {
  padding: 10px;
  border: 1px solid #333;
}

然后看到的表格就会是这个样子：

企业微信截图_17149918014889.png

8.5 表格合并行和列

通过colspan属性来合并列内容

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2">Row 1 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td colspan="3">Row 2 Columns 1-3</td>
  </tr>
</table>

看到效果如下：

企业微信截图_17149928428637.png

我们通过rowspan属性来合并行内容：

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>
    <td>Row 1 Column 3</td>
  </tr>
  <tr>
    <td>Row 2 Column 3</td>
  </tr>
</table>

效果如下：

8.6 行表头

列表头是在table标签中第一个tr标签中定义的th标签，而在非第一个的tr标签中第一个元素用th标签来定义，那它就是这一行的行表头：

<table>
  <tr>
    <th></th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <th>Row 1</th>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
    <th>Row 2</th>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

效果如下：

8.7 table相关的更多标签

在table标签中，我们可以嵌套下面的的标签，这些标签内部再嵌套tr标签，以此来让表格更有规范和语义化。

thead —— 代表表格头部区域
tbody —— 代表表格内容区域
tfoot —— 代表表格底部区域

示例：

<table>
  <thead>
    <tr>
      <th></th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>Footer of Col 1</td>
      <td>Footer of Col 2</td>
    </tr>
  </tfoot>
</table>

效果：

企业微信截图_17150485754677.png

8.8 `caption`标签-表格标题

caption标签用来定义表格的标题，它必须紧随table标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

示例：

<table>
  <caption>
    Dogs age
  </caption>
  <tr>
    <th>Dog</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

9 多媒体标签-`audio`和`video`

9.1 `audio`标签

audio标签可以让我们在HTML页面中嵌入音频内容，通过src属性，我们可以播放音频资源或者播放使用麦克风设备通过getUserMedia()获取的音频流内容。

<audio src="file.mp3"></audio>

默认情况下，浏览器不显示此audio标签的控件，这意味着只有当设置为自动播放（稍后将有详细介绍）时才会播放音频，并且用户无法停止播放音频或调整播放音量或控制播放进度。若要显示内置的控件，我们可以添加controls属性：

<audio src="file.mp3" controls></audio>

我们可以使用type属性来指定音频文件的MIME类型。如果未设置，浏览器将尝试自动确定它：

<audio src="file.mp3" controls type="audio/mpeg"></audio>

默认情况下，音频文件不会自动播放，我们可以添加autoplay属性来设置自动播放：

<audio src="file.mp3" controls autoplay></audio>

loop属性用来控制音频是否循环播放，设置之后，音频在播放结束之后会自动重新播放，而不是停留在音频最后位置：

<audio src="file.mp3" controls autoplay loop></audio>

muted属性用来静音音频，播放的时候将会没有声音：

<audio src="file.mp3" controls autoplay loop muted></audio>

JavaScript还提供了一系列的事件来监听audio元素的动作，下面是一些基础的事件：

onplay: 监听音频开始播放事件
onpause：监听音频暂停事件
playing：监听音频从暂停状态恢复播放事件
ended：监听音频播放结束事件

这里对于这些事件不再多述，具体的使用会在JavaScript事件相关中展开描述。

9.2 `video`标签

vedio标签可以让我们在HTML页面中嵌入视频内容，通过src属性，我们可以播放视频资源或者播放使用网络摄像头设备通过getUserMedia()获取的视频流或者是WebRTC视频流：

<video src="file.mp4"></video>

和audio标签一样，默认情况下，浏览器不显示video标签的控件，这意味着只有当设置为自动播放（稍后将有详细介绍）时才会播放视频，并且用户无法停止播放视频或调整播放音量或控制播放进度。若要显示内置的控件，我们可以添加controls属性：

<video src="file.mp4" controls></video>

我们可以使用type属性来指定视频文件的MIME类型。如果未设置，浏览器将尝试自动确定它：

<video src="file.mp4" controls type="video/mp4"></video>

默认情况下，视频文件不会自动播放，我们可以添加autoplay属性来设置自动播放：

<video src="file.mp4" controls autoplay></video>

一些浏览器除了设置autoplay属性,还需要设置muted属性之后才能自动播放，设置muted属性之后，视频播放的时候将会没有声音：

<video src="file.mp4" controls autoplay muted></video>

loop属性用来控制视频是否循环播放，设置之后，视频在播放结束之后会自动重新播放，而不是停留在视频最后位置：

<video src="file.mp4" controls autoplay loop></video>

poster属性可以让我们设置视频的封面图，如果没有设置，浏览器将在视频可用时立即显示视频的第一帧：

<video src="file.mp4" poster="picture.png"></video>

我们可以通过设置width和height属性来设置video元素的大小，让浏览器能够解析video元素所占用的空间大小，确保最终加载时不会改变布局。width和height属性是一个数值，单位是px。

和audio标签类似，JavaScript也提供了一系列的事件来监听video元素的动作，下面是一些基础的事件：

onplay: 监听视频开始播放事件
onpause：监听视频暂停事件
playing：监听视频从暂停状态恢复播放事件
ended：监听视频播放结束事件

这里对于这些事件不再多述，具体的使用会在JavaScript事件相关中展开描述。

10 `iframe`标签

iframe标签允许我们将其它网站的网页内容嵌入到我们的网页中来。从技术上讲，iframe会创建一个新的嵌套浏览上下文，这意味着iframe中的任何内容都不会影响到父页面，反之亦然。JavaScript和CSS不会“泄漏”到iframe嵌套的页面中来。许多网站都会使用iframe标签来做各种事情，比如Codepen，Glitch或其它在线编码网站，你可以在页面进行编码，同时在页面另外一部分区域预览结果，这就是通过iframe来实现。

下面是使用iframe的实例：

<iframe src="page.html"></iframe>

或者引入一个绝对路径页面：

<iframe src="https://example.com/page.html"></iframe>

我们可以通过width和height属性来设置iframe的宽度和高度（也可以使用来CSS设置），如果没有设置，iframe将会显示默认大小，默认300x150px。

<iframe src="page.html" width="800" height="400"></iframe>

10.1 `srcdoc`属性

srcdoc属性能够让我们指定一些要显示的内联HTML内容，它是src的替代品，但有兼容性问题，在Edge 18以下以及更低的IE版本中不支持该属性：

<iframe srcdoc="<p>Hello World!</p>"></iframe>

10.2 `sandbox`属性

sandbox属性让我们能够限制iframe中允许的操作。如果我们不设置它，则允许有的操作，如果设置sandbox为''，则是禁止所有的操作：

<iframe src="page.html"></iframe>
<iframe src="page.html" sandbox=""></iframe>

我们可以通过在sandbox属性中添加选项来选择所允许的操作，如果有多个操作，则用空格来区分。以下是一个不完整的选项列表：

allow-forms，允许嵌入的浏览上下文提交表单。如果没有使用该关键字，则无法提交表单。
allow-modals，允许嵌入的浏览上下文打开模态窗口。
allow-orientation-lock，允许嵌入的浏览器下文锁定屏幕方向。
allow-popups，允许弹窗 (例如 window.open, target="_blank", showModalDialog)。如果没有使用该关键字，相应的功能将自动被禁用。
allow-same-origin，如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。
allow-scripts，允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。
allow-top-navigation，允许嵌入的浏览上下文导航（加载）内容到顶级的浏览上下文。

10.3 `allow`属性

allow属性和sandbox属性类似，用来指定iframe的特征策略，不过该属性目前还是实验性的属性。下面是一些支持的值：

accelerometer 允许访问加速计传感器API
ambient-light-sensor 允许访问光传感器API
autoplay 允许自动播放视频文件和音频文件
camera 允许通过getUserMedia API访问摄像头
display-capture 允许通过getDisplayMedia API来截屏
fullscreen 允许使用全屏模式
geolocation 允许通过Geolocation API获取定位
gyroscope 允许使用陀螺仪传感器API
magnetometer 允许使用磁力计传感器API
microphone 允许通过getUserMedia API访问麦克风
midi 允许使用Web MIDI API
payment 允许使用支付请求API
speaker 允许通过扬声器播放音频
usb 允许使用Web USB API
vibrate 允许使用Vibration API
vr 允许使用WebVR API

10.4 `referrerpolicy`属性

当加载iframe内容的时候，浏览器会在Referer首部中添加一些关于谁加载iframe页面的重要的信息发送出去。referrerpolicy属性允许我们设置当iframe加载页面时浏览器发送的referrer，而referrer是http的请求头，能够让网页知道是谁再加载它。下面是一些允许设置的值：

no-referrer-when-downgrade：向不受 TLS (HTTPS) 保护的 origin 发送请求时，不发送 Referer 首部，这是默认值。
no-referrer：不发送 Referer 首部。
origin：referrer 首部中仅包含来源页面的源。换言之，仅包含来源页面的 scheme, host, 以及 port。
origin-when-cross-origin：发起跨域请求时，仅在 referrer 中包含来源页面的源。发起同源请求时，仍然会在 referrer 中包含来源页面在服务器上的路径信息。
same-origin：对于 same origin（同源）请求，发送 referrer 首部，否则不发送。
strict-origin：仅当被请求页面和来源页面具有相同的协议安全等级时才发送 referrer 首部（比如从采用 HTTPS 协议的页面请求另一个采用 HTTPS 协议的页面）。如果被请求页面的协议安全等级较低，则不会发送 referrer 首部（比如从采用 HTTPS 协议的页面请求采用 HTTP 协议的页面）。
strict-origin-when-cross-origin：当发起同源请求时，在 referrer 首部中包含完整的 URL。当被请求页面与来源页面不同源但是有相同协议安全等级时（比如 HTTPS→HTTPS），在 referrer 首部中仅包含来源页面的源。当被请求页面的协议安全等级较低时（比如 HTTPS→HTTP），不发送 referrer 首部。
unsafe-url：始终在 referrer 首部中包含源以及路径（但不包括 fragment，密码，或用户名）。这个值是不安全的, 因为这样做会暴露受 TLS 保护的资源的源和路径信息。

11. 图像

11.1 `image`标签

我们使用image标签来展示图片，通过设置它的src属性来设置展示的图片的资源：

<img src="image.png" />

img标签支持各种各样的图片格式，如png、jpg、jpeg、gif、svg、webp等格式。

HTML标准要求img标签需要一个alt属性，用来描述这个图片的信息，当img标签加载失败的时候，会在页面上显示，alt属性有利于进行SEO优化。

<img src="image.png" alt="A picture" />

我们可以设置width和height属性来设置image元素的宽高，浏览器就可以解析image元素所占用的空间，在图片完全加载时就不会更改页面的布局。width和height属性是数值，以px像素为单位。

<img src="image.png" alt="A picture" width="300" height="200" />

11.2 `figure`标签

figure标签一般和伴随着img标签一起使用。这是一个语义化的标签，一般用来去展示图片和图片的标题，如以下示例：

<figure>
  <img src="dog.png" alt="A nice dog" />
  <figcaption>A nice dog</figcaption>
</figure>

figcaption标签用来包裹标题文本。

11.3 `srcset`属性

srcset属性允许我们可以根据屏幕分辨率或者窗口宽度响应式加载图像，这样，image元素无需在移动设备上下载更大的图像。下面就是一个使用示例，在不同屏幕分辨率下加载不同的图像：

<img
  src="dog.png"
  alt="A picture of a dog"
  srcset="
    dog-500.png 500w,
    dog-800.png 800w,
    dog-1000.png 1000w,
    dog-1400.png 1400w
  "
/>

在srcset属性中，我们使用w来表示窗口宽度，一旦我们这样用了之后，我们还需要设置sizes属性：

<img
  src="dog.png"
  alt="A picture of a dog"
  sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
  srcset="
    dog-500.png 500w,
    dog-800.png 800w,
    dog-1000.png 1000w,
    dog-1400.png 1400w
  "
/>

在这个示例中，sizes属性描述了图片宽度和屏幕宽度的关系，多个条件用,进行分隔。(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px表示，如果屏幕宽度< 500px，图片的宽度就是100%的屏幕宽度，如果屏幕宽度在500px和900px之间，图片宽度就是50%的屏幕宽度，如果再大于900px的屏幕宽度，则图片的宽度就是800px。

vw是css中表示长度的一个单位，1vw代表着 1% 的屏幕宽度。

11.4 `picture`标签

HTML提供了picture标签来实现类似srcset的功能，但是比srcset的功能要强上一些。比如，我们不仅仅想要去使用一张比较小的图片，而是完全去更改它，或者提供一张不同格式的图片。示例：

<picture>
  <source type="image/webp" srcset="image.webp" />
  <img src="image.jpg" alt="An image" />
</picture>

示例中，我们在picture标签中指定了一个图片列表，浏览器将按照顺序进行使用，如果浏览器支持webp格式，浏览器将会使用image.webp图片，如果不支持，那么浏览器会加载image.jpg图片。

source标签可以为图片定义一种或多种的格式

在picture标签内的source标签上，我们可以设置media属性来设置媒体查询，以此来实现不同屏幕分辨率下的图片适配：

<picture>
  <source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw" />
  <source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw" />
  <source media="(min-width: 1000w)" srcset="dog-1000.png" sizes="800px" /
  <source media="(min-width: 1400w)" srcset="dog-1400.png" sizes="800px" /
  <img src="dog.png" alt="A dog image" />
</picture>

不过我们也看到了，picture标签的使用更加的冗长。

picture标签是一个比较新的标签，但是基本上所有主流浏览器都支持它。

12. 语义化

在HTML中，我们要时刻关注网页的可访问性，拥有高可访问性的网页，意味着支持无障碍的访问，哪怕是残障人士、老年人或使用辅助技术的人都有着平等、便捷的访问体验，意味着有利于搜索引擎优化，提高网页在搜索结果中的排名。当然这些只是一些片面的描述，只是从HTML的角度去考虑网页的可访问性问题，还有其它方面如css、js的角度去提升网页的可访问性，这里不赘述。下面就从HTML的角度去思考如何提高页面的可访问性。

12.1 使用语义化标签

语义化标签非常重要，而且也是我们在使用HTML标签时主要关心的事情。下面是一些常用的使用场景。

使用h1~h6标签，数字越小，代表着标题越重要，相同级别的标签代表的含义应该一样
使用srong和em替换b和i标签，前者是语义化的标签，后者只是单纯的视觉元素
使用table标签的时候添加caption标签，用来描述表格的内容
img标签使用alt属性，用来描述图片的内容，如果图片没有加载或者加载出错的时候，会用来替换显示图片。通杀alt属性有利于SEO优化
使用其它语义化的标签，如：
- <header>：定义页面或区段的头部
- <nav>：定义导航链接
- <main>：定义页面的主要内容
- <article>：定义独立的文章内容
- <section>：定义文档中的一个区段
- <aside>：定义与页面主内容少关的内容
- <footer>：定义页面或区段的底部
使用role属性来定义HTML元素在页面中的角色

13. 结语

本文的出发点是自己总结回顾一下HTML相关的知识，温故而知新，由于时间和精力的关系，断断续续花了几个月终于把文章码完，内容肯定不是最全面的，算是自己的一个小尝试，接下来会去总结CSS一些相关知识。文中如有错误，敬请读者指正！

HTML快速入门手册

1. HTML5简介

1.1 HTML页面结构

1.2 标签和元素的区别

1.3 属性

1.4 大小写不敏感

1.5 空格

2. 文档头部

2.1 title标签

2.2 script标签

2.3 noscript标签

2.4 link标签

2.5 style标签

2.6 base标签

2.7 meta标签

3. 文档body

4. 与文本相关的标签

4.1 p 标签

4.2 span标签

4.3 br标签

4.4 h1~h6标题标签

4.5 strong标签

4.6 em标签

4.7 blockquote和q

4.8 hr 标签

4.9 code和pre标签

4.10 List标签ul、ol、dl