HTML详解连载(3)

简介: HTML详解连载(3)


专栏链接 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;
相关文章
|
弹性计算 负载均衡 监控
jemeter压测【2万用户每秒5次请求在30秒内处理完请求】(二)
jemeter压测【2万用户每秒5次请求在30秒内处理完请求】
359 0
|
10月前
|
人工智能 算法 物联网
“同西游,见万相” 主题LoRA风格挑战赛来袭!万元奖金池+猫超卡+限定周边来赢!
在通义万相Wan2.1的文生视频模型的基础上训练LoRA模型,以《西游记》的经典人物或故事为背景,描绘一个创作者心中的西游场景。参赛者根据自己的创意自定义故事内容,选择用任意的视觉风格和叙事手法进行演绎,展现 AI 在风格迁移、内容创意和叙事变化上的可能性。
202 10
|
10月前
|
XML 存储 大数据
Harmony os next~HarmonyOS Ability与页面跳转开发详解
HarmonyOS采用分布式架构,其Ability体系包括Page、Service、Data和Form四大类型Ability。Page Ability支持多页面跳转与数据传递,Service Ability用于后台任务,Data Ability提供数据共享接口,Form Ability实现轻量化卡片服务。本文详细解析了各Ability的开发方法、生命周期管理、跨Ability通信及最佳实践,帮助开发者掌握HarmonyOS应用开发的核心技能。
822 0
|
9月前
|
人工智能 安全 数据安全/隐私保护
本地部署DeepSeek教程:一键远程访问,还能解决Ollama安全隐患
本教程详细介绍如何使用Ollama+Open WebUI本地部署DeepSeek模型,并借助贝锐花生壳内网穿透实现安全远程访问。首先,安装Ollama并下载DeepSeek模型,根据显存选择合适参数(如4G选1.5B)。接着,通过Docker部署Open WebUI以获得图形化交互界面。最后,利用贝锐花生壳简单三步完成远程访问设置,支持HTTPS加密传输,保障数据安全。整个过程无需云服务器,轻松打造专属AI助手。
1098 5
|
10月前
|
关系型数据库 测试技术 新制造
基于 Websoft9 平台的 Odoo 教学实践:助力智能制造、物流与财务会计专业教师提升教学效果
Websoft9 是企业级开源软件自动化部署与管理平台,为高校智能制造、物流及财务会计等专业提供完整的 Odoo 教学解决方案。通过开箱即用的部署、全生命周期维护和功能扩展支持,助力教师快速构建真实业务场景,降低技术门槛。学生可进行模块化开发实践,并结合 CI/CD 工具链体验产业级 DevOps 流程,实现理论与实践结合,培养跨学科综合能力。
|
传感器 Java API
基于JAVA的智能家居控制系统设计与实现
基于JAVA的智能家居控制系统设计与实现
741 0
|
XML Java 数据库
配置applicationContext.xml文件
配置applicationContext.xml文件
282 13
|
微服务
springCloud之路由网关gateway
springCloud之路由网关gateway
352 0
|
存储 小程序 前端开发
【易售小程序项目】私聊功能uniapp界面实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】
【易售小程序项目】私聊功能uniapp界面实现 (买家、卖家 沟通商品信息)【后端基于若依管理系统开发】
636 0