<img> 标签 元素形式

一、<img>的属性

1.1 src：图片路径

1.2 alt：对图片进行描述，一般不显示，若无法显示，则会出现（一些浏览器会显示）

主要用法：搜索引擎会根据alt中的内容来识别图片；如果不写alt属性则图片不会被搜索引擎所收录

注意：

一般情况在PC端，不建议修改图片的大小（由美工进行裁定）。
但是在移动端，经常需要对图片进行缩放（大图缩小）。

1.3 图片格式

① jpeg（jpg）

- 支持的颜色比较丰富，不支持透明和动图
- 一般用来显示图片

② gif

-支持的颜色比较少，支持简单透明和动图
- 颜色单一的图片，动图

③ png

- 支持颜色丰富，支持复杂透明，不支持动图
- 专为网页而生的

④ webp

- 这种格式是谷歌推出的专门用来表示网页中图片的一种格式
- 优点：具备以上所有格式的优点，同时文件比较小
- 缺点：兼容性不好

注：

效果一样，用文件大小小的
效果不同，用效果好的

 

二、元素的两种形式

2.1 行内元素 （inline element）

2.2 块元素 （block element）

但是，如<img>标签则属于替换元素（介于行内元素和块元素之间）

display可以用来设置元素显示的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        /* 
            display用来设置元素的显示类型
                可选值：
                        inline：将元素设置为行内元素
                        block：将元素设置为块元素
                        inline-block：将元素设置为行内块元素
                                    行内块，既可以设置宽度和高度又不会独占一行
                        table：将元素设置为一个表格
                        none：元素不在页面中显示（不占据页面位置）

            visibility用来设置元素的显示状态
                可选值：
                        visible：默认值，元素在页面正常显示
                        hidden：元素在页面中隐藏，但是依旧占据页面位置
        */
        *{
            margin: 0;
            padding: 0;
        }

       .box1{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border-top: 2px solid #999;
        }

       .box2{
            width: 50px;
            height: 50px;
            background-color: yellow;
            border-top: 2px solid red;
            display: inline-block;
            margin-top: -2px;
        }

       .box{
            width: 50px;
            height: 50px;
            background-color: green;
            display: none;
            /* visibility: hidden */
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>
posted @ 2020-10-29 10:53  娜豆  阅读(272)  评论(0)  编辑  收藏  举报