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

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|

💫个人格言:"没有罗马,那就自己创造罗马~"
clever at善于

文章目录


label标签

label标签常搭配input使用

html 复制代码
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女
html 复制代码
        <!-- 将文字和单选按钮关联在一起利用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标签

html 复制代码
    <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标签进行默认选项的选择,代码如下:

html 复制代码
    <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>

文本标签

html 复制代码
    <textarea name="" id="" cols="30" rows="10" ></textarea>

无语义标签

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

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

html 复制代码
    <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;

相关推荐
魔芋红茶1 分钟前
spring-initializer
python·学习·spring
西岭千秋雪_26 分钟前
Redis性能优化
数据库·redis·笔记·学习·缓存·性能优化
随便取个六字27 分钟前
GIT操作 学习
git·学习
chuanauc29 分钟前
Kubernets K8s 学习
java·学习·kubernetes
小张是铁粉34 分钟前
docker学习二天之镜像操作与容器操作
学习·docker·容器
abigale0343 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
小张是铁粉1 小时前
oracle的内存架构学习
数据库·学习·oracle·架构
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
HERR_QQ1 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序