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的一些基础

图形阴影绘制的属性

给图形绘制阴影

您的项目需求