HTML5和CSS3_qq_43479942的博客-程序员ITS301

技术标签: html5  css3  

HTML5

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。

HTML5新特性

HTML5 中的一些有趣的新特性:
(1)用于绘画的 canvas 元素
(2)用于媒介回放的 video 和 audio 元素
(3)对本地离线存储的更好的支持。localStorage长期存储数据,浏览器关闭后数据不丢失,数据一直保留到通过javascript删除或者用户清除浏览器缓存;sessionStorage的数据在浏览器关闭后自动删除。H5的离线存储方式主要就是这两种。
(4)新的特殊内容元素,比如 article、footer、header、nav、section
(5)新的表单控件,比如 calendar、date、time、email、url、search
(6)新的技术:webworker、websoket、Geolocation

新增语义标签<header>头部标签</header>
            <nav>导航栏标签</nav>
            <section>某个区域</section>
新增视频标签<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>
新增音频标签<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
新增input表单邮箱: <input type="email" />
            网址: <input type="url" />
			日期: <input type="date" />
			时间: <input type="time" />
			数量: <input type="number" />
			手机号码: <input type="tel" />
			搜索: <input type="search" />
			颜色: <input type="color" />
新增表单属性  required="required" placeholder="CSS3" autofocus="autofocus" autocomplete="off" multiple="multiple"-->
/*placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
multiple 属性规定输入字段可选择多个值。如果使用该属性,则字段可接受多个值。multiple 属性使用欧冠与以下 <input> 类型:email 和 file。*/

CSS3

CSS3 是最新的 CSS 标准。
CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。
一些最重要CSS3模块如下:
(1)选择器
(2)盒模型
(3)背景和边框
(3)文字特效
(4)2D/3D转换
(5)动画
(6)多列布局
(7)用户界面

(1)CSS3实现圆角(border-radius),阴影(box-shadow)
给盒子添加阴影box-shadow:h-shadow v-shadow (blur spread color inset)
水平阴影的位置 垂直阴影的位置 模糊距离 阴影尺寸 颜色 内(inset)外(outset)阴影
(2)对文字加特效(text-shadow),线性渐变(gradient),旋转(transform)
文字阴影text-shadow::h-shadow v-shadow (blur color)
(3)transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转、缩放、定位、倾斜
(4)增加了更多的CSS选择器 多背景 rgba; ragb(0,0,255,0.5)//最后定义的透明度
(5)::selection
    匹配元素中被用户选中或处于高亮状态的部分
(6)媒体查询
    @media CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示
    多栏布局
(7)border-image
图像变模糊filter: blur(15px);blur是一个函数 小括号里面数值越大,图片越模糊 注意数值要加px单位 */
过渡效果   /* transition: 变化的属性 花费时间 运动曲线 何时开始;*/
   /* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要多个属性都变化,属性写all就可以了 */
			transition: all 0.5s;
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43479942/article/details/104856821

智能推荐

全新再升级,南卡Runner Pro2骨传导耳机帅毙了_数码科技先锋官的博客-程序员ITS301

骨传导耳机,是近些年新崛起的一个新品种耳机,而这其中,当数南卡这个品牌为其中的姣姣者,我个人也是从实际的使用体验,实测,对于南卡骨传导耳机的技术、制作工艺、硬件配置等得出的综合评价。就拿刚刚到手的这款南卡新品Runner Pro2来聊一聊吧,这款南卡Runner Pro2包装主打运动元素,一个踩着滑板的追风少年开启南卡骨传导的神秘面纱。南卡Runner Pro2有黑和白+灰两种配色,而我到手的是白+灰这个颜色,耳机跟纯白色的内包装起到一个精致的即视感,舒服。配件不多,南卡Runner

基于java springboot vue elementui超市管理系统源码_计算机毕业设计大师的博客-程序员ITS301

大等于jdk1.8,大于mysql5.5,idea(eclipse),vscode(webstorm)代码注释齐全,没有多余代码,适合学习(毕设),二次开发,包含论文技术相关文档。统计分析:查看用户,商品,销售数量;采购管理:商品采购信息增删改查。销售管理:用户订单信息增删改查。管理员管理:后台管理员增删改查。会员管理:会员信息增删改查。分类管理:商品分类增删改查。供应商管理:供应商增删改查。商品管理:商品增删改查。......

报错,,求大佬解答_十分放心的的博客-程序员ITS301

Exception in thread "AWT-EventQueue-0" 8090java.lang.NullPointerException at ui.MainFrame.setport(MainFrame.java:149) at ui.MainFrame.lambda$1(MainFrame.java:89) at javax.swing.AbstractBut...

Node.js使用request+cheerio进行数据采集_MaiTian丶的博客-程序员ITS301

用node.js写了个自己的网站(www.wb233.cn),想在自己的网站首页展示自己在CSDN的博客名称,和跳转到相应的地址,所有就打算用爬虫来做,抓取网站上的博客名称和文章的url。一、使用npm命令安装request和cheerio模块:npm install requestnom install cheerio二、request是模拟http请求的,当然也可以很完美的伪装成浏览...

Visual Studio 2019 C语言程序(VS2019 C语言)_陆老师Peter的博客-程序员ITS301

编写C程序1 选择创建新项目2 选择空项目,单击下一步3 填写项目名称(生成的文件夹名称和工程名都是这个),我这里填入hello,保存位置选择为桌面,此时应该在工程建立ok后,桌面会生成一个hello的文件夹,勾选解决方案和项目放在同一目录中,便于调试。全部勾选完成后,单击创建。注意,此时电脑可能会短暂卡死,正常现象稍等几秒就好。4 添加c文件 上一步创建完成后,会得到如下界面,接下来添加源文件 在左侧的解决方案目录下,选中源文件,右键单击,选...

oracle使用sqlLoad实现超大数据量导入_Birds_Cerebrum的博客-程序员ITS301_oracle大数据量入库sqlload

最近再做项目的时候遇到了一个问题,poi导入excle数据太慢(数据量比较大),不得不另寻他法,在网上找了找,发现oracle 自带的sqlLoad方法导入数据量比较大的文件的时候真的很快,所以就用这种方式试着做了一下,一下是代码:java接收文件的代码:/** * 数据导入的方法 * * @param request * @param response * @ret

随便推点

Android SDK、iOS SDK、H5 SDK免费下载!_mouruikeji2021的博客-程序员ITS301_android ios sdk下载

老子云SDK核心技术包括模型3D展示和编辑、场景展示与应用、用户参与设计与互动和个性需求定制化等。该技术免费开放,将帮助开发者快速实现3D模型跨多平台应用开发(如PC端、安卓、IOS等),确保模型在跨平台处理过程中,实现无人工和批量化,解决模型 应用规模化刚需。登入老子云开放平台,注册认证后,不管是企业用户还是个人开发者,均可免费下载SDK。...

【opencv】VS2015+opencv2.4.13 GPU模块编译_BHY_的博客-程序员ITS301

这个本来不是新鲜事情了,但是在编译的时候出现了一些问题,不得不去百度,发现很多文章赘述太多,所以还是记录一下,我这里下载的是opencv2.4.13.4,2017年10月12日的版本。1.点[Brouse Source…],选择OpenCV源码那个sources文件夹的路径。 点[Brouse Build…],选择要生成的工程的路径。如下图:2.点击

python实现注册表拦截_Python实现操纵控制windows注册表的方法分析_鹤栖梧桐的博客-程序员ITS301

python里面的注册表怎么进去在Python的标准库中,_winreg.pyd可以操作Windows的注册表,另外第三方的win32库封装了大量的Windows API,使用起来也很方便。不过这里介绍的是使用_winreg操作注册表,毕竟是Python自带的标准库,无需安装第三方库。如何使用python修改注册表1. 打开注册表 RegOpenKey(key, subkey, reserved,...

Docker 安装 redis,并配置持久化,redis默认的redis.conf文件_是小晴晴呀的博客-程序员ITS301_docker redis.conf

1. docker pull redis:6.0.82.命令提醒:容器卷记得加入--privileged=true3.本机建立文件夹,用来映射容器卷 建立 /mytest-docker/redis 建立 redis.conf文件 修改里面的内容 (随便拷贝一个已经安装过的redis.conf 如果没有,下面我贴附了 redis 出厂默认的 conf 文件允许redis外地连接 必须 注释掉 # bind 127.0.0.1修改 daem...

2005的问题,转_天鹅梦的博客-程序员ITS301

<br />用VC2003一直很爽,到新公司要用2005,早听说其检查严格,没想到,完全是没事找事型的编译器.<br />且不说满屏幕的:<br />"警告 4 warning C4819: 该文件包含不能在当前代码页(936)中表示的字符。请将该文件保存为 Unicode 格式以防止数据丢失 "<br />运行个MFC的东西就报"由于应用程序的配置不正确,应用程序未能启动"<br />一查才知道,这是05的特权,缺少动态库也不说,直接报个配置不正确,Fuck.不如直接弹出个警告框"程序无法运行"适用性更大

redis 缓存击穿 看一篇成高手系列3_hjm4702192的博客-程序员ITS301

什么是缓存击穿在谈论缓存击穿之前,我们先来回忆下从缓存中加载数据的逻辑,如下图所示因此,如果黑客每次故意查询一个在缓存内必然不存在的数据,导致每次请求都要去存储层去查询,这样缓存就失去了意义。如果在大流量下数据库可能挂掉。这就是缓存击穿。场景如下图所示:我们正常人在登录首页的时候,都是根据userID来命中数据,然而黑客的目的是破坏你的系统,黑客可以随机生成一堆userID,然后将这些请求怼到你的...

推荐文章

热门文章

相关标签