html5的一些基礎(chǔ)

一、html新增標(biāo)簽

1)header -------頭部引導(dǎo)或?qū)Ш降牟糠?/p>

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

3)Section ---------代表一個獨(dú)立區(qū)塊，包括內(nèi)容和標(biāo)題

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

5)Aside ---------頁面補(bǔ)充說明的區(qū)塊

6)Footer --------腳部版權(quán)說明的區(qū)塊

注意點(diǎn)：雖然標(biāo)簽很語義化，但是目前只能兼容IE9+

二、添加對flash的替換

.swf（flash的格式）

對視頻的標(biāo)簽

Video支持的mp4格式,ogg,webM

屬性：autoplay: 頁面加載進(jìn)來就開始播放

Src 視屏文件的路徑

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

Preload 預(yù)加載

Poster 視頻播放前的海報

在h5之前視頻是如何播放的（網(wǎng)頁中是如何插入視頻）

<embed>

音頻的標(biāo)簽

Audio

支持的格式：mp3,ogg,Wav

Input類型的拓展

Color: 取到值是十六進(jìn)制的顏色屬性值

Date : yyyy-MM-dd

Datetime

Datetime-local 顯示格式y(tǒng)yyy-MM-ddThh:mm

Email 表單提交會觸發(fā)驗證

Month YYYY-MM

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

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

Tel 移動端點(diǎn)擊時候會拉起數(shù)字鍵

Time

Url

Week

Html5表單新元素

Datalist:模糊查詢

Input list=”dalistID”

Datalist#dalistID>option

Keygen

Output

Html 表單驗證

Required 必填字段

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

Maxlength 輸入的最大長度

Minlength 輸入的最小長度

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

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

H5地理定位系統(tǒng)：

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

H5的拖放：

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

放置的容器: ondrop丟放對象觸發(fā)的事件

Ondragover 當(dāng)拖放的對象拖動到放置的容器上觸發(fā)的事件

H5的本地存儲

localStorage.setItem(“key”, value);

在本地存儲一個名為key值為value的一個數(shù)據(jù)

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

清除:

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

localStorage.removeItem(“key”)清空對應(yīng)key這條數(shù)據(jù)

取出本地存儲的一個名為key的數(shù)據(jù)

sessionStorage.setItem(“key”,value);

sessionStorage.getItem(“key”);

區(qū)別：sessionStorage存儲的值當(dāng)用戶關(guān)閉瀏覽器就會自動銷毀，但是localStorage存儲的值會一直存在，知道用戶手動清除；

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

1.帶參數(shù)的a鏈接來實(shí)現(xiàn)傳值

2.本地存儲來傳值

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

圖形陰影繪制的屬性

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

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

shadowColor 屬性值用于設(shè)置陰影的顏色，屬性值可以為任意標(biāo)準(zhǔn)的 CSS 顏色值，默認(rèn)顏色為黑色。

給圖形繪制陰影

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

示例：

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

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>HTML5學(xué)習(xí)(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 的值設(shè)置為負(fù)數(shù)。

示例：

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

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

在瀏覽器中的演示效果：

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

示例：

給四個邊設(shè)置陰影：

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

在瀏覽器中的演示效果：

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

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

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

1.Jquery插件下載網(wǎng)站合集

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

2.Jquery輪播

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

3.Jquery UI特效

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

4.Jquery瀑布流插件

瀑布流的布局現(xiàn)在很火，用Jquery來實(shí)現(xiàn)瀑布流，不會很復(fù)雜。W3Cschool為大家收集的幾款插件，可以用來制作瀑布流布局。

5.Jquery導(dǎo)航

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

6.Jquery小游戲

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

7.Jquery功能性插件

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

8.Jquery提示框

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

9.Jquery圖片處理

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

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

在線咨詢

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

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

html5的一些基礎(chǔ)

圖形陰影繪制的屬性

給圖形繪制陰影

您的項目需求