一、无序列表<ul><li></li></ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表</title>
</head>
<body>
<ul style="background-color:#E0FFFF">
<li>小猪佩奇</li>
<li>小猪佩奇</li>
<li>小猪佩奇</li>
</ul>
</body>
</html>
无序列表显示的符号是默认的粗体圆点 type="disc",符号款式除了圆点,还有:circle 空心圆,square 空心正方形。且列表占据的空间其实是一整行。
二、有序列表<ol><li></li><ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<ol>
<li>兰兰无话可说</li>
<li>红红不知所措</li>
<li>绿绿只想摇头</li>
<li>橙橙跟着摇头</li>
<li>粉粉一直摇头</li>
<li>白白摇不动了</li>
</ol>
</body>
</html>
符号类型不只有数字:
写法:<ol type="I">或者<ol type="a">等等。
序号也可以不从1开始,只要先定义了start="开始序号" <ol type="I" start="3">
三、列表标签<dl><dt><dd></dd></dt></dl>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置</dd>
</dl>
</body>
</html>
网页效果:
四、框架<frameset></frameset>
基本上高级的网页都用框架来实现,例如在页面左边点击超链接,只在页面右边进行页面切换,只就需要用框架来实现。
<frameset>是一个框架集合,里面放的是frame,一个frame代表一个页面。
<frameset>和<body>不能同时直接使用。rows表示上下分隔,cols表示左右分隔
现在实现在一个框架集合中,以上下方面显示两个页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架frame</title>
</head>
<frameset rows="20%,80%">
<frame src="11-a.html">
<frame src="11-b.html">
</frameset>
</html>
11-a.html 显示:“这是11-a.html”, 11-b.html 显示:“这是11-b.html”
网页效果:
上下分别以20%和80%比例来显示。但此时两页面之间的边界可拉动改变比例。
可以在一个子页面添加“noresize”,并且在<frameset>添加frameborder="0"使页面间的那条横线不显示。
最好在<frameset>最后添加上<noframes>的提醒。
框架里网页的分隔比例最好不用百分比,而是用像素(另一个页面的像素也*号,意思是第一个页面占150像素,剩下的留给第二个页面显示),这样就算是进行窗口缩放,最上面的页面也能按照设定的像素来显示不至于变型。
<frameset rows="150px,*" frameborder="0">
<frame src="11-a.html" noresize>
<frame src="11-b.html">
<noframes><body>浏览器不支持框架</body></noframes>
</frameset>
写了一个小框架页面:分上下两大部分,下面部分又分左右两部分。总页面是index.html;上面的是top.html,放一个图片;左边是left.html,放了几个歌曲名称的超链接;右边是right.html,显示对应的歌词。点击左边歌曲的超链接,右边页面相应进行切换(切换的页面是song1.html),显示对应歌曲的歌词。
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>余音绕梁</title>
</head>
<frameset rows="150px,*" frameborder="0">
<frame src="top.html">
<frameset cols="240px,*" frameborder="0">
<frame src="left.html">
<frame src="right.html" name="right_frame">
</frameset>
<noframes>浏览器不支持框架</noframes>
</frameset>
</html>
<!--top.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>top</title>
</head>
<body style="text-align:center;">
<img src="kugou.png">
</body>
</html>
<!--left.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>left</title>
</head>
<body bgcolor="#B0E0E6" style="line-height:30px">
<a href="right.html" target="right_frame">林俊杰 江南</a><br>
<a href="song1.html" target="right_frame">林俊杰 可惜没如果</a><br>
<a href="song2.html" target="right_frame">林俊杰 当你</a><br>
<a href="song3.html" target="right_frame">林俊杰 她说</a><br>
<a href="song4.html" target="right_frame">林俊杰 爱笑的眼睛</a><br>
</body>
</html>
<!--right.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>right</title>
</head>
<body bgcolor="#F0F8FF" style="line-height:20px">
风到这里就是粘<br>
粘住过客的思念<br>
雨到了这里缠成线<br>
<!--省略-->
</body>
</html>
<!--song1.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>song1</title>
</head>
<body bgcolor="#F0F8FF" style="line-height:20px">
假如把犯得起的错 能错的都错过<br>
应该还来得及去悔过<br>
假如没把一切说破<br>
那一场小风波 将一笑带过<br>
<!--省略-->
</body>
</html>
网页效果:(index.html)
点击第二个超链接: