一、单引号还是双引号
html的属性值，既可以使用单引号，也可以使用双引号。选择一种引号后，另一种引号可以放在值里面。
<input type='text' value="i'm">
<input type="text" disabled="disabled">二、display属性，可以将值省略
<input type='text' disabled><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html>
上面是一个简单的html
三、head元素的作用
3.1 整个document的标题；
3.2 是书签的标题；
3.3 用于使用查询；
四、<mate>元素
描述数据的数据。
4.1 用于定义文档字符集；
<meta charset="utf-8">
4.2 添加作者和描述信息
<meta name="author" content="lf">
<meta name="description" content="The Web docs Learning area">
描述信息，常用语搜索引擎优化。
4.3 其他类型的元素数据
专门设计，用于提供给特定网站使用的。
<meta name="twitter:title" content="Mozilla Developer Network">
4.4 用于添加图标
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
4.5 设置文档的原始语言
<html lang="en-US">
如果设置了HTML文档语言，搜索引擎将更有效的对其进行索引。
你能够将文档的子部分设置成不同的语言，如：
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
五、相对路径和绝对路径
尽可能使用相对路径。有两个原因：
1. 相对路径更容易审查代码；
2. 使用相对路径更高效。绝对路径需要先到DNS（Domain Name System）上查找真正的地址，再根据地址到服务上查找相应的文件。相对路径会直接到服务器上查找相应的文件。
六、在下载链接上添加download属性
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
download属性为下载的内容提供一个默认的文件名字
七、email连接
使用<a>元素和“mailto:”的URL方案，能够打开一个新发送的电子邮件信息。
例如： <a href="mailto:[email protected]">发送Email给hefrankeleyn</a>
当点击连接的时候，打开foxmail：
还可以添加抄送人、密送人、主题、内容
<a href="mailto:[email protected][email protected]&[email protected]&subject=The%20Subject&body=The%20Email%20body">发送</a>
点击上面连接，将打开：
七、描述列表
除了顺序列表<ol>，非顺序列表<ul>，还有第三种列表描述列表。描述列表由三部分组成：最外层的包裹<dl>，描述列表的项，使用<dt>（description term）包裹，每个列表项可以有一个或多个描述，使用<dd>包裹。例如：
<dl>
<dt>aa</dt>
<dd>aa description</dd>
<dt>bb</dt>
<dd>bb description</dd>
<dd>bb description</dd>
<dt>cc</dt>
<dd>cc description</dd>
</dl>展示的效果如下：
八、引用
8.1 块级别的引用
如果一个块级的内容（比如，段落、列表、多个段落等）是引用自某一个地方，就使用<blockquote>元素来包裹这个块，并使用cite属性包含一个url指向引用的源头。浏览器默认为其添加缩进的样式，如：
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.
</p>
</blockquote>8.2 行内的引用
行内的引用和块级的类型，除了使用<q>包裹。浏览器默认为行内引用添加引号：
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q>
</p>8.3 <cite>元素
为了展示块级引用<blockquote>和行内引用<q>中cite里面的内容。可以使用<cite>元素。
<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> once said:</p>
<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">
<p>It does not matter how slowly you go as long as you do not stop.</p>
</blockquote>
<p>
I also love the concept of positive thinking, and <a href="http://www.affirmationsforpositivethinking.com/index.htm">
<cite>The Need To Eliminate Negative Self Talk</cite></a> <q cite="http://www.affirmationsforpositivethinking.com/index.htm">
(as mentioned in Affirmations for Positive Thinking.)</q>
</p>九、缩写(abbreviation)
使用<abbr>元素包裹在缩写词或首字母组成词的外面，将缩写词的完整的展开含义放在title的属性中。在页面显示的时候，当光标移动到缩略词上面，会有一个提示框，显示缩略词的完整表达。例如：
<p>
We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents
</p>十，标记联系详情
用于标记文档的作者本人
<address>
<p>小明, 唐河， 下屯，南阳</p>
</address>
十一、上标和下标
上标（superscript）和下标（subscript）。使用<sup>标记上标，用<sub>标记下标。通过这两个标签可以让时间、化学公式、数据方程式表示出正确的含义。
<p>
My birthday is on the 25<sup>th</sup> of Decomber 1993.
</p>
<p>
Ca<sub>2</sub>co<sub>3</sub>
</p>
十二、标记计算机的代码
<code>用于标记计算机代码的一般片段。用<code>包裹的代码如果有行首缩进，或者在文本中有多余的空格，将会被忽略；
<pre>用于保留空格，通常用于代码块，用<pre>包裹，页面展示的内容将和文本编译器上的完全相同；
<var>特意用来包裹变量；
<kbd>用于标记计算机的键盘（和其他类型的输入）；
<samp>用于标记计算机的输出；
<code>var para = document.querySelector("p");</code>
<pre>
<code>
var p1 = document.querySelector("div01");
console.log(p1.value);
</code>
</pre>
<p>In above JavaScript example,<var>p1</var> represents a paragraph element.</p>
<p>Select all the text with <kbd>Ctrl</kbd>+<kbd>A</kbd>.</p>
<p>
<pre>
$<kbd>ping mozilla.org</kbd>
<samp>正在 Ping mozilla.org [63.245.208.195] 具有 32 字节的数据:
来自 63.245.208.195 的回复: 字节=32 时间=161ms TTL=47
来自 63.245.208.195 的回复: 字节=32 时间=184ms TTL=47
来自 63.245.208.195 的回复: 字节=32 时间=196ms TTL=47
来自 63.245.208.195 的回复: 字节=32 时间=189ms TTL=47
63.245.208.195 的 Ping 统计信息:
数据包: 已发送 = 4，已接收 = 4，丢失 = 0 (0% 丢失)，
往返行程的估计时间(以毫秒为单位):
最短 = 161ms，最长 = 196ms，平均 = 182ms</samp>
</pre>
</p>
十三、标记时间和日期
可以使用<time>绑定一个机器可读的时间和日期，便于以后自动攫取时间。
<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>