篇一：html5新特性总结

概述

html5新特性总结

新标记

HTML 5提供了一些新的元素和属性

这些新标记更利于搜索引擎理解页面内容，同时也在一定程度上简化页面的编写。

1. 结构性标记

header 页面的头部或者文章的头部 footer 页面的尾部或者文章的尾部

section 网页中的一节

article 独立的文章内容

nav 导航

2.语义性标记

aside代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。 figure代表一个块级图像，还可以包含说明。

dialog表示几个人之间的对话

3.语义性内联元素

m或者mark表示文本被 “加上标志”，但是不一定要强调

time表示一个时间值，time 元素可以帮助浏览器和其他程序识别出 HTML 页面中的时间。，每个 time 元素都应该有一个 datetime 属性，其中包含更适合机器识别的时间值，适合机器读取的时间值可能对搜索引擎、日历程序等有帮助。

meta表示指定范围内的数字值meter 元素帮助浏览器和其他客户机识别 HTML 页面中的数量。它不要求对元素内容应用任何特定的格式。但是，每个 meter 元素可以有最多 6 个属性，它们按照更适合机器识别的形式表示这个数量：

? ? ? ? ? ? value min low high max optimum 这些属性都应该包含一个十进制数字 progress表示一个正在进行的过程的状态，就像图形用户界面（GUI）应用程序中的进度条

4.内嵌的媒体

video用来嵌入任意视频格式

audio 用来嵌入音频格式

audio 和 video 元素可以包含额外的标记，用来描述音频和视频的内容

5.交互

details 元素表示在默认情况下可能不显示的详细信息。可选的 legend 元素可以提供详细信息的摘要。details 元素的用途之一是提供脚注和尾注(收缩展开)

…… …… 余下全文

篇二：html5的js总结

Html5总结

首先在需要的页面加入如下js和css，就可以使用了。

<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../style/jquery.mobile-1.0.1.min.css" /> <script src="../js/jquery.js"></script>

这里是你的js代码

</script>

功能代码介绍

1)定义变量

Var bianliang;或者var bianliang=null;

2)文档开始语句

$(document).ready(function(){

这里写你的js代码

});

3)定义函数

function click_function(){

你的函数代码

}

4)元素选择（）里面的为解释 #id .class element(p、h1)

5) 元素选择组合 E1,E2,E3(p,h1,li)

E1 E2(E1下的所有E2)

E1>E2(选择E1下的子E2,不包含E2下满足的元素)

…… …… 余下全文

篇三：html5学习笔记

一 html5简介

1.html的组合

HTML5 ~=HTML+CSS+JS APIs

Html5的发展其实是html，css，jsapi的发展

HTML 5草案的前身名为Web Applications 1.0，是在20##年由WHATWG提出，再于2007

HTML 5的标准草案目前已进入W3C制定标准5大程序的第1步。

2.Html 标签

Video，Audio

Video:ogg,mp4,webm audio:ogg,mp3,wav

demo

Your browser does not support the video tag.

</video>

属性

autoplay，controls，loop，preload，src

实例1 视图标签：

<!DOCTYPE HTML>

<html>

<body>

…… …… 余下全文

篇四：html5项目总结1

Css3毛玻璃效果

不过今天又仔细研究了一下css3中的blur方法，可以实现同样的效果。且配合JS可以实现模糊缩放的效果。

CSS代码

.blur {

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

-webkit-filter: blur(10px); /* Chrome, Opera */

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

}

.blur {

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

-webkit-filter: blur(10px); /* Chrome, Opera */

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

}

HTML部分

其中blur(10px)中的大小决定了模糊后的图片大小和模糊程度

…… …… 余下全文

篇五：html5学习笔记

一、html5页面结构

9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">改为<!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />改为<meta charset="gb2312" /> <section>类似<div>,主要用于把文档分成不同的逻辑区域。<div>更适合格式化文档。 <article>，如果希望内容相对独立于其他内容，并可以对外部分发，可用此标签。 <aside>，旁注。一般用于文档内。 <header>，文头。不可以在<header>元素内使用<header>元素，否则会无法正确显示文档。 <hgroup>,组合<h1>到<h6>元素。 <footer>,文脚。该元素不能放在<header>和<footer>元素内,否则无法正确显示文档。 <nav>,导航。

10. <figure>插入图表。<figcaption>如果在图片上面，内容就显示在图片上面。

二、html5标记

1.<hr>,可用于分隔区域中的不同话题。

2.<iframe>，较以前版本的html更加重要。

…… …… 余下全文

篇六：html5学习资料

早在几个星期前，Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知，HTML5在互联网领域掀起了一场大论战，并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语言。以下30多个资源可帮你开始学习HTML5。

Blowing up HTML5 video and mapping it into 3D space（将HTML5视频吹散并组成3D效果）

最近我研究了HTML 5中的Canvas 和Video 标签，并发现了一些很酷的特性。其中之一就是Canvas.drawImage() api。此为详细介绍。

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3（用HTML5 和CSS3 打造向下兼容的网页）HTML5更加语义化，使用HTML5 我们不必在网页上布满没有意义的div。它引入了有意义的tag，比如 navigations 和 footers 使代码更有意义也更接近自然语言。

Coding A HTML 5 Layout From Scratch（HTML 5 布局）

这篇文章将教你

用原有技术将元素放置在特定位置

? 最新的技术潮流

? Microformats与HTML5协同使用

? 介绍HTML5与CSS3的新特性 ?

Coding a CSS3 and HTML5 One Page Website Template（制作CSS3和 HTML5 一页式站点模板）

这篇文章介绍了如何利用CSS3 和jQuery的新特性制作HTML5 网页模版。 HTML5 仍在完善当中，你也可以选择性的下载XHTML版。

Comprehensive video tutorial on HTML5（全面的HTML5视频指南）这是一个叫Brad Neuberg的工程师制作的HTML5教学视频。

…… …… 余下全文

篇七：Html5框架收集整理总结

Html5框架收集整理总结

哪些框架是适合面向手机设备的开发的。

1、 jQuery Mobile

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。

2、 jQTouch

jQTouch 是一个 jQuery 的插件，主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的 JavaScript 库。支持包括 iPhone、Android 等手机。

3、 DHTMLX Touch

DHTMLX Touch是一个免费的HTML5/JavaScript框架，专门为触摸屏设备而优化。为您带来快速开发工艺精美的移动Web应用程序的能力。 DHTMLX Touch UI Designer是一个可视化的编辑器用于构建移动用户界面。它能够帮您以最少的编码构建一流的用户界面。在其主页上提供一些示例可以展示DHTMLX Touch强大的用户界面。包括一个 menu app for the iPad (适用于开发餐厅应用) 和Book Shop (一个电子书店应用)。

4、 Mobilize.js

Mobilize.js 是一个开源的HTML5-JavaScript框架用于从任何现在有标准网站快速，简便地构建移动网站。这个框架其实就是将需要在移动设备上显示的部分页面以jQuery Mobile的默认主题显示，而不是实现一个全新完整的移动页面。Mobilize.js 可用于任意网站，但对于基于WordPress和Sphinx的网站不需要使用该框架转换，因为已经有非常多的插件可以使用。

…… …… 余下全文

篇八：html5mobile的学习

jQuery Mobile 安装向您的网页添加 jQuery Mobile有多个办法可供您在网站上开始使用 jQuery Mobile。您可以：? ?从 CDN 引用 jQuery Mobile（推荐）从 jQuerymobile.com 下载 jQuery Mobile 库从 CDN 引用 jQuery Mobile提示：CDN (Content Delivery Network) 用于通过 web 来分发常用的文件，以此加快用户的下载速度。与 jQuery 类似，无需在您的计算机上安装任何程序；您只需直接在 HTML 页面中引用以下样式表和 JavaScript 库，这样 jQuery Mobile 就可以工作了： jQuery Mobile CDN:<head> <link rel="stylesheet" href="/mobile/1.3.2/jquery.mobile -1.3.2.min.css"> <script src="/jquery-1.8.3.min.js"></scri pt> <script src="/mobile/1.3.2/jquery.mobile1.3.2.min.js"></script> </head>亲自试一试下载 jQuery Mobile如果您希望在服务器上存放 jQuery Mobile，您可以从 jQuerymobile.com 下载文件。<head> <link rel=stylesheet href=jquery.mobile-1.3.2.css> <script src=jquery.js></script> <script src=jquery.mobile-1.3.2.js></script> </head>提示：请将下载的文件放到您希望使用的文件夹中。提示：您是不是奇怪为什么 <script> 标签中没有 type="text/javascript" 属性？在 HTML5 中该属性不是必需的。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

…… …… 余下全文

HTML5学习总结

一 html5简介

1.html的组合

2.Html 标签

实例1 视图标签：