HTML的基本应用——框架的使用（frame）。这个页面主要是为了展示frame的应用，比较简陋。

框架图：

wKioL1Zb2WLBYf6eAAAspcAh5V4493.png

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<frameset rows="30%,6%,56%,*" cols="*" frameborder="0">

    <frame src="1.html" scrolling="no" />

    <frame src="2.html" scrolling="no" />

    <frameset rows="*" cols="45%,*">

        <frameset rows="60%,*">

            <frame src="3-1-1.html"  scrolling="no"/>

            <frame src="3-1-2.html"  scrolling="no"/>

        </frameset>

        <frame src="3-2.html" scrolling="no" />

    </frameset>

    <frame src="4.html" scrolling="no" />

</frameset>

<noframes></noframes>

</html>

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>


<body>

    <table align="center" style="width:1350px; height:180px;">

        <tr>

            <td><img src="10.jpg" style="width:100%; height:180px;"  /></td>

        </tr>

    </table>

    

</body>

</html>

2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>


<body>

    <table width="1350" height="65">

<tr>

            <td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">新歌top</font></a></td>

            <td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">中国风</font></a></td>

            <td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">欧美流行</font></a></td>

            <td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">日韩流行</font></a></td>

            <td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">MV</font></a></td>

            <td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">搜索</font></a></td>

        </tr>

    </table>

</body>

</html>

3-1-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>


<body background="2.jpg" style="font-size:23px;">

    <table width="600" height="200">

    <tr>

        <td>

        <p align="center"><font color="#CC3300">喜欢你</font></p>

        <p align="center"><font color="#CC3300">作词：黄家驹</font></p>

        <p align="center"><font color="#CC3300">作曲：黄家驹</font></p>

        <p align="center"><font color="#CC3300">演唱：G.E.M. 邓紫棋</font></p>

        </td>

    </tr>

</table> 

    

</body>

</html>

3-1-2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>


<body>

<table>

    <tr>

        <td><embed src="邓紫棋 - 喜欢你.mp3" width="700" height="180"/></td>

    </tr>

</table>  

</body>

</html>

3-2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>


<body>

    <table background="3.jpg" width="730" height="350">

       

        <tr style="font-size:25px; color:#CC0000">

            <td> 

                <marquee direction="up" scrolldelay="500">

<h1 style="font-size:36px;" align="center">喜欢你</h1>

<p align="center">细雨带风湿透黄昏的街道</p>

<p align="center">抹去雨水双眼无故地仰望</p>

<p align="center">望向孤单的晚灯</p>

<p align="center">是那伤感的记忆</p>

<p align="center">再次泛起心里无数的思念</p>

<p align="center">以往片刻欢笑仍挂在脸上</p>

<p align="center">愿你此刻可会知</p>

<p align="center">是我衷心的说声</p>

<p align="center">喜欢你 那双眼动人 笑声更迷人</p>

<p align="center">愿再可 轻抚你 那可爱面容</p>

<p align="center">挽手说梦话 像昨天 你共我</p>

<p align="center">满带理想的我曾经多冲动</p>

<p align="center">抱怨与她相爱难有自由</p>

<p align="center">愿你此刻可会知</p>

<p align="center">是我衷心的说声</p>

<p align="center">喜欢你 那双眼动人 笑声更迷人</p>

<p align="center">愿再可 轻抚你 那可爱面容</p>

<p align="center">挽手说梦话 像昨天 你共我</p>

<p align="center">每晚夜里自我独行</p>

<p align="center">随处荡 多冰冷</p>

<p align="center">以往为了自我挣扎</p>

<p align="center">从不知 她的痛苦</p>

<p align="center">喜欢你 那双眼动人</p>

<p align="center">笑声更迷人</p>

<p align="center">愿再可 轻抚你 那可爱面容</p>

<p align="center">挽手说梦话</p>

<p align="center">像昨天 你共我</p>

<p align="center">哦哦哦 哦哦</p>

<p align="center">哦哦哦 哦哦</p>

<p align="center">哦哦哦 哦哦</p>

<p align="center">哦哦哦 哦哦</p>

<p align="center">哦哦哦 哦哦</p>

<p align="center">哦哦哦 哦哦</p>

<p align="center">哦哦哦 哦哦</p>

<p align="center">哦哦哦 哦哦</p>

              </marquee>  

          </td>

            

        </tr>

        

    </table>

</body>

</html>

4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>


<body bgcolor="#66CC66">

<table style="width:1350px; height:5px;">

    <tr>

        <td> 

        <marquee direction="right" scrolldelay="10">

            <p align="center"><font size="+2" color="#C23434">欢迎收听你的月亮我的心，好男人就是我，我就是曾小贤</font></p>

       </marquee> 

       </td>

    </tr>

</table> 

     

</body>

</html>