HTML5+CSS3内容总结

HTML5

1、语义化的含义

用HTML5达到两个语义化效果：

• 内容语义化（内容的结构化）
• 代码语义化（合适的标签）
  目的：便于开发者阅读和撰写，易于解析和爬虫

2、新增的语义化标签

• header：头部标签
• nav：导航标签
• article：内容标签
• section：块级标签
• aside：侧边栏标签
• footer：尾部标签
  

3、新增的多媒体标签

音频 audio：

<audio controls>
    <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
    <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
    <!-- 
    因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件 -->                             
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

视频video:

<video src="./media/video.mp4" controls="controls"></video>

总结：

• 多媒体标签在不同浏览器下情况不同，存在兼容性问题
• 谷歌浏览器把音频和视频标签的自动播放都禁止了
• 谷歌浏览器中视频添加muted属性就可以自己播放了
• 注意：重点记住使用方法及自动播放即可，其他属性在使用时查找对应的手册

4、新增的input属性

5、新增的表单属性

CSS3

1、CSS3属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val” ]	匹配具有att属性、且值以val开头的E元素
E[att$=“val”]	匹配具有att属性、且值以val结尾的E元素
E[att*=“val” ]	匹配具有att属性、且值中含有val的E元素

示例：

input[type=search] {
    color: skyblue;
  }

  span[class^=black] {
    color: lightgreen;
  }

  span[class$=black] {
    color: lightsalmon;
  }

  span[class*=black] {
    color: lightseagreen;
  }

2、结构伪类选择器

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个元素E
E:nth-child(n)	匹配父元素中的最后一个元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)]	指定类型E的第n个

示例：

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

nth-child(n)参数n详解：

• 本质就是选中第几个子元素
• n的值可以是数字、关键字、公式
• 关键字有even偶数、odd奇数
• 常见公式（从0开始计算）如下：
  
  nth-child与nth-of-type区别:
• nth-child 选择父元素里面的第几个子元素，不管是第几个类型
• nth-of-type 选择指定类型的元素

3、伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意事项：

• before 和 after 必须有 content 属性
• before 在内容前面，after 在内容后面
• before 和 after 创建的是一个元素，但是属于行内元素
• 创建出来的元素在 Dom 中查找不到，所以称为伪元素
• 伪元素和标签选择器一样，权重为 1

4、2D 转换

2D 转换:改变标签在二维平面上的位置和形状

• 移动：translate
• 旋转：rotate
• 缩放：scale

4.1 translate

语法：

• x就是X轴上水平移动
• y就是y轴上水平移动

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)  

注意：

• translate()只给一个值，表示x轴方向移动距离
• translate最大的优点就是不影响其他元素的位置
• translate中的100%单位，是相对于盒子本身的宽度和高度来进行计算的
• 行内标签（span等）没有效果

4.2 rotate 旋转

• 让元素在二维平面内顺时针或者逆时针旋转

/* 单位是：deg */
img:hover {
  transform: rotate(360deg)
}

语法：

• rotate 里面跟度数，单位是 deg
• 角度为正时，顺时针，角度为负时，逆时针
• 默认旋转的中心点是元素的中心点
• 使用复合属性先写rotate会影响translate的坐标轴方向

设置元素旋转的中心的(transform-origin)：

 transform-origin: x y;

注意：

• 后面的参数 x 和 y 用空格隔开
• x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center
• 还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)

4.3 scale

作用：用来控制元素的放大与缩小

transform: scale(x, y)

要点：

• 注意，x与y之间用逗号进行分隔
• transform: scale(1, 1): 宽高都放大一倍
• transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
• transform:scale(0.5, 0.5): 缩小
• 优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

4.4 2D 转换综合写法

• 同时使用多个转换，其格式为

 transform: translate() rotate() scale()

• 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
• 当我们同时有位置或者其他属性的时候，要将位移放到最前面

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

5、动画(animation)

通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
使用：

1. 定义动画

/*1. 定义动画*/
@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

2. 调用定义好的动画

div {
 /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间；
}

动画序列：

• 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
• 在 @keyframs中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
• 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
• 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

示例：

<style>
    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      animation-name: move;
      animation-duration: 0.5s;
    }

    @keyframes move{
      0% {
        transform: translate(0px)
      }
      100% {
        transform: translate(500px, 0)
      }
    }
  </style>

动画常见属性：

简写方式：

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

注意：

• 动画名称和持续时间必须赋值
• 取值不分先后顺序
• 简写属性里面不包含 animation-paly-state
• 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
• 要想动画走回来，而不是直接调回来：animation-direction: alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards
• 速度曲线调节animation-timing-function，规定动画的速度曲线，默认是ease

/*打字机效果*/
div {
  width: 0px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  background-color: aquamarine;
  animation: move 4s steps(24) forwards;
}

@keyframes move {
  0% {
    width: 0px;
  }

  100% {
    width: 480px;
  }
}

6、过渡(transition)

• 不需要javascript就可以实现简单的动画交互效果
• 复合属性，包括：transition-property、transition-duration、transition-timing-function、transition-delay四个子属性

transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)[必需，且不能为0]
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

注意： 四个子属性只能用空格隔开，不能用逗号。