CSS3 学习笔记

最新推荐文章于 2024-05-06 21:08:34 发布
最新推荐文章于 2024-05-06 21:08:34 发布
阅读量249 收藏
点赞数
文章标签： css3 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62678419/article/details/133244737
版权

文章目录

CSS学习笔记

CSS概念

css层叠样式表（级联样式表）

文件后缀用.css结尾

它一般用于文件样式的定义

唯一目的 让网页具有美观一致的页面

语法

CSS部分由两部分组成：即选择器和一条或者多条的声明（样式）

每条声明由一个属性和一个值组成

<!--属性是您希望设置的样式属性。每一个属性有一个值。两者之间使用冒号隔开-->
<style>
    h1{
        color:blue;
        front-size:12px;
    }
</style>

注意：此方案属于：在head标签中使用style标签定义h1等标签的属性。

内联样式

要使用内联样式，你需要在相关标签内使用样式属性。Style属性可以包含任何CSS属性

内部样式示例
<p style="color: red;font-size: 60px;">我是内联样式的方案</p>

注意：此方案不利于维护，故不推荐使用

内联样式示例
<style>
        p{
            color:red;
            font-size: 30px;
        }
</style><!--head标签中-->
外部样式示例（推荐使用）

当样式需要多个应用于多个页面的时候，外部样式将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用link标签连接到样式表。link标签在文档的头部

<link rel="stylesheet" type></link>

选择器

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

示例
	*{
            font-size: 30px;
            color:red;
        }
元素选择器

HTML文档中的元素，p、b、div、a、img、body等

标签选择器，选择的是页面上所有同种类的标签，经常描述“共性”，无法描述某一个元素的“个性”

示例
p{
	font-size: 14px;
}
注意
  1. 所有的标签都可以是选择器
  2. 无论这个标签藏得有多深都可以被选择上
  3. 选择的是所有，而不是一个
类选择器

规定用.定义，针对你想要的标签使用

优点：灵活

示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content{
            color:red;
        }

    </style>
</head>
<body>
    <p>大家好</p>
    <p>我很好</p>
    <p class="content">我emo了</p>
</body>
</html>
注意

  1. 类选择器可以被多标签使用

  2. 类名不能以数字开头

  3. 同一个标签可以使用多个选择器。中间要用空格隔开

ID选择器

针对某一个特定的标签来使用，只能使用一次。

示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #text{
            color:red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p id="text">hello</p>
</body>
</html>
注意
  1. ID是唯一的
  2. ID不能以数字作为开头
合并选择器

作用：提取共同样式，减少重复代码

示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,h3{
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <p>我是一个P标签</p>
    <h3>我是一个标题标签</h3>
</body>

</html>
选择器的优先级

在CSS中权重用数字来衡量

选择器名称权重
元素选择器1
class选择器10
id选择器100
内联选择器1000

行内样式1000 > ID选择器100 > 类选择器10 > 元素选择器1

注意

如果优先级相同，后编译的属性会覆盖前面的属性

字体属性

CSS字体属性定义字体，颜色、大小、加粗、字体样式

color
p{
    color: #ff0000;
    color: rgb(0, 0, 0);
    /*最后一个属性表示透明度*/
    color: rgba(0, 0, 0, 1);
    color: rgb(255, 255, 255);      
}
font-size
h1{
    font-size: 40px;
}

h2{
    font-size: 30px;
}
p{
    font-size: 20px;
}

注意：有些浏览器能接收到的最小字体是12px

font-weight

设置文本粗细

值描述
bold定义粗体字符
bolder定义更粗的字符
lighter定义更细的字符
100~900定义从细到粗的字符，默认400，bold：700
font-style

指定字体样式

值描述
normal默认值
italic定义斜体字
font-family

font-family属性指定一个元素的字体

注意：

  1. 每个值用逗号隔开
  2. 如果字体名称包含空格，它必须加上引号

背景属性

背景属性主要有以下几种

属性描述
background-color设置背景颜色
background-image设置背景图片
background-position设置背景显示位置
background-repeat设置背景图片如何填充
background-size设置背景大小属性
background-color

该属性用来设置背景颜色

.books1{
    width:400px;
    height: 400px;
    background-color: red;
}
background-image

设置元素的背景图像

示例
.box1{
    width:400px;
    height: 400px;
    background-color: red;
}

/*图片在显示的时候只显示左上角开始往右下的一部分*/
.box2{
    width: 400px;
    height: 400px;
    background-image: url("hh.jpg");
}
background-repeat

该属性设置如何平铺背景图像

值说明
repeat默认值
repeat-x只向水平方向平铺
repeat-y只向竖直方向平铺
no-repeat不平铺
示例
.box2{
    width: 2000px;
    height: 400px;
    background-image: url("hh.jpg");
    background-repeat: repeat-x;
}
background-size

该属性设置图片的大小

值说明
length设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只设置一个，另一个为auto
percentage计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只设置一个，另一个为auto
cover保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain保持图片纵横比并将图片缩放成适合背景定位区域的最小大小
示例
.box3{
    width: 400px;
    height: 500px;
    background-image: url(hh.jpg);
    /* 图片没有完全填充容器，故图片被上下压缩了 */
    /* background-size: 400px 400px; */
    /* background-size: 50% 50%; */
    /* 完全填充容器且使得图片不变形 */
    background-size: cover;
}
background-position

该属性设置背景图像的起始位置，其默认值是：0% 0%

值说明
left top左上角
left center左中
left bottom左下
right top右上角
right center右中
right bottom右下
center top中上
center center中中
center bottom中下
x% y%百分比形式确定任意位置，左上角为起点
xpos ypos单位为像素
示例
background-position: center center;

文本属性

text-align

指定元素的水平对齐方式

值描述
left文本居左排列，默认值
right把文本排列到右边
center把文本排列到中间
text-decoration

text-decoration属性规定添加到文本的修饰，下划线、上划线、删除线等

值描述
underline定义下划线
overline定义上划线
line-through定义删除线
text-transform

控制文本的大小写

值描述
capitalize每个单词首字母大写
uppercase单词的所有字母大写
lowercase单词的所有字母小写
text-indent

属性规定文本块中首行文本的缩进

.p2{
    text-indent: 30px;/*两个字的距离*/
}

表格属性

使用css 使 html 表格更加美观

表格边框
示例
table,td{
    /* 第一个属性表示边框的像素距离，第二个属性表示边框的线段类型，第三个属性表示颜色 */
    border: 1px solid red;
}
折叠边框
示例
table{
    /* 折叠边框 */
    border-collapse: collapse;
}
表格的高度和宽度

width和height属性定义表格的宽度和高度

示例
table{
    /* 折叠边框 */
    border-collapse: collapse;
    /* 设置边框长和宽 */
    width: 500px;
    height: 300px;
}
表格文字对齐

表格中的文本对齐和垂直对齐属性

text-align属性设置水平对齐方式，向左、右或中心

示例
td{
    text-align: center;
    vertical-align: top;
    vertical-align: bottom;
    vertical-align: center;
}
表格填充

相当于设置表格的宽和高

示例
td{
    padding: 20px;
}
设置表格的颜色

有表格边框颜色、背景颜色、文本颜色

示例
td{
    background-color: #555555;
    color: #ffffff;
}

关系选择器

后代选择器
定义

选择所有元素被E元素包含的F元素，中间空格隔开

语法
EF{}
示例
ul li{
    color: red;
}
子代选择器
定义

选择所有作为E元素的直接子类元素F，对更深一层的元素不起作用，用“>”表示

语法
E>F {}
示例
div>p{
    color: red;
}
相邻兄弟选择器
定义

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素

注意：只能向下选择

语法
E+F{}
示例
通用兄弟选择器
定义

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开

语法
E~F{}

css盒子模型

概念

所有html元素可以看做盒子，在CSS中，“box model”这一术语是用来设计和布局时使用css盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：

外边距、边框、内边距和实际内容

外边距：清除边框区域，外边距是透明的

边框：围绕在内边距和内容外的边框

内边距：清除内容周围的区域，内边距是透明的

内容：盒子内容，显示文本的图像

示例
div{
    width: 100px;
    height: 100px;
    background-color: red;
    padding-left: 50px;
    padding-top: 100px;
    padding-right: 150px;
    padding-bottom: 40px;
    margin-left: 50px;
    margin-top: 20px;
    margin-right: 50px;
    margin-bottom: 50px;
}

弹性盒子模型

定义

弹性盒子模型由弹性容器和弹性元素组成

弹性容器包含了一个或者多个弹性子元素

注意：弹性容器外及弹性子元素是正常渲染的。弹性盒子只定义了弹性元素如何在弹性容器内布局

注意：默认弹性盒子的摆放位置为横向摆放的。

父元素上的属性
display属性
display:flex;/*开启弹性盒*/
flex-direction属性
定义

flex-direction属性指定了弹性子元素在父类中的位置

语法
flex-direction: row|row-reverse|colume|colume-reverse

row：横向从左到右排列（默认）

row-reverse：反转横向排列

colume：纵向排列

colume-reverse：反转纵向排列，从后往前排，最后一项排在最上面

示例
.container{
    width: 500px;
    height: 500px;
    background-color: gray;
    display: flex;
    flex-direction: column;
}
justify-content属性
定义

内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐

语法
jsutify-content:flex-start|flext-end|center
示例
.container{
    width: 500px;
    height: 500px;
    background-color: gray;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
align-items属性
定义

设置水平方向上的对齐方式

语法
align-items:flex-start|flex-end|center
子元素上的属性
flex-grow/flex属性
定义

根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

示例
/* 如果在一个子元素中设置了flex属性，那么它本身的宽度（或高度）则不再生效了 */
.box1{
    width: 100px;
    height: 100px;
    background-color: red;
    flex:2;
}

.box2{
    width: 100px;
    height: 100px;
    background-color: green;
    flex:2;
}

.box3{
    width: 100px;
    height: 100px;
    background-color: blue;
    flex:1;
}

文档流

文档流是文档中可显示对象在排列时所占用的位置、空间

例如：块元素从上到下摆放、内联元素从左到右摆放

标准流里面的限制非常多，导致很多页面效果无法实现

例如：

  1. 高矮不一，底边对齐
  2. 空白折叠
  3. 元素之间用空格换行会产生空隙
解决方式
脱离文档流
  1. 浮动
  2. 绝对定位
  3. 固定定位

浮动

浮动的定义

float属性定义元素在哪个方向浮动，任何元素都可以浮动

值描述
left元素向左浮动
right元素向右浮动
浮动原理

浮动以后使元素脱离了文档流

浮动只有左右浮动，没有上下浮动

元素向左浮动

示例
.box{
    width: 200px;
    height: 200px;
    background-color: aqua;
    float: left;
}

.container{
    width: 400px;
    height: 400px;
    background-color: blueviolet;
}

img{
    width: 300px;
    float: left;
}
所有元素向左浮动

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

/*将本来竖着摆放的元素横向摆放*/
div{
    width: 300px;
    height: 300px;
    float: left;
}

.box1{
    background-color: red;
}

.box2{
    background-color: blue;
}

.box3{
    background-color: yellow;
}

注意：当容器宽度不够的时候会自动换行

清除浮动

浮动的副作用
  1. 浮动元素会造成父元素高度塌陷
  2. 后续元素会受到影响
清除浮动的方式
  1. 父元素设置高度
  2. 受影响元素增加clear属性
  3. overflow清除浮动
  4. 伪对象
示例

父元素设置高度

.container{
    width: 500px;
    height:500px;
    background-color: #888888;
}

.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
    margin: 5px;
    float: left;
}

.text{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
}

受影响元素增加clear属性

.container{
    width: 500px;
    background-color: #888888;
}

.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
    margin: 5px;
    float: left;
}

.text{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    clear: both;
}

overflow清除浮动

.container{
    width: 500px;
    background-color: #888888;
    overflow: hidden;
    clear: both;
}

.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
    margin: 5px;
    float: left;
}

.text{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
}

伪对象

.container{
    width: 500px;
    background-color: #888888;
}

.container::after{
    content: "";
    display: block;
    clear: both;
}

.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
    margin: 5px;
    float: left;
}

.text{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    clear: both;
}

定位

position属性指定了元素的定位类型

值描述
relative相对定位
absolute绝对定位
fixed固定定位

绝对定位和固定定位会脱离文档流，设置定位以后可以使用四个方向键

相对定位
示例
div{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 200px;
    top:100px
}
绝对定位
示例
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 100px;
    top: 200px;
}

.box2{
    width: 300px;
    height: 300px;
    background-color: blue;
}

.box3{
    width: 200px;
    height: 200px;
    background-color: blueviolet;
    position: absolute;
    left: 50px;
    top: 100px;
}

注意：有多少个元素是绝对定位就会出现绝对定位个数加一的层次

固定定位
.box1{
    width: 100px;
    height: 100px;
    background-color: brown;
    position: fixed;
    left: 100px;
    top: 100px;
}

.box2{
    width: 400px;
    height: 400px;
    background-color: aqua;
}

注意：定位的位置相对于滚动的界面是不动的！

注意

设置定位后，相对定位和绝对定位是相对具有定位的父级元素进行位置调整，如果父级元素不存在定位，则逐层向上寻找，直到顶层文档

定位的问题
.container{
    width: 200px;
    height: 200px;
    background-color: #888;
    position: relative;
    margin-left: 100px;
}
/* 如果container有定位box相对container进行移动；如果没有，则相对文档进行移动 */
.box{
    width: 100px;
    height: 100px;
    background-color: blue;
    position: absolute;
    left: 50px;
    top: 50px;
}
Z-index

z-index属性设置元素的堆叠位置。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

/* z-index属性可以调整元素间的覆盖关系，谁大谁在上面 */

.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    left: 100px;
    top: 200px;
    z-index: 100 ;
}

.box3{
    width: 200px;
    height: 200px;
    background-color: blueviolet;
    position: absolute;
    left: 50px;
    top: 100px;
    z-index: 50;
}

CSS3新特性（相较于CSS2）

圆角

使用css3boder-radius属性来制作圆角

规则
  1. 四个值：分别代表：左上、右上、右下、左下
  2. 三个值：分别代表：左上、右下+右上、左下
  3. 两个值：分别代表：左上右下、右上左下
  4. 一个值：四个相同圆角值
阴影

通过box-shadow向框添加一个或多个阴影

box-shadow有四个值：

值描述
h-shadow必选，水平位置的阴影
v-shadow必选，垂直方向上的阴影
blur可选，模糊距离
color可选，阴影颜色
示例
.box{
    width: 400px;
    height: 400px;
    background-color: red;
    /* 上下内边距为0，左右空间平均分配 */
    margin: 0 auto;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多样式的次数

用关键词from…to表示

0%是动画的开始，100%表示动画已经完成

@keyframes创建动画
规则
@keyframes myAAnim {
    0%{
        background-color: red;
    }
    50%{
        background-color: green;
    }
    100%{
        background-color: red;
    }
}
animation执行动画
值描述
name设置动画的名称
duration设置动画的持续时间
timing-function设置动画效果速率（如下）
delay设置动画的开始时间
iteration-count设置动画的循环次数，infinite为无限循环
direction设置动画播放方向
animation-play-state控制动画的播放状态：running代表播放，而paused代表停止播放
timing-function值描述
ease逐渐变慢
linear匀速
ease-in加速
ease-out减速
ease-in-out先加速后减速
direction值描述
normal默认为normal表示向前播放
alternate动画播放在第偶数次向前播放，第奇数次向反播放
切换背景颜色

媒体查询

媒体查询能使页面在不同终端下达到不同的效果

媒体查询会根据设备的大小自动识别加载不同的样式

设置mate标签

使设备的宽度作为视图宽度并禁止初始的缩放，在head标签里加入这个标签

示例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
媒体查询语法
示例
 /* 使用一套代码适应不同设备的屏幕比例 */
.box{
    width: 300px;
    height: 300px;
    background-color: red;
}

@media screen and (max-width: 768px) {
    .box{
        background-color: blue;
    }
    /* 使元素消失 */
    .p1{
        display: none;
    }
    .p2{
        display: none;
    }
}

@media screen and (max-width: 992px) and (min-width: 768px) {
    .box{
        background-color: green;
    }
    .p1{
        display: none;
    }
    /* 使元素显示 */
    .p2{
        display: block;
    }
}

@media screen and (min-width: 992px) {
    .box{
        background-color: red;
    }
    .p1{
        display: block;
    }
    .p2{
        display: block;
    }
}

字体图标

我们经常会用到一些图标。但是我们在使用这些图标的时，往往会遇到失真的情况，而且图片数量很多的话，页面加载速度就越慢。所以，我们可以使字体图标的方式来显示图标，既解决了失真的问题，也解决了图盘占用资源的问题。

优点
  1. 轻量性：加载速度快，减少http请求
  2. 灵活性：可以利用css设置大小颜色等
  3. 兼容性：网页字体支持所有现在浏览器，包括IE低版本
使用字体图标
  1. 官网下载图标
  2. 点击index.html图标进入说明界面
  3. 使用link引用其中的iconfont.css文件
  4. 使用span元素容纳
示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">

    <style>
        .home{
            font-size: 100px;
            color: red;
        }
    </style> 
</head>
<body>
    <span class="iconfont icon-fangzi home"></span>
</body>
</html>
乐正龙牙lox
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS3学习笔记
01-28
CSS3学习笔记思维导图
CSS3学习笔记.pdf
04-29
css
Css3学习笔记
wubangbang的博客
04-24 3545
在css3中添加属性时，不同浏览器需要加上相应的前缀，如：-moz-是Firefox的前缀，-webkit-是chrome&&Safari的前缀，-o-是opera浏览器的前缀。才能正常的在相应的浏览器中显示出来。 css3被划分为模块 最重要的模块就是选择器，框模型，背景和边框，文本效果，2D/3D转换，动画，多列布局，用户界面。 css边框：(Firefox、Chrome 以及 Safa
CSS入门学习笔记+案例
热门推荐
itboy
06-16 29万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
前端HTML5+CSS3学习笔记
Baucd的小博客
11-17 8491
前端HTML5+CSS3学习笔记
html5+css3学习笔记（持续更新
flyffffly的博客
03-17 1010
其实我早在之前就学过，只不过当时并没有记录下来，也没有理解其底层原理，所以现在再次学习一遍，本文将记录我二次学习的过程。
css3学习笔记（一）
SirM2z的博客
05-22 1344
CSS3学习笔记 一，兼容性 二，边框 三，颜色 四，文字，文本
CSS3学习笔记大全
furfur-jiang的博客
02-04 848
此片文章是CSS3 CSS3参考手册解读指南： [] 表示可选项 | 表示或者 || 表示多选一 ？ 0个或1个 *表示0个或多个 {} 表示范围 新增选择器 属性选择器 选取标签带有某些特殊属性的选择器 /* 获取到拥有该属性的元素 */ div[class^=font] { /* class^=font 表示 font 开始位置就行了 */ color: pink...
CSS 学习笔记
最新发布
weixin_42098295的博客
05-06 1251
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
CSS3学习笔记三---怪异盒模型 | 弹性盒*
Flora_hsx的博客
10-23 1376
CSS3学习笔记三---怪异盒模型 | 弹性盒*，怪异盒内容比较重要，常用，需要多练习。
CSS和CSS3学习笔记（全）
03-29
CSS和CSS3学习笔记，知识全面，知识分类清晰，内涵学习3D的链接博客
HTML、CSS、HTML5、CSS3学习笔记.zip
12-30
html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习参考 html css js 知识学习代码 源码 提供+源码 供学习...
HTML+CSS个人学习笔记
03-17
HTML+CSS个人学习笔记
css3学习笔记(新增功能，粗略版本)
01-30
css3学习笔记(新增功能，粗略版本)
云知梦 css3 学习笔记
04-01
云知梦的css学习笔记，记录了学习过程中的一些值得注意的笔记。
css经典学习笔记.zip
11-01
css经典学习笔记
html5&css3学习笔记下载
09-21
HTML5（HyperText Markup Language 5）是一种用于构建和呈现网页内容的标准的最新版本。它是由万维网联盟（W3C）开发和维护的，旨在取代之前的HTML版本。 HTML5具有许多新的功能和特性，使得网页设计和开发更加灵活和强大。其中一些突出的特点包括： 1. 语义化标签：HTML5引入了新的语义标签，如<header>、<nav>、<section>和<footer>等，使网页结构更具可读性和可访问性。 2. 视频和音频支持：HTML5内置了<video>和<audio>标签，使得在网页中嵌入和播放视频和音频变得更加简单和无需依赖插件。 3. Canvas绘图：HTML5的<canvas>元素允许开发者使用JavaScript绘制图形、动画和游戏等，提供了更强大的图形处理能力。 4. 本地存储：HTML5提供了本地存储功能，包括LocalStorage和SessionStorage，可以在客户端存储数据，减少对服务器的请求，提高网页性能。 5. 响应式设计：HTML5支持响应式布局，即能够根据设备的屏幕大小和分辨率自动调整网页的布局和样式，提供更好的用户体验。 6. WebSocket通信：HTML5引入了WebSocket API，允许实时双向通信，使得开发者可以创建更快速、实时的应用程序。 HTML5的广泛应用使得网页开发更加便捷和创新。它不仅可以用于构建传统的网页和博客，还可以用于开发移动应用、游戏、视频播放器等。同时，HTML5也具有更好的兼容性和跨平台性，可以在不同的浏览器和操作系统上运行。 总之，HTML5的出现为网页设计和开发带来了新的可能性和优势，使得用户能够获得更丰富、交互性更强的网页内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值