引言
刚开始接触H5的时候，我们先要了解H5的相关标准。在学习什么是Html5之前得先了解两个组织;WHATWG ：网页超文本技术工作小组(Web Hypertext Application Technology Working Group，缩写为WHATWG)，是一个以推动网络 HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商和一些相关团体形成的一个松散的、非正式的协作组织，这些团体希望发展一些新的技术，从而开发人员可以在互联网上编写并部署应用。 另外一个就是大家熟悉的W3C ：万维网联盟(World Wide Web Consortium，W3C)，又称W3C理事会,它主要是为解决web应用中不同平台、技术和开发者带来的不兼容问题，保障Web信息的顺利和完整流通，万维网联盟制定了一系列标准并督促Web应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XML和CSS等的众多影响深远的标准规范。
2008年的时候，两大组织合并，并融合XHTML标准和有WHATWG组织自发制定的HTML5标准合并，发布了HTML5正式版本。
什么是 HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出，再于2007年获W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。目前Firefox、Google Chrome、Opera、Safari(版本4以上)、Internet Explorer 9已支援HTML5技术。
HTML5本质并没有对之前HTML4版本的规范进行彻底的变革，更令人欣喜的是，HTML5一开始设计就考虑了跟之前的标准进行兼容。而且把新的WEB开发的一些新技术新的规范引入进了新版本的标准中。那么它的本质是什么呢?其实HTML5的发展就是html，css，jsapi的发展，用另外一句话解释就是：HTML5=HTML+CSS+JSAPI。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 ;
HTML 标签是由尖括号包<>围的关键词，比如 ;
HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签;
HTML 文档 = 网页
HTML 文档描述网页 ;
HTML 文档包含 HTML 标签和纯文本 ;
HTML 文档也被称为网页 ;
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</html>
</body>
例子解释
<html>与 </html>之间的文本描述网页
<body>与 </body>之间的文本是可见的页面内容
<h1>与</h1>之间的文本被显示为标题
<p>与</p>之间的文本被显示为段落
1.HTML文档的基本结构
1.1<!DOCTYPE html>
DOCTYPE是document type(文档类型)的简写，用来说明你用的是HTML或者XHTML的文档编辑规范。DOCTYPE声明必须放在每一个HTML文档顶部，在所有代码和标识之上。
1.2<html lang="en">
咱们还需要告诉浏览器，咱们的界面使用的语言是什么类型的? en –> English.
1.3 <head>标签
<head>元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
1.3.1 <title>标签
<title> 标签定义文档的标题。
title 元素的作用：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
总之 title 就是用来方便用户能快速准确得了解到这个网页要介绍的内容所使用的标签。
title的特点：
title标签只能在head标签内出现；
标签内的内容通常在浏览器的标题栏中显示；
浏览器中收藏夹内书签的名称是title的内容；
title的内容可以方便搜索引擎索引页面；
从搜索引擎搜索到的内容的标题往往是网页title的内容；
title通常体现了网页的主题内容，所以记得一定要加上。
1.3.2 HTML <meta> 元素
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词，一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
下面的 meta 元素定义页面的描述：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
下面的 meta 元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是描述页面的内容。
meta属性主要非为两组：
1）name属性与content属性
name属性的值所描述的内容（值）通过content属性表示，便于爬虫查找、分类。其中重要的是description、keywords和robots。
2）http-equiv属性和content属性
http-equiv 属性所支持的值有如下几个.
expires 指定网页的过期时间.一旦网页过期们必须重新从服务器上下载.
pragma 指定禁止浏览器从本地磁盘缓存中调阅页面内容,浏览器一旦离开该网页就无法脱机访问该页面.
refresh 指定浏览器多长时间后自动刷新指定页面.
set-cookie 设置 cookie. 如果网页过期,那么客户端上的 cookie 也将被删除.
content-type 设置该页面的内容类型和所用的字符集.
1.3.3 HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
因为这里之后会涉及到之后的 CSS ， 在这里不做更多的介绍。
1.4 <body>元素
几乎大部分 HTML 元素都是写在 body 中的，那我们的 body 中经常会用到哪些标签呢？
2.HTML文档的基本结构
2.1 <a>HTML 链接
HTML 链接是通过 <a> 标签进行定义的；
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分；
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手；
我们通过使用 <a> 标签在 HTML 中创建链接；
需要注意路径的分类：
1.绝对路径：//www.baidu.com
2.相对路径：相对于网页文档所在位置的相对路径
<a href="//www.w3school.com.cn/xhtml/xhtml_syntax.asp">跳转到百度首页</a>
<a href="html/b.html">跳转到b.html</a>
有两种使用 <a> 标签的方式：
2.1.1.通过使用 href 属性 - 创建指向另一个文档的链接
<a href="//www.w3school.com.cn">This is a link</a>
2.1.2.通过使用 name 属性 - 创建文档内的书签
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法：
<a name="label">锚（显示在页面上的文本）</a>
提示：锚的名称可以是任何你喜欢的名字。
提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：
<a href="//www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
有用的提示
提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。
提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。
2.2 HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
咱们可以先设置 h*6， 会直接创建6个<h>标签，这个小技巧以后也会经常用到。
在这里咱们使用 h${我是标题}*6->emmet,这样去快速创建 h1 - h6 ，内容->我是标题。
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
2.3 HTML 列表 （有序列表 & 无序列表）
无序列表：
<ul>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ul>
效果图：
有序列表：
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol>标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>名词1</dt>
<dd>解释1</dd>
<dt>名词2</dt>
<dd>解释2</dd>
</dl>
效果图：
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
2.3 单标签和双标签
正常咱们看的标签就是正常的双标签，但是有一些特殊的标签，例如<hr>,它只需要一个标签就可以生效，所以说，咱们的标签不一定全部都是一一对应的。
注释：<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
2.4 HTML 段落
段落是通过 <p> 标签定义的。
注释：
注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。
用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）
不要忘记结束标签.即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来。
您也许发现 <br> 与 <br /> 很相似。
在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。
即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。这只是网页文档编辑标准的不同。
2.5 HTML 区块
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
说白了，div 其实并没有什么意思，主要是用来做页面布局的，经常和 CSS 连用。
2.6 HTML 表格
表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
咱们可以设置一个 table 来实验一下。
<table>
<tr>
<td>1行1列</td>
<td>1行2列</td>
<td>1行3列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
<td>2行3列</td>
</tr>
<tr>
<td>3行1列</td>
<td>3行2列</td>
<td>3行3列</td>
</tr>
</table>
效果图：
2.6.1表格和边框属性
如果不定义边框属性，表格将不显示边框。
有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
表格的表头
表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<table border="1">
<tr>
<th>表头</th>
<th>其他表头</th>
</tr>
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
</tr>
</table>
效果图：
1.11.2表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。
如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
浏览器可能会这样显示：
表格中的空单元格
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
2.7 HTML 图像标签
在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。
src 指 “source”。源属性的值是图像的 URL 地址。
<img src="url" />
URL 指存储图像的位置。
如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 //www.w3school.com.cn/images/boat.gif。
浏览器将图像显示在文档中图像标签出现的地方。
如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，后显示第二段。
例如：
<img src="https://www.baidu.com/img/bd_logo1.png" alt="">
<img src="images/logo.png" alt="">
2.8 HTML <span>
<span> 标签被用来组合文档中的行内元素.
提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。
注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。
尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。
这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
<p>段落段落段落<span style="color:red; font-size:28px">段落</span>段落段落段落</p>
效果图：
以上是学习H5的一点知识积累，学习是一个循序渐进的过程，不断学习才能不断成长。
热点新闻
前端开发技术库
