HTML 基礎內容（一）
一、單引號還是雙引號
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>