HTML5常见标签总结（三）

最新推荐文章于 2024-09-10 14:15:01 发布

BugMaker2002

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量226

点赞数

分类专栏： html5 标签文章标签： html 前端

本文链接：https://blog.csdn.net/m0_57317650/article/details/125958635

版权

html5 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

标签

6 篇文章 0 订阅

订阅专栏

接着上篇所讲的内容，我们来讲一下HTML5中剩下的几个标签。

七、表单标签

①input系列标签

input系列标签根据属性type的值可以分为以下几类，如图所示：当type为text和password时，

可以设置input标签的placeholder属性来设置占位符，如图所示：

<input type="text" placeholder="请输入信息">

当type为radio时，可设置input标签的name属性来达到多组标签多选一的功能（name值相同的单选框为一组），还可以设置checked属性进行默认选中。

此外，容易被忽视的一个标签是form标签，这个标签非常之重要，在学了CSS和JS之后进行网页的制作时form标签的重要性就会显现出来

<form action=""></form>

②button系列标签（双标签）

该标签用于在网页中显示用户点击的按钮，根据type属性值的不同可以分为三类：submit（提交按钮，点击之后提交数据给后端服务器）、reset（重置按钮，点击之后恢复表单默认值）、button（默认按钮，默认无功能，可配合JS添加功能）。

<button type="submit">提交<button>

③select下拉菜单标签

由两部分组成：select标签（表示下拉菜单的整体）以及option标签（表示下拉菜单的每一项）：其中selected表示默认选中。

<select>
    <option>北京</option>
    <option selected>上海</option>
    <option>广州</option>
</select>

④textarea文本域标签

用于在网页中提供可输入多行文本的表单控件。

<textarea name="" id="" cols="30" rows="10"></textarea>

⑤label标签

用于绑定内容与表单标签之间的关系，有两种使用方法：方法一：（1）使用label标签把内容包裹起来（2）在表单上添加id属性（3）在label标签的for属性中设置对应的id属性值；方法二：（1）直接使用label标签把内容（如文本）和表单标签一起包裹起来（2）需要把label标签的for属性删除。

八、语义化标签

语义化标签可以分为没有语义的布局标签（如div和span）和有语义的布局标签（常用于手机端的web开发）。其中，div标签一行只显示一个（独占一行），span标签一行可显示多个。这些在CSS中使用广泛。

下面以一个实战结束我们对这八大标签的总结：如图所示：要制作这样一个网页（暂未用到CSS），其HTML代码应为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>好好学习，天天向上</h1><hr>
    <form action="">
    昵称：<input type="text" placeholder="请输入昵称"><br>
    性别：<label><input type="radio" name="1" checked>男</label> <label><input type="radio" name="1">女</label><br>
    所在城市：<select>
        <option>北京</option>
        <option selected>上海</option>
        <option>广州</option>
    </select><br>
    学历状况：<label><input type="radio" name="1">初中</label> <label><input type="radio" name="1">高中</label> <label><input type="radio" name="1">大学</label><br>
    专业：<label><input type="checkbox">计算机</label>
                <label><input type="checkbox">电子信息</label>
                <label><input type="checkbox">土木工程</label>
                <label><input type="checkbox">法律</label>
                <label><input type="checkbox">外语</label>
                <label><input type="checkbox">自动化</label>
                <br>
    个人介绍：<br><textarea name="" id="" cols="30" rows="10"></textarea><br>
    <h4>我承诺</h4>
    <ul>
        <li>认真学习</li>
        <li>天天向上</li>
        <li>为国家做贡献</li>
    </ul><br>
    <label><input type="checkbox">我同意所有条款</label><br><br>
    <button>免费注册</button>
    <button>重置</button>
    </form>
</body>
</html>