什么是HTML？
超文本标记语言(Hypertext Markup Language，简称：HTML)，是一种用于描述网页的标记语言，由一系列的HTML元素组成，每个元素（elements）都有其各自的结构作用。
- 超文本的基本特征就是可以超链接文档，用来显示文本及与文本之间相关的内容。
- HTML元素大多数都是由一个开始标签（opening tag）、结束标签（closing tag）和两者之间的元素内容组成。例如：<h1>hello world</h1>中，<h1>这个是开始标签，它本身还可以包含属性(Attribute)，用来指示元素的附加的性质。</h1>是结束标签,元素内容为hello world。
- HTML不是编程语言，是一种标记语言。
什么是HTML5？
HTML5是HTML最新的修订版本，提供了一些新的语义、图形以及多媒体元素，如<header>、<footer>、<nav>标签等等，这些语义化的标签，也便于我们更加清晰的阅读与定义HTML文档内容。
HTML、XML、XHTML的区别
- HTML，超文本标记语言，是语法较为松散、不严格的Web语言。
- XML，可扩展标记语言，主要用于储存数据和结构。
- XHTML，可扩展超文本标记语言，基于XML，作用于HTML类似，但语法更严格。
HTML文档的基本结构
<!DOCTYPE html>
<html lang=“zh">
<head>
<meta charset="utf-8”>
<meta http-equiv=“X-UA-Compatible” content="IE=edge,chrome=1”>
<meta name=“viewport" content="width=device-width, initial-scale=1,maximum-scale=1”>
<meta name="keywords" content=“页面的关键字”>
<meta name="description" content="页面描述内容">
<title>网页标题</title>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
<!DOCTYPE>
<!DOCTYPE html>是目前最推荐的HTML5文档类型声明。<!DOCTYPE>声明只能放在html文档中的第一行，在它前面不能出现任何注释、空白字符以及标签内容。用来告知浏览器这个页面是使用HTML5文档类型来渲染页面的，可以写为小写<!doctype html>。
浏览器渲染模式有两种，一种是标准模式另外一种是怪异模式。如果我们没有在HTML文档中书写<!doctype>声明，那么浏览器就会选择怪异模式对页面进行渲染。
- 标准模式（Standards Mode）：在标准模式下浏览器会按照W3C标准去渲染页面。如<!DOCYTPE html>就是指定了HTML5标准去进行页面渲染。
- 怪异模式（Quirks Mode）：与标准模式相对应的是怪异模式，也称为混杂模式，是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。如果没有书写<!doctype>声明，浏览器就会处于怪异模式对页面进行渲染，会对CSS布局造成影响。
<html lang=“zh”>
<html>标签定义了整个HTML文档，所有标签都包含在<html></html>中，也被称作根元素。
lang属性定义当前页面显示的语言，这段代码是告知浏览器当前页面使用的是中文。
<head>
<head>元素. 这个元素包含了所有和你页面相关的信息，其中的信息虽然不会被用户所看到，但却是文档的最基本的元信息。
<meta>
用于描述一个HTML网页文档的属性，例如使用语言、网页描述、关键字等，是<head>标签中的一个很重要的标签。
META标签可分为两大部分：HTTP-EQUIV和NAME变量。
- <meta charset="UTF-8”>
声明文档使用的字符编码。charset 属性是 HTML5 中的新属性，它是用来告知浏览器这个html文档是使用utf-8的字符编码进行解析。如果网页中出现了乱码的问题，通常是因为html文档保存的编码方式和浏览器的解码方式不同所造成的，需要将字符编码声明与保存的编码方式保持一致即可。
- <meta http-equiv=“X-UA-compatible” content="IE=edge,chrome=1>优先使用最新版本的IE进行渲染，如果支持Chrome内核就用Chrome内核去渲染。
- <meta name=“viewport" content="width=device-width, initial-scale=1,maximum-scale=1”>，针对移动端网页进行页面优化，用来控制视口的尺寸及比例。
- <meta name="keywords" content="网页的关键字">，告诉搜索引擎网页中的关键字，用于搜索引擎优化，当爬虫爬取页面的时候，就会知道当前页面的关键词是什么，这样用户在网页中搜索这个关键词时就能很容易找到这个页面。
- <meta name="description" content="网页内容描述">用来告诉搜索引擎你的网站主要内容，描述内容一般控制在150字以内，多余部分将不会显示。
<title>
用来定义文档的标题。
<body>
被<body>标签所包含的都是你想让用户看到的内容。
HTML常用标签
<h1>
标题（heading）
页面中文档标题共六级，<h1>是最大的标题，<h6>是最小的标题。通常一个页面中只有一个<h1>。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>
段落（paragraph）
段落标签，在大段文字中使用。
<p>这是一个段落</p>
<a>
锚点(anchor)
超链接是通过<a>标签来定义的，用于从一个页面链接到另一个页面。
<a href=“链接地址” target=“_blank”>这是一个链接</a>
href属性：连接地址
target属性：_blank在新的页面打开，_self在当前页面中打开。
<img>
图片（images）
展示页面中的一张图片，自闭和标签，最后不需要加 “ / ”。
<img src=“a .png” alt=“头像" >
src属性：图片路径地址。
alt属性：用于显示图片的替换文本信息，当图片未加载成功时，会显示alt中的文字。添加alt属性有利于搜索引擎识别。
<div>
块（division）
语义为“一大块”，用于给页面划分区块或者一个区域部分，使页面结构更清晰。
<div id=“header” >…</div>
<div id=“content” >…</div>
<div id=“footer” >…</div>
<ul>
无序列表（unsort list）
用于表示并列的内容，ul的直接子元素是li，可以嵌套。
<ul class=“nav”>
<li><a href=“#”>首页</a></li>
<li><a href=“#”>关于</a></li>
<li><a href=“#”>更多</a></li>
<ul>
<li>联系</li>
<li>地址</li>
<ul>
</ul>
<ol>
有序列表（order list）
有序列表用于表示带步骤或者编号的并列内容，<ol>的直接子元素只能是<li>，可以嵌套。
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<dl>
自定义列表（definition list）
用于展示一系列“标题：内容”的场景。
<dl>
<dt>列表标题</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
<button>
用于定义按钮。
<button>按钮</button>
<em>
强调(emphasized)
定义强调文本
<p>让我<em>受益匪浅</em>的一本书</p>
<strong>
用来定义很重要的文本，强调性更强
<p>优惠<strong>100</strong>元</p>
<iframe>
内联框架元素，可用于在当前页面中嵌入另一个页面。
<iframe src="http://www.baidu.com" name="mypage"></iframe>
<p><a href="http://www.w3school.com.cn/" target="mypage">W3C</a></p>
<table>
用于展示表格。thead tbody tfoot可省略。
<th> Table head cell 表格中的表头单元格。
<tr> table row表格中的行。
<td> table data cell 表格中的单元格。
<table>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>小李</td>
<td>男</td>
</tr>
<tr>
<td>小赵</td>
<td>女</td>
</tr>
</table>
参考资料：
