HTML5 与 CSS3 jQuery部分知识总结


公司


部门


姓名


职位


分享内容


痛客梦工厂科技有限公司


技术部


张应钦


Web前端开发工程师


HTML5与CSS3

注:此帖子详见本人博客文件HTML5与CSS3.docx文件

一、    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”); 在不可见性过滤选择器中讲解

时间: 2024-10-22 13:55:19

HTML5 与 CSS3 jQuery部分知识总结的相关文章

HTML5 与 CSS3 jQuery部分知识总结【转】

一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5之canvas 二.    CSS3 CSS3简介 CSS3有什么(边框.圆角.背景.渐变.文本效果.字体.2D转换.3D转换.过渡.动画.多列.用户界面.图片.按钮.分页.框大小.弹性盒子.多媒体查询) 三.    jQuery与CSS3选择器(详见PDF文档) 注:部分实例见分享会文件demo.

html5 和css3的小知识!

阿里web字体的使用 (1)进入官网  点击webfont (2)输入对应的文字 然后选择添加字体 (3)可以直接引用线上地址或者本地下载,引用线上地址需要添加http,(在服务器环境下可以不用),如果是本地下载需要解压,打开demo.html复制代码即可 (4)注意修改路径,并且给文字添加上对应的类 阿里Iconfont的使用 (重点,没有兼容) (1)进入官网 http://www.iconfont.cn/ 选择图标库 ---- 所有图标库 (2)右上角搜索想要的图标,并且添加到购物车里面

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

1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN"><head><meta charset="utf-8" /><title>html5 - 新增属性与技术总结 - by sole</title><meta name="keywords" content="html

征服大前端视频教程第一季(jQuery、HTML5、CSS3、Node.js)

征服大前端视频教程第一季(jQuery.HTML5.CSS3.Node.js.AngularJS.MongoDB)网盘地址:https://pan.baidu.com/s/1-dbJMOa1RrQzcMY2pBw1hw 密码: xi2c备用地址(腾讯微云):https://share.weiyun.com/5ynLsD5 密码:nhdtxq 本系列课程第一季专注于WEB前端工程师必备技能H5.C3.JS.jQuery和拓展技能Node.js.AngularJS.MongoDB等技术的实战训练,囊

使用HTML5、CSS3和jQuery增强网站用户体验[留存]

记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类似的用户体验.而且使用这些特性将会比使用flash更加有效.也许你可能刚知道Adobe停止开发移动版flash的消息,虽然在桌面中我们还拥有大量的flash的应用,但是随着HTML标准的完善,可能flash也要退出历史舞台了.在今天这篇文章中,我们将介绍一些非常实用的教程,技巧和资源来帮助大家构建一

Asp.Net MVC4开发三:HTML5、CSS3、JQuery、JQuery UI的应用

在Asp.Net MVC4里面UI层也就是View层默认使用HTML5以及与HTML相对应的CSS3,JS默认使用JQuery和JQuery UI.新建一个MVC4项目,项目会自动包含JQuery.JQuery UI所需要的文件及智能提示支持; HTML则是自动生成HTML5格式标签的页面. 先来看看MVC4项目里面对这些内容的支持: 在MVC4项目里面有Scripts和Content两个文件夹,Scripts里面存放Java scripts库包括JQuery, JQuery UI, JQuer

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

前言 由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现.[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础上修改的,可以称之为增强版吧! 兼容性 Firefox.chrome.360急速.360安全浏览器.IE8,其他的没测试,不过IE上的兼容有些问题. 效果预览 操作演示 实现过程 我是做后端的,所以,页面设计的并不是很好看来着.大家可以自己修改页面. 1.布局 页面布局不多说了,就是纯DIV+CSS实现的,

《HTML5与CSS3权威指南》知识整理(1)

<HTML5与CSS3权威指南>知识点整理(1) 1.新增标签 新增语义化标签. <header> 定义 section 或 page 的页眉. <nav>定义导航链接. <footer> 定义 section 或 page 的页脚 <section> 定义 section. <article> 定义文章. <aside> 定义页面内容之外的内容. 下面用一个图示来说明其用法. 语义化标签的好处: 1.对搜索引擎友好,有利

【HTML5 4】《HTML5与CSS3权威指南》 step1 导读

一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与HTML4在语法上的区别. HTML5的结构元素. 表单与文件.   图形绘制.   多媒体播放. 本地存储.   离线应用. 通信API. Web Workers. 地理位置获取等 第2部分:CSS3的相关知识,包括  选择器.  文字与文字的样式. 颜色的样式. 盒的样式. 背景与边框的样式. 布