前端基础8：HTML5新增标签及CSS3新属性 viewport 动画-白红宇

HTML5新增标签

标签名	描述
header	头部
section	区分大模块
nav	导航
footer	尾部
article	文章
aside	侧边栏
audio	音频
video	视频
figure	配图
figcaption	配图说明

audio/video音频视频
- src引入音视频资源的路
- controls 调出控件
- loop循环播放

CSS3新属性

border-radius圆角
- border-top-left-radius左上方圆角
- 值的单位: px em 百分数

box-shadow盒子阴影
- 第一个值是x轴方向的阴影，值为正阴影在右侧，值为负阴影在左侧
- 第二个值是y轴方向的阴影，值为正阴影在下方，值为负阴影在上方
- 第三个值是阴影的模糊度（blur）值不能为负数
- 第四个值阴影的大小不设置大小等于盒子的大小，值为负阴影大小小于盒子的大小
- 第五个值阴影的颜色
  - 十六进制法 #
  - rgba法
  - 关键字red green
- 第六个值默认是外阴outset，内阴影inset

text-shadow 文本阴影
- 第一个值 x轴方向的阴影，值为正阴影在右侧，值为负阴影在左侧
- 第二个值 y轴方向的阴影，值为正阴影在下方，值为负阴影在上方 -第三个值阴影的模糊度，不能为负数
- 第四个值阴影的颜色
  - 十六进制法 #
  - rgba法
  - 关键字red green

box-sizing怪异盒模型
- border-box此时我们在css中设置的宽度包含border和padding值 - content-box正常盒模型 ##pc端项目和移动端项目

pc端项目：在我们的电脑和笔记本上去正常浏览的网页移动端项目：手持设备，手机，平板，kindle -产品形态 -pc端和移动端共用一套项目，一个域名
- 结构简单，内容少 - 膜拜，苹果，华为
- pc端和移动端项目是分离开的两套项目，两个域名
  - 结构比较复杂，内容比较多
  - 淘宝、京东、凤凰移动端
  - 以m/i开头 ##视口 viewport

可视区窗口
- meta:vp + tab回车


     复制代码

##响应式布局 ###媒体查询 @media

媒体类型 |值| 描述| |--|--| |all| 所有设备类型| |print| 打印机| |screen| 电脑，手持设备| |speech| 屏幕阅读发声设备| @media all
- 媒体特性 max-width:600px 小于
  - 等于600像素时执行 -min-width:800px
  - 大于等于800像素时执行

@media all and (min-width:600px) and (maxwidth:800px) ###表单

form

input
- type
  - text文本框
  - password密码框
  - radio 单选按钮
  - checkbox 多选按钮
  - submit 提交
  - button 普通按钮
  - reset 重置按钮
- label
  - for去绑定相应的input 的 id
- select下拉框
  - option
- button按钮
- textarea 文本域 ###background 背景属性

background 背景属性

background-color背景颜色

background-image背景图片

background-repeat 背景重复
- repeatx轴和y轴重复
- repeat-xx轴方向重复
- repeat-yy轴方向重复
- no-repeat不重复

background-position 背景定位
- x y
  - left top right bottom center
  - 具体数值

background-attachment
- fixed 固定

background复合属性
- background: color url() norepeat left top fixed;

background-size背景大小

background-clip 背景裁切（规定背景的绘制区域。）
- border-box默认值，背景从边框部分开始绘制
- padding-box背景从内边距部分开始绘制
- content-box背景从内容区开始绘制

background-origin规定背景图片的定位区域
- padding-box 背景图片从padding部分开始定位
- border-box背景图片从border部分开始
- content-box背景图片从内容区开始定位

添加新的字体样式:

@font-face { font-family:myFirstFont;src:url(font/font02.ttf); } div{ font-family: myFirstFont; }复制代码

动画三兄弟

transform:

可以变换元素的大小，位置，旋转方向，和拉伸

translate: 位置发生变化
- 语法: transform:translate( x , y);
- 单位：（200px,300px） px - x为正，元素向右移动；y为正，元素向下移动
- transform: translateX 元素只发生水平方向的位移
- transform: translateY 元素只发生垂直方向的位移

rotate：旋转方向
- 语法：transform: rotate(-30deg);
- 单位deg度
- 值为正，元素顺时针发生旋转；值为负，元素逆时针发生变化

scale: 缩放（缩小放大）
- 语法：transform：scale（m,n）
- 单位：（2,.5）放大2倍缩小0.5倍 - 第一值：宽度的缩放，大于一表示放大，小于一表示缩小 - 第二值：高度的缩放，大于一表示放大，小于一表示缩小 - skew:拉伸
- 语法:transform: skew(x,y);
- 单位：(30deg,-20deg) 角度
- x:水平方向拉伸；为正，拉伸左上角和右下角
- y:垂直方向拉伸；为正，拉伸左上角和右下角

transition

语法: transition：CSS属性的名称过渡时间时间曲线过渡效果何时开始

transition 属性
- CSS属性名
- 动画持续时间
- 过渡的效果和曲线
  - ease 默认值，慢速开始然后变快，然后慢速结束
  - liner匀速
  - ease-in以慢速开始
  - ease-out以慢速结束
  - ease-in-out以慢速开始，加速，慢速结束
- 规定动画何时开始：过渡开始时间

animation

渐变

线性渐变
- 语法：background: linear-gradient( to top right,yellow,green,blue);

/*默认：从上到下              to right 从左往右              to top 从下到上              to left 从右往左              to top left 从右下 到 左上              to bottom right            */复制代码