Web之HTML5

目录

1.marquee

 2.href

3.列表

 4.details和summary

5.“血条”、电量

---

1.marquee

marquee:设置滚动效果
behavior:设置滚动方式：alternate：左右横跳；scroll：默认，循环滚动；slide：只滚动一次就停止

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

如图所示：

 当然，marquee也可以用于图片的运动。

direction:设置滚动方向，有up、down、left 和 right。

图中的<P>大小写其实效果一样，类似换行，说是分段落更合理。&nbsp是空格。

            <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>

效果如下：

 

 2.href

一般用到href都和网页操作有关，比如跳转

用法一：页面跳转

    <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>

效果如下：

可以知道，这里的图片可以看成一个按钮，与一个网页绑在一起。 点击图片就可以跳转到href后面跟着的网页。

其中，title：鼠标放置其上几秒后显示；alt：没有图片或图片失效会显示；hidden="until-found"：隐藏图片。

点击后：

用法二：跳转到标题处，类似csdn的文章目录功能。

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

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

效果图：

 点击“返回标题”，就会跳转到“我的第一张网页”。

其中，

1. 使用<a name="锚点名称"></a>：创建目标位置的锚点名称。
2. 使用<a href="#锚点名称">连接文本</a>：创建锚点链接

补充一下，<h1/2/3/4/5/6>标题</h1/2/3/4/5/6>是设置标题样式，1最大，6最小。

关于href：_self是在当前页面跳转；_blank是重开页面。

3.列表

A.无序列表：

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

 mark:标黄；contenteditable：设置是否可以编辑。

B.有序列表：

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

效果图：

 4.details和summary

两者一般是搭配使用的。

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

效果图如下：

 

 一个很简单但挺实用的功能。一般放在details中的内容会被隐藏，点击三角形符号，会显示，而summary的内容会一直显示。

5.“血条”、电量

<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>

 效果图：

 注：progress如果没有设置别的属性，蓝条就会一直走。