HTML5与CSS3基础知识

HTML5超文本标记语言

• 新增语义化标签：header、footer、main、nav等等
• 新增多媒体功能：视频、音频
• 新增画布功能canvas功能
• 新增存储功能（本地存储、会话存储）
• 新增移动端开发

css3

• 背景系列样式
• 选择器
• 新增动画功能（2D、3D）
• 圆角、渐变、字体、文本效果、过渡

语义化标签

语义化标签便于浏览器底层解析，有助于网站优化
页面结构清晰，便于代码维护与管理
良好的html架构，利于搜索引擎建立索引和抓取

HTML5 特性

1.标签可省略type属性
2.标签的属性值可省略双引号

布局标签

1.header头部标签
2.footer底部标签
3.main 网页主要部分
4.nav 导航标签
5.aside 侧边栏标签
6.section 段落标签
7.article 文章标签

小语义化标签

1.address 地址 ->标签文本无非倾斜，百度地图名片->
地图名片生成器
2.bdo 设置文本方向
  dir属性：ltr（左到右）；rtl（右到左）
3.cite 引用文本 <cite>杜甫</cite>
4.code 引用代码，使用code标签包裹
5.details 标签需要结合summary标签使用
6.pre 预保留格式标签，文本编写，页面怎么显示
7.ruby 文字上加拼音效果，结合rt标签使用
  <ruby>小猪皮<rt>xzp</rt></ruby>
8.template 标签内部嵌套的文本、子元素不可见

新增的表单元素

1.input type-> range 区间选择滑动条
  min-最小值，max最大值
  type-> color 颜色选择器
  type-> date 日历选择框 年/月/日
  type-> week 第几周
  type-> time 时间
  type-> email 邮箱
  type-> url 网址
  type-> search 搜索框
  type-> number 计数器 step 步数大小
  type-> submit 提交按钮
2.placeholder 占位符 - 结合文本框使用，提示文本
  disable 禁用输入框
  autofocus 自动聚焦
  <input type='text' autofocus />
  readonly 只可以读取数据，不能输入
  datalist 
  <input type='text' list='box' />
  <datalist>
    <option>js</option>
    <option>html</option>
  </datalist>

视频【video】

• video基本属性讲解

  视频支持格式：MP4、ogg、webM
  video 内联双闭合标签，src视频路径，默认宽高300 *150
  video 内联双闭合标签，src视频路径，默认宽高300 * 150；
  controls -> 视频控制，显示默认控制条
  poster -> 视频封面
  autoplay -> 自动播放，IE11可以，Google浏览器需要静音
  muted -> 静音
  loop -> 视频循环播放

• video-js控制的方法

let video = document.querySelector('video');
video.play(); // 播放
video.pause(); // 停止
// 获取/设置 视频时间
video.currentTime;
video.currentTime = 60;
// 获取视频总时长
video.duration
// 获取/设置视频音量
video.volume;
video.volume = 1; // [0, 0.5, 1]
// 监测视频的事件
video.onplay = function(){
  // 播放视频执行函数
}
video.onpause = function(){
  // 视频停止执行函数
}
video.ontimeupdate = function(){
  // 视频播放时间发生改变，执行函数
}

音频【audio】

支持音频格式：MP3，ogg，wav；
音频无poster封面，其它与视频一致

浏览器的存储功能

1.本地存储 localStorage
  存储数据上限 5MB

// 本地存储新增
localStorage.setItem('name','xzp');
// 本地存储与会话存储->字符串，对象需要使用 JSON.stringify()
localStorage.setItem('goto',JSON.stringify({age:18}));
获取数据
let name = localStorage.getItem('name');
let obj = JSON.parse(localStorage.getItem('goto'));

2.会话存储 sessionStorage
  与本地存储几乎一致
  数据存储为非持久化的，页面关闭即消失

选择器

1.属性选择器
  div[class='xzp']{}
  input[name^='xzp']{}
2.子类选择器
  div:fist-child{}
  div:last-child{}
  匹配父节点的N个索引值
  div:nth-child(n){} // 单数
  div:nth-child(2n){} // 双数
  p:first-of-type{} // 匹配父元素内部P元素的第一个子节点
  p:last-of-type{} // 匹配父元素内部P元素的最后一个字节点
  div:nth-of-type(index){}
3.关系型选择器
  A+B {} a标签同级的相邻的b标签
  a~b {}
4.伪类选择器
  div:hover,div:disabled,input:focus，input:empty
5.伪选择器（双冒号）
  div::first-letter{} // 段落的首字符
  div::first-line{} // 段落的第一行
  div::section{} // 选中文本

伪元素（after，before）

1.双闭合标签->伪元素
2.伪元素拥有content属性
3.伪元素脱离文档流
div::after{}
div::before{}

border-radius 圆角设置

border-radius: [lt]px/% [rt]px/% [rb]px/% [lb]px/%;
圆角->左上，右上，右下，左下

shadow 阴影

1.box-shadow 盒子阴影（外阴影）
  box-shadow: 2px 2px 3px green,
              4px 4px 3px yellow;
右侧阴影x轴，底部阴影y轴，阴影模糊程度（越大越模糊），
阴影颜色；阴影可以写入多个。
  box-shadow: inset 2px 2px 3px green;
  内部阴影
2.text-shadow 文本阴影
  与盒子阴影参数一致（无内部阴影）

background-origin

设置背景图的起始位置
border-box,padding-box,content-box；
默认padding-box

background-clip

背景图裁切
border-box,padding-box,content-box,text；
裁切掉区域以外的部分，text需要考虑兼容问题，
相当于给文字加背景

浏览器前置

Google -webkit-
Firefox -mz-
IE -ms-

transition 过渡动画

过渡动画需要事件触发
样式属性需发生变化
transition: 过渡动画的属性(transition-property),
过渡动画的事件(transition-duration),
过渡动画的速率(transition-timing-function),
过渡动画的延迟时间(transition-delay);
transition-timing-function -> linear：均速
ease-in：慢速开始过渡动画
ease-out：慢速结束过渡动画
ease-in-out：慢速开始，慢速结束
ease：慢速开始，慢速结束

.test{
  margin: 100px auto;
  background-color: lightpink;
  width: 250px;
  height: 250px;
  /* transition: width 3s linear 0s,
              height 4s linear 0s; */
  transition: all 3s linear 0s;
}
.test:hover{
  width: 400px;
  height: 400px;
}

transform 变换

2D动画：比例缩放（scale），平移（translate），旋转（rotate)

/* 
  元素等比缩放，大于1放大，小于1缩小
  参数w，宽放大缩小比例，参数h，高放大缩小比例
  参数无单位，.5=0.5
 */
transform:scale(w,h);
transform:scale(5,5);
/* 旋转中心是元素的几何中心进行旋转，单位deg */
transform:rotate(30deg)
/* 平移：参数x，x轴平移；参数y，y轴平移；单位为px */
transform:translate(x,y);
transform:translate(10px,5px);

3D动画：3D旋转，3D平移
需要嵌套于父元素中，父元素需要设置景深perspective

/* 3D旋转 单位deg */
transform:rotateX();
transform:rotateY();
transform:rotateZ();
transform:translateX();
transform:translateY();
transform:translateZ();

animation动画

给元素添加动画--综合、复合样式
animation: 动画名称 动画总时间 动画速率 动画延迟时间
动画执行次数;

/* 声明动画 */
@-webkit-keyframes try-test{
  from{
    left:0;
  }
  to{
    left:100px;
  }
}
/* 动画调用 */
.div-animation{
  animation: try-test 2s linear 0s 5;
}

flex布局（弹性布局）

容器设置为弹性布局
.container{
  display:flex;
  display:inline-flex; // 行内元素
}
设置flex布局，子元素的float、clear、vertical-align失效

容器的属性

1.flex-direction->主轴方向，row(水平)，row-reverse(反向水平)；
  竖轴方向，column(竖直)，column(竖直反向)
2.flex-wrap->换行，nowrap(默认)，wrap，wrap-reverse
3.flex-flow:flex-direction flex-wrap;
4.justify-content->flex-start，flex-end，center，space-between，space-around
  主轴对齐方式
5.align-items->交叉轴对齐方式
  flex-start，flex-end，center，baseline，stretch
6.align-content->多根轴线对齐方式
  flex-start，flex-end，center，space-between，space-around，stretch

项目的属性

1.order 排序顺序
2.flex-grow 放大比例
3.flex-shrink 缩小比例
4.flex-basis 多余空间分配
5.flex: flex-grow flex-shrink flex-basis;
6.align-self 单个项目对齐方式
  flex-start，flex-end，center，baseline，stretch

px、em、rem区别

px->相当于显示器的分辨率而言的
em->相对父元素的字体大小而言的
rem->相对html根元素的字体大小而言的，css3新增元素

回流与重绘

回流->渲染树元素大小、结构或某些属性发生变化，浏览器重新渲染部分或全部页面。
  更改dom元素(插入、删除、更新、移动)、样式添加或删除
  窗口大小改变、字体大小改变、伪类激活、改变样式属性
  更改元素的className、位置计算、修改页面内容
重绘->页面元素样式发生改变且不会影响元素在文档流中的位置
  重绘示例：color、background-color
避免频繁回流与重绘：
1.减少table布局
2.减少css表达式的使用
3.减少dom操作
4.对于复杂的动画元素使用绝对定位，脱离文档流
5.减少使用内联样式

BFC触发方式

• 设置浮动元素flat
• overflow不为visible
• dispaly:inline-block / table
• position:absolute / fixed

触发bfc作用

防止垂直方向margin重叠（margin塌陷）
不与浮动元素重叠
清除元素内部浮动

绘制三角形

设置边框宽度，其他三个边框设为透明

div{
  height: 0;
  width: 0;
  border: 10px solid;
  border-color: pink transparent transparent transparent;
}