• 零基础html学习/刷题-第二期

     之前写的html学习的文章都是零零散散的，这次出个整合的专栏，把内容集中起来，做个知识复盘，顺带刷刷题。牛客网非常值得一用，刷题也很好刷！对于基础入门最合适不过。

    博主主页：WDm-xmax 原id：GUIDM

    收入专栏：零基础html学习/刷题

    刷题网站：牛客网

    ​

    学习

     一、图片

    标签

    是个单标签。

    属性

    标签有两个必需的属性：src 属性 和 alt 属性。

    可选属性：

    align
    • top
    • bottom
    • middle
    • left
    • right
    		规定如何根据周围的文本来排列图像。
    borderpixels定义图像周围的边框。
    height
    • pixels
    • %
    		定义图像的高度。
    hspacepixels定义图像左侧和右侧的空白。
    ismapURL将图像定义为服务器端图像映射。
    loading
    • eager
    • lazy
    		规定浏览器是应该立即加载图像还是推迟加载屏幕外图像。
    longdescURL指向包含长的图像描述文档的 URL。
    referrepolicy
    • no-referrer
    • no-referrer-when-downgrade
    • origin
    • origin-when-cross-origin
    • unsafe-url
    		规定在获取图像时要使用的引荐来源信息。
    usemapURL将图像定义为客户器端图像映射。
    vspacepixels定义图像顶部和底部的空白。
    width
    • pixels
    • %
    		设置图像的宽度。
    title文本提示，鼠标放上去时显示
    <img src="html/1.png" alt="">

    ​

     二、路径

    1、相对路径

    根据文件和文件夹之间的关系，来确定文件查找途径。

    • 当页面文件和图片文件是同级关系，直接使用图片名称。（页面和图片在同一个文件夹）
    <img src="图片名称"/>
    • 当页面文件和图片所在的文件夹是同级关系，需定义路径。（页面引用子文件夹里的图片）
    <img src="图片所在文件夹名称/图片文件"/>
    • 当页面所在的文件夹和图片是同级关系，需要返回所在页面的上一级。（页面引用外层文件里的图片）
    <img src="../图片所在文件夹/图片文件" />

    2、绝对路径

    • 引用互联网资源
    • 引用本地磁盘里的文件

    三、图片格式

    GIF（无损）、JPG（表现图片）、JPEG（表现图片）、PNG、BMP（网站注册/验证码）、webp（针对谷歌浏览器）

    有损压缩：对图像本身的改变，在保存图像时保留了较多的亮度信息，将色相和饱和度的信息和周围的像素合并，由于信息量减少了，所以压缩比可以很高，质量也下降。有损压缩可以减少图像在内存和磁盘中占用的空间。

    无损压缩：对文件本身的压缩，可以完全还原，压缩率低。

    刷题（第二期）

    第一题

    1. <html>
    2.     <head>
    3.         <meta charset=utf-8>
    4.         <style type="text/css">
    5.             .box {
    6.                 /*补全代码*/
    7.              width:4em;
    8.              height:4em
    9.             }
    10.         style>
    11.     head>
    12.     <body>
    13.         <div class='box'>div>
    14.     body>
    15. html>

    第二题

     使用元素选择器、id选择器、类选择器。文字颜色用color，字体大小用font-size。

    1. <html>
    2.     <head>
    3.         <meta charset=utf-8>
    4.         <style type="text/css">
    5.             /*补全代码*/
    6.             div {
    7.                 color:rgb(255, 0, 0);
    8.                 font-size:20px;
    9.             }
    10.             .green{
    11.                color:rgb(0, 128, 0); 
    12.             }
    13.             #black{
    14.                 color:rgb(0, 0, 0);
    15.             }
    16.         style>
    17.     head>
    18.     <body>
    19.         <div>红色div>
    20.         <div class='green'>绿色div>
    21.         <div id='black'>黑色div>
    22.     body>
    23. html>
  • 相关阅读:
    使用微服务实现多设备自动调度
    【7】Docker中部署RabbitMQ
    ExpressLRS开源代码之工程结构
    嵌入式Linux 开篇大吉
    Go 语言搭建个人博客（qiucode.cn 重构篇 二）
    springboot1:项目启动
    Legion Y9000X IRH8 2023款(82Y3)原装出厂OEM预装Windows11系统
    Python利用PIL将png图像转jpg图像
    Retrofit 帮助 OKHttp 解决了多少问题？
    运算符+分支+循环语句
  • 原文地址：https://blog.csdn.net/m0_61901625/article/details/126373831