html考题（1）

于2023-08-25 11:43:14发布

1. img标签的title和alt有什么区别？

区别一：
title：鼠标移入到图片显示的值
alt  ：图片无法加载时显示的值

区别二：
在seo的层面上，搜索引擎抓取不到图片的内容，所以前端写在写img标签的时候为了增加seo效果，要加入alt属性来描述这张图片是什么内容或者关键词

2. png、jpg、gif这些图片格式解释一下，分别什么时候用？

png：无损压缩，体积比jpg的大，适合做小图标
jpg：有损压缩，体积比png的小，适合做中大图片
gif：一般是做动图的
webp：同时支持有损或者无损，相同质量的图片，webp具有更小的体积，但是兼容性不是特别好

3. 写一个“左中右“布局占满屏幕，其中左、右两块固定宽度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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html,body {
            height: 100%;
        }
        .center {
            background: red;
            height: 100%;
            padding: 0 200px;
        }
        .left {
            background: green;
            width: 200px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .right {
            background: yellow;
            width: 200px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>