HTML第十八天

最新推荐文章于 2024-08-07 22:13:00 发布
最新推荐文章于 2024-08-07 22:13:00 发布
阅读量83 收藏
点赞数
文章标签： html 动画 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wqx945/article/details/127218894
版权

# css3动画&2D|3D

## 一、css3的transform属性

- 2d坐标轴（图示）

  ![image-20210424182819043](C:/Users/Administrator/Desktop/web/系统班课程大纲/day17/笔记/image-20210424182819043.png)

- x轴：水平，向右为正，向左为负

- y轴：垂直，向下为正，向上为负

## 2d转换的方法

### 1、2D变形：平移、旋转、缩放、倾斜

#### 1) transform: translate()平移

- transform: translate(x,y) 沿着x轴和y轴移动

- transform: translateX(x) 沿着x轴移动

- transform: translateY(y) 沿着y轴移动

取值:

- px

- 百分比（强调相对于元素本身计算）

- 水平，向右为正，向左为负

- 垂直，向下为正，向上为负

- x与y之间用逗号隔开

> 水平向右为正值，垂直方向向下正值

```css

/* 沿着水平方向位移 */

当为一个值的时候，只沿着水平方向位移

transform: translate(50px);

   注意:元素位移之后，原来的位置还在

```

#### 2) transform: rotate(ndeg) 旋转

* 语法

* transform：rotate(deg);沿着中心点旋转，默认值

* transform: rotateX(deg);沿着X轴旋转

* transform: rotateY(deg);沿着Y轴旋转

​        单位：deg

​        当角度值为正数时，元素沿着顺时针方向旋转

​        当角度值为负数时，元素沿着逆时针方向旋转

```html

创建网页3d空间

    .wrap {

      perspective: 800px;

    }

    .wrap div {

      width: 100px;

      height: 100px;

      background-color: pink;

      margin: 30px;

      text-align: center;

      line-height: 100px;

      font-size: 30px;

      /* 过渡动画 */

      transition: 2s;


 

    }

    .box1:hover {

      background-color: blue;

      transform: rotate(45deg);

    }

    .box2:hover {

      background-color: tomato;

      transform: rotate(-45deg);

    }

    .box3:hover {

      transform: rotateX(60deg);

    }

    .box4:hover {

      transform: rotateY(60deg);

    }

    .box5:hover {

      transform: rotateY(-60deg);

    }


 

    .box6:hover {

      transform: rotateX(120deg);

    }

    .box7:hover {

      transform: rotateX(-120deg);

    }


 

  <div class="wrap">

    <div class="box1">1</div>

    <div class="box2">2</div>

    <div class="box3">3</div>

    <div class="box4">4</div>

    <div class="box5">5</div>

    <div class="box6">6</div>

    <div class="box7">7</div>

  </div>

```

#### 3）transform: scale() 缩放

- transform: scale(x,y) 沿着x轴和y轴缩放

- transform: scaleX(x) 沿着x轴缩放

- transform: scaleY(y) 沿着y轴缩放

> 取值范围0~1之间表示缩小，1表示正常大小，1以上表示放大，默认值为1

> 取值为负值表示先翻转后缩放

>

> 为一个值的时候，沿着水平方向和垂直方向等比例缩放

>

> 元素缩放为0 后，原来的位置还在

>

> x与y之间用逗号隔开

```html

transform: scale(1.5);/* 沿着水平方向和垂直方向都放大1.5倍，等比例缩放 */

transform: scale(-1.5);/* 先翻转，然后 沿着水平方向和垂直方向都放大1.5倍 */

```

#### 4）transform: skew() 倾斜

- transform: skew(x,y) 沿着x轴和y轴倾斜

- transform: skewX(x) 沿着x轴倾斜

- transform: skewY(y) 沿着y轴倾斜

> 单位deg(角度)

> 正值，向左上角和右下角倾斜；负值，向右上角和左下角倾斜

>

> 为一个值的时候，只沿着水平方向倾斜

```html

  /* 为一个值的时候，只沿着水平方向位移 */

        .box1:hover {

            transform: skew(45deg);

        }

 /* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 45 度 */

        .box2:hover {

            background-color: tomato;

            transform: skew(30deg, 45deg);

        }

        .box3:hover {

            transform: skewX(-45deg);

        }

        .box4:hover {

            transform: skewY(45deg);

        }

        .box5:hover {

            transform: skewY(-45deg);

        }

```

#### 5）transform-origin属性 设置元素的基点位置

* transform-origin: 水平方向 垂直方向;

* 设置元素的基点位置，设置围绕哪个点进行变化

* 取值

  百分比（参照自身计算）

​    px

   关键字

​       水平：left center right

​       垂直：top  center bottom

- 说明：

  两个空格隔开的值，分别表示x,y轴的原点

  一个值时，另一个值默认center

- 可为负数

> 必须与transform属性配合使用

>

> 位移不能用

```html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    .wrap {

      width: 400px;

      height: 400px;

      background-color: aquamarine;

      margin: 50px auto;

      /* overflow: hidden; */

    }

    .wrap .box {

      width: 200px;

      height: 200px;

      background-color: pink;

      /* margin: 50px auto; */

      transition: 2s;


 

      transform-origin: 200px 100px;

      transform-origin: -200px 100px;

      transform-origin: 100% 80%;

      transform-origin: -100% 80%;

      transform-origin: 70% 150%;

      transform-origin: left top;



 

    }

    .wrap:hover .box {

      transform: rotate(180deg);


 

    }

  </style>

</head>

<body>

  <div class="wrap">

    <div class="box">box</div>

  </div>

</body>

</html>

```

#### 5）旋转，位移，缩放，倾斜的复合写法

```css

属性之间用空格隔开

    .wrap:hover .box1 {

            transform: rotate(135deg);

            transform: translate(50px);

            transform: scale(1.5);

           

            transform: translate(100px) rotate(120deg) scale(1.5);

        }

```

* 总结：

| 名称 | 语法                   | 取值                               | 单位     | 其他                                             |

| ---- | ---------------------- | ---------------------------------- | -------- | ------------------------------------------------ |

| 位移 | transform:translate(); | 一个值（沿着水平方向位移），两个值 | 像素px   | transform: translateX(); transform: translateY() |

| 旋转 | transform: rotate();   | 一个值                             | deg角度  |                                                  |

| 缩放 | transform: scale();    | 一个值（等比例缩放）、两个值       | 没有单位 | transform: scaleX(); transform: scaleY()         |

| 倾斜 | transform: skew();     | 一个值（沿着水平方向倾斜）、两个值 | deg角度  | transform: skewX(); transform: skewY();          |

### 2、3D变形：平移、旋转、缩放

#### 什么是3d转换

定义元素在三维空间移动、缩放、旋转

#### 3d坐标轴（图示）

###

![image-20210424183740065](C:/Users/Administrator/Desktop/web/系统班课程大纲/day17/笔记/image-20210424183740065.png)



 

#### 3D立体空间的3根轴线

- x轴：水平，向右为正，向左为负

- y轴：垂直，向下为正，向上为负

- z轴：垂直于屏幕，向外为正，向内为负

#### 1）3D必备属性

- transform-style: preserve-3d; 创建3d空间

- 什么时候搭建3d舞台？

  - 父元素有3D变形，子元素也有3D变形

- perspective属性：景深（透视），属性值为透视点到元素的距离，近大远小；也可以让网页产生3D效果，单位像素

- ```html

  一般取值：800px-1000px

  perspective：800px 就是人离屏幕800px 的地方观看这个div元素。

  当translateZ的大小临近与800px时图片离我们越来越近了

  当它大于800px时，这个图片就消失了

  反之当translateZ为负值时，我们可以看到图片变小了，也就是图片离人越来越远了。

        透视点到元素的距离

        1000px: 我到乔乔的距离 1000px

        300px:我往前走到了300px位置看乔乔

        600px:我往前走到了600px位置看乔乔

       

        -300px:我往后走到了-300px位置看乔乔，-1300

        -600px:我往后走到了-600px位置看乔乔，-1600

        1000px:走到了乔乔面前看

        >1000px:走过了乔乔，看不见了

  ```

- preserve-3d， 如果搭配overflow: hidden/scroll/auto使用，相当于2D效果

> transform-style属性和perspective属性放在父元素中,有时候perspective属性放在body中

#### 2) 位移

- transform: translateZ(z); 沿着z轴方向位移

- transform: translate3d(x,y,z) 沿着x、y、z轴方向位移

  z指的是 z 轴的向量位移长度。当其值为负值时，元素在 Z 轴越移越远，导致元素变小。反之当值为正值时，

  其在 Z 轴越移越近，导致元素变得较大。

```html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .father {

            width: 400px;

            height: 400px;

            border: 2px solid tomato;

            margin: 100px auto;

            /* 景深效果，创建网页3d效果 */

            perspective: 1000px;

        }

        .father .son {

            width: 200px;

            height: 200px;

            background-color: tomato;

            margin: 100px auto;

        }

        .father:hover .son {

            transform: translateZ(200px);

            transform: translateZ(-200px);

           transform: translateX(100px) translateY(50px) translateZ(200px);

            transform: translate3d(100px, 50px, 200px);

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

</html>

```

#### 3) 旋转

- transform: rotateX(a); 沿着x轴方向旋转

- a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；反之，如果为负值，元素围绕X轴逆时针旋转。

- transform: rotateY(a); 沿着y轴方向旋转

- a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；反之，如果为负值，元素围绕Y轴逆时针旋转。

- transform: rotateZ(a); 沿着Z轴方向旋转

- a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；反之，如果为负值，元素围绕 Z 轴逆时针

  旋转。

- transform: rotate3d(x,y,z,angle);

- 参数：

  x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。

  y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。

  z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。

  angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。

```css

1、两个值为零，定义X,Y,Z轴旋转

rotate3d(1,0,0,angle)   x轴旋转

rotate3d(0,1,0,angle)   y轴旋转

rotate3d(0,0,1,angle)   z轴旋

/* 沿着x轴方向旋转 */

transform: rotateX(-45deg);

transform: rotate3d(1,0,0,-45deg);

/* 沿着y轴方向旋转 */

transform: rotateY(-45deg);

transform: rotate3d(0,1,0,-45deg);

/* 沿着z轴方向旋转 */

transform: rotateZ(-45deg);

transform: rotate3d(0,0,1,-45deg);


 

2、两个值不为零，定义多轴旋转

rotate3d(1,0.5,0,30deg)  

x 1*30   30deg

y 0.5*30  15deg

z 0*0     0deg

.box5:hover img {

    /* z */

    transform: rotate3d(.5, 1, 0, 60deg);

    /*

    x:0.5*60=30deg

    y:1*60=60deg

    z:0*60=0deg

    */

}

3、三个值不为零，定义多轴旋转

.box6:hover img {

    /* z */

    transform: rotate3d(.5, 1, 1, 60deg);

    /*

    x:0.5*60=30deg

    y:1*60=60deg

    z:1*60=60deg

    */

}

```

#### 4）缩放

- transform: scaleZ() 沿着z轴方向缩放 (厚度)

- transform: scale3d() 沿着x、y、z轴方向缩放

- 取值

  - 默认值为1

  - 使用0~1之间的值缩小元素

    使用超过1的值放大元素

- 注意：scaleZ单独使用看不到效果，需要配合其他变换属性一起使用

```html

transform: scaleZ(3);

transform: scale3d(2, 3, 3);

```

3D缩放Z轴演示

```html

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    <style>

        .wrap {

            width: 1000px;

            height: 600px;

            border: 1px solid red;

            perspective: 500px;

            perspective-origin: right top;

        }

        .box {

            position: absolute;

            left: 50%;

            margin-left: -100px;

            top: 50%;

            margin-top: -100px;

            width: 200px;

            height: 200px;

            transform-style: preserve-3d;

            /* transform: scale3d(1.5, 1, 1.5); */

            transform: scaleZ(1.5);

        }

        .box div {

            position: absolute;

            left: 0;

            top: 0;

            width: 200px;

            height: 200px;

        }

        .box div:nth-child(1) {

            background: red;

            transform: rotateX(90deg) translateZ(100px);

        }

        .box div:nth-child(2) {

            background: yellow;

            transform: rotateX(90deg) translateZ(-100px);

        }

        .box div:nth-child(3) {

            background: green;

            transform: rotateY(90deg) translateZ(100px);

        }

        .box div:nth-child(4) {

            background: blue;

            transform: rotateY(90deg) translateZ(-100px);

        }

        .box div:nth-child(5) {

            background: pink;

            transform: translateZ(100px);

        }

        .box div:nth-child(6) {

            background: orange;

            transform: translateZ(-100px);

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="box">

            <div class="bg1"></div>

            <div class="bg2"></div>

            <div class="bg3"></div>

            <div class="bg4"></div>

            <div class="bg5"></div>

            <div class="bg6"></div>

        </div>

    </div>

</body>

</html>

```

## 二、帧动画

### 1、定义关键帧

```html

@keyframes 动画名称（英文） {

            0% {

                /* 动画的开始 */

            }

            25% {

                /* 在25%的时候进行的一个动画 */

            }

            50% {

                /* 在50%的时候进行的一个动画 */

            }

            100% {

                /* 动画结束 */

            }

        }

    from,to表示开始、结束状态，也可以使用0%,100%定义

        @keyframes 动画名称（英文） {

            from {

                /* 动画开始 */

            }

            to {

                /* 动画结束 */

            }

        }

       

```

### 2、引用帧动画

```html

 animation: name duration timing-function delay iteration-count direction fill-mode;

 animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态

   注意：动画名称和动画执行时间必须写，否则动画无效

        1.animation-name 动画名称 是定义关键帧是所定义的动画名称

        2.animation-duration 动画的执行时间  单位：s/ms

        3.animation-timing-function 规定动画运动的速度曲线

           1.linear 相同的速度从开始到结束，也就是匀速

           2.ease  默认值 慢速度开始--速度变快--慢速度结束

           3.ease-in 慢速度开始的过渡效果，也就是以低速度开始

           4.ease-out 慢速度结束的过渡效果，也就是以低速结束

           5.ease-in-out 以慢速度开始和结束的过渡效果

        4.animation-delay 定义动画何时开始

           单位：s/ms

            取值

            - 以秒或毫秒计

            - 默认值是 0

            - 允许负值，（-2s 使动画马上开始，但跳过 2 秒进入动画)

        5.animation-iteration-count 动画的执行次数

           1.n 默认执行动画次数1次

           2.infinite 无限次播放动画

        6.animation-direction 定义是否应该轮流反向播放动画

           1.normal 默认值，正常播放

           2.alternate 动画轮流反向播放

           3.alternate-reverse 从第一次就反向运动

        7.animation-fill-mode d动画结束之后的显示状态

           1.both:动画开始或结束的状态

           2.fowards 动画结束时状态

           3.backwards 动画开始的状态

               

          8.animation-play-state: paused;动画播放方式   暂停

                取值：

                running:运动

                paused: 暂停


 

```

## 三、animate.css动画插件

```html

https://animate.style/

https://www.dowebok.com/demo/2014/98/

css3动画库，预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、旋转（rotateIn|rotateOut）、翻转（flip）、淡入淡出（fadeIn|fadeOut）等动画效果。

```

## 使用方法：

- 1、第一步. 引入animate.css文件

```

<link rel="stylesheet" href="css/animate.min.css">

```

- 第二步. 给指定的元素加上指定的动画样式名

  ```html

  animation-name定义动画的效果名称

  animation-duration定义动画持续的时间

  animation-delay 定义动画延迟的时间

  animation-iteration-count: 定义动画重复的次数

  animation-timing-function 定义动画的速度

  animation:动画效果 执行时间 延迟时间 执行次数 速度曲线；

  animation: bounce 1s 2s infinite linear;

  选择自己想要的动画效果，然后复制粘贴

  第一个animated是必须添加的样式名，第二个是指定的动画样式名。

  <div class="animated fadeInUp"></div>

  2、加统一的类名animated，然后选择自己想要的动画效果，然后复制粘贴

  //1.直接加自己选择的类名

  <h3 class="animated tada">tada</h3>

  <p class="animated rubberBand">rubberBand</p>

  <div class="animated shake">shake</div>

  改变其原有属性（覆盖）

  .shake {

  animation-delay: .5s;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

  }

  <p id="box1">内容内容1</p>

  ```

## 四、css3中过渡和动画的区别？

- 区别：语法、触发、执行次数、复杂度

- 相同点 ： 都是随着时间改变元素的属性值。

- 不同点：

  1、过渡动画是需要触发条件的(hover事件或click事件等)，只能完成简单的动画

  2、帧动画不需要任何的触发条件，可以完成复杂轨迹的动画

wqx945
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中坐标轴旋转角度,CSS3 旋转rotate()rotatex()rotatey()应用实例
weixin_29190651的博客
06-03 6188
CSS3中，对象转换有多种方式，其中一种为旋转rotate()，主要是围绕X轴或Y轴旋转，所以rotate()又要细分为rotatex()和rotatey()，前者用于设置对象围绕X轴旋转，后者用于设置对象围绕Y轴旋转。rotate既可控制对象作2D旋转，又可控制对象作3D旋转，本篇先介绍作2D旋转的语法规则和应用实例，后续篇章再介绍作3D旋转的情况。下面先看rotatex()、rotatey()...
html第二天
yiranzaichenmi的博客
10-13 97
今天学习了三个大的分类 .表格 .列表 .表单 1.表单 1.表格的作用：用于展示、显示数据。 2.表格的组成： <table></table>用于定义表格的标签。 <caption></caption>用于定义表格的标题，写在表格内，紧跟在table后边。 <tr></tr>用于定义表格的行，写在table标签里边。 <th></th>用于定义表格的表头，显示的文字会加粗，卸载tr标签里。 <td&
html div的移动
千古月
11-18 2351
var i=1; function enableDrag(o) { if (typeof o == "string") o = document.getElementById(o); o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; o.orig_y = parseInt(o.style...
【Transform3D】转换详解（看完就会）
m0_62360527的博客
10-13 4115
3D可以帮助我们实现更好的页面动画效果，我们生活的环境是 3D 的，照片就是 3D 物体在 2D 平面呈现的例子。有什么特点近大远小物体后面遮挡不可见当我们在网页上构建 3D 效果的时候参考这些特点就能产出 3D 效果。1.移动的中心点跟旋转中心点是分开的，transform-origin只是修改旋转的原点，移动位置不变依然是左上角。2.3d旋转是坐标轴是跟随移动的，所以建议当完成某种效果时，先移动后旋转，先旋转改变坐标轴，移动的方向就会有差别。
CSS（二）transform详解
前端产品工程师
08-01 4115
这是一个系列的文章，你也可以查看其他文章： 0、CSS-预热篇 1、CSS（一）详解position 2、CSS（二）transform 3、CSS（三）flex布局（flex弹性布局详解） 4、CSS（四）详解Grid布局 5、CSS（五）CSS动画-transition简介 6、CSS（六）CSS动画-animation简介 7、CSS(七)两栏布局详解 transform ...
HTML第二天
qq_61998176的博客
09-03 261
表格标签的介绍及其使用...
Day18:第18天
03-28
"Day18:第18天"这个标题可能意味着我们正在深入探索JavaScript的某一个特定主题或技术。虽然描述部分没有提供具体的细节，我们可以根据标签“JavaScript”来推测，这一天的学习可能会涵盖JavaScript的基础概念、语法...
java开始面试的第18天.doc
10-02
在Java面试的第18天，我们关注的是Web开发基础和处理中文乱码的问题，这些知识点对于Java程序员尤其重要，尤其是在进行Web应用开发时。 1. **HTTP协议**： HTTP（超文本传输协议）是互联网上应用最广泛的一种网络...
第18周_HW
02-18
在本周的作业“第18周_HW”中，我们聚焦于HTML（超文本标记语言）这一核心Web开发技术。HTML是构建网页的基础，用于描述网页的结构和内容。通过理解和熟练掌握HTML，开发者能够创建出功能丰富、内容充实的网页。 ...
第十八课 ajax1
08-03
数据格式可以是文本、HTML、JSON、XML 等。Ajax 请求包括建立连接、发送请求、接收响应和关闭连接四个步骤。在 HTTP/1.1 中，通过 keep-alive 设置可以在一个连接中发送多次请求。 ### **4. 同源策略** 同源策略...
十天学会DIV+CSS WEB标准
03-28
第八天和第九天，会讲解一些高级CSS技术，如Flexbox（弹性盒子）和Grid（网格布局）。这两种布局模型为创建复杂的、响应式的网页提供了强大的工具，尤其是Flexbox适合处理一维布局，而Grid则更适用于二维布局。 ...
Web开发-html篇-下
Broken_x的博客
08-04 612
html中的大部分标签就已经写完了，这样的写出来的网页没有颜色，过于单调，过于简陋，这就要用到我们接下来要学的CSS和Javascript了，我会接着持续更新……
HTML学习笔记——用HTML记录学习过程4——非主体结构元素
qq_47968354的博客
08-07 74
非主体结构元素主要是为了表达逻辑结构或者附加信息的元素。
vue中v-html 后端返回html + script js中click事件不生效
记录常见的问题以及解决办法
08-07 135
思路： 1.获取到后端返回的html 2.通过正则表达式 之后 截取script 中的 js 逻辑 3.获取body标签 之后创建一个 script 标签 4.把我们截取的 script中的代码放到我们创建的 script标签中 5.把script标签 放到body中
Html详解——Vue基础
最新发布
敲厉害的燕宝的博客
08-07 689
是一种用来。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
探索Python的文本转换魔法：html2text库的奥秘
AIGC搞起
08-07 403
以下是html2text库中一些基本函数的使用示例，每个示例都附有代码和逐行说明。基本转换这段代码将一个简单的HTML文档转换为文本。忽略链接设置可以忽略HTML中的链接。自定义样式使用baseurl参数可以为相对URL添加基础URL。使用Unicode字符设置会使用Unicode字符代替某些HTML实体。处理表格参数可以设置表格的宽度。html2text是一个功能强大且易于使用的Python库，它能够帮助开发者在多种场景下将HTML内容转换为文本。
JS优化了4个自定义倒计时
lulei5153的博客
08-04 338
【代码】JS优化了4个自定义倒计时。
敦煌文化主题页面 HTML,CSS,Javascript 源码分享
m0_61603704的博客
08-03 320
项目亮点：加入了大量的CSS动画效果，以及JS交互效果，水平适合初学者以及大学生，包含登录注册页。使用技术：HTML，CSS，JavaScript。
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5655
再看代码： JS部分。
"第18章 HTML：超文本标记链接语言简介与基础知识
第18章《超文本标记链接语言(HTML)》是关于HTML语言的重要章节。HTML不仅用于编写网络页面，而且越来越多地用于创建光盘上的多媒体节目。它可以用来排版文档、创建列表、建立链接和插入声音和影视片断。市场上已经有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值