图片标签，内联框架 css简介

翘指

已于 2022-10-11 14:46:18 修改

阅读量1.0k

点赞数

分类专栏： html 文章标签： java servlet 前端 css

于 2022-10-11 14:44:43 首次发布

本文链接：https://blog.csdn.net/m0_65334415/article/details/127223462

版权

html 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、图片标签：

属性：

scr 属性指定的是外部图片的路径（路径规则和超链接是一样的）

frameborder 指定内联框架的边框，若为0则表示没有框架，这样看上去可能会更美观一些

三、css 简介：

一、css

二、使用css来修改元素的样式

第一种方式：在标签内部通过style属性来设置元素的样式

第二种方式：（内部样式表）

第三种方法：（外部样式表）

一、图片标签：

图片标签用于向当前页面中引入一个外部图片

使用img标签来引入外部图片，img标签是一个自结束标签，img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点），之所以是替换标签，那是因为img实际上被引入的图片所替换，所以叫做替换标签

属性：

scr 属性指定的是外部图片的路径（路径规则和超链接是一样的）

alt 图片的描述，这个描述默认情况下是不会显示的，有些浏览器会因为图片无法加载时而显示

但是这个alt 是必要的，因为搜索引擎会根据alt标签中的内容来识别图片，如果不写alt属性，则图片就不会被搜索引擎所搜索到

width 图片的宽度（单位是像素）

height 图片的高度

宽度和高度中如果只修改了一个，则另一个会等比例进行缩放

注意：

一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大的，因为400像素大小的图片和200像素大小的图片所占用的内存大小是完全不一样的，当我们将内存大的图片缩小到内存小的图片时，就会出现内存浪费的情况，而当我们将低像素的照片提升为高像素的照片时，就有可能发生照片失真的情况，即照片模糊不清晰

但是在移动端，经常需要对图片进行缩放（大图缩小）

<!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>
</head>
<body>
    <img  width="340" src="./微信图片_20220908165656.jpg" alt="夕阳图片">
<!--图片的宽度，单位是像素-->
    <img src="./微信图片_20220908165656.jpg" alt="夕阳">
</body>
</html>

既可以引入内部的图片也可以引入外部的图片，当引入外部的图片时，只需要将外部图片的连接写入src属性内即可，不过在引入的时候，要注意版权问题，这实际上是在盗取图片

二、内联框架：

用于向当前页面中引入一个其他的页面

src指定要引入的网页的路径

frameborder 指定内联框架的边框，若为0则表示没有框架，这样看上去可能会更美观一些

一般情况下内联框架我们用的很少，因为从外部引入的网站不会被搜索引擎检索到

<!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>
</head>
<body>
    <iframe src="https://www.bl.com/" width="800" height="600" frameborder="0"></iframe>
    
</body>
</html>

三、css 简介：

网页分成三个部分：

1、结构（HTML）

2、表现（css）

3、行为（javascript）

一、css

层叠样式表

网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式

而最终我们都看到只是网页的最边上一层

总之一句话：css用来设置网页中元素的样式

二、使用css来修改元素的样式

第一种方式：在标签内部通过style属性来设置元素的样式

问题：

如果使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素时必须在每一个元素中都复制一遍，并且当样式发生变化的时候，我们必须要一个一个的进行修改，非常的不方便，当我们进行开发工作的时候，所书写的代码可能非常多，如果使用内联样式的话，维护代码的时候就会非常的复杂，所以我们开发时绝对不要使用内联样式。

<!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>
</head>
<body>
    <p style=color:red;font-size:60px;> css</p>
</body>
</html>

第二种方式：（内部样式表）

内联样式表：将样式写到head中的style标签里，然后通过css的选择器来选中元素并且为其设置样式

可以同时为多个标签设置样式，并且修改时只需要修改一处即可

内部样式表更加方便对样式进行复用,但是他也有一个问题，那就是不能跨越网页进行使用，它里面的样式不能跨页面进行复用

<!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>

    p{
        color: blue;
        font-size: 60px;
    }
    </style>
</head>
<body>
    <p>月落乌啼霜满天</p>
    <p>少小离家老大回</p>
    </body>
</html>

第三种方法：（外部样式表）

为了解决跨页面的问题，所以我们要引入第三种方式（外部样式表）

外部样式表也是也是最佳实践时用的方法

可以将css样式编写到一个外部的css文件中，然后通过link标签来引入外部的css文件中

外部样式表只需要通过link标签来进行引入

意味着只要想使用这些样式的网页都可以对其进行引用

使样式可以在不同页面之间进行复用

将样式编写到外部css文件中，可以使用到浏览器的缓存进制（css文件被浏览器加载完毕之后，被引入要其他的网页中之后，就不用再进行第二次加载）

从而加快网页的加载速度，提高用户的体验

注意：外部的Css文件的扩展名后面应该是.css

<!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>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    
    <p>月落乌啼霜满天</p>
    <p>少小离家老大回</p>
</body>
</html>