html5

h5是h4的升级，它主要用于移动端应用比较多，新的标签语义化更加明确。footer标签为div标签。

声明文档：<!DOCTYPE html> 这是h5的标志
兼容性：支持所有现代浏览器，旧的不支持。在处理兼容性时，使用静态资源库csshack。
csshack：
谷歌：-webkit-border-radium
火狐：-moz-border-radium
IE：-ms-border-radium

html5标签

canvas——绘图标签
通过JS在这个上面进行绘图，他结合cocos-2d引擎可以用来制作网页游戏，qie它是基于JS的绘图API来制作。

新的多媒体标签

video——视频标签

<video src="./mp4/mov-666.mp4" autoplay></video>

其中src是视频路径，autoplay是指自动播放，loop是循环播放，controls属性是视频控制器。

audio——音频文件

<audio src="" autoplay controls loop></audio>

source——视/音频资源文件

<vedio><source src="">
</vedio>

embed——嵌入内容，如插件

<embed src="">

新表单元素

datalist——列表
一般和input连用。其中datalist必须用ID选择器而不能用class选择器。

<input type="text" list="data"/>
<datalist id="data"><option>1</option><option>2</option>
</datalist>

output——输出计算值
结合JS才有用。

新的语义和结构

<!--定义相对页面独立的内容和区域。类似于div标签--><artical></artical>
<!--定义侧边栏，类似于div标签--><aside></aside>
<!--类似于span标签--><bdi></bdi>
<!--显示详细内容，只兼容谷歌--><details><summar>2020-05-02 日志</summar><p>abc</p></details>
<!--定义页脚--><footer></footer>
<!--定义头部--><header></header>
<!--文本突出显示，默认淡黄色--><mark></mark>
<!--定义导航--><nav></nav>
<!--定义了一个0-100，进度为50%的进度条--><meter value="50" min="0" max="100"></meter><progress value="50" min="0" max="100"></progress>
<!--定义内容区域--><section></section>
<!--定义日期--><time></time>
<!--自定义列表--><dl><dt></dt><dd></dd></dl>

CSS3

样式：

border-radius——圆角
四个值分别代表四个角左上，右上，右下，左下；
两个值：第一个代表左上右下，第二个右上左下；
box-shadow——边框阴影

box-shadow：0      0       10px       red;右     下      过渡宽度    阴影颜色前两个值为0即为全边框阴影。
多色过渡：
box-shadow：0 0 30px red，1 2 50px blue；

border-image_边框图像
border-image：url（“”）10px round；
background-image背景图片
background:linear-gradient(90deg,red #fff,blue);或(to bottom right,red,blue);或(90deg,right 10%,yellow 30%);这是线性渐变，径向渐变用radial-gradient,设置形状在括号里加如circle。

文本样式
text-shadow 文本阴影
text-overflow 文本溢出
文本溢出解决办法：

单行溢出：
overflow：hidden；超出隐藏
text-overflow：ellipsis；超出省略
white-space：nowrap；文字不折行
多行溢出：
display：-webkit-box；
overflow：hidden；
text-overflow：ellipsis；
-webkit-box-orient：vertical；
-webkit-line-clamp：3；三行。

CSS3字体文件引入
全局引入：
@font-face{
font-family：字体名;
src:url("");
}

CSS3动画

2D转换（设置2D样式）

代码	含义
translate	平移默认轴心为x轴
rotate	旋转默认轴心为z轴
scale	伸缩
skew	变形

<style>.box{transform:translatex(20px);//沿x轴正方向平移20px；transform:rotatex(45deg);//绕x轴旋转45度transform:scale(1,2);//宽变为原来的一倍，高变为原来的两倍。若为一个值则宽高改变的量相同。transform:skew(45deg,30deg);//x轴水平倾斜45度，y垂直30度。}
</style>

设置旋转中心：
transform：rotate(45deg);
transform-origin:100% 100%;
上述操作之后旋转中心转移到了右下角。
注意：旋转和平移具有先后顺序，县旋转会改变平移方向，后旋转不改变。

3D
transform-style：preserve-3d；就能把模型转化为立体的。transform：rotatex(45deg) rotatey(45deg);通过旋转即可看到立体模型。
perspective是设置从何角度查看图形的，设置其透视效果。

过渡动画
过渡的是css样式属性。过渡一定要有过渡样式的设置。
transition-delay：过渡延迟；
transition-duration：过渡时间；
transition-property：过渡属性；
transition-timing-function：过渡方式。
过渡方式：
ease 低速开始中间加快，后逐渐变慢
ease-in 低速开始
ease-in-out 低速开始低速结束
ease-out 低速结束
linear 匀速过渡
复合的过渡：transition：border-radius 1s(延迟时间) .5s(持续时长) linear，box-shadow .5s linear;多重动画过渡中间用逗号隔开。

动画
1、定义动画播放器

<!--法1-->
@keyframes 动画名{from{transform:translatex(0px) rotatez(0deg);}to{transform:translatex(500px) rotatez(360deg);}
}
<!--法2-->
animation:动画名 3
@keyframes 动画名{0%{top:0;}20%{top:30px;}100%{top:40px;}
}

2、加入动画

复合格式：animation:动画名 4s linear;
延迟时间：animation-delay:2s;
动画持续时间：animation-duration:4s;
动画方式：animation-timing-function:linear;
动画名称：animation-name:name;
动画播完位置：animation-fill-mode:forwards(停留)backwards(返回)none；
播放次数：animation-iteration-count:3/infinite(循环播放)；
播放方向：animation-direction:alternate(奇数次正向播放，偶次反向)reverse(反向播放);
动画状态：animation-play-state:running/paused;

在制作一个盒子滚动时，from处和to处分别添加一个颜色即可实现颜色的缓慢过渡：

   <style>.box{width: 200px;height: 200px;border: 1px solid #000;text-align: center;line-height: 200px;/*加入动画*/animation:boxanimate 3s ease-in infinite alternate;}.box:hover{animation-play-state: paused;}@keyframes boxanimate {from{transform:translatex(0px) rotatez(0deg);background-color: rgba(125, 210, 241, 0.67);}to{transform:translatex(800px) rotatez(360deg);background-color: rgba(241, 106, 223, 0.64);}}</style>

移动端响应
<meta name="viewport" content="width=device-width initial-scale=1.0">

css3弹性盒子
flex:1;均分，后面的数字未分配比例。
diplay:flex;flex-direction:column;
justify-content：center(水平居中)；space-between(平分中间间隙)
align-self：center(垂直居中)；

CSS多媒体查询
根据不同的设备显示不同的box，若不加限制条件则所有屏幕共有样式。

代码	功能
all	所有设备
screen	屏幕设置：电脑，ipad，手机
print	打印设备
not print	不含打印设备

写大小限制时注意min-width要从小到大写，max-width要从大到小写。

@media screen and(min-width:320px;){.box{width:310px;}
}
@media screen and(min-width:768px;){.box{width:758px;}
}
<!--还可以写成区间形式-->
@media screen and(min-width:320px;)and(max-width:768px;){.box{width:100%;}
}
<!--一般使用外部css文件-->
<link rel="style-sheet" href="" media="screen"and(min-width:320px)/>

css3选择器
属性选择器

<style>input [type]{};选择inputinput [type=text]{}; 选择类型是text的inputinput [type=text][name=user]{};选择类型是text，且name为user的所有input元素input[type $=t]{};选择以t结尾的，^=t 以t为开头的 *=t 包含t的
</style>
<input type="text" name="user"/>

选择器	作用
p~ul	选择前面有p的所有ul元素
+	选择之后的第一个元素
：before	选择内容之前
：after	选择内容之后

HTML5和CSS3的一些小总结相关推荐

html5行走的机器人,html5 css3实例教程一款html5和css3实现的小机器人走路动画
之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...
html5游戏角色行走,html5 css3实例教程一款html5和css3实现的小机器人走路动画
之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...
《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——第1章变小的巨大影响1.1　移动魔力和掌上电脑...
本节书摘来自异步社区<iOS应用开发指南--使用HTML5.CSS3和JavaScript>一书中的第1章,第1.1节,作者: [美]Kristofer Layon 更多章节内容可以访问云 ...
《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——导读
本节书摘来自异步社区<iOS应用开发指南--使用HTML5.CSS3和JavaScript>一书中的目录,作者 [美]Kristofer Layon,更多章节内容可以访问云栖社区" ...
21天学通HTML5和CSS3第二版,21天学通HTML5+CSS3
本书全面.系统.深入地讲解了HTML5+CSS3网页设计与编程的基础语法与高级应用.在讲解过程中,通过大量取自实际操作的实例,将网页开发知识全面.系统.深入地呈现给读者.此外,作者专门为本书录制了大量 ...
【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！
目录 [实战HTML5与CSS3 第一篇]初探水深,美丽的导航,绚丽的图片爆炸!! [实战HTML5与CSS3 第二篇]绚丽的快速导航! [实战HTML5与CSS3 第三篇]我第一个HTML5网页诞生 ...
零基础学HTML5和CSS3前端开发第一课
课程目标: 使用HTML5进行网站布局使用CSS3进行网站美化开发精美的商业网站第一章 HTML5基础概念: 网页 :互联网的基础,网络页面,网页:文字.图片.声音.视频.VR虚幻等:网站:淘 ...
Html5和Css3扁平化风格网页
前言扁平化概念的核心意义去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让"信息"本身重新作为核心被凸显出来.同时在设 ...
HTML5与CSS3权威指南笔记案例1
第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...
实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！
[实战HTML5与CSS3 第一篇]初探水深,美丽的导航,绚丽的图片爆炸!! [实战HTML5与CSS3 第二篇]绚丽的快速导航! [实战HTML5与CSS3 第三篇]我第一个HTML5网页诞生了(提 ...

HTML5和CSS3的一些小总结

html5

html5标签

CSS3

CSS3动画

HTML5和CSS3的一些小总结相关推荐

最新文章

热门文章