HTML5+CSS新增入门超详细笔记

HTML5新增布局和表单标签

<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签

一、audio音频

• autoplay自动播放
• constrols向用户显示播放控件
• loop循环播放
• src（url）音频地址

二、video视频

<video src = "" constrols>

• autoplay自动播放
• constrols向用户显示播放控件
• loop循环播放
• preload
  • auto预先加载视频
  • none不应该加载视频
  • 有autoplay忽略该属性
• src（url）视频地址
• poster（imgurl加载等待画面图片）
• muted静音播放

三、表单属性input表单

type = "email（必须输入Email类型）| url | date | time | month | week | number | tel（手机号码）| search（搜索框）| color（生成一个颜色选择表单）"

• required（内容不能为空）
• placeholder = “提示文本”（表单提示信息，存在默认值将不显示）
• autofocus（页面加载完成自动聚焦到指定表单）
• autocomplete = "off | on "
• 用户开始键入时，浏览器基于之前键入过的值，显示在字段中填写的选项，需要放入表单内，同时加上name属性，同时提交成功。默认on
• multiple（抗议多个文件提交）

CSS的新增特性

一、选择器

1. 属性选择器

• E[att（选择具有att属性的E元素）

• att = “val”（选择具有att属性且属性值等于val的E元素）

• att^ = “val”（匹配具有att属性且值以val开头的E元素）

• att$ = “val”（匹配具有att属性且值以val结尾的E元素）

• att* = “val”（匹配具有att属性且值中含有val的E元素）]

  input[value]{}
  input[type = text]{}
  input[type^ = te]{}
  

2. 结构伪类选择器

• E : first-child（匹配父元素中的第一个子元素E）

• last-child（匹配父元素中最后一个E元素）

• nth-child(n)

  • 匹配父元素中的第n个子元素E，n可以是关键字：even（偶数）| odd（奇数），n可以是公式

• first-of-type（指定类型E的第一个）

• last-of-type（指定类型E的最后一个）

• nth-of-type(n)（指定类型E的第n个）

  <ul>
      <li></li>
      <li></li>
      <li></li>
  </ul> 
  
  <!--
  ul li :first-child {} 
  ul li : 2th-child {} 
  ul li : nth-child(even) {} 
  ul li : nth-child(n) {}
  -->
  
  <!--nth-child(n)只有子元素（全是li）时候才能用n来寻找；nth-of-type(n)直接找到子元素（找到li为止）然后根据子元素找到第n个-->
  

3. 伪元素选择器

• element::before | after {}（元素内容前/后插入内容）
• before和after创建一个元素，属于行内元素。创建的这个元素在文档树中找不到，所以称为伪元素。
• before和after必须有content属性
• 与标签选择器一样，权重为1

二、盒子模型

border-sizing : border-box; /*盒子大小为width，包括内边距和边框*/

三、图像模糊处理

filter : blur(); /*数值越大，图片越模糊*/

width = calc(100% - 30px); /*可以进行+、-、*、/计算，永远比父盒子小30px*/

四、 过渡

transition : 要过渡的属性 花费时间 运动曲线 何时开始;（谁做过渡给谁加）

• 属性：宽度高度颜色背景边距都可以，想要改变所有属性写all

• 花费时间：以秒为单位，需要写单位。eg：0.5s

• 运动曲线：默认ease

• 何时开始：默认0s，必须带单位

  div {
  	width : 20px;
  	height : 20px; 
  	color : #000; 
  	transition : width .5s ease, height .5s ease;
  } 
  
  div:hover{
  	width : 40px;
  	height : 40px;
  }
  

五、转换（transform）

1. 2D转换

• transform : translate(X, Y) | translateX(X) | translateY(Y)
• 不影响其他盒子大小
• transform : rotate(n deg)
  • 设置旋转角度，以自身中心为中心
• transform-origin : X Y;
• 设置旋转点位置，默认两个50%。可以跟方位名词left、bottom、top、right、center）
• transform : scale(X, Y);
  • 里面为数字不加单位，为倍数。只有一个数默认宽度高度均为该数等比例缩放）
  • 以中心点缩放，不影响其他盒子

transform : translate(X, Y) rotate(180deg); /*先旋转会改变坐标轴方向）*/

2. 3D转换

• translate3d(X, Y, Z);
  • z轴垂直于屏幕，往外的方向为正值，单位为px
• perspective : 20px;
  • 透视/视距，近大远小。写在被观察元素父盒子上
• rotate3d(x, y, z, n deg) | rotateX（沿X轴旋转）| rotateY（沿Y轴旋转） | rotateZ（沿Z轴旋转）
• 左手准则，根据三者矢量决定旋转方向
• transform-style : flat（默认，子元素不开启3d立体空间）| preserve-3d;（子元素开启立体空间）
• 该属性写在父元素上

六、动画

先定义（keyframes）

@keyframes [name] {0% | from {} 100% | to {}} /*from-to与0%-100%作用相同*/

后在CSS盒子里面调用,animation : 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态

• animation-name : [name];（声明哪一个动画，必须有）
• animation-duration : n s; （声明完成动画花费时间，必须有）
• animation-iteration-count : 1(默认) | infinite（无数次）;（规定动画播放次数）
• animation-direction : altername;（逆播放，默认为normal）
• animation-timing-function : ease;（默认为ease，动画速度曲线。linear匀速，steps(n)分为n步）
• animation-fill-mode : forwards | backwards;（动画结束后状态）
• animation-play-state :running | pause ;（动画是否播放或暂停）
  ction : altername;（逆播放，默认为normal）
• animation-timing-function : ease;（默认为ease，动画速度曲线。linear匀速，steps(n)分为n步）
• animation-fill-mode : forwards | backwards;（动画结束后状态）
• animation-play-state :running | pause ;（动画是否播放或暂停）
• animation-delay : 0;（默认为0，动画开始时间）