目录
1.marquee
marquee:设置滚动效果
behavior:设置滚动方式:alternate:左右横跳;scroll:默认,循环滚动;slide:只滚动一次就停止
<marquee behavior="alternate">欢迎来到网页设计课堂!</marquee>
如图所示:
当然,marquee也可以用于图片的运动。
direction:设置滚动方向,有up、down、left 和 right。
图中的<P>大小写其实效果一样,类似换行,说是分段落更合理。 是空格。
<marquee direction="up" behavior="scroll">
<P align="center">
<img src="images/eat.jpg" height="15%" width="15%"> 
<img src="images/flawer.jpg" height="15%" width="15%">  
<img src="images/grass.jpg" height="15%" width="15%">   
<img src="images/lamian.jpg" height="15%" width="15%">  
<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>
效果图:
点击“返回标题”,就会跳转到“我的第一张网页”。
其中,
- 使用<a name="锚点名称"></a>:创建目标位置的锚点名称。
- 使用<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如果没有设置别的属性,蓝条就会一直走。