HTML入门知识点2

最新推荐文章于 2022-05-07 17:09:47 发布

原创最新推荐文章于 2022-05-07 17:09:47 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

2 篇文章

订阅专栏

一、无序列表<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）