HTML5与CSS3jQuery部分知识总结

注&＃xff1a;此帖子详见本人博客文件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有什么&＃xff08;边框、圆角、背景、渐变、文本效果、字体、2D转换、3D转换、过渡、动画、多列、用户界面、图片、按钮、分页、框大小、弹性盒子、多媒体查询&＃xff09;

三、    jQuery与CSS3选择器&＃xff08;详见PDF文档&＃xff09;

注&＃xff1a;部分实例见分享会文件demo.html

1. 为什么需要HTML5&＃xff1f;

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

基础知识&＃xff1a;HTML CSS Javascript与任何一种Web服务器后台技&＃xff08;Java,dotNET,PHP)

2.什么是HTML5&＃xff1f;

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

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

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

支持得分&＃xff1a;

4. HTML5优点与缺点。

4.1、优点

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

4.2、缺点

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

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

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

6、文档声明

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

例&＃xff1a;

6、HTML5新增表单标签

姓名&＃xff1a;

    邮箱&＃xff1a;

    日期&＃xff1a;

    时间&＃xff1a;

    滑块&＃xff1a;

    个人主页&＃xff1a;

    例&＃xff1a;分享会文&＃xff1a;HTML5新增表单标签.html

7、HTML5多媒体组件

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

例&＃xff1a;分享会文件CSS3:视频、音频.html      

8、HTML5之canvas

^{1.HTML5 的 canvas 元素使用 Javascript 在网页上绘制图像。}

^{2.画布是一个矩形区域&＃xff0c;您可以控制其每一像素。}

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

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

1.CSS3是什么&＃xff1f;

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

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

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

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

动画&＃xff1a;

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

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

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

4.0% 是动画的开始&＃xff0c;100% 是动画的完成。

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

例&＃xff1a;分享会文件CSS3动画.html

3.CSS3字体&＃xff1a;

例&＃xff1a;分享会文件CSS3字体图标.html

4.CSS3图标&＃xff1a;

例&＃xff1a;分享会文件CSS3字体图标.html

5.CSS圆角边框&＃xff1a;

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

       例&＃xff1a;分享会文件CSS3圆角.html&＃xff08;CSS3与Javascript圆角比较&＃xff09;。

  6.CSS3综合动画&＃xff1a;

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

7.附加&＃xff1a;jQuery与CSS3选择器

jQuery选择器

基本选择器&＃xff1a;

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

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

$(“div”).css(“background“,”#bfa”); 改变元素名是

的所有元素的背景色

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

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

 

层次选择器&＃xff1a;

$(“div span”) 选取

里所有的元素

$(“div > span”); 选取

元素下元素名是的子元素

$(“.one div”);选取class为one的下一个

元素

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

元素

 

基本过滤选择器&＃xff1a;

$(“div:first”).css(“background“,”#bfa”); 改变第一个

元素的背景

$(“div:last”).css(“background“,”#bfa”);改变最后一个

元素的背景

$(“div:not(.one)”).css(“background“,”#bfa”);改变.不为one的

元素的背景色

 

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

元素的背景

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

元素的背景

$(“div:eq(3)”).css(“background“,”#bfa”);改变索引值为3的

元素的背景色

$(“div:gt(3)”).css(“background“,”#bfa”);改变索引值大于3的

元素背景色

$(“div:lt(3)”).css(“background“,”#bfa”);改变索引值小于3的

元素的背景色

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

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

内容过滤选择器&＃xff1a;

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

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

元素的背景

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

元素背

$(“div:parent”).css(“background”,”red”);改变含有子元素

元素的背景色

可见性过滤选择器&＃xff1a;

$(“div:visible”).css(“background”,”red”);改变所有可见的

元素的背景色

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

元素

属性过滤选择器&＃xff1a;

$(“div[title]”).css(“background”,”red”);改变含有属性title的

元素的背景色

$(“div[title&＃61;test]”).css(“background”,”red”);改变属性x&＃61;x的

元素的背景色

$(“div:[title&＃61;test]”).css(“background”,”red”);改变属性x!&＃61;x的

元素背景色

$(“div[title^&＃61;te]”).css(“background”,”red”);改变title以te开始

元素背景色

$(“div[title$&＃61;est]}”).css(“background”,”red”);改变title以est结束

元素背景

$(“div:[title*&＃61;es]”).css(“background”,”red”);改变title含有es的

元素背景

$(“div:[id][title*&＃61;es]”).css(“background”,”red”);改变含有属性id&＃xff0c;并且属性title值含有es的

元素的背景色

子元素过滤选择器&＃xff1a;

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

//改变每个class为one的

父元素下的第二个子元素的背景色

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

//改变每个class为one的

父元素下的第一个子元素的背景色

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

//改变每个class为one的

父元素下的最后一个子元素都背景色

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

//如果class为one的

父元素下只有一个子元素&＃xff0c;那么则改变这个子元素都背景色

 

表单选择器&＃xff1a;

$(“:input”); 获取所有<select>和<button>元素</p> <p>$(“:text”); 获取所有的单行文本框</p> <p>$(“:password”);选取所有的密码框</p> <p>$(“radio”);选取所有的单选框</p> <p>$(“checkbox”); 选取所有的复选框</p> <p>$(“:submit”); 选取所有的提交按钮</p> <p>$(“image”);  选取所有的图像按钮</p> <p>$(“:reset”); 选取所有的重置按钮</p> <p>$(“button”); 选取所有的按钮</p> <p>$(“file”); 选取所有的上传域</p> <p>$(“hidden”); 在不可见性过滤选择器中讲解</p> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> <li><a href="https://www.php1.cn/tag/css" target="_blank" title="css">css</a></li> <li><a href="https://www.php1.cn/tag/jquery" target="_blank" title="jquery">jquery</a></li> <li><a href="https://www.php1.cn/tag/web" target="_blank" title="web">web</a></li> <li><a href="https://www.php1.cn/tag/文件" target="_blank" title="文件">文件</a></li> <li><a href="https://www.php1.cn/tag/图片" target="_blank" title="图片">图片</a></li> <li><a href="https://www.php1.cn/tag/pdf" target="_blank" title="pdf">pdf</a></li> <li><a href="https://www.php1.cn/tag/安全" target="_blank" title="安全">安全</a></li> <li><a href="https://www.php1.cn/tag/java" target="_blank" title="java">java</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

• get

  南邮ctf-web的writeup

  本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]

  蜡笔小新   2023-12-13 10:58:55
• sum

  logistic回归（线性和非线性）的开发笔记

  本文由编程笔记#小编为大家整理，主要介绍了logistic回归（线性和非线性）相关的知识，包括线性logistic回归的代码和数据集的分布情况。希望对你有一定的参考价值。 ... [详细]

  蜡笔小新   2023-12-14 21:40:43
• get

  Android开发笔记：使用Picasso加载网络图片等比例缩放

  在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

  蜡笔小新   2023-12-14 17:34:00
• php

  Android 新闻App的本地服务器搭建教程

  本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

  蜡笔小新   2023-12-14 17:15:19
• object

  C#学习教程：在Console中工作但在Windows窗体中不工作的异步代码分享

  本文分享了一个关于在C#中使用异步代码的问题，作者在控制台中运行时代码正常工作，但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机，但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]

  蜡笔小新   2023-12-14 15:56:00
• get

  Linux重启网络命令实例及关机和重启示例教程

  

  本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]

  蜡笔小新   2023-12-14 15:52:52
• get

  CSS3选择器的使用方法详解，提高Web开发效率和精准度

  

  本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

  蜡笔小新   2023-12-14 14:37:52
• get

  android listview OnItemClickListener失效原因

  

  最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

  蜡笔小新   2023-12-14 14:25:50
• main

  关于cuowu类的错误提示和使用AdjustmentListener的问题

  本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]

  蜡笔小新   2023-12-13 22:09:56
• ip

  拥抱Android Design Support Library新变化（导航视图、悬浮ActionBar）

  

  转载请注明明桑AndroidAndroid5.0Loollipop作为Android最重要的版本之一，为我们带来了全新的界面风格和设计语言。看起来很受欢迎࿰ ... [详细]

  蜡笔小新   2023-12-13 16:11:00
• object

  不同优化算法的比较分析及实验验证

  

  本文介绍了神经网络优化中常用的优化方法，包括学习率调整和梯度估计修正，并通过实验验证了不同优化算法的效果。实验结果表明，Adam算法在综合考虑学习率调整和梯度估计修正方面表现较好。该研究对于优化神经网络的训练过程具有指导意义。 ... [详细]

  蜡笔小新   2023-12-13 16:05:14
• get

  VB.NET在线急等问题解决方法，如何统计数据库字段下的数据并显示在文本框里？

  本文介绍了一个在线急等问题解决方法，即如何统计数据库中某个字段下的所有数据，并将结果显示在文本框里。作者提到了自己是一个菜鸟，希望能够得到帮助。作者使用的是ACCESS数据库，并且给出了一个例子，希望得到的结果是560。作者还提到自己已经尝试了使用"select sum(字段2) from 表名"的语句，得到的结果是650，但不知道如何得到560。希望能够得到解决方案。 ... [详细]

  蜡笔小新   2023-12-13 15:15:30
• byte

  CF：3D City Model（小思维）问题解析和代码实现

  

  本文通过解析CF：3D City Model问题，介绍了问题的背景和要求，并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景，每个网格单元可以作为建筑的基础，建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路，并给出了相应的代码实现供读者参考。 ... [详细]

  蜡笔小新   2023-12-13 14:17:11
• jsp

  springmvc学习笔记(十)：控制器业务方法中通过注解实现封装Javabean接收表单提交的数据

  

  本文介绍了在springmvc学习笔记系列的第十篇中，控制器的业务方法中如何通过注解实现封装Javabean来接收表单提交的数据。同时还讨论了当有多个注册表单且字段完全相同时，如何将其交给同一个控制器处理。 ... [详细]

  蜡笔小新   2023-12-13 12:16:34
• main

  Java学习笔记之面向对象编程（OOP）

  

  本文介绍了Java学习笔记中的面向对象编程（OOP）内容，包括OOP的三大特性（封装、继承、多态）和五大原则（单一职责原则、开放封闭原则、里式替换原则、依赖倒置原则）。通过学习OOP，可以提高代码复用性、拓展性和安全性。 ... [详细]

  蜡笔小新   2023-12-13 08:44:30

李筠惠佩昆琬雯

这个家伙很懒，什么也没留下！

Tags | 热门标签

• dll
• string
• int
• ip
• random
• php
• case
• sum
• yaml
• php7
• cPlusPlus
• grid
• replace
• dagger
• golang
• cpython
• post
• md5
• expression
• get
• python3
• frameworks
• object
• timezone
• python
• bitmap
• byte
• testing
• main
• jsp

RankList | 热门文章

• 1SpringBoot配置拦截器后解决Swagger被拦截的方案
• 2org.apache.commons.validator.Form.containsField()方法的使用和代码示例详解
• 3爬虫05 /scrapy框架
• 4[WPF] 圆角TextBox
• 5使用Frida框架进行Java函数的Hook：基于Frida框架的native函数Hook实现(1)
• 6一篇与众不同的 String、StringBuilder 和 StringBuffer 详解
• 7蜬字意思 在新华字典的读音解释笔画常用组词起名
• 8移动硬盘无法打开的解决方法，急需帮助！
• 9c++二叉树的层序遍历_C#实现二叉树四种遍历(顺序存储结构)
• 10PB调用EXCEL的操作不失为一种好的报表输出方式
• 11使用3DSMAX制作具有逼真质感的玻璃杯
• 12window计算的chk在linux下可以读,Linux系统命令从入门到完全忘记（四）
• 13iOS 两款你可能会用到的弹出框
• 14【洛谷4251】 [SCOI2015]小凸玩矩阵（二分答案，二分图匹配）
• 15BZOJ 1112 POI2008 砖块Klo

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有