-
html5是html4 升级， html5适用于移动端 和pc端都可以，px % rem em
移动端使用相对单位 ： rem em
移动端布局： flex(弹性布局) ，多列布局 ，移动端也可以使用固定布局（浮动）
html5 移动端自适应 meta标签
css3里面媒体查询 根据分辨率不同加载不同的效果
html5和html4的区别： html5语义化更明确
div span header footer sesstion
兼容性处理（浏览器不识别html5) ：
使用csshack 来写
IE 9 一以下对html5 支持不好 可以写兼容处理
html5 js 远程cdn
[IF lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
下面这个是国内的静态资源库 处理方案更好
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]
2.html5新元素
2-1canvas 绘图元素 后边js回使用canvas api来绘图
canvas-cocos2d游戏引擎 网页游戏开发,绘制网页特效
2-1多媒体元素：
属性： autoplay 自动播放
controls 控制器
loop 循环播放
muted 静音
audio 音频播放器
video 视频播放器
source 类似src 属性
<audio src="./map4/1602054196443-mov_bbb.mp4" autoplay controls loop muted></audio>
<video src="./map4/1602054196443-mov_bbb.mp4" controls></video>
<video controls>
<source src="map4/1602054196443-mov_bbb.mp4" type="video/mp4">
</video>
2-3 新的表单元素：
datalist 这个元素和input得联用
output 标签类似span 输出
keygen 规定用于表单密钥
<input type="text" list="ipt"/>
<datalist id="ipt">
<option>a</option>
<option>ab</option>
<option>abc</option>
<option>abcd</option>
<option>abcde</option>
<option>abcdef</option>
</datalist>
2-4新的结构元素： 都是div
主要记：article aside bdi header footer nav section
article 标签 定义相对页面独立的区域（就相当于div）
aside 标签 定义侧边栏的
bdi 标签 定义相对文本独立（隔离 类似span）
details 描述文档的细节 浏览器支持谷歌和苹果
dialog 提示框
header 定义头部区域
footer 定义底部区域
mark 突出显示，变成了黄色
nav 标签 定义导航
section定义区段标签，相当于p标签
time 时间标签
address 地址标签
<details>
<summary>个人信息</summary>
<p>
标签规定了用户可见的或者隐藏的需求的补充细节。
标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在
元素的内容对用户是不可见的，除非设置了 open 属性。
</p>
</details>
<dialog open>
信息提示
</dialog>
进度条：
<meter value="10" max="100"></meter>
<progress value="20" max="100"></progress>
2-5 input里面html5
<input type="color"/>颜色选择
<input type="date"/>日期
<input type="datetime-local"/>
<input type="email"/> 不认
<input type="month"/>
<input type="range"/>
<input type="week"/>
<input type="time"/>
<input type="tel"/>
<input type="number"/>
- svg 使用：
了解 - 表单更新的属性：
autocomplete on 开启表单输入智能提示 off 关闭智能提示， 浏览器默认存在这个功能
novalidate 表单不验证
autofocus 自动获得焦点
表单上验证数据格式的
pattern="\d+" title=“请输入纯数字…”
-
css3， 升级的css2，多了动画 选择器之类 布局
5-1.边框
圆角
border-radius: 10px 20px 30px 40px;//左上，右上，右下，左下
border-radius: 10px 20px 30px;
border-radius: 10px 20px;
border-radius: 10px;
border-bottom-left-radius: 20px;
5-2 阴影
box-shadow:0 0 10px #000;
box-shadow:0 0 20px #000 inset; //阴影的偏移右偏移，下，颜色范围，颜色 设置内阴隐
5-3边框图片
border-image: url("./img/border.png") 30 30 round;
/*border-image-source: url("./img/border.png");*/
/*border-image-width: 30px;*/
/*border-image-slice:30;*/
/*border-image-outset:0;*/
/*border-image-repeat: round;*/
背景截取
5-4css3 渐变
.box2{
border-radius: 50%;
closest-side:半径为从圆心到最近边
closest-corner:半径为从圆心到最近角
farthest-side:半径为从圆心到最远边
farthest-corner:半径为从圆心到最远角
background: radial-gradient(farthest-side at 150px 50px,#fff,#ff65e6);//圆形渐变
}
.box1{
background: linear-gradient(to left,#fff 20%,#fb1aff);//还有0和180，线性渐变
}
5-5css3 文本效果
font-size: 3rem;
display: inline-block;
width: 100px;
border: 1px solid red;
/*下面这三个是单行溢出省略*/
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
/*多行溢出省略*/
/*display: -webkit-box;*/
/*overflow: hidden;*/
/*text-overflow: ellipsis;*/
/*-webkit-line-clamp:3;*/
/*-webkit-box-orient: vertical;*/
word-wrap: break-word;
下面这个属性是控制单词换行 是否截断换行
break-all 截断换行
keep-all 全单词换行
word-break: break-all;//都折断
word-wrap: break-word；//只折断长的部分
5-6文字阴影
text-align: center;
text-shadow: 2px 2px 2px #ff15f8,
4px 4px 4px #6e42ff,
6px 6px 6px #30aaff,
8px 8px 8px #5affdf;//可单个可多个
5-7css3里面的2d转化： 旋转 平移 拉伸 缩放
5-7-1添加2d转化：
transform
2d转换 到3d transform-style:preserve-3d;
设置转化中心的 宽和高类设置 transform-origin:50%;
5-7-2平移
translate() 默认x
translatex(100px)
translatey(100px)
translatez(100px) //越往上越小
translate3d(100px,20px,0)
5-7-3 缩放
scale
scale(1)
scale(1,2) //宽高比例
5-7-4 旋转
rotate z 默认
rotatex
rotatey
rotatez
5-7-5 拉伸
skew
skew(45deg,10deg)
skewx(45deg)
skewy(45deg)
5–8 css3 3d 转化
transform-style:preserve-3d; 可以将2d转化为三维
rotate3d(1,1,1,45deg) 前三个值 那个为0不转
transform: rotate3d(0,1,0,180deg);
转3d 之后使用：
rotate3d(1,1,1,30deg) scale3d(.5,.5,.5)
perspective: 1px;*
调3d元素底部位置
perspective-origin:50px 50px;
5-9 css3里面的过渡：
/设置过渡延迟/
transition-delay: 1s;
/设置过渡的时间/
transition-duration: .5s;
/设置过渡属性 如果过渡的属性比较多 其他的一样 可以写成all 也可以使用逗号连写/
transition-property: text-shadow;
/设置动画的方式 linear ease ease-in ease-out ease-in-out/
transition-timing-function:linear;
/* transition:text-shadow .5s linear,font-size .5s ease-in;*/
transition:all .5s linear;
css3里面的动画
animation 动画属性 @keyframes 动画播放器
@keyframes animte_1 {
/*这个里面两种写法
from to
0% 100%
*/
from{
}
to{
}
0%{
}
100%{
}
}
/*
css3动画
animation: ;
*/
/*/!*动画执行的次数 number infinite*!/*/
/*animation-iteration-count: 2;*/
/*/!*播放方式*!/*/
/*animation-direction:alternate;*/
/*/!*动画的延迟*!/*/
/*animation-delay: 1s;*/
/*/!*动画的时间*!/*/
/*animation-duration: 5s;*/
/*/!*播放完成的位置*!/*/
/*animation-fill-mode: forwards;*/
/*/!*动画名称*!/*/
/*animation-name: animte_1;*/
/*/!*动画的状态 running paused*!/*/
/*animation-play-state: paused;*/
/*/!*动画的运动方式*!/*/
/*animation-timing-function: linear;*/
animation: animte_1 1s .5s linear infinite alternate;
总结：1. 块元素的水平加垂直居中解决方法
.box{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
border: 1px solid red;
}