HTML5黑马微进阶笔记

HTML5

简介

• 具有新的元素（HTML标签）、属性（新属性和CSS3特性）和行为（JS）。
• XHTML： 可扩展超文本标记语言，增强了HTML
• HTML5： 语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。

HTML5

• 语义化标签： 标签语义化
  • <header>,<nav>,<article>,<section>,<aside>,<footer>
  • 在vscode里 ! 直接生成基本框架
• tips：
  • 主要针对搜索引擎
  • 可多次使用
  • IE9转换为块级元素{display：block}
  • PC端使用频率小于移动端
• 多媒体标签：
  • 音频：<audio>
    
    解决不同浏览器格式兼容问题

< audio controls="controls">
		<source src="xxx.mp3" type="audio/mpeg">
		<source src="xxx.ogg" type="audio/ogg">
		都不支持返回我
</audio>
		

• 视频：<video>
  
• 表单标签：
• 新增表单
  
  属性自动限制输入文字的类型的判断
• 新增属性
  

CSS3

• 优点: 移动端，新增样式，应用广泛，不断更新

新增选择器：

类选择器、属性选择器、伪类选择器，权重为10；
伪元素和标签选择器权重为1;
伪元素权重为1，::before的权重为1，所以加起来权重为2

属性选择器：

属性选择器属性和标签中间没有空格，后三个属于模糊查询

结构伪类选择器：

列表结构快捷写法： ul>li{$}*10,制动创建10个列表
nth-child（n）：

• n可以是关键字、数字和公式

  • 常见的关键字：even偶数，odd奇数
  • 常见的公式，从0开始计算，超出或为第0个则忽略
    

  实例： 1. 隔行换色

        ul li:nth-child(even) {
            background-color: blue;
        }
        ul li:nth-child(odd) {
            background-color: deeppink;
        }

伪元素选择器：

tips：
- 必须有content属性
- 创建一个元素（盒子），属于行内元素。
想要控制盒子大小需要转换为块级元素display：block;/ inline-block;（行内块级元素）
- 在DOM里看不见创建的元素，所以叫伪元素

2D转换：

可以实现 元素的位移、旋转、缩放等效果。

• transform：
  属性效果不能叠加，有层级顺序，但是可以用综合写法达到效果

  • translate：

    • 类似定位
    • 语法：
    • 优点：
      • 不会影响其他元素的位置
      • 百分比单位相对于自身元素的百分比，移动自身的百分比的距离
      • 对行内标签没效果

  • rotate：

    • 语法：
    • 优点：
      • 里面跟度数，单位是deg（=°）
      • 正为顺时针，负为逆时针
      • 默认旋转的中心点是元素的中心点
    • 转换中心点：

      • 语法：

      • tips：

        • 默认中心点是元素中心点（50%，50%）
        • 可以设置像素或方位名词（top bottom left right center）
        • 注意overflow：hidden溢出隐藏

  • scale：

    • 语法：

    • tips：

      • （1，1）：宽和高放大一倍，相对于没放大
      • （2，2）：放大2倍
      • （2）：缩写，都放大2倍
      • 优点： 可以设置转换中心点缩放，不影响其他盒子

综合写法：

  - 格式：==**transform: translate() rotate() scale()**==
  - 顺序影响效果（先旋转会改变坐标轴方向）
  - **当同时有位移和其他属性，唯一放在最前面**

动画：

• 基本使用：

• 先定义动画

• 再调用动画

• 语法：

• 定义：
  用@keyframes规则
  动画序列

  • 0%是开始
  • 在@keyframes中规定CSS样式，创建效果
  • 可以改变任意多的次数和样式
  • 用百分比规定或者from和to

• 使用：

• 属性：

  • 语法：
    • 关于animation-timing-function曲线属性：+steps()控制不步长间隔，可制作逐帧效果
    • 关于animation-iteration-count属性：infinite（无限=循环播放）

• 简写属性：

  • 语法：**animation:animation-name（名称） duration（持续时间） timing-function （运动曲线）delay（何时开始） iteration-count（播放次数） direction(方向） fill-mode（起始或结束状态）

3D转换：

• 三维坐标系：
  • 3D位移：
    综合写法： transform: translated3d(100px(x),100px(y),100px(z)) ;
    tips： 不能省略属性值，没有的为0

3D透视：

透视单位为像素，透视值越小，成像越大
tips：

• translateZ：可以一个父级里通过调节不同的子级的z值来达到不同的效果。
• 3D旋转：rotate3d(x,y,z,deg),用0和1来控制开关，1为开启转换

3D呈现：

transform-style：
**让子元素保持立体效果

• 控制子元素是否开启三维立体环境
• transform-style: flat；子元素不开启3D立体空间，默认
• transform-style：preserve-3d;子元素开启
• 代码要写给须保持立体效果的子盒子的父级

浏览器私有前缀：

为了兼容老版本的写法

1.私有前缀

2.提倡写法

附录练习案例

-北极熊奔跑案例

-旋转木马（轮播）案例

-3D导航栏案例

-两面反转的盒子案例

-图片放大案例