HTML 5带来的新特性
HTML 5公布后，网页制作就变样！它是最新的HTML规范，不仅增强了功能，还让我们用得更爽。在网页制作里，大家都希望能用上HTML 5的新特性，这样网站就能更好玩儿，更有吸引力。想让 web 应用更多元化，更好使？只需要不断去挖掘并利用这些 HTML 5 的新功能就行！
HTML 5的API应用
HTML 5加了好多新技能，比如，Geolocation API能知道你在哪儿，Notification API能发短信给你好消息，File API能让你跟电脑玩文件夹捉迷藏！这样网页功能就多了起来，你用得也就方便了不少。
HTML 5与CSS 3的结合
HTML 5和CSS 3这两货也是一大看点！你知道么？这两种技术搭配得那叫一个默契！用CSS 3来打造出各种炫酷样式，再加上HTML 5用来搭建网站内容框架，就能轻轻松松做出颜值高、性能好的网站！这样做不只让网站更具观赏性，更能吸引用户。
Notification API介绍
我们来聊聊这个 Notification API！它能帮你在用户打开别的网页时，用 HTML 信息告诉他们现在有啥新鲜事。比如说，你可以用这玩意儿发个新邮件或者新推特等等。不过要记得，用之前得先获得用户的同意，不然人家可就看不见了！
获取许可并显示通知
用 Notification API时，记得跟用户说要开个权限。这很关键，因为得保护咱们用户的隐私！所以，别忘了先让用户点个头儿，你才能安心地给他推送通知。编程的时候，一定要先得到许可才去干
两种类型信息展示
Normal/Default Notification HTML Notification
通知有两类，一种是纯文本，就是只有字，另一种叫富文本，它能带图、带链接，就是更好看些。你要看哪种，就看实际需要和展示效果了。关键是要得到用户同意。
执行通知代码
要搞定Notification API，其实就是写点代码来实现通知！用JavaScript函数搞出个显示通知的小弹窗，然后把消息和样式设定好。只要条件符合了就会自动弹出~不过这只是个基本方法，实际应用中还得根据需求二次开发。
适用范围及浏览器支持
Show Normal Notification
Show HTML Notification
记住，只有支持WebKit引擎的浏览器，比如谷歌Chrome，才能用得上HTML 5 Notification API。像Mozilla Firefox这种浏览器就有自己的特别办法来完成同样的事了。所以咱们做开发的时候得小心些，看看你面对的是啥浏览器然后选出最对头的解决方法！
未来展望
// Function to show Notification
function createNotification(type)
{
if(type == '')
type = 'normal';
if(type != 'html')
{
var title ="You have received HTML 5 Notification";
var msg="Content Goes Here......";
var notification = window.Notifications.createNotification("1.png", title, msg);
}
else
{
var notification = window.Notifications.createHTMLNotification('content.html');
}
notification.show();
}
// Binding the Click event on buttons.
$(document).ready(function ()
{
if (window.webkitNotifications)
{
window.Notifications = window.webkitNotifications;
$('#show_notification').click(function ()
{
if (window.Notifications.checkPermission() == 0)
{
createNotification('normal');
}
else
{
window.Notifications.requestPermission();
}
});
$('#show_html_notification').click(function ()
{
if (window.Notifications.checkPermission() == 0)
{
createNotification('html');
}
else
{
window.Notifications.requestPermission();
}
});
}
else
{
alert('HTML 5 Notifications are not supported on this browser/OS.');
}
});
HTML 5在web的进步中占了个大头，未来也不可或缺。随着我们对API的了解越来越深，实践越来越多，说不定会有更多新鲜玩意儿出来，让大家用得更爽利，网页也更好玩儿！
评论0