HTML详解连载(3)

HTML详解连载(3)

  • 专栏链接 [link](http://t.csdn.cn/xF0H3)
    • 下面进行专栏介绍
  • 开始喽
    • 表单
      • 作用
      • 使用场景
    • input标签基本使用
      • 示例
      • type属性值以及说明
    • input标签占位文本
      • 示例
      • 注意
    • 单选框 radio
      • 代码示例
    • 多选框-checkbox
      • 注意
      • 代码示例
    • 文本域
      • 作用
      • 标签:
      • 示例
    • label标签
      • 作用
      • 经验
      • 写法一
      • 写法二:
      • 强调
    • 按钮-button
      • type属性值和说明
    • 无语义的布局标签
      • 作用
      • 示例
    • 字符实体
      • 作用
      • 表格

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记
进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。

开始喽

在这里插入图片描述

表单

作用

收集用户信息

使用场景

登录页面,注册页面,搜素区域

input标签基本使用

input标签type属性值不同,则功能不同

示例

   <input  type=”...”>

type属性值以及说明

属性值说明
text文本框,用于输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

input标签占位文本

占位文本:提示信息

示例

   <input  type=”...” placeholder=”提示信息”>

注意

文本框和密码框都可以使用

单选框 radio

属性名作用特殊说明
name控件名称控件分组,同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同,简写为一个单词

在这里插入图片描述## 上传文件-file
默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件 多选功能

代码示例

 <input type=”file”multiple>

多选框-checkbox

多选框也叫复选框

注意

默认选中:checked

代码示例

  <input type=”checkbox”checked>敲前端代码

在这里插入图片描述## 下拉菜单
select 嵌套option, select是下拉菜单整体,option是下拉菜单的每一项

文本域

作用

多行输入文本的表单控件

标签:

textarea,双标签

示例

  <textarea>默认提示文字</textarea>

label标签

作用

网页中,某个标签的说明文本

经验

用lable标签绑定文职和表单控件的关系,增大表单的点击范围

写法一

lable标签只包裹内容,不包裹表单控件
设置lable标签的for属性值和表单控件的id属性相同

<input type=”radio”id=”man”>
<lable for=”man”></lable>

写法二:

使用lable标签包裹文字和表单控件,不需要属性

<lable><input type=”radio”></lable>

强调

支持lable标签增大点击范围的表单控件:文本框、密码框、上传文件、多选框、下拉菜 单、文本域等等。

按钮-button

<button type=””>按钮</button>

type属性值和说明

属性值说明
submit提交按钮,点击后可以提交数据到后台(默认功能)
reset重置按钮,点击后将表单控件恢复到默认值
button普通按钮,默认没有功能,一般配合JavaScript使用

无语义的布局标签

作用

布局网页(划分网页区域,摆放内容)
div:独占一行
span:不换行

示例

<duv>div标签,独占一行</div>
<span>span标签,不换行</span>

字符实体

作用

在网页中显示预留字符

表格

显示结果描述实体名称
空格&nbsp;
<小于号&lt;
>大于号&gt;

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

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

相关文章

抖音关键词搜索小程序排名怎么做

抖音关键词搜索小程序排名怎么做 1 分钟教你制作一个抖音小程序。 抖音小程序就是我的视频&#xff0c;左下方这个蓝色的链接&#xff0c;点进去就是抖音小程序。 如果你有了这个小程序&#xff0c;发布视频的时候可以挂载这个小程序&#xff0c;直播的时候也可以挂载这个小…

快速使用Linux系统中SSH

在Linux系统中&#xff0c;使用SSH代理跳板机是一种有效的方式&#xff0c;可以实现安全连接和访问远程服务器。本文将详细介绍SSH代理跳板机的设置和使用方法。 什么是SSH代理跳板机&#xff1f; SSH代理跳板机是一种在Linux系统中使用SSH协议实现的代理服务器。通过配置相关…

bytesec靶场

靶场下载 https://www.vulnhub.com/entry/hacknos-os-bytesec,393/ 下载完成后进入配置修改网卡 教程 配置 第一步&#xff1a;启动靶机时按下 shift 键&#xff0c; 进入以下界面 第二步&#xff1a;选择第二个选项&#xff0c;然后按下 e 键&#xff0c;进入编辑界面 将…

DRF的filter组件

DRF的Filter组件 如果某个API需要传递一些条件进行搜索&#xff0c;其实就在是URL后面通过GET传参即可&#xff0c;例如&#xff1a; /api/users?age19&category12在drf中filter组件可以支持条件搜索。 1. 自定义filter # models.py from django.db import modelsclas…

[NLP]LLM 训练时GPU显存耗用量估计

以LLM中最常见的Adam fp16混合精度训练为例&#xff0c;分析其显存占用有以下四个部分&#xff1a; GPT-2含有1.5B个参数&#xff0c;如果用fp16格式&#xff0c;只需要1.5G*2Byte3GB显存, 但是模型状态实际上需要耗费1.5B*1624GB. 比如说有一个模型参数量是1M&#xff0c;在…

[GAN] 使用GAN网络进行图片生成的“调参人”入门指南——生成向日葵图片

[GAN] 使用GAN网络进行图片生成的“炼丹人”日志——生成向日葵图片 文章目录 [GAN] 使用GAN网络进行图片生成的“炼丹人”日志——生成向日葵图片1. 写在前面&#xff1a;1.1 应用场景&#xff1a;1.2 数据集情况&#xff1a;1.3 实验原理讲解和分析&#xff08;简化版&#x…

Flink CDC系列之:TiDB CDC 导入 Elasticsearch

Flink CDC系列之&#xff1a;TiDB CDC 导入 Elasticsearch 一、通过docker 来启动 TiDB 集群二、下载 Flink 和所需要的依赖包三、在TiDB数据库中创建表和准备数据四、启动Flink 集群&#xff0c;再启动 SQL CLI五、在 Flink SQL CLI 中使用 Flink DDL 创建表六、Kibana查看Ela…

H3C QoS打标签和限速配置案例

EF&#xff1a;快速转发 AF&#xff1a;确保转发 CS&#xff1a;给各种协议用的 BE&#xff1a;默认标记(尽力而为) VSR-88-2 出口路由配置&#xff1a; [H3C]dis current-configuration version 7.1.075, ESS 8305 vlan 1 traffic classifier vlan10 operator and if-match a…

关于consul的下载方法

linux下 sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://rpm.releases.hashicorp.com/RHEL/hashicorp.repo sudo yum -y install consulwindow下 https://developer.hashicorp.com/consul/downloads 然后把里面的exe文件放在gopath下就行了 验证…

苍穹外卖day11笔记

今日首先介绍前端技术Apache ECharts&#xff0c;说明后端需要准备的数据&#xff0c;然后讲解具体统计功能的实现&#xff0c;包括营业额统计、用户统计、订单统计、销量排名。 一、ECharts 是什么 ECharts是一款基于 Javascript 的数据可视化图表库。我们用它来展示图表数…

说一下什么是tcp的2MSL,为什么客户端在 TIME-WAIT 状态必须等待 2MSL 的时间?

1.TCP之2MSL 1.1 MSL MSL:Maximum Segment Lifetime报文段最大生存时间&#xff0c;它是任何报文段被丢弃前在网络内的最长时间 1.2为什么存在MSL TCP报文段以IP数据报在网络内传输&#xff0c;而IP数据报则有限制其生存时间的TTL字段&#xff0c;并且TTL的限制是基于跳数 1.3…

ceph相关概念和部署

Ceph 可用于向云提供 Ceph 对象存储 平台和 Ceph 可用于提供 Ceph 块设备服务 到云平台。Ceph 可用于部署 Ceph 文件 系统。所有 Ceph 存储集群部署都从设置 每个 Ceph 节点&#xff0c;然后设置网络。 Ceph 存储集群需要满足以下条件&#xff1a;至少一个 Ceph 监控器&#x…

继承和多态C++

这里写目录标题 继承public、protected、private 修饰类的成员public、protected、private 指定继承方式改变访问权限 C继承时的名字遮蔽问题基类成员函数和派生类成员函数不构成重载C基类和派生类的构造函数构造函数的调用顺序基类构造函数调用规则 C基类和派生类的析构函数C多…

Android app专项测试之耗电量测试

前言 耗电量指标 待机时间成关注目标 提升用户体验 通过不同的测试场景&#xff0c;找出app高耗电的场景并解决 01、需要的环境准备 1、python2.7(必须是2.7&#xff0c;3.X版本是不支持的) 2、golang语言的开发环境 3、Android SDK 此三个的环境搭建这里就不详细说了&am…

无涯教程-Perl - send函数

描述 此函数在SOCKET上发送消息(与recv相反)。如果Socket未连接,则必须提供一个目标以与TO参数进行通信。在这种情况下,将使用sendto系统功能代替系统发送功能。 FLAGS参数由按位或0以及MSG_OOB和MSG_DONTROUTEoptions中的一个或多个形成。 MSG_OOB允许您在支持此概念的Socke…

炬芯科技发布全新第二代智能手表芯片,引领腕上新趋势!

2023年7月&#xff0c;炬芯科技宣布全新第二代智能手表芯片正式发布。自2021年底炬芯科技推出第一代的智能手表芯片开始便快速获得了市场广泛认可和品牌客户的普遍好评。随着技术的不断创新和突破&#xff0c;为了更加精准地满足市场多元化的变幻和用户日益增长的体验需求&…

C语言入门 Day_5 四则运算

目录 前言 1.四则运算 2.其他运算 3.易错点 4.思维导图 前言 图为世界上第一台通用计算机ENIAC,于1946年2月14日在美国宾夕法尼亚大学诞生。发明人是美国人莫克利&#xff08;JohnW.Mauchly&#xff09;和艾克特&#xff08;J.PresperEckert&#xff09;。 计算机的最开始…

轻量级 Spring Task 任务调度可视化管理

Spring Task/Spring Scheduler 傻傻分不清 首先做一下“名词解释”&#xff0c;分清楚这两者的区别&#xff1a; Spring Task Spring Task 是 Spring 框架自带的一个任务调度模块&#xff0c;提供了基本的任务调度功能。它是通过 Java 的 Timer 和 TimerTask 类来实现的&…

ReactDOM模块react-dom/client没有默认导出报错解决办法

import ReactDOM 模块“"E:/Dpandata/Shbank/rt-pro/node_modules/.pnpm/registry.npmmirror.comtypesreact-dom18.2.7/node_modules/types/react-dom/client"”没有默认导出。 解决办法 只需要在tsconfig.json里面添加配置 "esModuleInterop": true 即…

数据结构介绍

1、什么是数据结构呢&#xff1f; 计算机底层存储、组织数据的方式。是指数据相互之间是以什么方式排列在一起的。数据结构是为了更方便的管理和使用数据&#xff0c;需要结合具体的业务来进行选择。一般情况下&#xff0c;精心选择的数据结构可以带来更高的运行或者存储效率。…