HTML5与CSS3之新增常用标签与属性

你的名字 2023-03-13 05:25 30阅读 0赞

### HTML5与CSS3之新增常用标签与属性 ###

*  HTML5与CSS3之新增常用标签与属性
 *   *  1.HTML5新增标签
     *   *  1.1语义化标签
         *  1.2多媒体音频标签（audio）
         *  1.3多媒体视频标签（video）
         *  1.4新增input标签与新增表单属性
     *  2.CSS3新增用法
     *   *  2.1CSS3新增选择器
         *  2.2 2D 转换
         *   *  2.2.1 移动（translate）
             *   *  \*\*案例：（用此方法也可以实现盒子水平垂直居中）\*\*
             *  2.2.2 旋转（rotate）
             *  2.2.3 缩放（scale）
             *  2.2.4 2D 转换综合写法以及顺序问题
         *  2.3动画(animation)
         *  2.4 3D 转换
         *   *  2.4.1 3D 移动 translate3d
             *  2.4.2 3D 旋转rotate3d
             *  2.4.3 透视（perspctive）
             *  2.4.43D呈现 （transfrom-style）
             *  2.5 综合案例（3d立方体盒子）：

# HTML5与CSS3之新增常用标签与属性 #

## 1.HTML5新增标签 ##

HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改。

### 1.1语义化标签 ###

**新增了那些语义化标签：**

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

**注意：**

*  语义化标签主要针对搜索引擎
 *  在 `IE9` 浏览器中，需要把语义化标签都转换为块级元素
 *  语义化标签，在移动端支持比较友好

### 1.2多媒体音频标签（audio） ###

多媒体标签在不同浏览器下情况不同，存在兼容性问题。  
**音频的三种格式：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
**音频属性：**

*  注意：在 chrome 浏览器中已经禁用了 autoplay 属性  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]  
    **代码如下：**（因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件）

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        
        <audio controls="controls">
            <source src="media/snow.mp3" type="audio/mpeg" />
            <source src="media/snow.ogg" type="audio/ogg" />
                
        </audio>
    </body>
    
    </html>

### 1.3多媒体视频标签（video） ###

**video 视频标签三种格式：**  
![在这里插入图片描述][2020051116185721.JPG_pic_center]  
**video标签属性：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]  
**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> video { width: 300px; } </style>
    </head>
    
    <body>
        
        
        <video muted="muted" loop="loop" poster="media/pig.jpg" controls>
            <source src="media/video.mp4" type="video/mp4" />
            <source src="media/video.ogg" type="video/ogg" />
            您的浏览器太low了，不支持播放此视频
        </video>
    </body>
    
    </html>

### 1.4新增input标签与新增表单属性 ###

**新增input标签：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]

**新增表单属性：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]

## 2.CSS3新增用法 ##

### 2.1CSS3新增选择器 ###

属性选择器、伪类选择器和伪元素选择器内容见此文章：[CSS3选择器的使用][CSS3]

### 2.2 2D 转换 ###

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

#### 2.2.1 移动（translate） ####

`translate` 语法

*  x 就是 x 轴上水平移动
 *  y 就是 y 轴上水平移动

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

**重点知识点：**

*  `2D` 的移动主要是指 水平、垂直方向上的移动
 *  `translate` 最大的优点就是不影响其他元素的位置
 *  `translate` 中的100%单位，是相对于本身的宽度和高度来进行计算的
 *  行内标签没有效果

##### **案例：（用此方法也可以实现盒子水平垂直居中）** #####

**代码如下：**

#### 2.2.2 旋转（rotate） ####

2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转。  
**用法：**

/* 单位是：deg */
       transform: rotate(度数)

> /\* 过渡写到本身上，谁做动画给谁加 \*/  
> transition: all 0.3s;

**重点知识点：**

*  `rotate` 里面跟度数，单位是 `deg`
 *  角度为正时，顺时针，角度为负时，逆时针
 *  默认旋转的中心点是元素的中心点

#### 2.2.3 缩放（scale） ####

知识要点：

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

可以通过transform-origin来改变基点：

transform-origin: x y;

**重要知识点：**

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

#### 2.2.4 2D 转换综合写法以及顺序问题 ####

**知识要点：**

*  同时使用多个转换，其格式为 transform: translate() rotate() scale()
 *  顺序会影响到转换的效果(先旋转会改变坐标轴方向)
 *  但我们同时有位置或者其他属性的时候，要将位移放到最前面

**代码演示：**

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

### 2.3动画(animation) ###

**动画的基本使用：**

*  先定义动画
 *  在调用定义好的动画

**语法格式(定义动画):**

@keyframes 动画名称 { 
        0% { 
            width: 100px;
        }
        100% { 
            width: 200px
        }
    }

**1.动画属性：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 5]

div { 
       width: 100px;
       height: 100px;
       background-color: aquamarine;
       /* 动画名称 */
       animation-name: move;
       /* 动画花费时长 */
       animation-duration: 2s;
       /* 动画速度曲线 */
       animation-timing-function: ease-in-out;
       /* 动画等待多长时间执行 */
       animation-delay: 2s;
       /* 规定动画播放次数 infinite: 无限循环 */
       animation-iteration-count: infinite;
       /* 是否逆行播放 */
       animation-direction: alternate;
       /* 动画结束之后的状态 */
       animation-fill-mode: forwards;
     }
     
     div:hover { 
       /* 规定动画是否暂停或者播放 */
       animation-play-state: paused;
     }

**2.动画曲线：**  
速度曲线细节:

*  `animation-timing-function`: 规定动画的速度曲线，默认是`ease`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 6]

**3.动画简写方式：**

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

代码演示：

animation: move 2s linear 1s infinite alternate forwards;

### 2.4 3D 转换 ###

**`3D` 转换知识要点：**

*  `3D` 位移：`translate3d(x, y, z)`
 *  `3D` 旋转：`rotate3d(x, y, z)`
 *  透视：`perspctive`
 *  `3D`呈现 `transfrom-style`

**注意：（三维坐标系）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 7]

#### 2.4.1 3D 移动 translate3d ####

**`3D` 移动 `translate3d`：**

*  `3D` 移动就是在 `2D` 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
 *  `transform: translateX(100px)`：仅仅是在 x 轴上移动
 *  `transform: translateY(100px)`：仅仅是在 y 轴上移动
 *  `transform: translateZ(100px)`：仅仅是在 z 轴上移动
 *  `transform: translate3d(x, y, z)`：其中x、y、z 分别指要移动的轴的方向的距离
 *  **注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充**

#### 2.4.2 3D 旋转rotate3d ####

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转.  
**语法：**

*  `transform: rotateX(45deg)` – 沿着 x 轴正方向旋转 45 度
 *  `transform: rotateY(45deg)` – 沿着 y 轴正方向旋转 45 度
 *  `transform: rotateZ(45deg)` – 沿着 z 轴正方向旋转 45 度
 *  `transform: rotate3d(x, y, z, 45deg)` – 沿着自定义轴旋转 45 deg 为角度

#### 2.4.3 透视（perspctive） ####

**知识点讲解：**

*  如果想要网页产生 `3D` 效果需要透视(理解成 `3D` 物体投影的 `2D` 平面上)
 *  实际上模仿人类的视觉位置，可视为安排一直眼睛去看
 *  透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
 *  距离视觉点越近的在电脑平面成像越大，越远成像越小
 *  透视的单位是像素  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 8]  
    **透视需要写在被视察元素的父盒子上面**：

body { 
      perspective: 1000px;
    }

#### 2.4.43D呈现 （transfrom-style） ####

*  控制子元素是否开启三维立体环境
    
     *  `transform-style: flat` 代表子元素不开启 `3D` 立体空间，默认的
     *  `transform-style: preserve-3d` 子元素开启立体空间
     *  代码写给父级，但是影响的是子盒子

#### 2.5 综合案例（3d立方体盒子）： ####

**代码如下：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> body { perspective: 1000px; } section { position: relative; width: 300px; height: 200px; margin: 150px auto; transform-style: preserve-3d; /* 添加动画效果 */ animation: rotate 10s linear infinite; background: url(media/pig.jpg) no-repeat; } section:hover { /* 鼠标放入section 停止动画 */ animation-play-state: paused; } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } section div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(media/dog.jpg) no-repeat; } section div:nth-child(1) { transform: rotateY(0) translateZ(300px); } section div:nth-child(2) { /* 先旋转好了再 移动距离 */ transform: rotateY(60deg) translateZ(300px); } section div:nth-child(3) { /* 先旋转好了再 移动距离 */ transform: rotateY(120deg) translateZ(300px); } section div:nth-child(4) { /* 先旋转好了再 移动距离 */ transform: rotateY(180deg) translateZ(300px); } section div:nth-child(5) { /* 先旋转好了再 移动距离 */ transform: rotateY(240deg) translateZ(300px); } section div:nth-child(6) { /* 先旋转好了再 移动距离 */ transform: rotateY(300deg) translateZ(300px); } </style>
    </head>
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    </html>

**效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 9]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20230312/3c7f77e9f4824f4993c15af0dff65332.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230312/0108e3b9030146c0a5e6816f38a2032a.png
[2020051116185721.JPG_pic_center]: /images/20230312/2caf64e1e88944acbb0c76ade1680d9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230312/1518016dafbc4b8eb3c627ceda8bb749.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230312/92358ead60774ed09f4bbce0cc1018f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20230312/db36cfececb84a55af17bb4c4996a4c4.png
[CSS3]: https://blog.csdn.net/qq_43537721/article/details/99713375
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20230312/a6cc6c9ccc1c4bf5ad94860371ee4299.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20230312/35f431796eda4576a487fbb99874901c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20230312/a4f6830e46ef4d8ebf17fab6137b36ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20230312/36ddb992e7e84d8fb838b2ac0d8827bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20230312/99fb699efa804f58a02997f7bb5da53b.png