|
公司 |
部门 |
姓名 |
职位 |
分享内容 |
|
痛客梦工厂科技有限公司 |
技术部 |
张应钦 |
Web前端开发工程师 |
HTML5与CSS3 |
注：此帖子详见本人博客文件HTML5与CSS3.docx文件
一、 HTML5
- 为什么需要HTML5
- 什么是HTML5
- HTML5现状及浏览器支持
- HTML5优点与缺点
- HTML5语法规则与文档声明
- HTML5新增表达标签
- HTML5多媒体组件
- HTML5之canvas
二、 CSS3
- CSS3简介
- CSS3有什么（边框、圆角、背景、渐变、文本效果、字体、2D转换、3D转换、过渡、动画、多列、用户界面、图片、按钮、分页、框大小、弹性盒子、多媒体查询）
三、 jQuery与CSS3选择器（详见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综合动画：
- 小人物跑步
- 背景动画
7.附加：jQuery与CSS3选择器
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”); 在不可见性过滤选择器中讲解