HTML详解连载(3)

news2025/1/14 18:43:38

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.coloradmin.cn/o/869680.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《3D 数学基础》12 几何图元

目录 1 表达图元的方法 1.1 隐式表示法 1.2 参数表示 1.3 直接表示 2. 直线和射线 2.1 射线的不同表示法 2.1.1 两点表示 2.1.2 参数表示 2.1.3 相互转换 2.2 直线的不同表示法 2.2.1 隐式表示法 2.2.2 斜截式 2.2.3 相互转换 3. 球 3.1 隐式表示 1 表达图元的方…

运维监控学习笔记4

系统监控&#xff1a; CPU&#xff1a; 内存&#xff1a; IO INPUT/OUTPUT&#xff08;网络、磁盘&#xff09; CPU三个重要概念&#xff1a; 上下文切换&#xff1a;CPU调度器实施的进程的切换过程&#xff0c;称为上下文切换。CPU寄存器的作用。 上下文切换越频繁&#…

keil下载程序具体过程4:flash下载算法

引言 本篇文章将介绍flash算法文件&#xff0c;阐述从jlink如何下载镜像文件写入到内部的falsh。 一、XIP 在谈flash下载算法文件时&#xff0c;先说明XIP是什么。 芯片的启动方式有很多种&#xff1a;可以从RAM中启动、内部的flash、外部的flash等等&#xff08;还有从sd卡、…

CSDN博客批量查询质量分https://yma16.inscode.cc/请求超时问题(设置postman超时时间)(接口提供者设置了nginx超时时间)

文章目录 查询链接问题请求超时原因解决谷歌浏览器超时问题办法&#xff08;失败了&#xff09;谷歌浏览器不支持设置请求超时时间&#xff08;谷歌浏览器到底有没限制请求超时&#xff1f;貌似没有限制&#xff1f;&#xff09;看能否脱离浏览器请求&#xff0c;我们查看关键代…

基于C++实现了最小反馈弧集问题的三种近似算法(GreedyFAS、SortFAS、PageRankFAS)

该项目是一个基于链式前向星存图、boost&#xff08;boost::hash、asio线程池&#xff09;以及emhash7/8的非官方实现&#xff0c;实现了最小反馈弧集问题的三种近似算法。该问题是在有向图中找到最小的反馈弧集&#xff0c;其中反馈弧集是指一组弧&#xff0c;使得从这些反馈弧…

环境与分支的详细介绍及其关联(开发、测试、预发布、生产)

文章目录 前言一、开发环境&#xff08;dev&#xff09;二、测试环境&#xff08;test&#xff09;三、预发布环境&#xff08;pre&#xff09;四、生产环境&#xff08;pro&#xff09;五、环境与分支的关系总结 前言 在现代软件开发中&#xff0c;前端项目的开发和部署往往需…

【wiki】电竞助手掉落提醒 EsportsHelper「Webhook」「钉钉」「饭碗警告」「企业微信」「Discord」

介绍 本项目链接 Github电竞助手链接 github上项目电竞助手(EsportsHelper)的掉落提醒配置教程,当有掉宝的时候会发送你信息提示. 至于这个脚本是怎么使用的简单说一下,就是通过自动观看英雄联盟直播 从而获取奖励(仅限直营服),有兴趣的可以去github上看readme,非常详细,支持…

广联达 Linkworks办公OA SQL注入+后台文件上传漏洞复现(HW0day)

0x01 产品简介 广联达Linkworks办公OA&#xff08;Office Automation&#xff09;是一款综合办公自动化解决方案&#xff0c;旨在提高组织内部的工作效率和协作能力。它提供了一系列功能和工具&#xff0c;帮助企业管理和处理日常办公任务、流程和文档。 0x02 漏洞概述 由于 广…

hackNos靶机

靶机训练1 - hackNos: Os-hackNos 靶机平台 Vulnhub 是一个提供各种漏洞环境的靶场平台&#xff0c;供安全爱好者学习使用&#xff0c;大部分环境是做好的虚拟机镜像文件&#xff0c;镜像预先设计了多种漏洞&#xff0c;需要使用VMware或者VirtualBox运行。每个镜像会有破解的目…

【CSS学习笔记】

学习内容 1.css是什么 2.CSS怎么用&#xff08;快速入门&#xff09; 3.CSS选择器&#xff08;重点 难点&#xff09; 4.美化页面&#xff08;文字、阴影、超链接、列表、渐变…&#xff09; 5.盒子模型 6.浮动 7.定位 8.网页动画&#xff08;特效&#xff09; 1.什么是CSS C…

Reinforcement Learning with Code 【Chapter 10. Actor Critic】

Reinforcement Learning with Code 【Chapter 10. Actor Critic】 This note records how the author begin to learn RL. Both theoretical understanding and code practice are presented. Many material are referenced such as ZhaoShiyu’s Mathematical Foundation of …

Blazor简单教程(2):布局

文章目录 前言布局自定义布局默认布局 前言 我们现在主流的页面都是单页面Layout布局&#xff0c;即一个页面有侧边栏&#xff0c;抬头&#xff0c;下边栏&#xff0c;中间主题。 BootstrapBlazor UI&#xff0c; Blazor Server 模式配置 布局 自定义布局 注入LayoutCompon…

微服务06-分布式事务解决方案Seata

1、Seata 概述 Seata事务管理中有三个重要的角色: TC (Transaction Coordinator) - **事务协调者:**维护全局和分支事务的状态,协调全局事务提交或回滚。 TM (Transaction Manager) - **事务管理器:**定义全局事务的范围、开始全局事务、提交或回滚全局事务。 RM (Resourc…

软考笔记 信息管理师 高级

文章目录 介绍考试内容与时间教材 预习课程一些例子课本结构考试内容 1 信息与信息化1.1 信息与信息化1.1.1 信息1.1.2 信息系统1.1.3 信息化 1.2 现代化基础设施1.2.1 新型基础建设1.2.2 工业互联网1.2.3 车联网&#xff1a; 1.3 现代化创新发展1.3.1 农业农村现代化1.3.2 两化…

常见的路由协议之RIP协议与OSPF协议

目录 RIP OSPF 洪泛和广播的区别 路由协议是用于在网络中确定最佳路径的一组规则。它们主要用于在路由器之间交换路由信息&#xff0c;以便找到从源到目标的最佳路径。 常见的路由协议&#xff1a; RIP (Routing Information Protocol)&#xff1a;RIP 是一种基于距离向量算…

cookie是什么?

cookie是什么&#xff1f; Cookie实际上是一小段的文本信息。 http协议本身是无状态的。无状态是指Web浏览器与Web服务器之间不需要建立持久的连接&#xff0c;这意味着当一个客户端向服务器端发出请求&#xff0c;然后Web服务器返回响应&#xff08;Response&#xff09;&…

用友移动管理系统 任意文件上传漏洞复现(HW0day)

0x01 产品简介 用友移动系统管理是用友公司推出的一款移动办公解决方案&#xff0c;旨在帮助企业实现移动办公、提高管理效率和员工工作灵活性。它提供了一系列功能和工具&#xff0c;方便用户在移动设备上管理和处理企业的系统和业务。 0x02 漏洞概述 用友移动管理系统 uploa…

Kubesphere中DevOps流水线无法部署/部署失败

摘要 总算能让devops运行以后&#xff0c;流水线却卡在了deploy这一步。碰到了两个比较大的问题&#xff0c;一个是无法使用k8sp自带的kubeconfig认证去部署&#xff1b;一个是部署好了以后但是没有办法解析镜像名。 版本信息 k8s&#xff1a;v1.21.5 k8sp&#xff1a;v3.3.…

GO学习之 微框架(Gin)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…

kafka高吞吐量分享

消息队列kafka基本介绍基本概念整体架构 高吞吐量实现分区分段顺序写磁盘零拷贝技术DMA&#xff08;Direct Memory Access&#xff09;传统传输零拷贝传输 批量发送 消息队列 解耦合 耦合的状态表示当你实现某个功能的时候&#xff0c;是直接接入当前接口&#xff0c;而利用消…