The html learning articles I wrote before are all scattered. This time I will publish an integrated column to gather the content, make a knowledge review, and brush up the questions by the way. Niuke.com is very worth using, and it is also very easy to brush the questions! It's perfect for getting started with the basics.

Blogger homepage: WDm-xmax Original id: GUIDM

Income column: zero-based html learning / brushing questions

Website for brushing questions: Niuke.com

study

1. Pictures

Label

<img/> is a single tag.

Attributes

The <img> tag has two required attributes: the src attribute and the alt attribute .

Optional attributes:

align	top bottom middle left right	Specifies how to arrange the image according to the surrounding text.
border	pixels	Defines a border around the image.
height	pixels %	Defines the height of the image.
hspace	pixels	Defines the whitespace to the left and right of the image.
ismap	URL	Defines an image as a server-side image map.
loading	eager lazy	Specifies whether the browser should load images immediately or defer loading offscreen images.
longdesc	URL	Points to a URL containing a long image description document.
referrepolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies the referrer information to use when fetching images.
usemap	URL	Defines an image as a client-side image map.
vspace	pixels	Defines the whitespace at the top and bottom of the image.
width	pixels %	Sets the width of the image.
title		Text tooltip, displayed when the mouse is over

<img src="html/1.png" alt="">

2. Path

1. Relative path

According to the relationship between files and folders, to determine the file search path.

When the page file and image file are at the same level, use the image name directly. ( pages and pictures in the same folder )

<img src="图片名称"/>

When the folders where the page files and pictures are located are at the same level, the path needs to be defined. ( page references images in subfolders )

<img src="图片所在文件夹名称/图片文件"/>

When the folder where the page is located and the picture are in the same level relationship, it is necessary to return to the upper level of the page where it is located. ( The page refers to the picture in the outer file )

<img src="../图片所在文件夹/图片文件" />

2. Absolute path

citing internet resources
Refer to a file on the local disk

3. Picture format

GIF (lossless), JPG (image display), JPEG (image display), PNG, BMP (website registration/verification code), webp (for Google Chrome)

Lossy compression: changes to the image itself, retains more brightness information when saving the image, and merges the information of hue and saturation with the surrounding pixels. Since the amount of information is reduced, the compression ratio can be very high and the quality is also high. decline. Lossy compression reduces the space an image takes up in memory and on disk.

Lossless compression: The compression of the file itself can be completely restored, and the compression rate is low.

Brushing up questions (Phase 2)

first question

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .box {
                /*补全代码*/
             width:4em;
             height:4em
            }
        </style>
    </head>
    <body>
        <div class='box'></div>
    </body>
</html>

second question

Use element selector, id selector, class selector. Use color for text color and font-size for font size.

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div {
                color:rgb(255, 0, 0);
                font-size:20px;
            }
            .green{
               color:rgb(0, 128, 0); 
            }
            #black{
                color:rgb(0, 0, 0);
            }
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

Zero-based html learning / brushing questions - the second period