html5的一些基礎

一、html新增標簽

1)header -------頭部引導或導航的部分

2)Nav ----------導航部分，一般可以嵌套在header里面

3)Section ---------代表一個獨立區塊，包括內容和標題

4)Article ----------特殊的section ，一般放置文章或標題

5)Aside ---------頁面補充說明的區塊

6)Footer --------腳部版權說明的區塊

注意點：雖然標簽很語義化，但是目前只能兼容IE9+

二、添加對flash的替換

.swf（flash的格式）

對視頻的標簽

Video支持的mp4格式,ogg,webM

屬性：autoplay: 頁面加載進來就開始播放

Src 視屏文件的路徑

Controls 是否顯示播放器的控件（播放，暫停，快進，全屏，音量）

Preload 預加載

Poster 視頻播放前的海報

在h5之前視頻是如何播放的（網頁中是如何插入視頻）

<embed>

音頻的標簽

Audio

支持的格式：mp3,ogg,Wav

Input類型的拓展

Color: 取到值是十六進制的顏色屬性值

Date : yyyy-MM-dd

Datetime

Datetime-local 顯示格式yyyy-MM-ddThh:mm

Email 表單提交會觸發驗證

Month YYYY-MM

Number 會出現加減符號，min-----max屬性，限制最大值和最小值

Range 滑塊，也可以自定義最大值和最小值

Tel 移動端點擊時候會拉起數字鍵

Time

Url

Week

Html5表單新元素

Datalist:模糊查詢

Input list=”dalistID”

Datalist#dalistID>option

Keygen

Output

Html 表單驗證

Required 必填字段

Pattern 正則驗證，設置title為錯誤提示信息

Maxlength 輸入的最大長度

Minlength 輸入的最小長度

Min Max step必須input為number類型才能生效,min最小值，max最大值,step設置有效數字的間隔

setCustomValidity(“提示文字”) 自定義提示文字

H5地理定位系統：

Navigator:是瀏覽器內置對象，包含瀏覽器廠商支持哪些方法，瀏覽器的信息；

H5的拖放：

被拖動的對象：屬性：draggable設置是否支持拖動 ondragstart開始拖動的時候執行的事件

放置的容器: ondrop丟放對象觸發的事件

Ondragover 當拖放的對象拖動到放置的容器上觸發的事件

H5的本地存儲

localStorage.setItem(“key”, value);

在本地存儲一個名為key值為value的一個數據

localStorage.getItem(“key”);//value

清除:

localStorage.Clear()會清空所有的本地存儲；

localStorage.removeItem(“key”)清空對應key這條數據

取出本地存儲的一個名為key的數據

sessionStorage.setItem(“key”,value);

sessionStorage.getItem(“key”);

區別：sessionStorage存儲的值當用戶關閉瀏覽器就會自動銷毀，但是localStorage存儲的值會一直存在，知道用戶手動清除；

Javascript變量在頁面關閉的時候會被全部銷毀，要在一個頁面取另一個頁面的值的時候是取不到的，那么這時候就要用到頁面間傳值的方法：

1.帶參數的a鏈接來實現傳值

2.本地存儲來傳值

HTML5 中，我們除了上一節講過的可以對圖形設置平移、旋轉、縮放，還可以給圖形添加陰影效果。添加陰影的時候只需要利用圖形上下文對象的幾個關于陰影繪制的屬性就可以實現啦。

圖形陰影繪制的屬性

shadowOffsetX 屬性和 shadowOffsetY 屬性分別用于設置陰影在 X 軸和 Y 軸的延伸距離，屬性值為正值表示向下或向右延伸，負值表示向上或向左延伸。

shadowBlur 屬性用于設置陰影的模糊度，當我們不希望圖形的陰影太清晰時，可以使用這個屬性。屬性值為必須為正值，否則無效喲，一般設定在 0到10 之間。

shadowColor 屬性值用于設置陰影的顏色，屬性值可以為任意標準的 CSS 顏色值，默認顏色為黑色。

給圖形繪制陰影

例如給一個粉色的矩形繪制陰影。

示例：

繪制向右偏移 10 像素的陰影：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5學習(9xkd.com)</title>
        </head>
        <body>
            <canvas id="mycanvas" width="300" height="200" style="border: 1px solid #000;"></canvas>
            <script>
                var can = document.getElementById("mycanvas");
                var ctx = can.getContext("2d");
                ctx.shadowOffsetX = 10;
                ctx.shadowBlur = 10;
                ctx.shadowColor="#000";
                ctx.fillStyle = "pink";  // 填充顏色
                ctx.fillRect(50, 50, 150, 70);
            </script>
        </body>
    </html>

在瀏覽器中的演示效果：

可以看到上圖中，陰影的位置向右偏移，如果想要陰影向左偏移，可以將shadowOffsetX 的值設置為負數。

示例：

如果要繪制向上偏移 20 像素的陰影，則不需要設置 shadowOffsetX，而是設置 shadowOffsetY 屬性，正值為向下偏移，負值為向上偏移：

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowOffsetY = -20;
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度
ctx.fillStyle = "pink";  // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

可以看到這張截圖中，矩形的陰影顏色要比上面示例中淡一點。這是因為我們在給陰影設置顏色時，指定了一個透明度，用到了 rgba() 函數，函數中第四個參數用于設置透明度，值為 0~1 之間的小數，0表示完全透明，1表示不透明。

示例：

給四個邊設置陰影：

var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowColor="rgba(0, 0, 0, 0.7)"; // 設置透明度
ctx.fillStyle = "pink";   // 填充顏色
ctx.fillRect(50, 50, 150, 70);

在瀏覽器中的演示效果：

在實際應用中，其實我們會經常用到陰影，例如給導航欄添加陰影、給按鈕添加陰影、給圖片添加陰影等，這樣看上去就會更立體一些，增加層次感。

了解更多可查看鏈接：https://www.9xkd.com/

家都知道Jquery屬于快速且簡單的一個JavaScript library，它使網頁制作更加的方便。它可以對HTML文檔以及控制事件等進行簡潔且快速的處理。有人說Jquery是一個寶庫，下面W3Cschool小師妹將為大家推薦2016年度最佳的Jquery插件庫，還附帶教程。

1.Jquery插件下載網站合集

很多開發者制作了非常好用且實用的Jquery插件，W3Cschool小師妹為大家收集的Jquery插件下載網站，主要包括開源中國社區、腳本之家、站長之家等。這些網站都有很多免費的Jquery插件，大家可以自由使用，對服務器產生的壓力很小。

2.Jquery輪播

一個網站中，輪播是很重要的一種功能。無論是動畫輪播、圖片輪播，還是HTML5全屏幻燈片背景切換，W3Cschool小師妹都為大家收集了，可以去看一下。

3.Jquery UI特效

Jquery UI特效非常多，像實現天空下雪花、粒子效果、metro界面交互動畫等，都是比較常見的。W3Cschool小師妹為大家收集了很多Jquery UI特效，不僅克油演示案例，教你一步步操作，還有下載地址。

4.Jquery瀑布流插件

瀑布流的布局現在很火，用Jquery來實現瀑布流，不會很復雜。W3Cschool為大家收集的幾款插件，可以用來制作瀑布流布局。

5.Jquery導航

優秀的Jquery導航很多，此部分內容，主要包括仿京東菜單導航、CSS3回轉菜單、頁面左側下拉菜單、仿百度新聞右側導航欄、beautif導航條等。每一個Jquery導航都提供了下載方式，有需要的可以去看一下。

6.Jquery小游戲

通常情況下開發游戲都是用html5,但是有些Jquery的愛好者，喜歡用它來開發游戲。也許和flash相比，Jquery的效果會更差，但是游戲非常酷。今天為大家收集了一些非常熱門的Jquery小游戲，一起看看吧!

7.Jquery功能性插件

Jquery功能性插件相當多，此處為你收集了Jquery 功能性插件jQuery篩選列表過濾插件Filterizr、很酷的CSS3多窗口郵件閱讀器、HTML5實現的圖書翻頁效果、Twitter bootstrap模糊查詢插件、jQuery表格排序插件 jquery.tablesort.js等。

8.Jquery提示框

網頁上漂亮的提示框，可以讓大家覺得耳目一新，還可以起到提醒又不打擾大家的功效。下面,W3Cschool小師妹為大家推薦效果非常棒的Jquery提示框，主要包括html5提示信息提示框、tooltip插件等。

9.Jquery圖片處理

用于圖片處理的超級Jquery插件很多，主要功效是生成圖片的動畫及特效，還可以縮放這些圖片的大小。

上面W3Cschool小師妹為大家收集的Jquery插件庫，如果有需要可以去看一下。有人看到這類的文章，總會說是打廣告。其實這些都是免費的Jquery插件庫，里面的資源很多，主要目的就是幫助大家。

在線咨詢

上一篇：黑科技阻止 App 自動喚醒，延長 Android 續航時間-黑域
下一篇："探秘CSS3：打造視覺盛宴-深度解析漸變、陰影與遮罩技

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html5的一些基礎

圖形陰影繪制的屬性

給圖形繪制陰影

您的項目需求