HTML中的常用标签——2019年4月23日22:00 - HTML前端作业

首页 > 博客列表 > HTML中的常用标签——2019年4月23日22:00

博主信息

博文 6

粉丝 0

访问量 4458

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完成表格的跨行合并功能</title>
</head>
<body>
<table cellspacing="0" border="1" cellpadding="5">
    <caption>三年八班</caption>
    <thead>
        <tr bgcolor="#add8e6">
            <th width="80">姓名</th>
            <th width="50">性别</th>
            <th width="50">数学</th>
            <th width="50">语文</th>
            <th width="50">英语</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>张三</td>
            <td rowspan="2">男</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>莉莉</td>
            <td rowspan="2">女</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Lucy</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
    <tr>
        <td align="center" colspan="2">合计：</td>
        <td>360</td>
        <td>360</td>
        <td>360</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

【注意】HTML5表格的样式跟html还是有出入的，分为表头——thead、正文——tbody、表尾——tfoot三部分；当设置了表格的border时，cellspacing一般设置为0比较***。

2、完成一个用户注册表单——input：输入控件 type、label：标签 for

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<h3>账号填写</h3>
<form action="" method="get">
    <p>
        <label for="username">账号：<span style="color: red;">*</span></label>
        <input type="text" name="username" id="username" placeholder="长度为4-30个字符" min="4" max="30" required>
    </p>

    <p>
        <label for="password">密码：<span style="color: red;">*</span></label>
        <input type="password" name="password" id="password" placeholder="长度为6-18个字符" min="6" max="18" required>
    </p>

    <p>
        <label for="password2">密码：<span style="color: red;">*</span></label>
        <input type="password" name="password2" id="password2" placeholder="两次密码必须一致" min="6" max="18" required>
    </p>

    <p>
        <label for="city">所在城市：</label>
        <select name="city" id="city" size="3">
            <optgroup label="安徽省">
                <option value="1">合肥市</option>
                <option value="2">淮南市</option>
                <option value="3">安庆市</option>
            </optgroup>
            <optgroup label="江苏省">
                <option value="4">南京市</option>
                <option value="5">苏州市</option>
                <option value="6">常州市</option>
            </optgroup>
        </select>
    </p>

    <p>
        <button type="submit">下一步</button>
    </p>
</form>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

【注意】

1）输入框的type属性需要记一下，然后placeholder比较好用；label跟输入框的关联是通过控件的name属性；

2）下拉框的option的value跟下拉框内容的区别，前者返回给后台用，后者页面显示用。

3、制作一个简易后台——使用内联框架iframe

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易后台——使用iframe</title>
</head>
<body>
<h2>友情链接</h2>
<ul style="float: left;">
    <li><a href="http://www.guyuehome.com/" target="link" style="text-decoration: none;">古月居</a></li>
    <li><a href="http://www.cnblogs.com/gaoxiang12/" target="link" style="text-decoration: none;">半闲居士</a></li>
    <li><a href="https://blog.csdn.net/heyijia0327?viewmode=list" target="link" style="text-decoration: none;">知行合一</a></li>
</ul>
<iframe src="https://blog.csdn.net/heyijia0327?viewmode=list" frameborder="1" width="1000" height="500" name="link" style="float: left"></iframe>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

【注意】

内联框架一般跟超链接联合使用，此处a的target属性发挥了关键作用，关联到iframe的name属性。

批改状态：未批改

老师批语：