【HTML】标签学习(下.4)

(Hello!大家好哇,今天我们将继续学习HTML的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)

(续接【HTML】标签学习(下.3))

3.4.2 <label>标签

  • <label>标签为input元素定义标注(标签) 。
  • <label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就
    会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

<label for="sex">男</label>

<input type="radio" name="sex" id="sex"/> 

 3.4.3 <select>表单元素

  •  使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表。 

<select> 
   <option>选项1  </option> 
   <option>选项2  </option>
   <option>选项3  </option>

   ......
</select>

  1. <select>中至少包含一对<option)>。
  2. 在<option>中定义selected="selected"时,当前项即为默认选中项。

3.4.4 <textarea>表单元素

  • 使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签
  • 在表单元素中,<textarea>标签是用于定义多行文本输入的控件。 
  • 使用多行文本输入控件,可以输入更多的文字,该控件常用于留言板,评论。

<textarea row="3" cols="20"> 
文本内容
</textarea> 

  1.  通过<textarea>标签可以轻松地创建多行文本输入框。 
  2. cols="每行中的字符数",rows="显示的行数",我们在实际开发中不会使用,都是用CSS来改变大小。

附:于今天同时发的还有案例练习哦,大家可以一起实战练习,在练习中复习之前学习过的知识,熟练运用基础的标签知识。

(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:你的负担将变成你的礼物,你受的苦将照亮未来的路。) 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/588166.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何远程电脑连接?

远程电脑连接是指通过网络将计算机与远程设备连接起来&#xff0c;实现远程管理和操作的技术。在现代信息化社会中&#xff0c;远程电脑连接成为了人们工作和生活中的重要方面。远程电脑连接可以极大地提高工作效率和便利性&#xff0c;让我们能够在不同地点的计算机之间进行协…

【教学类-09-08】20240405细线迷宫图04(正方形)迷宫格子数量测试+左上角加格子数(15CM横版一页-1份横版)

作品展示 背景说明 从8*8开始&#xff0c;可以生成了迷宫图了。 代码测试&#xff1a; 第一次&#xff1a;8-30格 # 15CM正方形手工纸上 以15*15格子为基础&#xff0c;测试0-14,16-30的格子num1 # int(input(几张&#xff08;30份&#xff09;\n))print(-----------1、 生成…

上海亚商投顾:沪指窄幅震荡微跌 固态电池概念股午后大涨

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 沪指昨日震荡调整&#xff0c;深成指、创业板指盘中跌超1%&#xff0c;尾盘跌幅有所收窄。固态电池概念股午后…

XRDP登录ubuntu桌面闪退问题

修改 /etc/xrdp/startwm.sh unset DBUS_SESSION_BUS_ADDRESS unset XDG_RUNTIME_DIR . $HOME/.profile

[源码] Android 上的一些快捷方式,如通知、快捷方式等

目录 一、通知0. 配置权限1. 测试发送通知代码2. 打开通知设置界面代码3. 前台服务创建常驻通知 二、快捷方式1. 测试添加动态快捷方式代码 三、开发者图块四、桌面小部件 基于jetpack compose 框架的使用代码 一、通知 参见 官方文档 0. 配置权限 <uses-permission andr…

RK3568 学习笔记 : 独立修改与编译 u-boot

前言 开发板&#xff1a;【正点原子】ATomPi-CA1 开发板&#xff0c;配置&#xff1a;RK3568&#xff0c;4GB DDRAM 64GB emmc 开发板资料给了 u-boot 与 Linux kernel 源码&#xff0c;尝试手动编译。 本篇记录 收到编译 RK3568 平台 u-boot 的方法 环境搭建 由于 RK 平台…

Redis.配置文件

基础篇Redis 6.1.2 .配置文件 spring:redis:host: 192.168.150.101port: 6379password: 123321lettuce:pool:max-active: 8 #最大连接max-idle: 8 #最大空闲连接min-idle: 0 #最小空闲连接max-wait: 100ms #连接等待时间6.1.3.测试代码 SpringBootTest class RedisDemo…

图神经网络实战(7)——图卷积网络(Graph Convolutional Network, GCN)详解与实现

图神经网络实战&#xff08;7&#xff09;——图卷积网络详解与实现 前言1. 图卷积层2. 比较 GCN 和 GNN2.1 数据集分析2.2 实现 GCN 架构 小结系列链接 前言 图卷积网络 (Graph Convolutional Network, GCN) 架构由 Kipf 和 Welling 于 2017 年提出&#xff0c;其理念是创建一…

数据结构(初阶)第一节:数据结构概论

本篇文章是对数据结构概念的纯理论介绍&#xff0c;希望系统了解数据结构概念的友友可以看看&#xff0c;对概念要求不高的友友稍做了解后移步下一节&#xff1a; 数据结构&#xff08;初阶&#xff09;第二节&#xff1a;顺序表-CSDN博客 正文 目录 正文 1.数据结构的相关概…

Word的”交叉引用“和”插入题注“快捷键设置

Word的”交叉引用“和”插入题注“快捷键设置 在MSWord2021中&#xff0c;可以自定义设置快捷键。方法如下&#xff1a;文件-选项-自定义功能区-键盘快捷方式&#xff08;自定义&#xff09;。具体过程如图所示。 最后&#xff0c;按照上述流程将插入题注&#xff08;Insert…

Node | Node.js 版本升级

目录 Step1&#xff1a;下载 Step2&#xff1a;安装 Step3&#xff1a;换源 发现其他博客说的 n 模块不太行&#xff0c;所以老老实实地手动安装 Step1&#xff1a;下载 Node 中文官网&#xff1a;https://nodejs.cn/download 点击后&#xff0c;将会下载得到一个 .msi 文件…

全志 Linux Qt

一、简介 本文介绍基于 buildroot 文件系统的 QT 模块的使用方法&#xff1a; • 如何在 buildroot 工具里编译 QT 动态库&#xff1b; • 编译及运行 qt_demo 应用程序&#xff1b; • 适配过程遇到的问题。 二、QT动态库编译 在项目根路径执行 ./build.sh buildroot_menuc…