CSS（JavaEE初阶系列14）

目录

前言：

1.CSS是什么

1.1CSS基本语法

2.引入样式

2.1内部样式表

2.2行内样式表

2.3外部样式

3.选择器

3.1选择器的种类

3.1.1基础选择器

3.1.2复合选择器

4.常用元素属性

4.1字体属性

4.2文本属性

4.3背景属性

4.4圆角矩形

4.5元素的显示模式

4.6盒模型

4.7内边距

4.8外边距

4.9弹性布局

结束语：

前言：

在上一节中小编与大家分享了有关于JavaScript的一些基础知识，以及给大家演示了几个案例，接下来小编带着大家一起来看一下有关于前端中的另一个技术CSS，想要让界面好看，那么就离不开CSS的渲染。话不多说我们一起来看吧。

1.CSS是什么

CSS是层叠样式表，所谓“层叠”就是针对html的元素/标签，可以同时应用多组CSS样式，将多组样式叠加在一起。“样式”就是大小、位置、间距、颜色、字体、边框、背景....统称为“样式”，它描述了一个网页张啥样。

CSS能够对网页元素的位置的排版进行像素精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。

1.1CSS基本语法

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改。
  • 声明决定修改啥。
  • 声明的属性是键值对，使用;区分键值对，使用：区分键和值。

<body>

    <style>

        p{

            /* 设置字体颜色 */

            color: red;

            /* 设置字体大小 */

            font-size: 30px;

        }

    </style>

    <p>hello</p>

</body>

注意：

  • CSS要写到style标签中（后面还会介绍其他写法）。
  • style标签可以放到页面任意位置，一般是放置在head标签中。
  • CSS使用/**/作为注释。

2.引入样式

2.1内部样式表

内部样式是直接把CSS嵌入到HTML中，放到style标签里。

    <!-- 在style标签中写的是css代码，他可以放置在head中也可以放置在body中 -->

    <style>

        div{

            font-size: 50px;

            color: red;

        }

    </style>

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 在style标签中写的是css代码，他可以放置在head中也可以放置在body中 --><style>div{font-size: 50px;color: greenyellow;}</style><div>hello world！</div>
</body>
</html>


结果展示：

2.2行内样式表

行内样式是将CSS写到一个单独的.css文件中，有html通过link标签来引进来。

首先我们先来创建一个.css文件。

代码展示：

html代码展示：

<!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标签将css文件引入进来 --><link rel="stylesheet" href="style.css">
</head>
<body><div>hello world！</div>
</body>
</html>


css文件代码展示：

div {font-size: 50px;color: blue;
}


结果展示：

2.3外部样式

内部样式也叫内联样式，他是直接把CSS属性写到元素的style属性内。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="color: blueviolet; font-size: 60px;"> hello world!</div>
</body>
</html>


结果展示：

3.选择器

选择器就是要我们选中页面中的元素然后再进行操作。只有先选中元素才能生效。下面我们来分别来看一下四种选择器。

3.1选择器的种类

3.1.1基础选择器

  • 标签选择器

标签选择器是用来选中页面中的所有同名标签的元素，它的缺点也很显而易见就是很难针对某个元素进行个性化制定。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标签选择器</title>
</head>
<body><style>p {color: red;font-size: 30px;}div {color: burlywood;font-size: 20px;}</style><p>hello</p><p>world</p><div>css</div><div>JavaScript</div>
</body>
</html>


结果展示：

  • 类选择器

在css中创建一个“类名”，这个类名对应一组css属性，制定让html元素应用这样的类名即可。

代码展示：

css文件代码：

.one {color: rosybrown;font-size: 50px;
}
.tow {color: blueviolet;font-size: 30px;
}


html文件代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类选择器</title><link rel="stylesheet" href="Test3.css">
</head>
<body><div class="one">hello</div><div class="tow">hello</div>
</body>
</html>


结果展示：

  • id选择器

一个html标签中可以有一个id属性，这个属性的值会被作为身份标识的唯一值。所以通过id选择器就可以给制定元素设置样式了。

代码展示：

css代码展示：

#test {color: brown;font-size: 50px;
}


html代码展示：
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id选择器</title><link rel="stylesheet" href="Test4.css">
</head>
<body><div id="test">hello world</div>
</body>
</html>

结果展示：

  • 通配符选择器

通配符选择器就是给所有的都设置样式。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符选择器</title>
</head>
<body><style>* {color: aquamarine;font-size: 40px;}</style><div>hello</div><p>world</p>
</body>
</html>


结果展示：

3.1.2复合选择器

上述都是css中最基础的选择器，其实在css中海油很多复杂的“复合选择器”，下面我们只给大家介绍一种后代选择器。

  • 后代选择器 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title>
</head>
<body><div class="one"><h3>hello</h3></div><div class="tow"><h3>world</h3></div><style>.one {color: chocolate;}.tow {color: cadetblue;}</style>
</body>
</html>

后代选择器的效果就是把上述三种基础选择器进行组合，同时能够体现出“标签的层次结构”。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title>
</head>
<body><div class="one"><h3>hello</h3></div><div class="tow"><h3>world</h3></div><style>.one {color: chocolate;}.tow {color: cadetblue;}</style>
</body>
</html>


结果展示：

除了后代选择器之外还有以下这些，小编这里就不给大家一一介绍了。

  • 子选择器
  • 并集选择器
  • 伪类选择器

4.常用元素属性

4.1字体属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体属性</title>
</head>
<body><div class="one">hello</div><style>.one {font-family: '微软雅黑';font-size: 100px;font-weight: 900;font-style: italic;}</style>
</body>
</html>


结果展示：

我们也可以在控制台中通过勾选下面的条件来看到效果。

4.2文本属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本属性</title>
</head>
<body><div class="one">hello world</div><style>.one {font-size: 100px;/* 文本颜色 */color: brown;/* 文本对齐，左对齐(left)，右对齐(right)，居中对齐(center) */text-align: center;/* 文本装饰，加一个下划线... */text-decoration: underline;/* 文本缩进 */text-indent: 20px;/* 行高(行间距) */line-height: 100px;}</style>
</body>
</html>


结果展示：

注意：

这里颜色的写法有很多中，其中可以直接写表示颜色的单词，也可使用rgb的方式来表示，还可以使用十六进制的方式来表示。

 

4.3背景属性

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景设置</title>
</head>
<body><div class="background">1</div><style>.background {font-size: 100px;width: 200px;height: 160px;color: blueviolet;background-color: gold;/* 导入背景图 */border-image: url(cat.jpg);/* 禁止平铺 */background-repeat: no-repeat;/* 设置背景图的位置 */background-position: center center;/* 设置背景图的大小 */background-size: 2000px 1600px;}      </style>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景设置</title>
</head>
<body><div class="one"></div><style>.one {background-image: url(cat.jpg);height: 300px;background-repeat: no-repeat;background-position: center center;}</style>
</body>
</html>


结果展示：

4.4圆角矩形

我们之前生成的边框都是矩形的，但是如果我们想要让他变成圆边的该怎么弄呢？如下代码所示：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆角矩形</title>
</head>
<body><div>111</div><style>div {width: 200px;height: 100px;border: 2px solid green;border-radius: 10px;}</style>
</body>
</html>


结果展示：

4.5元素的显示模式

在CSS中，HTML的标签的显示模式有很多，此处只重点介绍两个：

块级元素和行内元素。

块级元素：

        像我们之前学习的h1-h6、p、div、ul、ol...都是块级元素。

它的特点：

  • 独占一行。
  • 高度、宽度、内外边距、行高都可以控制。
  • 宽度默认是父级元素宽度的100%（和父级元素一样框宽）。
  • 是一个容器（盒子），里面可以放行内和块级元素。

行内元素/内联元素：
        常见的元素有：a、strong、b、em、i、del、s、ins...

特点：

  • 不独占一行，一行可以显示多个。
  • 设置高度、宽度、行高无效。
  • 左右外边距有效（上下无效），内边距有效。
  • 默认宽度就是本身的内容。
  • 行内元素只能容纳文本和其他行内元素，不能放块级元素。

行内元素和块级元素的区别：

  • 块级元素独占一行，行内元素不独占一行。
  • 块级元素可以设置宽高，行内元素不能设置宽高。
  • 块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置。

使用display属性可以修改元素的显示模式：

  • display：block；（修改成块级元素）。
  • display：inline；（修改成行内元素）。

一般都是修改成块级元素，不会说是把块级元素修改成行内元素，也可以使用display：none实现元素隐身的效果。

4.6盒模型

每一个HTML元素就相当于是一个矩形的“盒子”，这个盒子是由这几个部分组成的。

  • 边框：border
  • 内容：content
  • 内边距：padding
  • 外边距：margin

如下图所示：

4.7内边距

padding是设置内容和边框之间的距离的。

基础写法：
默认内容是顶着边框来放置的，用padding来控制这个距离可以给四个方向都加上边距。

  • padding-top 上
  • padding-bottom 下
  • padding-left 左
  • padding-right 右

复合写法：

可以把多个方向的padding合并到一起。

  • padding：5px; 表示四个方向都是5px。
  • padding：5px 10px; 表示上下内边距是5px，左右内边距是10px。
  • padding：5px 10px 20px; 表示上内边距是5px，左右内边距是10px，下内边距是20px。
  • padding：5px 10px 20px 30px; 表示上内边距是5px，右内边距是10px，下内边距是20px，左内边距是30px。（顺时针）

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边距</title>
</head>
<body><div>设置内边距</div><style>* {/* 防止撑大盒子 */box-sizing: border-box;}div {padding-top: 20px;padding-bottom: 10px;padding-left: 20px;padding-right: 10px;}</style>
</body>
</html>


结果展示：

4.8外边距

基础写法：

控制盒子和盒子之间的距离。可以给四个方向都加上外边距。

  • margin-top 上
  • margin-bottom 下
  • margin-left 左
  • margin-right 右

复合写法：

规则与padding一样。

  • margin：10px; 四个方向都是10px
  • margin：10px 20px; 上下外边距为10px，左右外边距为20px。
  • margin：10px 20px 30px; 上外边距10px，左右外边距20px，下外边距30px。
  • margin：10px 20px 30px 40px; 上外边距10px，右外边距20px，下外边距30px，左外边距40px。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距</title>
</head>
<body><div>test</div><style>* {box-sizing: border-box;}div {margin-top: 10px;margin-bottom: 20px;margin-left: 30px;margin-right: 40px;}</style>
</body>
</html>


结果展示：

 

4.9弹性布局

我们先来看一下下面的这个案例。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性布局</title>
</head>
<body><div class="one"><div class="tow">hello1</div><div class="tow">hello2</div><div class="tow">hello3</div><div class="tow">hello4</div></div><style>.one {width: 1000px;height: 300px;background-color: brown;}.tow {width: 150px;height: 100px;background-color: blueviolet;}</style>
</body>
</html>


结果展示：

通过结果我们可以看出来里面的元素是垂直方向排列的，那么有的时候我们希望块级元素是可以水平方向排列。此时我们就可以使用弹性布局了。

如下所示：
代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性布局</title>
</head>
<body><div class="one"><div class="tow">hello1</div><div class="tow">hello2</div><div class="tow">hello3</div><div class="tow">hello4</div></div><style>.one {width: 1000px;height: 300px;background-color: brown;/* 开启弹性布局 *//* 一旦开启了弹性布局，此时内部的子元素就会按照水平的方向进行排布，子元素里面的子元素是不受影响的 */display: flex;/* justify-content：设置水平方向的排列规则 */justify-content: space-between;/* align-items：设置垂直方向的排列规则 */align-items: center;}.tow {width: 150px;height: 100px;background-color: blueviolet;}</style>
</body>
</html>


结果展示：

结束语：

好了这节的CSS基础知识小编就给大家讲解到这里了，有不会的地方记得给小编留言，希望这节对大家了解CSS有一定帮助，想要学习的同学记得关注小编和小编一起学习吧！如果文章中有任何错误也欢迎各位大佬及时为小编指点迷津（在此小编先谢过各位大佬啦！）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/40179.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Leetcode】84.柱状图中最大的矩形（Hard）

【Leetcode】84.柱状图中最大的矩形（Hard）

一、题目 1、题目描述 给定 n n n 个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为 1 。 求在该柱状图中，能够勾勒出来的矩形的最大面积。 示例1： 输入：heights = [2,1,5,6,2,3] 输出：10 解释：最大的矩形为图中红色区域，面积为 10示例2：…
阅读更多...
Stephen Wolfram：那么…ChatGPT 在做什么，为什么它有效呢？

Stephen Wolfram：那么…ChatGPT 在做什么，为什么它有效呢？

So … What Is ChatGPT Doing, and Why Does It Work? 那么…ChatGPT在做什么&#xff0c;为什么它有效呢&#xff1f; The basic concept of ChatGPT is at some level rather simple. Start from a huge sample of human-created text from the web, books, etc. Then train…
阅读更多...
IDA远程调试真机app

IDA远程调试真机app

IDA远程调试真机app 第一步&#xff1a;启动 android_server&#xff0c;并修改端口 # 启动android_server ./android_server -p31928第二步&#xff1a;端口转发、挂起程序 # 端口转发adb forward tcp:31928 tcp:31928# 挂起程序 adb shell am start -D -n com.qianyu.antid…
阅读更多...
Hyper-V增加桥接网络设置（其他方式类同）

Hyper-V增加桥接网络设置（其他方式类同）

点击连接到的服务器&#xff0c;右单击或者右边点击“虚拟交换机管理器” 选择网络种类 配置虚拟交换机信息 外部网络选择物理机网卡设备
阅读更多...
中国“诺贝尔奖”未来科学大奖公布2023年获奖名单

中国“诺贝尔奖”未来科学大奖公布2023年获奖名单

未来科学大奖委员会于8月16日公布2023年获奖名单。柴继杰、周俭民因发现抗病小体并阐明其结构和在抗植物病虫害中的功能做出的开创性工作获得“生命科学奖”&#xff0c;赵忠贤、陈仙辉因对高温超导材料的突破性发现和对转变温度的系统性提升所做出的开创性贡献获得“物质科学奖…
阅读更多...
突破网络编程1024限制的方法(修改配置文件)

突破网络编程1024限制的方法(修改配置文件)

文章目录 概述修改linux配置相关命令步骤1. 打开终端2. 使用sudo权限编辑文件3. 添加资源限制配置4. 保存和退出5. 重启系统或重新登录 其他方法1. 使用事件驱动的框架2. 使用连接池3. 负载均衡4. 使用线程池和进程池5. 升级操作系统设置6. 使用专业的高性能服务器7. 分布式架构…
阅读更多...
深入源码分析kubernetes informer机制（三）Resync

深入源码分析kubernetes informer机制（三）Resync

[阅读指南] 这是该系列第三篇 基于kubernetes 1.27 stage版本 为了方便阅读&#xff0c;后续所有代码均省略了错误处理及与关注逻辑无关的部分。 文章目录 为什么需要resyncresync做了什么 为什么需要resync 如果看过上一篇&#xff0c;大概能了解&#xff0c;client数据主要通…
阅读更多...
uniapp开发微信小程序使用painter将页面转换为图片并保存到本地相册

uniapp开发微信小程序使用painter将页面转换为图片并保存到本地相册

引言 我使用到painter的原因是&#xff0c;在uniapp开发微信小程序时&#xff0c;需要将一个页面的内容转换成图片保存到本地相册。 起初在网上找到很多都是在uniapp中使用 html2canvas 将网页转换成图片再jspdf将图片转换为pdf&#xff0c;但是这种方式在小程序环境不支持&am…
阅读更多...
opencv进阶08-K 均值聚类cv2.kmeans()介绍及示例

opencv进阶08-K 均值聚类cv2.kmeans()介绍及示例

K均值聚类是一种常用的无监督学习算法&#xff0c;用于将一组数据点分成不同的簇&#xff08;clusters&#xff09;&#xff0c;以便数据点在同一簇内更相似&#xff0c;而不同簇之间差异较大。K均值聚类的目标是通过最小化数据点与所属簇中心之间的距离来形成簇。 当我们要预测…
阅读更多...
opencv实现以图搜图

opencv实现以图搜图

这里写目录标题 1. 步骤1.1 导入OpenCV库&#xff1a;1.2 加载图像1.3 提取特征1.4 匹配特征1.5 显示结果 2. 完整代码3. 测试图片及效果 1. 步骤 1.1 导入OpenCV库&#xff1a; 在您的C代码中&#xff0c;首先需要导入OpenCV库。您可以使用以下语句导入核心模块&#xff1a;…
阅读更多...
化繁为简，使用Hibernate Validator实现参数校验

化繁为简，使用Hibernate Validator实现参数校验

前言 在之前的悦享校园的开发中使用了SSM框架&#xff0c;由于当时并没有使用参数参数校验工具&#xff0c;方法的入参判断使用了大量的if else语句&#xff0c;代码十分臃肿&#xff0c;因此最近在重构代码时&#xff0c;将框架改为SpringBoot后&#xff0c;引入了Hibernate V…
阅读更多...
有一种新型病毒在 3Ds Max 环境中传播，如何避免？

有一种新型病毒在 3Ds Max 环境中传播，如何避免？

3ds Max渲染慢&#xff0c;可以使用渲云渲染农场&#xff1a; 渲云渲染农场解决本地渲染慢、电脑配置不足、紧急项目渲染等问题&#xff0c;可批量渲染&#xff0c;批量出结果&#xff0c;速度快&#xff0c;效率高。 此外3dmax支持的CG MAGIC插件专业版正式上线&#xff0c;…
阅读更多...
0基础学习VR全景平台篇 第85篇：智慧眼-如何分配角色的权限？

0基础学习VR全景平台篇 第85篇：智慧眼-如何分配角色的权限？

一、功能说明 角色权限&#xff0c;是指给智慧眼的所有角色成员分配具体的操作权限。 二、后台编辑界面 1、点击“添加权限”&#xff0c;选择其可操作的“权限”。注意权限只能逐项选择&#xff0c;所以如果某个角色拥有多项权限的话&#xff0c;那么需要进行多次添加。“快…
阅读更多...
uniapp app 实现右上角回首页；点homeButton返回上一页；onNavigationBarButtonTap不生效问题

uniapp app 实现右上角回首页；点homeButton返回上一页；onNavigationBarButtonTap不生效问题

场景&#xff1a; app&#xff0c;Android移动端 实现点击右上角图标&#xff0c;回首页。 问题&#xff1a;用了官网的 homeButton&#xff0c;图标正常展示了&#xff0c;也可点击&#xff0c;但每次点击后是会返回上一页而非首页。 后来查到说&#xff0c;要结合onNavigatio…
阅读更多...
linux两台服务器互相备份文件（sshpass + crontab）

linux两台服务器互相备份文件（sshpass + crontab）

crontab crontab是linux系统自带的定时调度软件&#xff0c;可用于设置周期性被执行的指令&#xff0c;一般用在每天的非高峰负荷时间段运行作业&#xff0c;可在无需人工干预的情况下运行作业。支持在一周或一月中的不同时段运行。 crontab命令允许用户提交、编辑或删除相应的…
阅读更多...
滴滴Ceph分布式存储系统优化之锁优化

滴滴Ceph分布式存储系统优化之锁优化

摘自&#xff1a;https://mp.weixin.qq.com/s/oWujGOLLGItu1Bv5AuO0-A 2020-09-02 21:45 0.引言 Ceph是国际知名的开源分布式存储系统&#xff0c;在工业界和学术界都有着重要的影响。Ceph的架构和算法设计发表在国际系统领域顶级会议OSDI、SOSP、SC等上。Ceph社区得到Red Hat…
阅读更多...
C语言——动态内存管理

C语言——动态内存管理

动态内存管理详解 前言&#xff1a;一、为什么存在动态内存分配二、动态内存函数2.1malloc函数2.2calloc函数2.3realloc函数2.4free函数 三、常见的动态内存错误3.1 对NULL指针解引用操作3.2 对动态开辟空间的越界访问3.3 对非动态开辟内存使用free释放3.4 使用free释放动态开辟…
阅读更多...
Unity UI内存泄漏优化

Unity UI内存泄漏优化

项目一运行&#xff0c;占用的内存越来越多&#xff0c;不会释放&#xff0c;导致GC越来越频繁&#xff0c;越来越慢&#xff0c;这些都是为什么呢&#xff0c;今天从UI方面谈起。 首先让我们来聊聊什么是内存泄漏呢&#xff1f; 一般来讲内存泄漏就是指我们的应用向内存申请…
阅读更多...
Rabbitmq消息不丢失

Rabbitmq消息不丢失

目录 一、消息不丢失1.消息确认2.消息确认业务封装2.1 发送确认消息测试2.2 消息发送失败&#xff0c;设置重发机制 一、消息不丢失 消息的不丢失&#xff0c;在MQ角度考虑&#xff0c;一般有三种途径&#xff1a; 1&#xff0c;生产者不丢数据 2&#xff0c;MQ服务器不丢数据…
阅读更多...
设计HTML5列表和超链接

设计HTML5列表和超链接

在网页中&#xff0c;大部分信息都是列表结构&#xff0c;如菜单栏、图文列表、分类导航、新闻列表、栏目列表等。HTML5定义了一套列表标签&#xff0c;通过列表结构实现对网页信息的合理排版。另外&#xff0c;网页中还包含大量超链接&#xff0c;通过它实现网页、位置的跳转&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023