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

来源：互联网发布：淘宝mac上的软件能用么编辑：程序博客网时间：2024/05/29 08:28

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命名。