news 2026/7/4 14:34:55

块内与行内元素and输入标签

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
块内与行内元素and输入标签

上播!这期写的是HTML的基础标签之块内与行内元素and输入标签。

一.块内元素与行内元素的基本定义

1.块元素 :独占一行:浏览器会自动给它前后换行,一个元素占满整行

2.行元素 :不独占一行:和其它行内元素并排显示,不会自动换行

3.常见的块级元素有div、form、h1~h6、hr、p、table、ul、li等

4.常见的行内元素有span、a、b、em、i、strong、img、input等

二、输入之王<input>

<input> 标签可以通过改变 type 属性变成不同的控件:

<input type="text">:单行文本输入框,可用于输入学员姓名等文字信息

<input type="password"> :密码输入框,输入的内容会被隐藏显示(如输入密码)

<input type="radio">:单行按钮,必须保证name属性相同才能互斥选择

<input type="checkbox">:复选按钮,允许同时勾选多个选项

<input type="file“>:文件选择器,可限制只选择图片文件
三.场景实操

我们以一个学员信息收集表作为场景

<head> <meta charset="UTF-8"> <title>学员信息收集表</title> </head> <body> <h2>学员信息收集表</h2> <form action="#" method="GET"> <div> <label>姓名:</label> <input type="text" name="username"> </div> <div> <label>密码:</label> <input type="password" name="pwd"> </div> <div> <label>性别:</label> <input type="radio" name="gender" value="male" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="female" id="female"> <label for="female">女</label> </div> <div> <label>兴趣:</label> <input type="checkbox" name="hobby" value="code" id="code"> <label for="code">编程</label> <input type="checkbox" name="hobby" value="design" id="design"> <label for="design">设计</label> <input type="checkbox" name="hobby" value="game" id="game"> <label for="game">游戏</label> </div> <div> <label>头像上传:</label> <input type="file" name="avatar"> </div> <div> <input type="reset" value="重置"> <input type="submit" value="提交"> </div> </form> </body>

以下是他的运行图

好的 这期就到这了 下播!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/2 12:35:22

Spring AOP原理解析

Spring AOP原理解析&#xff1a;编织横切关注点的艺术在软件开发中&#xff0c;我们常常会遇到一些跨越多个模块的功能需求&#xff0c;如日志记录、性能监控、事务管理、安全控制等。这些功能被称为“横切关注点”&#xff0c;因为它们像一把刀横切过整个应用程序的多个层次。…

作者头像 李华
网站建设 2026/7/2 12:35:36

MongoDB索引优化

索引之钥&#xff1a;解锁MongoDB高性能查询的深层逻辑在MongoDB的世界里&#xff0c;数据以灵活自由的文档形式流动&#xff0c;但若无索引的指引&#xff0c;每一次查询都如同在茫茫书海中盲目翻页。索引不仅是加速查询的利器&#xff0c;更是数据库性能优化的核心密码。理解…

作者头像 李华
网站建设 2026/7/2 14:58:07

LadonGo:模块化高并发内网渗透测试工具实战指南

1. 项目概述&#xff1a;为什么LadonGo是红队与渗透测试的“瑞士军刀”在网络安全攻防演练、渗透测试乃至日常的安全评估中&#xff0c;效率和信息收集的深度往往决定了项目的成败。很多从业者&#xff0c;尤其是刚入行的朋友&#xff0c;常常会陷入一个困境&#xff1a;面对一…

作者头像 李华
网站建设 2026/7/4 1:06:06

LangChain + RAG 实战(三):构建第一个 RAG Chain

创作者&#xff1a; Yardon | GitHub&#xff1a; github.com/YardonYan | 版本&#xff1a; v1.0 | LCEL&#xff1a;LangChain 的链式语法 LCEL&#xff08;LangChain Expression Language&#xff09;让链式调用变得像搭积木&#xff1a; from langchain.prompts im…

作者头像 李华
网站建设 2026/7/4 10:05:53

从聊天到执行:AI Agent如何重塑人机交互与开发者新机遇

你有没有发现&#xff0c;最近打开 ChatGPT 的网页版&#xff0c;感觉有点不一样了&#xff1f;不是界面变了&#xff0c;而是那种“一问一答”的聊天感&#xff0c;正在被一种更主动、更“能干”的模式取代。过去&#xff0c;我们习惯性地把问题抛给它&#xff0c;然后等待一个…

作者头像 李华