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

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

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

clever at善于


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>

在这里插入图片描述


HTML特殊字符

空格:&nbsp;
小于号:&lt;
大于号:&gt;
按位与:&amp;

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

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

相关推荐

  1. Go Label 使用

    2024-03-24 21:06:04       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-24 21:06:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-24 21:06:04       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-24 21:06:04       87 阅读
  4. Python语言-面向对象

    2024-03-24 21:06:04       96 阅读

热门阅读

  1. VUE3 换肤/根据主题动态切换图片

    2024-03-24 21:06:04       48 阅读
  2. 软件测试面试问题总结—CTO面试

    2024-03-24 21:06:04       48 阅读
  3. 小程序调用相机拍照上传

    2024-03-24 21:06:04       38 阅读
  4. python基础练习题5

    2024-03-24 21:06:04       37 阅读
  5. 学习AIGC大模型的步骤

    2024-03-24 21:06:04       42 阅读
  6. 【二进制计算,逆序,每位求和】

    2024-03-24 21:06:04       40 阅读
  7. Python从入门到精通秘籍十七

    2024-03-24 21:06:04       44 阅读
  8. 用C++做一个植物大战僵尸

    2024-03-24 21:06:04       44 阅读
  9. day9 嵌套排序,利用嵌套循环所写的简单时钟

    2024-03-24 21:06:04       36 阅读