自学HTML的几个例子

　　此处不赘述HTML中不同标签的用法仅仅给出自己学习时写的一些自娱自乐的例子，具体标签用法请参考W3C（http://www.w3school.com.cn/），毕竟这个才是最靠谱的，请不要相信任何二道贩子。

例子1：实现了一个简单的动漫人物图像显示及介绍的页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>html basis-3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Wayne Ng" />
    <meta name="description" content="basis-3" />
    <meta name="revised" content="Wayne Ng,2016/1/12" />
    <style type="text/css">
        h3{color: Red}
        div#part1{background-color: LightBlue}
    </style>
</head>
<body>
    <div id="part1">
        <h3>插入音乐播放器播放MP3</h3>
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=29719175&auto=0&height=66"></iframe>
    </div>
</body>
</html>

显示效果如下：

例子2：一大堆功能的大杂烩（我编不下去了。。。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>html basis-2</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="author" content="Wayne Ng" />
        <meta name="description" content="basis-2" />
        <meta name="revised" content="Wayne Ng,2016/1/12" />
        <style type="text/css">
            div#part1{background-color: Pink}
            div#part2{background-color: LightBlue}
            div#part3{background-color: GreenYellow}
        </style>
    </head>
    <body>
        <div id="part1">
        <table border="1" cellpadding="10">
            <caption><b>月份中英文对照</b></caption>
            <tr>
                <th>中文</th>
                <td>一月</td><td>二月</td><td>三月</td><td>四月</td><td>五月</td><td>六月</td><td>七月</td><td>八月</td><td>九月</td><td>十月</td><td>十一月</td><td>十二月</td>
            </tr>
            <tr>
                <th>English</th>
                <td>January</td><td>February</td><td>March</td><td>April</td><td>May</td><td>June</td><td>July</td><td>August</td><td>September</td><td>Octorber</td><td>November</td><td>December</td>
            </tr>
        </table>
        </div>
        <br />
        <div id="part2">
            <img src="http://f.hiphotos.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=eb293337f4246b606f03ba268a917129/18d8bc3eb13533fad7abfe4aaad3fd1f41345bb0.jpg" width="200" alt="法师" />
        <h3>魔兽世界法师特点</h3>
        <dl>
            <dt><font color="red"><b>远程伤害</b></font></dt>
            <dd>法师可以消耗魔法值，以惊人的速度输出大量伤害，尽管他们必须小心耗尽自己的能力。</dd>
            <dt><font color="red"><b>法术范围</b></font></dt>
            <dd>通过召唤暴风雪、烈焰风暴及魔爆术，法师可以同时有效地攻击众多的敌人。</dd>
            <dt><font color="red"><b>控制</b></font></dt>
            <dd>法师可以选择多种方式对战场进行掌控，他可以把敌人冻在原地，也可以将他们变成无助的小动物。</dd>
            <dt><font color="red"><b>远程传送</b></font></dt>
            <dd>法师具有将他们自己和队友在各个城市间传送的能力，并且可以召唤恢复用的食物和水。</dd>
        </dl>
        </div>
        <div id="part3">
            <form action="MAILTO:waynegeek@yeah.net" method="post" enctype="text/plain">
                <h3>该表单将会把电子邮件发送给野马菌</h3>
                姓名:<input type="text" name="name" value="yourname" size=20><br />
                邮箱：<input type="text" name="mail" value="yourmail" size=20><br />
                内容:<input type="text" name="comment" value="yourcomment" size=20>
                <br /><br />
                <input type="submit" value="发送">
                <input type="reset" value="重置">
            </form>
        </div>
        <div>
            <iframe src="http//www.baidu.com" name="iframe_a" width="1000" height="400"></iframe>
            <p><a href="http://www.baidu.com" target="iframe_a">www.baidu.com</a></p>
        </div>
        <div>
            <script type="text/javascript">
            document.write("Hello world");
            </script>
            <noscript>Your browser does not support javascript!</noscript>
        </div>
    </body>    
</html>

显示效果（太大了仅仅截取一部分）：

例子3：插入一段MP3音乐（感谢网易音乐，我直接把对应外链播放器的代码搬运过来了）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>html basis-3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Wayne Ng" />
    <meta name="description" content="basis-3" />
    <meta name="revised" content="Wayne Ng,2016/1/12" />
    <style type="text/css">
        h3{color: Red}
        div#part1{background-color: LightBlue}
    </style>
</head>
<body>
    <div id="part1">
        <h3>插入音乐播放器播放MP3</h3>
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=29719175&auto=0&height=66"></iframe>
    </div>
</body>
</html>

提示：按生成外链播放器即可获得对应外链音乐的html代码

显示效果

　　　　　　　　　　　　　　修订于2016/1/12 By野马菌

posted on 2016-01-12 18:36 野马菌阅读(341) 评论(0) 编辑收藏举报