HTML学习

最新推荐文章于 2022-07-14 20:27:25 发布

世代庄少主

最新推荐文章于 2022-07-14 20:27:25 发布

阅读量210

点赞数

分类专栏： ——【HTML】软件工程项目之BS学习

本文链接：https://blog.csdn.net/fjt123068/article/details/79085625

版权

——【HTML】同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

软件工程项目之BS学习

1 篇文章 0 订阅

订阅专栏

【前言】

昨天看了一下HTML5孙老师的视频，感觉讲的很精炼，同时自己也将例子都实现了。和大家分享一下。小编才疏学浅，还望各位多多指点，不胜感激。

【正文】

实例一：firstpage

代码：

<html>
    <head>
        <title>
            fujintian
        </title>
    </head>
    <body>
           hello world!
    </body>
</html>

实例二：secondpage

代码：

<html>
<head>
    <title>表单的例子</title>
</head>
<body>
    <form method="get" action="reg.jsp">
        <table>
            <tr>
                <td>用户名:</td>
                <td>
                    <input type="text" name="user" value="游客" size="30"><br>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="pwd"><br>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" value="1" checked />男</td>
                <td>
                    <input type="radio" name="sex" value="2" checked />女<br>
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <input type="checkbox" name="interest" value="football" />足球</td>
                <td>
                    <input type="checkbox" name="interest" value="basketball" />蓝球<br>
                </td>
            </tr>
            <tr>
                <td>最高学历：</td>
                <td>
                    <select size="1" name="education">
                        <option value="" selected>...</option>
                        <option value="小学" selected>小学</option>
                        <option value="中学" selected>中学</option>
                        <option value="大学" selected>大学</option>
                </td>

            </tr>
            <tr>
                <td>个人简介：</td>
                <td>
                    <textarea name="personal" rows="5" cols="30">
                  个人简介
            </textarea><br>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="reset" value="确定" /></td>
                <td>
                    <input type="submit" value="提交" /></td>
            </tr>
        </table>
    </form>
</body>
</html>

实现：

实例三：静夜思

代码：

<html>
<head>
    <title>静夜思
    </title>
</head>
<body>
    <!-- 注释   -->
    <center>
    <h2>
        <font color="red">             
            静夜思
        </font>
    </h2>    
                      <b>作者：李白</b>
        <hr color="blue" />
         <p>
            <b><i><font color="green" size="3">床前明月光，疑是地上霜。<br />
            举头望明月，低头思故乡。</font></i></b>
            </center>
</body>
</html>

实现：

实例四：表格

代码：

<html>
<head>
    <title>表格的例子</title>
</head>
<body>
    <table border="1" align="center" bgcolor="fffdddd">
        <caption>
            2018年期末考试成绩单
        </caption>
        <tr align="center" valign="middle">
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>

        <tr align="center" valign="middle">
            <td>任蒙蒙</td>
            <td>12</td>
            <td>15</td>
            <td>36</td>
        </tr>
        <tr align="center" valign="middle">
            <td>任晓帅</td>
            <td>12</td>
            <td>52</td>
            <td>36</td>
        </tr>
        <tr align="center" valign="middle">
            <td>车龙梁</td>
            <td>55</td>
            <td>66</td>
            <td>86</td>
        </tr>
    </table>
</body>
</html>

实现：