HTML5与css3
HTML5
HTML5新增的语义化标签
<header></header>3
<!-- 头部 -->
<nav></nav>
<!-- navbar 导航 -->
<main></main>
<!-- main 主要 主要内容 -->
<footer></footer>
<!-- foot脚 底部 -->
HTML5兼容问题
- IE9 行级元素设置宽度的时候 会失效
- IE8以下的版本,不支持语义化标签
- IE8的内核,无法解析,只能用js替代
HTML5表单的新增
<!-- email -->
邮箱:<input type="email">
<!-- tel -->
电话:<input type="tel">
<!-- url -->
网址:<input type="url">
<!-- number -->
数量:<input type="number" value="0" name="" id="" max="100" min="0">
<!-- color -->
颜色:<input class="color" type="color" name="" id="" >
<!-- 颜色输入框的value 是当前颜色的十六进制 -->
<!-- time -->
时间:<input type="time" name="" id="">
<!-- date -->
日期:<input type="date" name="" id="">
<br>
<!-- datatime -->
日期时间:<input type="datetime" name="" id="">
<!-- 大多数浏览器不支持这个 -->
日期时间:<input type="datetime-local" name="" id="">
HTML5对音频的操作(audio标签)
- autoplay 如果有这个属性 该音频会立即播放
- controls 如果有这个 则会向用户展示控件
- loop 如果出现该属性 则表示当音频结束后 会重新开始
- muted 当出现这个属性的时候 静音
- preload 在页面加载的时候 预备播放 和autoplay冲突
HTML5对视频的操作(video标签)
- src 视频路径
- controls 播放面板
- autoplay 自动播放
- loop 自动循环
- poster 首次进入当前视频的封面图
css3
为了满足各个浏览器的兼容性 所以我们也需要加前缀
-webkit-border-radius:20px;
/* webkit指的是谷歌的浏览器内核 */
-ms-border-radius:20px;
/* ms指的是ie浏览器的内核 */
-moz-border-radius:20px;
/* moz指的是火狐浏览器的内核 */
-o-border-radius:20px;
/* o指的是opera浏览器的内核 */
透明度的表示方式
- rgba(在css3.0中提出的表示颜色的方式,a指的是透明度)
- opacity(透明度)
- transparent 表示全透明
rgba的透密和opcity的透明区别
rgba的不会继承,opcity会继承
动画
transition
/*
transition(参数1,参数2,参数3,参数4)
参数1:发生变化的属性名
参数2:变化的时间(动画时长)
参数3:缓冲曲线
参数4:等待时间
*/
transition: all 3s ease 3s;
贝塞尔曲线
/*
参数3:这个属性可以控制盒子宽度从100px变到400px变化的速度
控制这个速度的变化的过程的算法就叫贝塞尔曲线
特殊值:
linear 匀速动画 cubic-bezier(0,0,1,1)/cubic-bezier(1,1,0,0)
ease-in 先慢后块 cubic-bezier(0.25,0.1,0.25,0.1)
ease-out 先快后慢 cubic-bezier(0,0,0.58,1)
ease-in-out 慢快慢
*/
自定义动画
/*
animation
自定义动画名称
动画时长
缓冲曲线
等待时间
是否停留在终点
播放次数(infinite 表示循环无穷次)
是否交替运动(alternate)
是否暂停(paused)
*/
像定义自定义动画 @keyframes就是关键词
新增属性
新增边框属性
- border-color:为边框设置多种颜色
- border-image:图片边框
- border-radius:圆角边框
- box-shadow:阴影效果
新增背景属性
- background-size:指定背景图片尺寸
- background-origin:指定背景图片从哪里开始显示
- background-clip:指定背景图片从什么位置开始裁剪
新增文字效果
- text-shadow:文本阴影
- word-wrap:自动换行