HTNL5內(nèi)容：

<form>表單：用于搜集用戶輸入</form>表單元素
表單包含：<input>輸入框、<select>下拉選項框、<textarea>多行文本輸入框、<button>、<datalist>-input元素預(yù)定義選項列表-HTML5新增

input輸入框：text類型(文本輸入)、radio類型（多選一按鈕）、submit類型、password、number、email等類型

text類型
<input type = "text" placeholder = "文本輸入"/>

radio類型

<span>男</span><input type ="radio" name="sex" value="男" checked>&nbsp&nbsp
<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>

塊級元素與內(nèi)聯(lián)元素

塊元素是指從新的一行開始的元素，而內(nèi)聯(lián)元素不會另起一行。
常見的塊級元素有：<div>、<p>、<h1>-<h6>、<hr>、<form>、<ul>、<ol>、<table>等標簽元素
常見的內(nèi)聯(lián)元素有：<span>、<a>、<img>、<br/>、<input>、<select>、<em>、<strong>等標簽
內(nèi)聯(lián)元素可通過添加style屬性：display:block變?yōu)閴K級元素

特殊符號

空格：&nbsp 、小于號 :&lt/&#60 、等號：&#61、大于號：&#62/ $gt等
其余特殊符號可參考：特殊符號轉(zhuǎn)義

1，HTML5新增標簽

新增語義元素

HTML5定義了很多新的語義元素，分別有：<article>、<header>、<aside>、<footer>、<section>、<nav>、<figure>、<figcation>等元素，接下來分別介紹新增的語義元素。

<article>

<article>一般用于博客、論壇、新聞等。具體事例：

<article>
   <h1>粉色天氣</h1>
   <p>
      從粉色的茶水開始，粉紅色的玫瑰，花瓣凋零過半，將一片片花瓣夾入淡綠色的筆記本中。
      便是粉色的天氣粉色的一天了。
   </p>
</article>

<header>

<header>一般用于定義文檔或section的頁眉
代碼實例：

<article>
   <header>
        <h1>金牛座季節(jié)</h1>
        <p>4月末，金牛座的季節(jié)</p>
   </header>
   <p>周邊的金牛座陸續(xù)的過了生日</p>
</article>

<footer>

<footer>一般用于定義文檔或section的頁腳
代碼實例：

<article>  
   <header>
       <h1>開心明天</h1>
       <p>明天又是美好的一天</p>
   </header>
   <p>
       最近情緒上天入地，時時安慰自己：
       又是充滿希望的一周，明天又是美好的一天，明天應(yīng)該是美好的，因為還沒開始，
       還可以有激情有勇氣去過好。
   </p>
   <footer>
       <p>北京二吊子程序媛所碼</p>
   </footer>
</article>

<section>

<section>定義一個節(jié)
代碼示例：

<section>
    <p>章節(jié)一</p>
</section>
<section>
    <p>章節(jié)二</p>
</section>

<nav>

<nav>定義導(dǎo)航鏈接集合
代碼示例：

<nav>
     <a >百度一下 |</a>
     <a >北郵人論壇 |</a>
     <a >愛奇藝 |</a>
</nav>

2，HTML5圖像

canvas

HTML5 的 canvas 元素是使用 JavaScript 在網(wǎng)頁上繪制圖像，canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
實現(xiàn)方法步驟
1.在頁面中創(chuàng)建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圖像具有可通過文本編輯器來創(chuàng)建修改，也可被搜索、索引、壓縮等優(yōu)點。
代碼示例：

<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>

3，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>

4，HTML5API

HTML5新增了諸多API 接口，包括地理定位、拖放、WEB存儲、應(yīng)用存儲等接口。

5，HTML5 定位

HTML5 Geolocation API 可用于獲得用戶的地理位置，Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
1： navigator.geolocation，可用于檢測設(shè)備是否支持HTML5定位
2：getCurrentPosition() 方法可用戶獲取當前設(shè)備的經(jīng)緯度位置
利用HTML5定位獲取定位示例：HTML5獲取定位

6，HTML5 拖放

HTML5增加了新的屬性draggable,當某元素的draggable屬性設(shè)置為true時，表示該屬性可以被拖動。
HTML5同時還新增了鼠標事件ondrag、ondrop、ondragstart、ondragover等事件來運行和拖放有關(guān)的腳本；每個事件的具體意義可參考w3cHTML事件。
HTML5拖放代碼示例

在頁面中添加可拖放的元素
確定拖放元素與拖放目標元素的事件與對應(yīng)的腳本
拖放元素與拖放目標元素的事件

<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">

事件所觸發(fā)的腳本

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));
}

在頁面中進行拖放元素

7，WEB存儲

web存儲也稱為本地存儲，通過本地存儲，web 應(yīng)用程序能夠在用戶瀏覽器中對數(shù)據(jù)進行本地的存儲。
與cookie相比，本地存儲更安全，且不影響瀏覽器性能，并且信息不會被傳到服務(wù)器
HTML本地存儲提供了兩個在客戶端存儲數(shù)據(jù)的對象
window.localStorage - 存儲沒有截止日期的數(shù)據(jù)
window.sessionStorage - 當關(guān)閉瀏覽器標簽頁時數(shù)據(jù)會丟失

使用本地緩存時，應(yīng)先檢測是否支持本地緩存

if (typeof(Storage) !== "undefined") {
    // 針對 localStorage/sessionStorage 的代碼
} else {
    // 抱歉！不支持 Web Storage ..
}

代碼示例

// 存儲
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

8，應(yīng)用程序緩存

應(yīng)用程序緩存即可對web應(yīng)用進行本地緩存，保證用戶在離線時也可以使用應(yīng)用，加載速度更快，且能夠減少服務(wù)器負載，瀏覽器只從服務(wù)器下載更新或更改過的資源。
代碼示例

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文檔內(nèi)容 ......
</body>
</html>

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

2019-05-06 HTML5知識點總結(jié)：

2019-05-06 HTML5知識點總結(jié)：

HTNL5內(nèi)容：

塊級元素與內(nèi)聯(lián)元素

特殊符號

1，HTML5新增標簽

新增語義元素

<article>

<header>

<footer>

<section>

<nav>

2，HTML5圖像

canvas

SVG

3，HTML5媒體

4，HTML5API

5，HTML5 定位

6，HTML5 拖放

7，WEB存儲

8，應(yīng)用程序緩存

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

2019-05-06 HTML5知識點總結(jié)：

HTNL5內(nèi)容：

塊級元素與內(nèi)聯(lián)元素

特殊符號

1，HTML5新增標簽

新增語義元素

<article>

<header>

<footer>

<section>

<nav>

2，HTML5圖像

canvas

SVG

3，HTML5媒體

4，HTML5API

5，HTML5 定位

6，HTML5 拖放

7，WEB存儲

8，應(yīng)用程序緩存

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频