一、    HTML5

  1. 为什么需要HTML5
  2. 什么是HTML5
  3. HTML5现状及浏览器支持
  4. HTML5优点与缺点
  5. HTML5语法规则与文档声明
  6. HTML5新增表达标签
  7. HTML5多媒体组件
  8. HTML5之canvas

二、    CSS3

  1. CSS3简介
  2. CSS3有什么(边框、圆角、背景、渐变、文本效果、字体、2D转换、3D转换、过渡、动画、多列、用户界面、图片、按钮、分页、框大小、弹性盒子、多媒体查询)

三、    jQueryCSS3选择器(详见PDF文档)

注:部分实例见分享会文件demo.html

1. 为什么需要HTML5?

HTML4的陈旧不能满足日益发展的互联网需要,特别是移动互联网。为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电、触摸、不开放)。HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便。

基础知识:HTML+CSS+JavaScript与任何一种Web服务器后台技(Java,dotNET,PHP)

2.什么是HTML5?

HTML5指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务(Plug-in-Based Rich Internet Application,RIA)。HTML5是HTML最新版本,2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。

3. HTML5现状及浏览器支持。

大部分主流浏览器已经支持HTML5,但是各个浏览器支持的方式以及语法有所差异性。支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari(苹果公司研发的网络浏览器),Opera等现代浏览器。

支持得分:

4. HTML5优点与缺点。

4.1、优点

1、网络标准统一、HTML5本身是由W3C推荐出来的;
2、多设备、跨平台;
3、即时更新;
4、提高可用性和改进用户的友好体验;
5、HTML5新增标签,这将有助于开发人员定义重要的内容;
6、可以给站点带来更多的多媒体元素(视频和音频),可以很好的替代Flash和Silverlight;
7、涉及到网站的抓取和索引的时候,对于SEO很友好;
8、被大量应用于移动应用程序和游戏。

4.2、缺点

a)、安全:像之前Firefox4的web socket和透明代理的实现存在严重的安全问题,同时web storage、web socket 这样的功能很容易被黑客利用,来盗取用户的信息和资料;
b)、完善性:许多特性各浏览器的支持程度也不一样;
c)、性能:某些平台上的引擎问题导致HTML5性能低下;
d、浏览器兼容性:最大缺点,IE9以下浏览器几乎全军覆没。

5、HTML5语法规则与文档声明

1、标签要小写
2、可以省略某些标签
       如:HTML body head tbody
3、可以省略某些结束标签
       如:tr td li 
4、单标签不用加结束标签
        如:img input
5、废除的标签,看第二点
        如:font center big

6、文档声明

<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <HTML> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属于 HTML 标签,它是一条指令,告诉浏览器编写页面所用的标记的版本。
在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用。

例:

6、HTML5新增表单标签

姓名:<input type="tel" name="text"></br></br>

邮箱:<input type="email" name="email"></br></br>

日期:<input type="date" name="date"></br></br>

时间:<input type="time" name="time"></br></br>

滑块:<input type="range" name="range"></br></br>

个人主页:<input type="url" name="url"></br></br>

<input type="submit" value="tijaio" name="btn">

例:分享会文:HTML5新增表单标签.html

7、HTML5多媒体组件

html5多媒体组件指的是video(视频)组件和audio(音频)组件。HTML5多媒体组件可以在不借助诸如Flash Player等第三方插件的情况下,直接在你的网页上嵌入多媒体组件。浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下,在他们的网站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使用的Flash技术的局限性,HTML5多媒体组件的能力就显得尤为重要了。

例:分享会文件CSS3:视频、音频.html

8、HTML5之canvas

1.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

2.画布是一个矩形区域,您可以控制其每一像素。

3.canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

例:分享会文件CSS3:canvas万花筒转换.html 及时钟.html

1.CSS3是什么?

CSS层叠样式表Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。

2.CSS3transform---旋转     animation ----动画

旋转:transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

例:分享会文件CSS3数字3D立体旋转.html及3Dbanner轮播图.html。

动画:

1.动画是使元素从一种样式逐渐变化为另一种样式的效果。

2.您可以改变任意多的样式任意多的次数。

3.用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

4.0% 是动画的开始,100% 是动画的完成。

5.为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

例:分享会文件CSS3动画.html

3.CSS3字体:

例:分享会文件CSS3字体图标.html

4.CSS3图标:

例:分享会文件CSS3字体图标.html

5.CSS圆角边框:

通过 CSS3,能够创建圆角边框,向矩形添加阴影,使用图片来绘制边,不再需使用设计软件,比如 PhotoShop,来做这些效果,能够很轻松的在页 面当中做出圆角,阴影等效果

例:分享会文件CSS3圆角.html(CSS3与Javascript圆角比较)。

6.CSS3综合动画:

  1. 小人物跑步
  2. 背景动画

7.附加:jQueryCSS3选择器

jQuery选择器

基本选择器:

$(“#one”).css(“background“,”#bfa”);   改变id为one的元素背景色

$(“.one”).css(“background“,”#bfa”);  改变class为one的所有元素的背景色

$(“div”).css(“background“,”#bfa”); 改变元素名是<div>的所有元素的背景色

$(“*”).css(“background“,”#bfa”); 改变所有元素的背景色

$(“span,#two”).css(“background“,”#bfa); 改变所有span和two元素的背景色

层次选择器:

$(“div span”) 选取<div>里所有的<span>元素

$(“div > span”); 选取<div>元素下元素名是<span>的子元素

$(“.one + div”);选取class为one的下一个<div>元素

$(“#two~div”);选取id 为two的元素后面的所有<div>元素

基本过滤选择器:

$(“div:first”).css(“background“,”#bfa”); 改变第一个<div>元素的背景

$(“div:last”).css(“background“,”#bfa”);改变最后一个<div>元素的背景

$(“div:not(.one)”).css(“background“,”#bfa”);改变.不为one的<div>元素的背景色

$(“div:even”).css(“background“,”#bfa”);改变索引值为偶数的<div>元素的背景

$(“div:odd”).css(“background“,”#bfa”);改变索引值为奇数的<div>元素的背景

$(“div:eq(3)”).css(“background“,”#bfa”);改变索引值为3的<div>元素的背景色

$(“div:gt(3)”).css(“background“,”#bfa”);改变索引值大于3的<div>元素背景色

$(“div:lt(3)”).css(“background“,”#bfa”);改变索引值小于3的<div>元素的背景色

$(“div:header”).css(“background“,”#bfa”);改变所有标题元素的背景色

$(“div:animated”).css(“background“,”#bfa”);改变当前正在执行动画元素背景

内容过滤选择器:

$(“div:contains(di)”).css(“background”,”red”);改变含有文本”di”的div元素背景

$(“div:empty”).css(“background”,”red”);改变不包含子元素的<div>元素的背景

$(“div:has(mini)”).css(“background”,”red”);改变含有.为mini元素<div>元素背

$(“div:parent”).css(“background”,”red”);改变含有子元素<div>元素的背景色

可见性过滤选择器:

$(“div:visible”).css(“background”,”red”);改变所有可见的<div>元素的背景色

$(“div:hidden”).css(“background”,”red”);显示隐藏的<div>元素

属性过滤选择器:

$(“div[title]”).css(“background”,”red”);改变含有属性title的<div>元素的背景色

$(“div[title=test]”).css(“background”,”red”);改变属性x=x的<div>元素的背景色

$(“div:[title=test]”).css(“background”,”red”);改变属性x!=x的<div>元素背景色

$(“div[title^=te]”).css(“background”,”red”);改变title以te开始<div>元素背景色

$(“div[title$=est]}”).css(“background”,”red”);改变title以est结束<div>元素背景

$(“div:[title*=es]”).css(“background”,”red”);改变title含有es的<div>元素背景

$(“div:[id][title*=es]”).css(“background”,”red”);改变含有属性id,并且属性title值含有es的<div>元素的背景色

子元素过滤选择器:

$(“div.one:nth-child(2)”).css(“background”,”red”);

//改变每个class为one的<div>父元素下的第二个子元素的背景色

$(“div.one:first-child”).css(“background”,”red”);

//改变每个class为one的<div>父元素下的第一个子元素的背景色

$(“div.one:last-child”).css(“background”,”red”);

//改变每个class为one的<div>父元素下的最后一个子元素都背景色

$(“div.one:only-child”).css(“background”,”red”);

//如果class为one的<div>父元素下只有一个子元素,那么则改变这个子元素都背景色

表单选择器:

$(“:input”); 获取所有<input><textarea><select>和<button>元素

$(“:text”); 获取所有的单行文本框

$(“:password”);选取所有的密码框

$(“radio”);选取所有的单选框

$(“checkbox”); 选取所有的复选框

$(“:submit”); 选取所有的提交按钮

$(“image”);  选取所有的图像按钮

$(“:reset”); 选取所有的重置按钮

$(“button”); 选取所有的按钮

$(“file”); 选取所有的上传域

$(“hidden”); 在不可见性过滤选择器中讲解

转载自:http://www.cnblogs.com/zhangyingqin/p/6150397.html

HTML5 与 CSS3 jQuery部分知识总结【转】的更多相关文章

  1. HTML5 与 CSS3 jQuery部分知识总结

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

  2. html5 和css3的小知识!

    阿里web字体的使用 (1)进入官网  点击webfont (2)输入对应的文字 然后选择添加字体 (3)可以直接引用线上地址或者本地下载,引用线上地址需要添加http,(在服务器环境下可以不用),如 ...

  3. HTML5 javascript CSS3 jQuery Mobile一些好用的网站

    jQueryMobile:学习 http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html 百度 CDN: http://cdn.cod ...

  4. HTML5&amp;CSS3初学者指南

    介绍 网络时代已经到来.现在对人们来说,每天上网冲浪已经成为一种最为常见的行为. 一个典型的网页是由文本.图像和链接组成的.除去内容上的差异,不同网站的网页也具有不同的外观和感受,以实现在网络上建立自 ...

  5. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  6. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  7. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  8. HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】

    前言 由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现.[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础上修改的 ...

  9. Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

随机推荐

  1. 【Tomcat】解决Eclipse无法添加Tomcat Service问题

    直接上图:今天因为弄Maven的时候,不小心把Tomcat7 Service 给弄没了,没法直接添加. 可以参照上图的结构进行 Download and Install...点击之后等待一会儿. 其实 ...

  2. highcharts使用笔记

    1.legend取消点击事件: 饼图:plotOptions.pie.point.events.legendItemClick = function() {return false;} 其他,如:pl ...

  3. js调用php和php调用js的方法举例

    js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...

  4. python正则表达式re

    Python正则表达式: re 正则表达式的元字符有. ^ $ * ? { [ ] | ( ).表示任意字符[]用来匹配一个指定的字符类别,所谓的字符类别就是你想匹配的一个字符集,对于字符集中的字符可 ...

  5. lanmp之二 (奇葩问题)

    ps:该篇是接 lanmp -- 动静分离 lanmp -- 奇葩问题 话说,在 搭建 bbs.abc.com (discuz论坛)的 时候.... 1.说明:web机器上以前已经有一个 discuz ...

  6. OOP的四个魔术方法

    1 __autoload()自动包含类文件 通常会把类的定义单独写到一个文件里,要在另外的文件调用时需要引用require,但类的定义文件会很多就会造成一下问题 //1 如果包含多个类文件,需要一一引 ...

  7. php多态简单示例

    <?php //多态由不同的人执行而产生不同的结果: //一个人通过不同的状态执行同一种动作,产生不同的结果也可称为多态 //多态的原理,就是类都写好了,不要去修改它,只要在类外的的调用参数的更 ...

  8. Java 8中一些常用的全新的函数式接口

    这一篇属于菜鸟级博客,只是介绍了一些在Java 8中新出现的一些很有用的接口,通过一些简单的例子加以说明,没有深入地阐述. 函数式接口 什么是函数式接口? 函数式接口,@FunctionalInter ...

  9. JS技巧

    2016-08-09 200多个js技巧代码(Down) word下载 200多个js技巧代码 目录 1.文本框焦点问题... 6 2.网页按钮的特殊颜色... 6 3.鼠标移入移出时颜色变化... ...

  10. 小书翻译完成,分享啦--《用Python操作大数据[MapReduceHadoop和Spark]》

    http://files.cnblogs.com/files/aguncn/%E7%94%A8Python%E6%93%8D%E4%BD%9C%E5%A4%A7%E6%95%B0%E6%8D%AE%5 ...