html_day2---表格+列表+框架

最新推荐文章于 2024-08-10 22:11:57 发布

KLeonard

最新推荐文章于 2024-08-10 22:11:57 发布

阅读量1.6k

点赞数

文章标签：网页设计 html

本文链接：https://blog.csdn.net/gavin_john/article/details/16801931

版权

☛Web前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

------ HTML

5 篇文章 0 订阅

订阅专栏

Day2

●利用前面学的基础知识做一个表格

代码如下：

<html>
	<head>
		<title>菜谱</title>
		</head>
	<body>
		<table align=center width=400px border=1 bordercolor=#E674FA cellspacing=0 height=200>
			<tr align=center><td colspan=3>星期一菜谱</td></tr>
			<tr align=center><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr>
			<tr align=center><td>小葱豆腐</td><td>炒白菜</td></tr>
			<tr align=center><td rowspan=2>荤菜</td><td>鱼香肉丝</td><td>油焖大虾</td></tr>
			<tr align=center><td>海参鲍鱼<img width=200px src="images/hai.jpg"></img></td><td>龙肝凤胆</td></tr>
			</table>
		</body>
	</html>

●做一个课程表

代码如下：

<html>
	<head>
	<title>课程表</title>
	</head>
	<body>
	<!--th表示内容字体加粗,其实就是表示表头-->
	<table width=500 border bordercolor=blue align=center>
	<caption align=center>我的课表</caption><!--表格的标题-->
	<tr align=center><th>项目</th><th colspan=5> 上课</th><th colspan=2>休息</th></tr>
	<tr align=center><th>星期</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr>
	<tr align=center><td rowspan=4>上午</td><td>大物</td><td>英语</td><td>历史</td><td>政治</td><td>高数</td><td>Web技术</td><td rowspan=4>休息</td></tr>
	<tr align=center><td>大物</td><td>英语</td><td>历史</td><td>政治</td><td>高数</td><td>Web技术</td></tr>
	<tr align=center><td>大物</td><td>英语</td><td>历史</td><td>政治</td><td>高数</td><td>Web技术</td></tr>
	<tr align=center><td>大物</td><td>英语</td><td>历史</td><td>政治</td><td>高数</td><td>Web技术</td></tr>
	<tr align=center><td rowspan=2>下午<td>大物</td><td>英语</td><td>历史</td><td>政治</td><td>高数</td><td>Web技术</td><td rowspan=2>休息</td></tr>
	<tr align=center><td>大物</td><td>英语</td><td>历史</td><td>政治</td><td>高数</td><td>Web技术</td></tr>	
	</table>
	</body>
</html>

两个新的知识点：

（1）caption：表格标题

（2）th：表头（td内容加粗而已）

●Html列表——无序列表

无序列表 <ul><li>...</ul>

<ul>

<li>Today

<li>Tommorow

</ul>

定制表中的标记<li type=#> #=disc, circle, square

<ul>
<li type=disc>ONE
<li type=circle>TWO
<li type=square>THREE
</ul>

ONE
TWO
THREE

●Html列表——有序列表(默认是数字顺序)

代码举例：

<html>
	<body>
	********无序列表**********</br>
		<ul type="square"><!--空心小圆点-->
				<!--默认的是实心小圆点-->
			<!--这里的封闭标记可以省略-->
			<li type="square">传奇
			<li type="disc">反恐
			<li type="circle">跳舞团
			</ul>
		<br/>
		********有序列表********
	<br/>
	<!--1,a,A,I,i-->
		<ol type="I">
			<li>Today</li>
			<li>Tomorrow</li>
			<li>Yesterday</li>
			<li>Yesterday</li>
			</ol>
		</body>
	</html>

运行结果：

●Html框架——frameset/frame

基本语法：

<frame属性…>

</frame>

</frameset>

代码举例：

<html>
	<head><title>frameset</title></head>
		<frameset rows="40%,*" >
			<frame src="day2_1.html"></frame>
			<frameset cols="80%,*" noresize frameborder=0>
				<frame src="day2_2.html"/>
				<frame src="day2_3.html"/>
				</frameset>
			</frameset>
	</html>

运行结果：

如上可以看出，界面按照框架已经分成了三部分。

综合案例：

做一个如图所示的界面，点击左侧的歌曲名字，在右侧显示其相应的歌词

分析如下：

整个界面由三部分构成，上、左、右，而其中右边有多层html文件构成。

代码实现：

（1）上边先只用一个图片代替

<html>
	<img src="title.jpg"/>
	</html>

（2）左侧都是超链接，并设置底色为粉红色

<html>
	<body bgcolor=pink>
	<a href="right_qihao.html" target="right">七号公园</a><br/>
	<a href="right_meigui.html" target="right">玫瑰花的葬礼</a><br/>
	<a href="right_weizhang.html" target="right">违章动物</a><br/>
	<a href="right_niruo.html" target="right">你若成风</a><br/>
	<a href="right_youhe.html" target="right">有何不可</a><br/>
	</body>
	</html>

这里采用target标记将歌词文件在指定的框架frame中显示，right指的是右边的框架。这在（3）中的总布局中可以看到。

（3）

<frameset rows="27%,*" frameborder=0 noresize>
	<frame src="top.html"/>
	<frameset cols="30%,*">
		<frame src="left.html"/>
		<!--frame元素中有一name属性，相当于给该frame取名-->
		<frame src="right_qihao.html" name="right"/>
		</frameset>
	</frameset>

如上，name属性给frame命名。