哪有什么岁月静好，不过是有人替你负重前行！

HTML常用标签使用示例

1、<head>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
</head>

2、<ul>无序列表标签，用于在效果中定义一个无序列表。需要内镶<li>标签一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
</head>
<body>
    <ul>
        <li>各地贯彻十九届六中全会精神纪实478万热</li>
        <li>国台办:将遣返台湾枪击案嫌犯回台470万热</li>
        <li>宁波大规模核酸检测中发现5例阳性456万热</li>
        <li>四种风格的告白 女孩喜欢哪款443万</li>
    </ul>
</body>

3、<ol>有序列表标签，用于在效果中定义一个有序列表。需要内镶<li>标签一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
</head>
<body>
    <ul>
        <li>各地贯彻十九届六中全会精神纪实478万热</li>
        <li>国台办:将遣返台湾枪击案嫌犯回台470万热</li>
        <li>宁波大规模核酸检测中发现5例阳性456万热</li>
        <li>四种风格的告白 女孩喜欢哪款443万</li>
    </ul>
    <h2>web前端课程排行榜</h2>
    <ol>
        <li>VUE框架学习</li>
        <li>Javascript高级编程</li>
        <li>React全家桶</li>
    </ol>
</body>

 

 4、<table>标签

定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
</head>
<body>
    <table>
        <tr>
            <th>产品名称</th>
            <th>品牌</th>
            <th>数量</th>
            <th>入库时间</th>
        </tr>
        <tr>
            <td>电视机</td>
            <td>小米</td>
            <td>200</td>
            <td>2021-12</td>
        </tr>
        <tr>
            <td>电冰箱</td>
            <td>海尔</td>
            <td>300</td>
            <td>2021-02</td>
        </tr>
        <tr>
            <td>手机</td>
            <td>华为</td>
            <td>500</td>
            <td>2021-05</td>
        </tr>
    </table>
</body>

 附加：

    <table border="1" cellspacing="0">
<!--        border和cellspacing是设置边框的。-->
        <caption>商品清单</caption>
        <tr>
            <th>产品名称</th>
            <th>品牌</th>
            <th>数量</th>
            <th>入库时间</th>
        </tr>
        <tr>
            <td>电视机</td>
            <td>小米</td>
            <td>200</td>
            <td>2021-12</td>
        </tr>
        <tr>
            <td>电冰箱</td>
            <td>海尔</td>
            <td>300</td>
            <td>2021-02</td>
        </tr>
        <tr>
            <td>手机</td>
            <td>华为</td>
            <td>500</td>
            <td>2021-05</td>
        </tr>
    </table>

合并单元格：

    <table border="1" cellspacing="0">
<!--    border和cellspacing是设置边框的。-->
        <caption>商品清单</caption>
        <tr>
            <th>产品名称</th>
            <th>品牌</th>
            <th colspan="2">数量和入库时间</th>
<!--        横向合并-->
<!--        <th>入库时间</th>-->
        </tr>
        <tr>
            <td>电视机</td>
            <td>海尔</td>
            <td>200</td>
            <td>2021-12</td>
        </tr>
        <tr>
            <td>电冰箱</td>
            <td rowspan="3">华为</td>
<!--        纵向合并-->
            <td>300</td>
            <td>2021-02</td>
        </tr>
        <tr>
            <td>手机</td>
<!--        <td>华为</td>-->
            <td>500</td>
            <td>2021-05</td>
        </tr>
        <tr>
            <td>电脑</td>
<!--        <td>华为</td>-->
            <td>500</td>
            <td>2021-05</td>
        </tr>
    </table>

 5、<dl>标签

定义了定义列表（definition list）。标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。例如小米商城首页最下面的“帮助中心”“账户管理”“购物指南”“订单操作”等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试标题</title>
</head>
<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
        </dl>
</body>
</html>

 6、<a> 标签定义超链接，用于从一张页面链接到另一张页面。元素最重要的属性是 href 属性，它指示链接的目标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <a href="http://www.baidu.com" title=" 点击一下，了解更多" target="_blank">百度一下</a>
<!--href的值，超链接的地址。title值，鼠标停放，提示的信息。target的值，默认是self，不写也可，值是blank就在新窗口打开网页-->
</body>
</html>

 当前网页进行跳转，回到顶部。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <p id="top"></p>
<!--id是唯一值，这个p标签可以放在网页的任何位置，都可以实现相应的功能。-->
    <a href="http://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a>
<!--href的值，超链接的地址。title值，鼠标停放，提示的信息。target的值，默认是self，不写也可，值是blank就在新窗口打开网页-->
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <p>测试回到顶部按钮</p>
    <a href="#top">回到顶部</a>
</body>
</html>

 <a>标签，跳转到发送邮箱：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="mailto:longfei0825@163.com">联系我们</a>
</body>
</html>

 7、<img> 元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。<img> 标签有两个必需的属性：src 属性 和 alt 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--相对路径：./1.jpg相同目录。../上级目录。.../上上级目录。-->
<!--绝对路径：C:\Users\HTADMIN\Pictures\1.jpg-->
    <img src="1.jpg" alt="校花校花" width="300" title="美丽的校花">
<!--width宽度，height高度，这两个设置一个即可。alt图片名称，只有图片加载失败才会显示。title图片提示字。-->
    <img src="C:\Users\HTADMIN\Pictures\1.jpg" alt="小编">
    <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="风景图片" width="300" >
<!--图片的网络地址-->
</body>
</html>

 8、<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
<!--    action是要提交的服务器。method是提交方式，有“get”，“post”两种。-->
        <input type="text" placeholder="请输入用户名">
        <input type="password" placeholder="请输入密码">
        <input type="submit" value="立即注册">
    </form>
</body>
</html>

 9、<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
<!--    action是要提交的服务器。method是提交方式，有“get”，“post”两种。-->
        <p><input type="text" placeholder="请输入用户名"></p>
<!--    p标签的作用，换行和行之间的间隙。-->
        <p><input type="password" placeholder="请输入密码"></p>
        <p>
            男：<input type="radio" name="sex">
            女：<input type="radio" name="sex">
<!--        radio是单选框，name的值，sex的作用是单选。-->
        </p>
        <p><input type="submit" value="立即注册"></p>
    </form>
</body>
</html>

 10、复选框购买你想要的课程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
<!--    action是要提交的服务器。method是提交方式，有“get”，“post”两种。-->
        <p><input type="text" placeholder="请输入用户名"></p>
<!--    p标签的作用，换行和行之间的间隙。-->
        <p><input type="password" placeholder="请输入密码"></p>
        <p>
            男：<input type="radio" name="sex">
            女：<input type="radio" name="sex">
<!--        radio是复选框，name的值，sex的作用是单选。-->
        </p>
        <h4>购买的课程</h4>
        <p>python开发：<input type="checkbox" checked="checked"></p> <!-- checked的作用是：默认选中。-->

            <p>web前端：<input type="checkbox"></p>
            <p>java编程：<input type="checkbox"></p>
        <p><input type="submit" value="立即注册"></p>
    </form>
</body>
</html>

 11、下拉框单选，多选。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
<!--action是要提交的服务器。method是提交方式，有“get”，“post”两种。-->
        <p><input type="text" placeholder="请输入用户名"></p>
<!--p标签的作用，换行和行之间的间隙。-->
        <p><input type="password" placeholder="请输入密码"></p>
        <p>
            男：<input type="radio" name="sex">
            女：<input type="radio" name="sex">
<!--        radio是复选框，name的值，sex的作用是单选。-->
        </p>
        <h4>购买的课程</h4>
<!--实现下拉框单选-->
        <p>python开发：<input type="checkbox" checked="checked"></p>
<!--checked的作用是：默认选中。-->
        <p>web前端：<input type="checkbox"></p>
        <p>java编程：<input type="checkbox"></p>
        <h4>实现下拉框单选</h4>
        <p>
            <select>
                <option>HTML</option>
                <option>CSS</option>
                <option selected="selected">Javascript</option>
<!--selected的作用是默认显示此选择项。-->
                <option>Vue</option>
            </select>
        </p>
        <h4>实现下拉框多选</h4>
        <p>
            <select multiple="multiple">
                <option>HTML</option>
                <option>CSS</option>
                <option selected="selected">Javascript</option>
                <option>Vue</option>
                <option>react</option>
                <option>angular</option>
<!--option项多于四个，就会出现滚动条。-->
            </select>
        </p>
        <p><input type="submit" value="立即注册"></p>
    </form>
</body>
</html>

 12、<textarea>多行输入文本框标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
<!--action是要提交的服务器。method是提交方式，有“get”，“post”两种。-->
        <p><input type="text" placeholder="请输入用户名"></p>
<!--p标签的作用，换行和行之间的间隙。-->
        <p><input type="password" placeholder="请输入密码"></p>
        <p>
            男：<input type="radio" name="sex">
            女：<input type="radio" name="sex">
<!--        radio是复选框，name的值，sex的作用是单选。-->
        </p>
        <h4>购买的课程</h4>
<!--实现下拉框单选-->
        <p>python开发：<input type="checkbox" checked="checked"></p>
<!--checked的作用是：默认选中。-->
        <p>web前端：<input type="checkbox"></p>
        <p>java编程：<input type="checkbox"></p>
        <h4>实现下拉框单选</h4>
        <p>
            <select>
                <option>HTML</option>
                <option>CSS</option>
                <option selected="selected">Javascript</option>
<!--selected的作用是默认显示此选择项。-->
                <option>Vue</option>
            </select>
        </p>
        <h4>实现下拉框多选</h4>
        <p>
            <select multiple="multiple">
                <option>HTML</option>
                <option>CSS</option>
                <option selected="selected">Javascript</option>
                <option>Vue</option>
                <option>react</option>
                <option>angular</option>
<!--option项多于四个，就会出现滚动条。-->
            </select>
        </p>
        <h4>实现多行输入文本框</h4>
        <p>
            <textarea rows="10" cols="30"></textarea>
<!--textarea,多行输入文本框，rows是行数，cols是列数。-->
        </p>
        <p><input type="submit" value="立即注册"></p>
    </form>
</body>
</html>

 13、重置按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
    <form action="http://www.baidu.com" method="post">
<!--action是要提交的服务器。method是提交方式，有“get”，“post”两种。-->
        <p><input type="text" placeholder="请输入用户名"></p>
<!--p标签的作用，换行和行之间的间隙。-->
        <p><input type="password" placeholder="请输入密码"></p>
        <p>
            男：<input type="radio" name="sex">
            女：<input type="radio" name="sex">
<!--        radio是复选框，name的值，sex的作用是单选。-->
        </p>
        <h4>购买的课程</h4>
<!--实现下拉框单选-->
        <p>python开发：<input type="checkbox" checked="checked"></p>
<!--checked的作用是：默认选中。-->
        <p>web前端：<input type="checkbox"></p>
        <p>java编程：<input type="checkbox"></p>
        <h4>实现下拉框单选</h4>
        <p>
            <select>
                <option>HTML</option>
                <option>CSS</option>
                <option selected="selected">Javascript</option>
<!--selected的作用是默认显示此选择项。-->
                <option>Vue</option>
            </select>
        </p>
        <h4>实现下拉框多选</h4>
        <p>
            <select multiple="multiple">
                <option>HTML</option>
                <option>CSS</option>
                <option selected="selected">Javascript</option>
                <option>Vue</option>
                <option>react</option>
                <option>angular</option>
<!--option项多于四个，就会出现滚动条。-->
            </select>
        </p>
        <h4>实现多行输入文本框</h4>
        <p>
            <textarea rows="10" cols="30"></textarea>
<!--textarea,多行输入文本框，rows是行数，cols是列数。-->
        </p>
        <p>
            <input type="submit" value="立即注册">
            <input type="reset" value="重置">
        </p>
<!--reset置重按钮，经常使用。-->
    </form>
    <button>按钮</button>
<!--button不属于form里面的内容，不影响form。基本上不用。-->
</body>
</html>

 14、<label>标签。文字关联输入框。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label标签</title>
</head>
<body>
    <form>
        <p>
            <label for="username">用户名：</label>
            <input type="text" id="username">
<!--for和id关联，作用，点击用户名：直接选中对应的输入框，可以直接输入。-->
        </p>
        <p>
            <label for="pwd">密码：</label>
            <input type="password" id="pwd">
        </p>
    </form>
</body>
</html>

 

 

 

posted @ 2021-12-07 18:01  longfei825  阅读(123)  评论(0)  编辑  收藏  举报