HTML5 for the Web

Table of contents

1.marquee

 2.href

3. List

 4.details和summary

5. "Health bar", power

---

1.marquee

marquee: set the scrolling effect
behavior: set the scrolling method: alternate: jump left and right; scroll: default, scrolling in a loop; slide: stop after scrolling only once

<marquee behavior="alternate">欢迎来到网页设计课堂！</marquee>

as the picture shows:

 Of course, marquee can also be used for the movement of pictures.

direction: set the scroll direction, there are up, down, left and right.

The case of <P> in the figure actually has the same effect, similar to line breaks, and it is more reasonable to say that it is divided into paragraphs.   is a space.

            <marquee direction="up" behavior="scroll">
                <P align="center">
                    <img src="images/eat.jpg" height="15%" width="15%">&nbsp
                    <img src="images/flawer.jpg" height="15%" width="15%">&nbsp&nbsp
                    <img src="images/grass.jpg" height="15%" width="15%">&nbsp&nbsp&nbsp
                    <img src="images/lamian.jpg" height="15%" width="15%">&nbsp&nbsp
                    <img src="images/hear_in.jpg" height="15%" width="15%">
                </P>
            </marquee>

The effect is as follows:

 

 2.href

Generally, the use of href is related to webpage operations, such as jumping

Usage 1: page jump

    <a href="https://www.bilibili.com/bangumi/play/ep102835?spm_id_from=333.337.0.0">
        <img src="images/appint1.jpg" height="100%" width="100%" title="你喜欢哪一个？点击可进入观看"
             alt="约会大作战yyds">
    </a>

The effect is as follows:

It can be known that the picture here can be regarded as a button and tied together with a web page. Click on the picture to jump to the web page following the href.

Among them, title: it will be displayed after the mouse is placed on it for a few seconds; alt: it will be displayed if there is no picture or the picture is invalid; hidden="until-found": hide the picture.

After clicking:

Usage 2: Jump to the title, similar to the article directory function of csdn.

<a name="title"><h4 align="center">我的第一张网页</h4></a>

<a href="#title">返回标题</a>

Renderings:

 Click "Back to Title" and you will be redirected to "My First Page".

in,

1. Use <a name="anchor name"></a>: create an anchor name for the target location.
2. Use <a href="#anchor name">link text</a>: create an anchor link

To add, <h1/2/3/4/5/6>heading</h1/2/3/4/5/6> is to set the heading style, 1 is the largest and 6 is the smallest.

About href: _self is to jump to the current page; _blank is to reopen the page.

3. List

A. Unordered list:

    <ul contenteditable="true">
        <li>
            <mark>无序列表1</mark>
        </li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>

 mark: mark yellow; contenteditable: whether the setting can be edited.

B. Ordered list:

    <ol>
        <li>
            <mark>有序列表1</mark>
        </li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>

Renderings:

 4.details和summary

The two are generally used together.

    <details>
        <summary>
            <figcaption>竹里馆</figcaption>
        </summary>
        <p>独坐幽篁里，弹琴复长啸。</p>
        <p>深林人不知，明月来相照。</p>
    </details>

The renderings are as follows:

 

 A very simple but very useful function. Generally, the content placed in the details will be hidden, click the triangle symbol, it will be displayed, and the content of the summary will always be displayed.

5. "Health bar", power

<br>
    <progress></progress>
    <br>
    <progress value="45" max="100"></progress>
    <br>
    <meter min="0" max="100" low="10" high="20" optimum="100" value="5" title="5%">5%</meter>
    <br>
    <meter min="0" max="100" low="10" high="20" optimum="100" value="15" title="15%">15%</meter>
    <br>
    <meter min="0" max="100" low="10" high="20" optimum="100" value="80" title="80%">80%</meter>
    <br>

 Renderings:

 Note: If progress does not set other attributes, the blue bar will keep going.