【前端寻宝之路】学习和使用label标签

最新推荐文章于 2024-06-20 13:12:21 发布

Aileen_0v0

最新推荐文章于 2024-06-20 13:12:21 发布

阅读量1.1k

点赞数 15

分类专栏：前端寻宝之路系列文章标签：前端学习 html5

本文链接：https://blog.csdn.net/Aileenvov/article/details/136297280

版权

前端寻宝之路系列专栏收录该内容

12 篇文章 3 订阅

订阅专栏

本文详细介绍了HTML中label标签的用法，如何配合input实现关联，以及select标签的选择功能。还涵盖了文本标签textarea和无语义标签如div和span的应用，以及处理HTML特殊字符的方法。

摘要由CSDN通过智能技术生成

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
💫个人格言:“没有罗马,那就自己创造罗马~”

文章目录

`label标签`

`label标签`

label标签常搭配input使用

    <input type="radio" name="sex">男
    <input type="radio" name="sex">女

在这里插入图片描述

        <!-- 将文字和单选按钮关联在一起利用label标签 -->
    <label for="male">男</label>
    <input type="radio" name="sex" id="male">

    <label for="female">女</label>
    <input type="radio" name="sex" id="female">

label中的for属性:表示将当前包裹的内容和哪一个元素进行关联

`select标签`

    <select name="" id="">
        <option value="">--请选择年份--</option>
        <option value="">--1990--</option>
        <option value="">--1991--</option>
        <option value="">--1992--</option>
        <option value="">--1993--</option>
        <option value="">--1994--</option>
    </select>

在这里插入图片描述
我们可以通过selected标签进行默认选项的选择,代码如下:

    <select name="" id="">
        <option value="">--请选择年份--</option>
        <option value="" selected="selected">--1990--</option>
        <option value="">--1991--</option>
        <option value="">--1992--</option>
        <option value="">--1993--</option>
        <option value="">--1994--</option>
    </select>

在这里插入图片描述

`文本标签`

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

在这里插入图片描述

`无语义标签`

无语义标签无固定用途,啥都可以干

div:是独占一行的,是一个大盒子.
span:不独占一行,是一个小盒子.

    <div>
        <div>
            <span>吃饭</span>
            <span>睡觉</span>
            <span>玩游戏</span>
            <span>运动</span>
        </div>
        <div>吃饭</div>
        <div>睡觉</div>
        <div>玩游戏</div>
        <div>运动</div>
    </div>