简介
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。
它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现
与展示效果（如 CSS），或功能与行为（如 JavaScript）。
基本结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Hi</title>
</head>
<body></body>
</html>
怪异模式和标准模式
在很久以前的网络上，页面通常有两种版本：为网景（Netscape）的 Navigator 准备的版本，
以及为微软（Microsoft）的 Internet Explorer 准备的版本。
当 W3C 创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接弃用这些标准。因此，
浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。
对 HTML 文件来说，浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。
为了确保你的页面使用标准模式，请确认你的页面如同本范例一样拥有 DOCTYPE
范例中的DOCTYPE，<!DOCTYPE html>，是所有可用的 DOCTYPE 之中最简单的，
也是 HTML5 所推荐的。
html
HTML <html> 元素 表示一个HTML文档的根（顶级元素），所以它也被称为根元素。
所有其他元素必须是此元素的后代。
允许的内容 一个 <head> 元素，后跟一个 <body> 元素
在html元素上提供具有有效IETF标识语言标记的lang属性，将有助于屏幕阅读技术确
定要陈述的正确语言。标识语言标签应描述页面大部分内容使用的语言。没有它，屏幕
阅读器通常会默认使用操作系统的设置语言，这可能会导致错误陈述。
head
HTML head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的
文档样式和脚本等。
允许内容至少包含一个<title> 元素来指定文档的标题信息，除非标题已经从更高等级协议中指定
HTML <meta> 元素表示那些不能由其它 HTML 元相关（meta-related）元素
（(<base>、<link>, <script>、<style> 或 <title>）之一表示的任何元数据信息。
如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。
如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
keywords：与页面内容相关的关键词，使用逗号分隔。
description：一段简短而精确的、对页面内容的描述。一些浏览器，比如 Firefox 和 Opera，
将其用作书签的默认描述。
title
HTML <title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。
它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。
body
HTML body 元素表示文档的内容。document.body 属性提供了
可以轻松访问文档的 body 元素的脚本。
区域标题元素
HTML <h1>–<h6> 标题(Heading)元素呈现了六个不同的级别的标题，
<h1> 级别最高，而 <h6> 级别最低。
避免跳过某级标题：始终要从 <h1> 开始，接下来依次使用 <h2> 等等。
hr
HTML <hr> 元素表示段落级元素之间的主题转换
（例如，一个故事中的场景的改变，或一个章节的主题的改变）。
在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，
但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的css样式来修饰。
段落元素
HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。
该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。
另外，<p> 是块级元素。
使用CSS margin属性去改变段落之间的间隙，不要在段落之间插入空的段落元素或者<br>元素。
br
HTML <br> 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，
这些地方的换行都非常重要。
不要用 <br> 来增加文本之间的行间隔；应使用 CSS margin 属性或<p> 元素。
图像嵌入元素
<img src="https://picsum.photos/500/300" alt="" title="" />
超链接
HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他
网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
<a> 中的内容应该应该指明链接的意图。
如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。
<a href="http://www.mozilla.com/" target="_blank">External Link</a>
<a href="#id">Description of Same-Page Links</a>
列表元素
HTML <ul> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。
HTML <ol> 元素表示有序列表，通常渲染为一个带编号的列表。
允许的内容 零个或更多个 <li> 元素，可以混合使用 <ol> 与<ul> 元素。
HTML <dl> 元素 （或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，
通常用于展示词汇表或者元数据 (键-值对列表)。
<ul>
<li>first item</li>
<li>
second item
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li>
<li>third item</li>
</ul>
<dl>
<dt>Firefox</dt>
<dd>
A free, open source, cross-platform, graphical web browser developed by the
Mozilla Corporation and hundreds of volunteers.
</dd>
<dd>
The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
</dd>
</dl>
表格标签
<table border="1">
<caption>
表格标题
</caption>
<thead>
<tr>
<th>item01</th>
<th>item02</th>
<th>item03</th>
</tr>
</thead>
<tbody>
<tr>
<td>content01</td>
<td>content02</td>
<td rowspan="2">content03</td>
</tr>
<tr>
<td>content01</td>
<td>content02</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">footer</td>
</tr>
</tfoot>
</table>
表单元素
<form action="#" method="post">
<div>
<label for="username">账号：</label>
<input id="username" type="text" name="username" />
</div>
<div>
<label for="password">密码：</label>
<input id="password" type="password" name="password" />
</div>
<div>
<span>性别：</span>
<input checked type="radio" name="gender" id="male" />
<label for="male">男</label>
<input type="radio" name="gender" id="female" />
<label for="female">女</label>
</div>
<div>
<label for="city">城市：</label>
<select id="city" name="city">
<optgroup label="山东">
<option value="济南">济南</option>
<option selected value="日照">日照</option>
</optgroup>
<optgroup label="浙江">
<option value="杭州">杭州</option>
<option value="温州">温州</option>
</optgroup>
</select>
</div>
<div>
<span>爱好：</span>
<input checked type="checkbox" name="hobby" id="art" />
<label for="art">美术</label>
<input type="checkbox" name="hobby" id="music" />
<label for="music">音乐</label>
</div>
<div>
<label for="introduce">简介：</label>
<textarea id="introduce"></textarea>
</div>
<div>
<input type="button" value="button" />
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</div>
<div>
<button type="button">button</button>
<button type="submit">submit</button>
<button type="reset">reset</button>
</div>
</form>
语义化标签
<b>粗体</b>
<strong>粗体</strong>
<i>斜体</i>
<em>斜体</em>
<u>下划线</u>
<ins>下划线</ins>
<s>删除线</s>
<del>删除线</del>
