HTML中的常用标签 - 0423 - htmlNote

Home > List of blog posts > HTML中的常用标签 - 0423

Blogger Information

Blog 16

fans 0

comment 0

visits 13590

Special Recommendation

More>

Related recommendations

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Table - dumpling</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" width="500" align="left">
    <caption>购物车</caption>
    <thead>
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>单价</th>
        <th>数量</th>
        <th>金额</th>
        <th>分类</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>0</td>
        <td>iPhone X</td>
        <td>5699</td>
        <td>1</td>
        <td>5699</td>
        <td rowspan="2">电子产品</td>
    </tr>
    <tr>
        <td>1</td>
        <td>索尼 MX750</td>
        <td>10799</td>
        <td>1</td>
        <td>10799</td>
    </tr>
    <tr>
        <td>2</td>
        <td>GTX 6000K</td>
        <td>2199</td>
        <td>1</td>
        <td>2199</td>
        <td>电脑配件</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3" align="center">总计</td>
        <td>3</td>
        <td>18697</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行实例 »

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

表单：

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Form - dumpling</title>
</head>
<body>
<form action="" method="post">
    <p>
        <label for="username">用户名：</label>
        <input type="text" name="" id="username" autofocus placeholder="请输入用户名" required>
    </p>

    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="请输入密码" autofocus>
    </p>

    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" placeholder="example@mail.com" required>
    </p>

    <p>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" min="16" max="70">
    </p>

    <p>
        <label for="birthday">生日:</label>
        <input type="date" id="birthday" name="birthday">
    </p>

    <p>
        <label for="course">课程:</label>
        <!--        默认显示是一个,可以用size设置-->
        <select name="course" id="course" size="1">
            <!--            选择支持分组-->
            <optgroup label="前端:">
                <option value="0">请选择</option>
                <option value="1">HTML5</option>
                <option value="2">CSS3</option>
                <!--            selected: 设置默认选项-->
                <option value="3" selected>JavaScript</option>
            </optgroup>

            <optgroup label="后端:">
                <option value="4">PHP</option>
                <option value="5">MySQL</option>
                <option value="6">ThinkPHP</option>
            </optgroup>
        </select>
    </p>

    <p>
        <label for="programme">爱好: </label>
        <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label>
        <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label>
        <input type="checkbox" name="hobby[]" value="programme" id="movies" checked><label for="movies">看片</label>
    </p>

    <p>
        <label for="male">性别: </label>
        <input type="radio" name="gender" value="male" id="male"><label for="male">男生</label>
        <input type="radio" name="gender" value="female" id="female"><label for="female">女生</label>
        <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label>
    </p>

    <p>
        <label for="comment">简介:</label>
        <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea>
    </p>

    <p>
        <!--        按钮-->
        <input type="submit" name="submit" value="提交">
        <!--        重置不是清空, 只是恢复表单控件的默认状态或者默认值-->
        <!--        重置按钮现在极少用到啦-->
        <input type="reset" name="reset" value="重置">

        <!--        普通按钮, 没有具体的功能, 通过JavaScript将它的行为重新定义, 例如Ajax异步提交数据-->
        <input type="button" name="button" value="按钮">

        <!--        推荐使用button标签定义按钮-->
        <!--        默认也input:submit功能是一样的-->
        <button>提交1</button>
        <!--        等价于-->
        <button type="submit">提交2</button>
        <!--        普通按钮, 点击执行的行为, 由用户自定义-->
        <button type="button">提交3</button>
    </p>
</form>
</body>
</html>

运行实例 »

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

内联框架：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--内联框架: 在当前页窗口中, 再次加载一个窗口, 显示另一个页面,类似画中画功能-->

<h2>后台管理</h2>
<ul style="float: left;">
    <li><a href="demo3.html" target="main">用户管理</a></li>
    <li><a href="demo4.html" target="main">分类管理</a></li>
    <li><a href="demo5.html" target="main">商品管理</a></li>
    <li><a href="demo6.html" target="main">系统设置</a></li>
</ul>

<iframe srcdoc="<h3>网站管理后台</h3>" frameborder="" width="600" height="500" style="float:left" name="main"></iframe>
</body>
</html>

运行实例 »

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

区块（容器）：div，span

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

搭建学习环境搭建 - 20190422

2019-05-05 21:37:18