HTML5備忘錄
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。
HTML、CSS、 JavaScript 的區別
- HTML 元素負責文檔內容的結構和含義。
- CSS (Cascading Style Sheets) 層疊樣式表，控制內容呈現的樣式。
- JavaScript 用來操縱HTML文檔的內容以及響應用戶的操作。
父元素、子元素、后代元素和兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<code>apples</code>
</body>
</html>
- 包含另一個元素的元素是被包含元素的父元素。body元素是code元素的父元素。相反，code元素是body元素的子元素。
- 子元素是關系最近的后代元素。html元素包含著body元素，而后者包含著code元素。body元素和code元素都是html元素的后代元素，但是二者中只有body元素是html元素的子元素。
- 具有同一個父元素的幾個元素互為兄弟元素。head元素和body元素是兄弟元素。
元數據元素、流元素和短語元素。
- 元數據元素（metadata element）：用來構建HTML文檔的基本結構，以及就如何處理文檔向瀏覽器提供信息和指示。
- 短語元素(phrasing element)是HTML的基本成分。
- 流元素是短語元素的超集。
- 所有短語元素都是流元素，但并非所有流元素都是短語元素。
HTML 文檔結構
image
只有 <body> 區域 (白色部分) 才會在瀏覽器中顯示。
實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文檔的標題</title>
</head>
<body>
<h1>我是一個標題</h1>
<p>我是一個段落</p>
</body>
</html>
實例解析：
<!DOCTYPE html>告訴瀏覽器兩件事：1.它處理的是HTML文檔；2.標記文檔內容的HTML所屬的版本。<html>元素是 HTML 頁面的根元素，它表示文檔中HTML部分的開始。<head>元素包含文檔的元數據（meta）和文檔信息。-
<meta charset="utf-8">對于中文網頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現亂碼。有些瀏覽器會設置 GBK 為默認編碼，則你需要設置為 <meta charset="gbk">。【只有在MySQL中可以使用"utf-8"的別名"utf8"，但是在其他地方一律使用大寫"UTF-8"?！?/p>
<title>元素描述了文檔的標題。<body>元素包含了可見的頁面內容。<h1>元素定義一個一級標題。<p>元素定義一個段落。
文檔和元數據元素
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 設置文檔編碼類型 -->
<meta charset="UTF-8">
<!--使用 <title> 標簽定義HTML文檔的標題或名稱-->
<title>Document</title>
<!--
* base 標簽用于設置一個基準URL，讓HTML文檔中的相對鏈接在此基礎上進行解析。
* href（Hypertext Reference），超鏈接目標URL。
* target 屬性告訴瀏覽器鏈接的打開方式，target="_black" 表示在新窗口打開。
* 如果HTML文檔中不設置base元素，或不用其href屬性設置一個基準URL，
那么瀏覽器會將當前文檔的URL認定為所有相對URL的解析基準。
-->
<base target="_black">
</head>
<body>
<!--絕對鏈接地址-->
<a >Visit Apress.com</a>
<!--相對鏈接地址-->
<a href="page2.html">Page 2</a>
<!--圖片相對地址-->
<img src="Coowl-icon.png!icon512" alt="Icon Image">
</body>
</html>
<meta>元素
meta標簽描述了一些基本的元數據。
<meta> 標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。
元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。
<meta> 一般放置于 <head> 區域
<!--為網頁定義字符集-->
<meta charset="UTF-8">
<!--定義網頁作者-->
<meta name="author" content="作者">
<!--為網頁定義描述內容-->
<meta name="description" content="描述信息">
<!--為搜索引擎定義關鍵詞-->
<meta name="keywords" content="關鍵字，逗號分開，用來描述頁面內容">
<!--每30秒刷新當前頁面-->
<meta http-equiv="refresh" content="30">
<!--模擬HTTP標頭字段-->
<!--1.1 讓瀏覽器每隔5秒刷新一次-->
<meta http-equiv="refresh" content="5">
<!--1.2 讓瀏覽器5秒之后載入另一個URL頁面-->
<meta http-equiv="refresh" content="5; http://www.apress.com">
<!--2 指定頁面優先使用的樣式表-->
<meta http-equiv="default-style" content="xxx.css">
<!--3 另一種聲明HTML頁面所用字符編碼的方法-->
<meta http-equiv="content-type" content="text/html charset=UTF-8">
<!--
noindex是谷歌發明的一個HTML標簽，其作用是向搜索引擎聲明該網頁禁止被索引收錄。
noindex標簽的作用有兩方面，簡單的說，一是不給鏈接投票，增加此鏈接的權重，二是使添加noindex的部分內容不參與網站排名，便于集中網站權重。
nofollow標簽是由谷歌領頭創新的一個“反垃圾鏈接”的標簽，并被百度、yahoo等各大搜索引擎廣泛支持，引用nofollow標簽的目的是：用于指示搜索引擎不要追蹤（即抓取）網頁上的帶有nofollow屬性的任何出站鏈接，以減少垃圾鏈接的分散網站權重！
noarchive 防止緩存版本
-->
<meta name="robots" content="noindex">
<head>元素
<head> 元素包含了所有的頭部標簽元素。在 <head>元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種 meta 信息。
可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<title>元素
<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素:
- 定義了瀏覽器工具欄的標題
- 當網頁添加到收藏夾時，顯示在收藏夾中的標題
- 顯示在搜索引擎結果頁面的標題
<base>元素
<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<link>元素
<link> 標簽定義了文檔與外部資源之間的關系。
- <link> 標簽通常用于鏈接到CSS層疊樣式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
- 為頁面定義網站標志：
<!--定義與頁面聯系在一起的32x32像素的圖標-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
- 要求瀏覽器預先獲取預計很快將會使用到的資源：
<!--預先獲取資源-->
<link rel="prefetch" href="/page2.html">
image
rel屬性最全面的介紹參考：http://iana.org/assignments/link-relations/link-relations.xml
image
<style>元素
<style> 標簽定義了HTML文檔的樣式文件引用地址。在<style> 元素中你也可以直接添加CSS樣式來渲染 HTML 文檔:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個HTML頁面</title>
<!--1. 渲染整個HTML文檔-->
<style type="text/css">
body {background-color:gray}
p {color:red}
</style>
</head>
<body>
<!-- 2. 直接在元素身上定義CSS樣式-->
<a style="background: grey;color: white;padding: 10px;">Visit the Apress site</a>
</body>
</html>
指定樣式適用的媒體
media 屬性可以用來表明文檔在什么情況下應該使用該元素中定義的樣式。
<style media="screen" type="text/css">
// 瀏覽器在屏幕上顯示文檔時使用該 <style> 中的樣式。
</style>
<style media="screen AND (max-width:500px)" type="text/css">
// 瀏覽器窗口小于500像素時使用
</style>
<style media="screen AND (min-width:500px)" type="text/css">
// 瀏覽器窗口大于500像素時使用
</style>
image
以下特性還可以配合
min-或者max-修飾，構成閾值而不是精確值。
image
<script>元素 和<noscript> 元素
<script>標簽用于加載腳本文件，如： JavaScript
-
script，用于定義腳本并控制其執行過程。 -
noscript，用于規定在瀏覽器不支持或禁用了腳本的情況下的處理辦法。
script
script元素可以放在HTML文檔的任意位置，不過一般建議都集中放到文檔的head部分，這有助于查看腳本。
<!DOCTYPE html>
<html>
<head>
<!--定義script腳本-->
<script type="text/javascript">
document.writeln("This is from the script");
</script>
<!--用src屬性載入外部腳本,設置src屬性的script元素不能含有任何內容！即，不能既內嵌腳本又引用外部腳本。-->
<script src="simple1.js"></script>
<!--推遲腳本的執行-->
<!--defer：告訴瀏覽器要等頁面載入和解析完畢之后才能執行腳本。-->
<!--defer 屬性只能用于外部腳本文件-->
<script defer src="simple2.js"></script>
<!--異步執行腳本-->
<script async src="simple3.js"></script>
</head>
<body>
</body>
</html>
image
noscript
<!DOCTYPE html>
<html>
<head>
<!--定義noscript腳本-->
<!--1.noscript元素可以用來向禁用了JavaScript或瀏覽器不支持JavaScript的用戶顯示一些內容。-->
<noscript>
<h1>JavaScript is required!</h1>
<p>You cannot use this page without JavaScript</p>
</noscript>
<!--2.用noscript元素重定向瀏覽器-->
<noscript>
<meta http-equiv="refresh" content="0; http://www.apress.com">
</noscript>
</head>
<body>
</body>
</html>
文本元素
標記文字
h1~h6 標題
image
<!--請確保將 HTML 標題標簽只用于標題。不要僅僅是為了生成粗體或大號的文本而使用標題。-->
<!--搜索引擎使用標題為您的網頁的結構和內容編制索引。-->
<!--因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。-->
<!--應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。-->
<!--提示：瀏覽器會自動在標題前后添加空行-->
<h1>一級標題</h1>
<font size="6">這是6號字體文本</font>
<h2>二級標題</h2>
<font size="5">這是5號字體文本</font>
<h3>三級標題</h3>
<font size="4">這是4號字體文本</font>
<h4>四級標題</h4>
<font size="3">這是3號字體文本</font>
<h5>五級標題</h5>
<font size="2">這是2號字體文本</font>
<h6>六級標題</h6>
<font size="1">這是1號字體文本</font>
image
<p> 元素
<p>有時候陽光很好，有時候陽光很暗</p>
當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示為一個空格。
HTML鏈接 a
a = attributes，表示屬性標簽。
默認情況下，鏈接將以以下形式出現在瀏覽器中：
- 一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
- 訪問過的鏈接顯示為紫色并帶有下劃線。
- 點擊鏈接時，鏈接顯示為紅色并帶有下劃線。
注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。
image
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<base href="http://titan/listings">
</head>
<body>
<!--生成指向外部的超鏈接-->
<a href="http://www.lxweimin.com/u/84c5fadc7c18">我的主頁：獨木舟的木</a>
<!--使用相對URL-->
<a href="fruitlist.html">here</a>
<!--配合使用id，生成內部超鏈接-->
<a href="#banana">Banana</a>
<p id="banana">
I also like bananas, mangoes, cherries, apricots, plums.
</p>
</body>
</html>
HTML 鏈接 - target元素
使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。
image
<!--html鏈接：在新窗口打開-->
<a target="_blank">打開 Baidu</a>
<!--跳出框架-->
<a target="_top">打開 Baidu</a>
<!--電子郵件-->
<!--注意：單詞之間空格使用 %20 代替，以確保瀏覽器可以正常顯示文本。-->
<p>
這是一個電子郵件
<a href=@"andywhm@qq.com?Subject=Hello%20World" target="_top">發送郵件</a>
</p>
id 屬性
作用：給元素分配一個唯一的標識符。這種標識符通常用來將CSS樣式應用到元素上或在JavaScript程序中用來選擇元素。
提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。
將CSS樣式應用到元素上：
<!DOCTYPE html>
<html>
<head>
<title>使用 id 屬性</title>
<style type="text/css">
#w3clink {
background: grey;
color: white;
padding: 5px;
border: thin solid black;
}
</style>
</head>
<body>
<a >Apress Web Site</a>
<p></p>
<a id="w3clink" >w3c web site</a>
</body>
</html>
image
導航到文檔中的特定位置：
<!--在HTML文檔中插入ID-->
<a id="tips">有用的提示部分</a>
<!--在HTML文檔中創建一個鏈接到“有用的提示部分（id=“tips”）”-->
<!--類似于導航功能-->
<a href="#tips">訪問有用的提示部分</a>
<!--或者。從另一個頁面創建一個鏈接到“有用的提示部分（id="tips"）”-->
<a href="example.html#tips">訪問有用的提示部分</a>
注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：href="http://www.runoob.com/html"，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：href="http://www.runoob.com/html/"。
自定義屬性
規定：自定義屬性的前綴為 data-。
Enter your name: <input type="text" name="name" disabled="true" data-purpose="collection">
HTML 鏈接 - 圖片鏈接
將圖片作為鏈接使用。
<!--圖片鏈接-->
<p>創建圖片鏈接
<a >
<img border="10" src="http://reeoo.qiniudn.com/Coowl-icon.png!icon180" alt="coowl" width="32" height="32">
</a>
</p>
<p>無邊框的圖片鏈接
<a >
<img border="0" src="http://reeoo.qiniudn.com/Coowl-icon.png!icon180" alt="coowl" width="32" height="32">
</a>
</p>
image
JPEG & GIF 圖片的區別
| 照片和復雜圖像使用JPEG格式 | 純色圖像、logo和幾何圖形使用GIF格式 |
|---|---|
| 可在連續調次（復制品中有中間層次，如照片）圖像中獲得最好效果 | 對于幾種純色組成的圖像、線條組成的圖像（如logo、剪貼畫）和含有小段文字的圖像，使用GIF比較合適 |
| 可以用1600萬種不同的顏色顯示圖像 | 用256種顏色顯示圖像 |
| 是一種“有損”格式，因為文件縮小時會丟失部分圖像信息 | GIF同樣會壓縮文件來減小尺寸，但是不會丟失任何東西，是一種“無損”格式 |
| 不支持透明 | 允許8??背景顏色設置為透明的，圖像背景就可以穿透顯示 |
title 屬性
作用：提供元素的額外信息。瀏覽器通常用這些東西顯示工具提示。
示例：
<a title="Apress Publishing" >Visti the Apress site</a>
鼠標停留后會顯示浮窗：
title 屬性
HTML 圖像 img
<img src="https://i.pinimg.com/564x/6c/77/9b/6c779b9f24ba0ec56dc62c7bbfaf004b.jpg" width="542" height="548">
使用實例
<!--<img> 是空標簽，它只包含屬性，并且沒有閉合標簽。-->
<!--src:圖像的存儲位置-->
<!--alt:為圖像定義一串預備的可替換的文本,圖像無法載入時，瀏覽器會顯示這個替換文本-->
<!--height、width：圖像的高和寬-->
<!--border:圖像的邊框-->
<img border="0" src="https://ws2.sinaimg.cn/large/006tNc79ly1fm9bzhpv4aj30f20f8jrr.jpg" alt="linyuner" width="200" height="200">
<img src="https://ws2.sinaimg.cn/large/006tNc79ly1fm9bzhpv4aj30f20f8jrr.jpg" alt="讓圖片浮動到文本的最左邊" style="float: left;">
<img src="https://ws2.sinaimg.cn/large/006tNc79ly1fm9bzhpv4aj30f20f8jrr.jpg" alt="讓圖像浮動到文本的最右邊" style="float: right;">
圖像映射
<!--創建圖像映射：顯示如何創建帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級鏈接。-->
<p>點擊同一張圖片的不同區域，打開的是不同的鏈接地址</p>
<img src="planets.gif" alt="planets" width="145" height="145" usemap="#planetmap">
<!--map:定義圖像地圖-->
<map name="planetmap">
<!--area:定義圖像地圖中的可點擊區域-->
<area shape="rect" coords="0.0.82,126" href="sun.html" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.html" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.html" alt="Venus">
<!--矩形：左上角頂點坐標（x1,y1）,右下角頂點坐標（x2,y2）-->
<area shape="rect" coords="x1,y1,x2,y2" href="url">
<!--圓形:圓心坐標為（x1,y1）,半徑為r-->
<area shape="circle" coords="x1,y1,r" href="url">
<!--多邊形：各個頂點坐標依次為：（x1,y1）、（x2,y2）...-->
<area shape="poly" coords="x1,y1,x2,y2..." href="url">
</map>
使用插圖 figure
<figcaption>元素必須是<figure>元素的第一個或最后一個子元素。
<figure>
<figcaption>插圖標題</figcaption>
<code>var fruits = ["apples", "oranges", "managoes", "cherries"];<br/>
</code>
</figure>
image
HTML 換行
兩種換行方式：
- br：強制換行。
- wbr：建議換行。
<!--
* 如果你希望在不產生新行的情況下進行換行操作！就使用<br />元素
* 在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。
* 注意到br 和 / 之間有空隔，這是為了保證HTML5之前的瀏覽器向上的兼容性
-->
<p>
我是我命運的主宰<br />
我是我靈魂的統帥<br />
</p>
<hr /> 主題分離
hr:表示主題的改變，呈現效果是在HTML文檔中顯示一條水平線。
<hr /> ,這種只能使用一個標簽表示，在其中放置任何內容都不符合HTML規范的元素稱之為虛元素。
<hr />
空元素、自閉合元素、虛元素
元素=開始標簽 + 內容 + 結束標簽：<code>apples</code>
<!--空元素：元素的開始標簽和結束標簽之間沒有任何內容。-->
<p></p>
<!--自閉合元素，將開始標簽和結束標簽合二為一，效果同上，寫法更簡潔-->
<p/>
<!--虛元素：本身只能用一個標簽表示-->
<hr />
HTML 注釋
<!--注釋內容-->
在 .css 文件中的注釋格式：/*注釋內容*/
HTML 格式化文本
文本格式化
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
正常文本字體。<br/>
<!--不附帶任何重要性含義地表示一段文本-->
<b>b 元素：用來表示文章提要中的關鍵詞和產品評論中的產品名稱</b><br/>
<!--加以強調-->
<em>em 元素：表示對一段文字的強調</em><br/>
<!--表示外文詞語或科技術語-->
<i>i 元素：表示一段文字與周圍內容有本質區別，使用場景：外文詞語、科技術語、某人的想法</i><br/>
<!--表示不準確或校正-->
<s>s 元素：表示一段文字不再正確或準確</s><br/>
<!--表示重要的文字-->
<strong>string 元素：表示一段重要文字</strong><br/>
<!--為文字添加下劃線-->
<u>u 元素：讓一段文字從周圍內容中凸現出來，但并不表示強調或重要性有所增加</u><br/>
<!--添加小號字體內容-->
<small>small 元素：表示小號字體內容，常用于免責聲明和澄清聲明</small><br/>
<big>放大字體</big><br/>
<!--添加上標和下標-->
上標：2<sup>100</sup>、x<sup>2</sup>、10<sup>th</sup>point<br/>
下標：A<sub>1</sub>、A<sub>2</sub><br/>
<!--換行-->
br元素會引起一次換行。其習慣樣式是將后續內容轉移到新行上。<br/>
br元素只宜用在換行也是內容的一部分的情況，切勿用它創建段落或別的內容組。<br/>
<!--指明可以安全換行的建議位置-->
??wbr元素是HTML5新增的，用來表示長度超過當前瀏覽器窗口的內容適合在此換行。<wbr>究竟換不換行由瀏覽器決定。<wbr> wbr元素只不過是對恰當的換行位置的建議而已。
wbr元素可以讓瀏覽器將一個長單詞分為幾小截，
</body>
</html>
image
計算機的輸入和輸出
code：表示計算機代碼片段:<br/>
<code>for (var i = Things.length - 1; i >= 0; i--) {
Things[i]
}</code><br/>
var：在編程語境中表示變量。也可表示一個供讀者在想象中插入一個指定值的占位符。<br/>
<p>The variable in this examples is :<var>fruits</var></p>
samp：表示程序或計算機系統的輸出<br/>
<p>The out put from the code is:<samp>I like banana.</samp></p>
kbd：表示用戶鍵盤輸入<br/>
<p>When prompted for my favourite fruit,I type: <kbd>vherries</kbd></p>
<tt>tt：打字機文本</tt>
<!--使用預先編排好格式的內容-->
<!--pre元素可以改變瀏覽器處理內容的方式，阻止合并空白字符，讓源文檔中的格式得以保留）-->
<!--（理解：默認情況下瀏覽器會合并文本中的空格和換行，使用此元素可以保留文本中的編排格式。-->
<pre>
此例演示如何使用 pre 標簽
對空行和 空格
進行控制
</pre>
image
使用標題引用、引文、定義和縮寫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
使用標題引用、引文、定義和縮寫<br/>
<!--abbr元素用來表示縮寫-->
The <abbr title="Florida Department of citrus">FDDC</abbr> regulates the Florida citrus industry.
<!--dfn元素表示定義中的術語，title屬性的值=定義的術語-->
<p>
The <dfn title="apple">apple</dfn> is the. pomaceous fruit of the apple tree...
</p>
<!--
* <q>元素表示引用來自他處的內容，
* <q>元素是簡短地“引用”現有文字中的一部分。
* <q>元素是內聯（inline）元素，內聯元素總是在網頁中隨著文字流出現在“行內”。
* <blockquote>元素則是引用一大段文字并獨立顯示。
* <blockquote>是塊（block）元素，塊元素前后都有換行符。
* 記?。簤K元素特立獨行，內聯元素隨波逐流。
-->
<q cite="http://en.wikoipedia.org"> All problems in computer science can be solved by another level of indirection.——Butler Lampson
<br/>計算機科學領域的任何問題都可以通過增加一個間接的中間層來解決</q> <br> 《春》是現代散文家朱自清的作品?！洞骸肥侵熳郧宓纳⑽拿?，最初發表于1933年7月，此后長期被中國中學語文教材選用。[1] 在該篇“貯滿詩意”的“春的贊歌”中，事實上飽含了作家特定時期的思想情緒、對人生及至人格的追求，表現了作家骨子里的傳統文化積淀和他對自由境界的向往。
<blockquote>
盼望著，盼望著，東風來了，春天的腳步近了。一切都像剛睡醒的樣子，欣欣然張開了眼。山朗潤起來了，水漲起來了，太陽的臉紅起來了。
</blockquote>
小草偷偷地從土里鉆出來，嫩嫩的，綠綠的。園子里，田野里，瞧去，一大片一大片滿是的。坐著，躺著，打兩個滾，踢幾腳球，賽幾趟跑，捉幾回迷藏。風輕悄悄的，草軟綿綿的。
<!--cite元素，表示引用其他作品（如圖書、文章、電影和詩歌）的標題-->
<p>
My favourite movie on fruit is <cite>這個殺手不太冷</cite>.
</p>
</body>
</html>
塊引用
<!--塊引用,演示如何實現長短不一的引用語-->
<!--q:定義短的引用語-->
<p>WWF's goal is to:
<q>Build a future where people live in a harmony with natrue.</q>
We hope they succeed.
</p>
<!--blockquote:定義長的引用，通常用在需要引用的內容更多的情況。-->
<p>不可屈服
<blockquote>透過覆蓋著我的層層夜幕，黑暗層層無底，感謝萬能的上蒼，賜給我不可征服的靈魂，就算被地獄牢牢抓住，我不會畏縮也不會哭叫，任憑命運百般捉弄，我頭破血流但不低頭，在這充滿憤怒和眼淚的土地之上，恐怖陰影陰森的逼近，不過，即使歲月不?？謬槪鄬l現我毫不畏縮，無論大門何等狹窄，無論承受多么深重的責罰，我是我命運的主宰，我是我靈魂的統帥。</blockquote>
——By William henley
</p>
塊引用
使用語言元素
ruby、rt和rp
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
使用語言元素<br/>
<!--ruby元素表示一段包含注音符號的文字-->
<!--ruby元素需要與rt元素（標記注音符號）和rp元素（供不支持注音符號的瀏覽器顯示在注音符號符號前后的括號）搭配使用-->
<ruby>魑<rp>(</rp><rt>chī</rt><rp>)</rp></ruby>
<ruby>魅<rp>(</rp><rt>mèi</rt><rp>)</rp></ruby>
<ruby>魍<rp>(</rp><rt>wǎng</rt><rp>)</rp></ruby>
<ruby>魎<rp>(</rp><rt>liǎng</rt><rp>)</rp></ruby>
</body>
</html>
image
bdo元素
bdo元素可以用來撇開默認的文字方向設置，明確地指定其內容中文字的方向。
dir屬性值設置：
- ltr：文字方向從左到右；
- rtl：文字方向從右到左；
<!--文字方向-->
<p>該段落文字從左到右顯示</p>
<p><bdo dir="rtl">該段落文字從左到右顯示</bdo></p>
文字方向
bdi元素
bdi元素表示一段出于文字方向考慮而與其他內容隔離開來的文字。
這個元素適用于欲顯示內容的文字方向未知的情況（參考HTML5權威指南8.6.3）。
表示一般性的內容
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
.fruit {
border: thin solid black;
padding: 1px;
}
</style>
</head>
<body>
<!--1.表示一段一般性的內容-->
<!--span元素本身沒有任何意義，它可以用來把一些全局屬性應用到一段內容上。-->
I like <span class="fruit">oranges</span> and <span class="fruit">apples</span>.<br/>
<!--2.突出顯示文本-->
<!--mark元素用來表示因為與某段上下文相關而被突出顯示的一段文字-->
今天你<mark>吃雞</mark>了嗎？<br/>
<!--3.表示添加和刪除的內容-->
<!--ins元素和del元素可以分別用來表示文檔中添加和刪除的文字-->
<p>
<del>I can <mark>sea</mark> the <mark>see</mark></del>
<ins>I can <mark>see</mark> the <mark>sea</mark></ins>
</p>
<!--4.表示時間和日期-->
我在<time datetime="15:00">3 o'clock</time>購買了面包和牛奶
日期是<time datetime="2018-02-02">2月2號</time>
</body>
</html>
image
縮寫和首字母縮寫
<!--文本和縮略-->
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title=@"World Wide Web">WWW</acronym>
<br />
<p>在某些瀏覽器中，當您把鼠標移至縮略詞語上時，title 可用于展示表達的完整版本</p>
<p>僅對于 IE 5 中的 acronym 元素有效</p>
<p>對于 Netscape 6.2 中的 abbr 和 acronym 元素都有效</p>
文本顯示為單行,超過部分隱藏并使用省略號
div {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
width:120px;
}
HTML 區塊 <div>、<span>
- <div> —— 塊（block）元素，定義了文檔的區域，會自動換行。
- <span> —— 內聯（inline）元素，用來組合文檔中的行內元素，不會換行。
HTML 布局
Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。
Tip: 由于創建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們）。
使用 <div> 元素的網頁布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
<div id="container" style="width: 500px">
<div id="header" style="background-color: #27AEE8">
<h1 style="margin-bottom: 0;"> 主要的網頁標題</h1>
</div>
<div id="menu" style="background-color: #313842h; height: 200px; width: 100px; float: left;">
<b>導航欄</b><br />
HTML<br />
CSS<br />
JavaScript<br />
</div>
<div id="content" style="background-color: #C72F2E; height: 200px; width: 400px; float: left;">
內容在這里
</div>
<div id="footer" style="background-color: #bcbcbc; clear: both; text-align: center;">
版權所有??? abc.com
</div>
</div>
</body>
</html>
image
使用 <table> 元素的網頁布局，不推薦的方式！
??雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color: #27AEE8">
<h1>主要的網頁標題</h1>
</td>
</tr>
<tr>
<td style="background-color: #313842h; width: 100px; vertical-align: top;">
<b>導航欄</b><br>
HTML<br>
CSS<br>
JavaScript<br>
</td>
<td style="background-color: #C72F2E; height: 200px; width: 400px; vertical-align: top;">
內容在這里
</td>
</tr>
<tr>
<td colspan="2" style="background-color: #bcbcbc; text-align: center;">
版權所有??? abc.com
</td>
</tr>
</table>
</body>
</html>
image
HTML 框架
HTML 框架語法：<iframe scr="URL"></iframe>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
<iframe src="URL" width="200" height="200"></iframe>
<p>該 URL 指向不同的網頁</p>
<p>一些舊的瀏覽器不支持 iframe。</p>
<p>如果瀏覽器不支持 iframe 則不會顯示</p>
</body>
</html>
移除邊框
<iframe src="URL" frameborder="0"></iframe>
使用 iframe 來顯示目標鏈接頁面
<iframe src="URL" name="iframe_a"></iframe>
<p><a target="iframe_a">www.example.com</a></p>
HTML 顏色
HTML 顏色由紅色、綠色、藍色混合而成。
顏色值
HTML 顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。
<p style="background-color: #0e5f71">
通過十六進制設置背景顏色
</p>
<p style="background-color: rgb(255,255,0);">
通過 rbg 值設置背景顏色
</p>
<p style="background-color: green">
通過顏色名設置背景顏色
</p>
HTML 顏色
三種顏色 紅，綠，藍的組合從0到255，一共有1600萬種不同顏色(256 x 256 x 256)。
HTML 顏色名
141個顏色名稱是在HTML和CSS顏色規范定義的（17標準顏色，再加124）。
提示: 17標準顏色：黑色，藍色，水，紫紅色，灰色，綠色，石灰，栗色，海軍，橄欖，橙，紫，紅，白，銀，藍綠色，黃色。點擊其中一個顏色名稱（或一個十六進制值）就可以查看與不同文字顏色搭配的背景顏色。Remark
HTML 腳本
JavaScript 使 HTML 頁面具有更強的動態和交互性。
HTML <script> 標簽
<script> 標簽用于定義客戶端腳本，比如 JavaScript。
<script> 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。
JavaScript 最常用于圖片操作、表單驗證以及內容動態更新。
下面的腳本會向瀏覽器輸出"Hello World!"：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
<body>
<p>JavaScript 能夠直接寫入 HTML 輸出流中</p>
<script type="text/javascript">
document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落。</p>");
</script>
<p>
你只能在 HTML 輸出流中使用 <strong>document.write</strong><br />
如果你在文檔已加載后使用它（比如在函數中），會覆蓋整個文檔。
</p>
<p id="demo">
JavaScript 可以觸發事件，就像按鈕點擊。
</p>
<script type="text/javascript">
function myFunction()
{
// 事件響應
document.getElementById("demo").innerHTML="Hello JavaScript";
// 處理 HTML 樣式
x=document.getElementById("demo") // 找到元素
x.style.color = "#ff0000"; // 改變樣式
}
</script>
<button type="button" onclick="myFunction()">點我</button>
</body>
</html>
HTML腳本
HTML 字符實體
如需顯示小于號，我們必須這樣寫： <； 或<； 或 <
提示： 使用實體名而不是數字的好處是，名稱易于記憶。不過壞處是，瀏覽器也許并不支持所有實體名稱（對實體數字的支持卻很好）。
image
不間斷空格
HTML 中的常用字符實體是不間斷空格 。
HTML 實體參考手冊：http://www.runoob.com/tags/ref-entities.html
HTTP 統一資源定位符 URL
scheme://host.domain:port/path/filename
- scheme - 定義因特網服務的類型。最常見的類型是 http
- host - 定義域主機（http 的默認主機是 www）
- domain - 定義因特網域名，比如 runoob.com
- :port - 定義主機上的端口號（http 的默認端口號是 80）
- path - 定義服務器上的路徑（如果省略，則文檔必須位于網站的根目錄中）。
- filename - 定義文檔/資源的名稱
class 屬性
作用：將元素歸類；
- 找出文檔中的某一類元素；
- 為某一類元素應用CSS樣式，可以減少重復設置；
應用CSS樣式示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>使用 class 屬性將元素歸類</title>
<style type="text/css">
.class2 {
background-color: grey;
color: white;
padding: 5px;
margin: 2px;
}
.class1 {
font-size: x-large;
}
</style>
</head>
<body>
<a class="class1 class2" >Appress web site</a>
<p/>
<a class="class2 otherclass" >W3C web site</a>
</body>
</html>
應用CSS樣式
在JS腳本中使用class屬性示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>使用 class 屬性將元素歸類</title>
</head>
<body>
<a class="class1 class2" >Appress web site</a>
<p/>
<a class="class2 otherclass" >W3C web site</a>
<script type="text/javascript">
var elems = document.getElementsByClassName("otherclass");
for (i = 0; i <= elems.length; i++) {
var x = elems[i];
x.style.border = "thin solid black";
x.style.backgroundColor = "white";
x.style.color = "black";
}
</script>
</body>
</html>
JS腳本的作用：找出所有屬于 otherclass 類的元素并對其設置一些樣式。
在腳本中使用class屬性
contenteditable 屬性
作用：讓用戶能夠修改頁面上的內容
<!DOCTYPE html>
<html>
<head>
<title>使用 contenteditable 屬性</title>
</head>
<body>
<p contenteditable="true">It is raining right now</p>
</body>
</html>
單擊改段文字后即可開始編輯：
contenteditable 屬性
contentmenu 屬性
作用：為元素設定快捷菜單。
draggable 屬性
作用：HTML5支持拖放操作的方式之一，用來表示元素是否可被拖放。
dropzone 屬性
作用：HTML5支持拖放操作的方式之一
hidden 屬性
作用：表示相關元素當前毋需關注，瀏覽器會隱藏相關元素。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<!--hidden:表示當前元素無需關注-->
<title>使用 hidden 屬性</title>
<!--JS函數的作用：如果當前元素存在hidden屬性，則移除該屬性（顯示元素），否則添加該屬性（隱藏元素）。-->
<script type="text/javascript">
var toggleHidden = function() {
var elem = document.getElementById("toggle")
if (elem.hasAttribute("hidden")) {
elem.removeAttribute("hidden");
}else {
elem.setAttribute("hidden","hidden");
}
}
</script>
</head>
<body>
<button onclick="toggleHidden()">Toggle</button>
<table>
<tr><th>Name</th><th>city</th></tr>
<tr><td>Adam Freeman</td><td>London</td></tr>
<tr id="toggle" hidden><td>Joe Simth</td><td>New Work</td></tr>
<tr><td>Anne Jones</td><td>Paris</td></tr>
</table>
</body>
</html>
hidden
lang 屬性
作用：用于說明元素內容使用的語言。使用 lang 屬性的目的是讓瀏覽器調整其表達元素內容的方式。比如說，改變使用的引號，在使用了文字朗讀器的情況下正確發音。
語言聲明規范說明參考：https://tools.ietf.org/html/bcp47
示例：
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p lang="en">Hello - how are yor?</p>
<p lang="fr">Bonjour - comment ?a va-vous</p>
<p lang="es">Hola - cómo estás</p>
</body>
</html>
