html5學習筆記（一）（摘抄講義加部分理解）
視訊地址：http://study.163.com/course/courseMain.htm?courseId=1003005
講義地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html
第一章、概述及開發環境
現在 HTML5 可以理解為 HTML + CSS + JavaScript 的總稱
瀏覽器選擇：IE9+ Firefox 3.5+ Chrome 3.0+ Safari 3.0+ Opera 10.5+
開發工具：本課程 我們使用 Sublime Text3 作為 HTML5 課程的編碼工具。使用了 Soda Dark 3作為軟體介面的主題。***Sublime Text3 的一些配置和快捷鍵：
a.檢視--側邊欄--顯示/隱藏側邊欄，然後檔案--開啟資料夾，可以看到資料夾目錄。
b.首選項--“按鍵繫結-使用者”，設定自定義按鍵，如下：
[
{"keys":["f1"],"command":"toggle_side_bar"},
]
c.新建並儲存index.html，快捷鍵可使用"Tab"鍵，如寫"html"，按下“Tab”鍵，則會自動變為"<html> </html>"
d.輸出註釋語句"<!-- -->"的快捷鍵為Ctrl+"/"
------------------------------------------------------------------------------------------------
第二章、基本格式
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"><!--文件型別宣告-->
<title>文件標題</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>分析：
a.<!DOCTYPE html>
文件型別宣告（Document Type Declaration，也稱 Doctype）。它主要告訴瀏覽器所檢視的檔案型別。 在以往的 HTML4.01 和 XHTML1.0 中， 它表示具體的 HTML 版本和風格。而如今 HTML5 不需要表示版本和風格了。
用來包含元資料內容，元資料包括：<link>、<meta>、<noscript>、<script>、<style>、<title>。這些內容用來瀏覽器提供資訊，比如 link 提供 CSS 資訊，script提供 JavaScript 資訊，title 提供頁面標題等。
c.meta 元素
這個元素用來提供關於文件的資訊，起始結構有一個屬性為：charset="utf8"。表示告訴瀏覽器頁面採用的什麼編碼，一般來說我們就用 utf8。當然，檔案儲存的時候也是utf8，而瀏覽器也設定 utf8 即可正確顯示中文。
----------------------------------------------------------
第三章 文字格式
1.<b>表示關鍵字和產品名稱
<b>HTML5</b>
解釋：<b>元素實際作用就是加粗,就是標記一段文字，但並不是特別強調或重要性。
2.<strong>表示重要的文字
<strong>HTML5</strong>
解釋：<strong>元素實際作用和<b>一樣，就是加粗。從語義上來看，就是強調一段重要的文字。
3.<br>強制換行、<wbr>安全換行
<br> Thisabc<wbr>dkedkslakdj<wbr>fkdlsakd is apple.
解釋：在任意文字位置鍵入<br>都會被換行，而在英文單詞過長時使用<wbr>會根據瀏覽器的寬度適當的裁切換行。
4.<i>表示外文詞彙或科技術語
<i>HTML5</i>
解釋：<i>元素實際作用就是傾斜。從語義上來看，表示區分周圍內容，並不是特別強調或重要性。
5.<em>加以強調
<em>HTML5</em>
解釋：<em>元素實際作用和<i>一樣，就是傾斜；從語義上來看，表示對一段文字的強調。
6.<s>表示不準確或校正
<s>HTML5</s>
解釋：<s>元素實際作用就是刪除線；從語義上來看，表示不準確的刪除。
7.<del>表示刪除文字
<del>HTML5</del>
解釋：<del>元素實際作用和<s>一樣，就是刪除線；從語義上來看，表示刪除相關文字。
8.<u>表示給文字加上下劃線
<u>HTML5</u>
解釋：<u>元素實際作用就是加一條下劃線；從語義上來看，並不強調此段文字。
9.<ins>新增一段文字
<ins>HTML5</ins>
解釋：<ins>元素實際作用和<u>一樣，加一條下劃線；從語義上來看，是新增一段文字，起到強調的作用。
10.<small>新增小號字型
<small>HTML5</small>
解釋：<small>元素實際作用就是將文字放小一號。從語義上來看，用於免責宣告和澄清宣告。
11.<sub><sup>新增上標和下標
<sub>5</sub>
<sup>5</sup>
解釋：<sub>和<sup>元素實際作用就是數學的上標和下標。語義也是如此。
12.<code>等表示輸入和輸出
<code>HTML5</code>
<var>HTML5</var>
<samp>HTML5</samp>
<kdb>HTML5</kdb>
解釋：<code>表示計算機程式碼片段；<var>表示程式語言中的變數；<samp>表示程式或計算機的輸出；<kdb>表示使用者的輸入。由於這屬於英文範疇的，必須將 lang="en"英語才能體現效果。
13.<abbr>表示縮寫
<abbr>HTML5</abbr>
解釋：<abbr>元素沒有實際作用；從語義上看，是一段文字的縮寫。
14.<dfn>表示定義術語
<dfn>HTML5</dfn>
解釋：<dfn>元素就是一般性的傾斜；從語義上看，表示解釋一個詞或短語的一段文字。
15.<q>引用來自他處的內容
<q>HTML5</q>
解釋：<q>元素實際作用就是加了一對雙引號。從語義上來看，表示引用來自其他地方的內容。
16.<cite>引用其他作品的標題
<cite>HTML5</cite>
解釋：<cite>元素實際作用就是加粗。從語義上來看，表示引用其他作品的標題。
17.<ruby>語言元素
<ruby> 饕<rp>(</rp><rt>tāo</rt><rp>)</rp> 餮<rp>(</rp><rt>tiè</rt><rp>)</rp> </ruby>
解釋：<ruby>用來為非西方語言提供支援。<rp><rt>用來幫助讀者掌握表意語言文字正確發音。比如：漢語拼音在文字的上方。但目前 Firefox 還不支援此特性。
18.<bdo>設定文字方向
<bdo dir="rtl">HTML5</bdo>
解釋：<bdo>必須使用屬性 dir 才可以設定，一共兩個值：rtl（從右到左）和 ltr（從左到右）。一般預設是 ltr。還有一個<bdi>元素也是處理方向的，由於是特殊語言的特殊效果，且主流瀏覽器大半不支援，忽略。
19.<mark>突出顯示文字
<mark>HTML5</mark>
解釋：<mark>實際作用就是加上一個黃色的背景，黑色的字；從語義上來看，與上下文相關而突出的文字，用於記號。
20.<time>表示日期和時間
<time>2015-10-10</time>
解釋：<time>元素沒有實際作用；從語義上來看，表示日期和時間。
21.<span>表示一般性文字
<span>HTML5</span>
解釋：<span>元素沒有實際作用；語義上就是表示一段文字，我們經常用它來設定 CSS 等操作。
-----------------------------------------------------------------
第四章 超連結和路徑
1.target 屬性：_blank(在新視窗或標籤頁中開啟文件);
_parent 在父窗框組（frameset）中開啟文件
_self 在當前視窗開啟文件（預設）
_top
在頂層視窗開啟文件
而 HTML5 中，框架基本被廢棄，只能使用<iframe>元素，且以後大量結合 JavaScript 和 PHP 等語言配合，框架用的就很少了。
2.目錄語法
當前路徑：./
磁碟路徑，絕對路徑舉例：<a href="file:///D:/備課/HTML5 第一季/code/index2.html">index2</a>
同一個目錄：index2.html 或./index2.html；
在子目錄：xxx/index2.html；
在孫子目錄：xxx/xxx/index2.html；
在父目錄：../index2.html；
在爺爺目錄：../../index2.html；
3.錨點設定舉例：
<a href="#1" name="home">第一章</a>
<a href="#2" name="home">第二章</a>
<a href="#3" name="home">第三章</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="1">這是第一章內容<a href="#home">回頂部</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="2">這是第二章內容<a href="#home">回頂部</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="3">這是第三章內容<a href="#home">回頂部</a>點選“第一章，根據“#1”跳轉到name為“1”的連結位置，點選"回頂部"，跳轉到name為"home"的連結位置。
------------------------------------------------------------------------------------------
第5章 分組元素
<p>:<p>元素實際作用就是將內部包含的文字形成一個段落；而段落和段落之間保持一定量的空隙。
<div>:和<p>段落的區別就是，兩段文字的上下空隙是沒有的，空隙間隔和<br>換行一樣。
<blockquote>:和<p>一樣的鍛鍊空隙+首位縮排，，語義上表示：大段的引用他出的內容。
<pre>:實際作用就是編輯器怎麼排版的，原封不動的展現出來。當然，這種只適合簡單的排版，複雜的排版就無法滿足要求了。
<hr>:分割線
<ul><li>:新增無序列表
<ol><li>新增有序列表 (ol屬性：a.start從第幾個序列開始統計，如start="2"; reversed屬性：是否倒敘排列，<ol reversed>一半瀏覽器不支援;type型別，1，a,A,i,I)
(li屬性:value，強行設定某個專案的編號。)
<dl><dt><dd>生成說明列表:
<dl>
<dt> 這是一份檔案 </dt>
<dd> 這裡是這份檔案的詳細內容 1 </dd>
<dd> 這裡是這份檔案的詳細內容 2 </dd>
</dl><figure><figcaption>使用插圖:
<figure>
<figcaption> 這是一張圖 </figcaption>
<img src="img.png">
</figure>figcaption是圖片標題。
---------------------------------------------------------------------------------------
第6章 表格元素
1.合併列或行：
<table border="1" style="width:300px;">
<tr>
<th rowspan="4">基本情況</th>
<th>姓名</th>
<th>性別</th>
<th>婚姻</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="3">統計：共2人</td></tr>
</table>效果如圖：
2.新增<caption><head><tfoot><tbody>,可以不按順序寫標題，表頭，表腳，表體，並設定某一行的背景色：
<table border="1" style="width:300px;">
<caption>這是一個人物表</caption>
<tfoot>
<tr>
<td colspan="3">統計：共2人</td>
</tr>
</tfoot>
<tbody>
<tr style="background:yellow;">
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</tbody>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>婚姻</th>
</tr>
</thead>
</table>效果如圖：
3.設定列的背景色：
<table border="1" style="width:300px;">
<colgroup style="background:yellow" span="1"></colgroup>
<colgroup style="background:green" span="1"></colgroup>
<colgroup style="background:pink" span="1"></colgroup>
<tr>
<th>姓名</th>
<th>性別</th>
<th>婚姻</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table><br>效果如圖：
4.第三個示例的另一種寫法：
<table border="1" style="width:300px;">
<colgroup>
<col>
<col style="background:pink;" span="2">
</colgroup>
<tr>
<th>姓名</th>
<th>性別</th>
<th>婚姻</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table><br>