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如果没有设置别的属性，蓝条就会一直走。