HTML概念
HTML，全稱HyperTextMarkupLanguage，超文本標記語言，是一種描述網頁的語言，而非編程語言，HTML使用標記標簽來描述網頁。
HTML常用標簽
html文檔：<html></html>
文檔頭部：<head></head>
文檔主體: <body></body>
標題：<h1></h1><h2></h2>...<h6></h6>
段落：<p></p>
水平線：<hr>
換行：<br>或</br> ！最好使用后者，html標簽追求閉合
超鏈接：<a href = "url" #target = "_blank"~~>鏈接指示語</a> ** !target屬性定義鏈接打開的位置**
圖像： url 為圖片添加路徑，分絕對路徑與相對路徑
文檔分區：<div></div>塊級元素
span標簽：<span></span>
表格： <table border="num"></table>定義表格,border屬性為表格邊框
<caption>表格題目</caption> <th>表格表頭</th><tr>表格行</tr><th>表格單元</th>
<col>列屬性</col>
代碼如下實例：
<table border="2">
<caption>橫跨兩列的單元格</caption>
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<br/>
<table border="1">
<caption>橫跨兩行的單元格</caption>
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
有序列表：
<ol>有序列表定義
<li>列表項目1</li>
<li>項目列表2</li>
</ol>
無序列表：
<ul>
<li>無序列表1</li>
<li>無序列表2</li>
</ul>
自定義列表：
<dl>
<dd>
<dt>定義列表1</dt>
<dt>定義列表2</dt>
</dd>
</dl>
<form>表單：用于搜集用戶輸入</form>表單元素
表單包含<input>輸入框、<select>下拉選項框、<textarea>多行文本輸入框、<button>、<datalist>-input元素預定義選項列表-HTML5新增
input輸入框：text類型(文本輸入)、radio類型（多選一按鈕）、submit類型、password、number、email等類型
text類型
<input type = "text" placeholder = "文本輸入"/>
radio類型
<span>男</span><input type ="radio" name="sex" value="男" checked>  
<span>女</span><input type = "radio" name = "sex" value = "女">
submit類型
<input type = "submit" value="提交">
password類型
<input type = "password" placeholder = "輸入密碼"/>
下拉選項框：
<select name="fruits"><option value="apple">apple</option><option value="pear">pear</option><option value="bnana">bnana</option></select>
多行文本輸入：
<textarea name="message" rows="3" cols="5">
The cat was playing in the garden.
</textarea>
button按鈕：
<button type="button" onclick="alert('??')">點我有驚喜</button>
塊級元素與內聯元素
塊元素是指從新的一行開始的元素，而內聯元素不會另起一行。
常見的塊級元素有：<div>、<p>、<h1>-<h6>、<hr>、<form>、<ul>、<ol>、<table>等標簽元素
常見的內聯元素有：<span>、<a>、<img>、<br/>、<input>、<select>、<em>、<strong>等標簽
內聯元素可通過添加style屬性：display:block變為塊級元素
特殊符號
空格：  、小于號 :</< 、等號：=、大于號：>/ $gt等
其余特殊符號可參考：特殊符號轉義
HTML5新增標簽
新增語義元素
HTML5定義了很多新的語義元素，分別有：<article>、<header>、<aside>、<footer>、<section>、<nav>、<figure>、<figcation>等元素，接下來分別介紹新增的語義元素。
<article>
<article>一般用于博客、論壇、新聞等。具體事例：
<article>
<h1>粉色天氣</h1>
<p>
從粉色的茶水開始，粉紅色的玫瑰，花瓣凋零過半，將一片片花瓣夾入淡綠色的筆記本中。
便是粉色的天氣粉色的一天了。
</p>
</article>
<header>
<header>一般用于定義文檔或section的頁眉
代碼實例：
<article>
<header>
<h1>金牛座季節</h1>
<p>4月末，金牛座的季節</p>
</header>
<p>周邊的金牛座陸續的過了生日</p>
</article>
<footer>
<footer>一般用于定義文檔或section的頁腳
代碼實例：
<article>
<header>
<h1>開心明天</h1>
<p>明天又是美好的一天</p>
</header>
<p>
最近情緒上天入地，時時安慰自己：
又是充滿希望的一周，明天又是美好的一天，明天應該是美好的，因為還沒開始，
還可以有激情有勇氣去過好。
</p>
<footer>
<p>北京二吊子程序媛所碼</p>
</footer>
</article>
<section>
<section>定義一個節
代碼示例：
<section>
<p>章節一</p>
</section>
<section>
<p>章節二</p>
</section>
<nav>
<nav>定義導航鏈接集合
代碼示例：
<nav>
<a >百度一下 |</a>
<a >北郵人論壇 |</a>
<a >愛奇藝 |</a>
</nav>
HTML5圖像
canvas
HTML5 的 canvas 元素是使用 JavaScript 在網頁上繪制圖像，canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
實現方法步驟
1.在頁面中創建canvas元素，
<canvas id="myCanvas" width = "200" height = "150" ></canvas>
2.通過JavaScript來繪制：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
3.通過javascript繪制圖像
SVG
SVG指可伸縮矢量圖形，SVG圖像具有可通過文本編輯器來創建修改，也可被搜索、索引、壓縮等優點。
代碼示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
HTML5媒體
媒體元素主要為音頻元素和視頻元素，HTML5通過<object>來加載，進而播放音頻或視頻。
代碼示意：直接在頁面body部分通過<object>標簽來添加音頻或視頻文件
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="/i/bird.wav" />
<param name="controller" value="true" />
</object>
HTML5API
HTML5新增了諸多API 接口，包括地理定位、拖放、WEB存儲、應用存儲等接口。
HTML5 定位
HTML5 Geolocation API 可用于獲得用戶的地理位置，Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
1： navigator.geolocation，可用于檢測設備是否支持HTML5定位
2：getCurrentPosition() 方法可用戶獲取當前設備的經緯度位置
利用HTML5定位獲取定位示例：HTML5獲取定位
HTML5 拖放
HTML5增加了新的屬性draggable,當某元素的draggable屬性設置為true時，表示該屬性可以被拖動。
HTML5同時還新增了鼠標事件ondrag、ondrop、ondragstart、ondragover等事件來運行和拖放有關的腳本；每個事件的具體意義可參考w3cHTML事件。
HTML5拖放代碼示例
- 在頁面中添加可拖放的元素
- 確定拖放元素與拖放目標元素的事件與對應的腳本
- 拖放元素與拖放目標元素的事件
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"
width="336" height="69">
- 事件所觸發的腳本
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
- 在頁面中進行拖放元素
WEB存儲
web存儲也稱為本地存儲，通過本地存儲，web 應用程序能夠在用戶瀏覽器中對數據進行本地的存儲。
與cookie相比，本地存儲更安全，且不影響瀏覽器性能，并且信息不會被傳到服務器
HTML本地存儲提供了兩個在客戶端存儲數據的對象
window.localStorage - 存儲沒有截止日期的數據
window.sessionStorage - 當關閉瀏覽器標簽頁時數據會丟失
使用本地緩存時，應先檢測是否支持本地緩存
if (typeof(Storage) !== "undefined") {
// 針對 localStorage/sessionStorage 的代碼
} else {
// 抱歉！不支持 Web Storage ..
}
代碼示例
// 存儲
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
應用程序緩存
應用程序緩存即可對web應用進行本地緩存，保證用戶在離線時也可以使用應用，加載速度更快，且能夠減少服務器負載，瀏覽器只從服務器下載更新或更改過的資源。
代碼示例
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文檔內容 ......
</body>
</html>
