在线编程在线课堂在线测评Anycodes在线编程

编程论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

How to use bs4??
本帖最后由 carry0987 于
Double Queue 问题描述 : The new founded Balkan Investment Group Bank (
John 问题描述 : Little John is playing very funny game
linux-command Linux命令大全搜索工具,内容包含Linux命令
Coati 是一款跨平台的代码查看工具,适用于 C/C++ 和 Java。商业软件。特性:1. 索引
系统可承载海量并发,消息收发确认机制 保障消息必达 系统采用动态智
全平台视频监控,支持安卓苹果以及pcweb,支持海康大华等主流dvr,全部源码以及文档 单聊、群聊、商
如何访问类的私有属性? 下面以 TPathData 为例,
问题:从 XE4 以来,Firemonkey 曲线绘图在移动平台不平滑的问题一直令人诟病,提交到官方的 QC 也是族繁不及备载,官方似乎有意的
操作数据库(RODBC)   odbcConnect(dsn, uid="", p
数据模式:mode函数显示任何对象的模式。常见的单个的
系统可承载海量并发,消息收发确认机制 保障消息必达 系统采用动态智
RabbitMQ与PHP(一) 项
Iease团队扩编预备中,盼望能有Ruby或者java工程师加盟。全职兼职都可以。有爱好的伴侣请与我接洽。 邮件:i
ruby 怎么设置装备摆设GTK2,求教指导下!
#include #include #include #include using namespace std; int main() {
标题如图所示: 有n盏灯,编号1~n。一开端灯都是关着的
成熟的消息收发确认机制,支持万人大群 支持开发自定义的消息sdk接口,扩展性超强 支持单/
成熟的消息收发确认机制,支持万人大群 支持开发自定义的消息sdk接口,扩展性超强 支持单/
1. 注意列表和集合的区别 set 列表表现形式: list_1
Ajax   Ajax即“Asynchronous Javascript And
大师好,我比来在做布谷鸟优
分辨提取A和B图像Harris角点,接下来须要对

[精彩分享] HTML5 与 CSS3 jQuery部分知识总结

[复制链接]
发表于 2016-12-17 08:34:00 | 显示全部楼层 |阅读模式
公司

部门

姓名

职位

分享内容

痛客梦工厂科技有限公司

技术部

张应钦

Web前端开发工程师

HTML5与CSS3



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

一、    HTML5

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

  • CSS3简介
  • 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综合动画:

  • 小人物跑步
  • 背景动画

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.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复

使用道具 举报

发表于 2017-2-22 20:09:13 来自手机 | 显示全部楼层
请问有QQ 或者 微信嘛,我是一个刚学的新手,我想有不会的时候请教你。蟹蟹。
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发表于 2017-2-22 20:09:13 来自手机 | 显示全部楼层
请问有QQ 或者 微信嘛,我是一个刚学的新手,我想有不会的时候请教你。蟹蟹。
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发表于 2017-12-27 21:42:30 来自手机 | 显示全部楼层
哇!方便交流嘛?我是新手什么都不懂呢,也不知道如何学习?怎么学?学什么呢。心痛,就看了一点html和css
在线编程(http://www.anycodes.cn)&编程论坛(http://www.52exe.cn)感谢您的支持!
回复 支持 反对

使用道具 举报

发布主题 上个主题 下个主题 快速回复 返回列表 官方QQ群
在线客服
客 服 中 心
群 机 器 人
网站二维码
收 起 客 服

QQ|Archiver|手机版|小黑屋|Anycodes ( ICP14002806Anycodes在线编程

GMT+8, 2018-11-22 01:08 , Processed in 1.628971 second(s), 75 queries .

Powered by Anycodes

© 2001-2013 吉林市群龙科技有限公司 Inc.

快速回复 返回顶部 返回列表