HTML中的块元素与行内元素
1.块级标签
块级元素会独占一行，通常用于构建页面的结构。常见的块级元素包括：
-
<div>：通用的块级容器。没有任何语意。可以创建网页的不同部分，导航栏侧边栏等。
<body><div class="nav"><a href="#">链接 1</a><a href="#">链接 2</a><a href="#">链接 3</a></div>
</body>若是想创建一个<div>初始带标签的话：可以直接：#nav 或者 div.nav 或者 div#nav
创建第二个div标签，第一个是导航栏，第二个就是主要内容了 .content
<div class="content"><h1>文章标题</h1><p>文章内容</p><p>文章内容</p><p>文章内容</p>
</div>-
<p>：段落。 -
<h1>到<h6>：标题。 -
<ul>：无序列表。 -
<ol>：有序列表。 -
<li>：列表项。 -
<table>：表格。 -
<form>：表单。 -
<header>：页眉。 -
<footer>：页脚。 -
<section>：页面的一部分。 -
<article>：文章内容。 -
<aside>：侧边栏。 -
<nav>：导航栏。 -
<main>：页面主要内容。 -
<blockquote>：引用块。 -
<hr>：水平分割线。 -
<pre>：预格式化文本。 -
1. 行内元素
-
行内元素不会独占一行，它们会与其他行内元素在同一行显示。常见的行内元素包括：
-
<span>：用于对文本的一部分进行样式化或操作。包装起来，以便使用gss或者js行为。
<span>这是第一个span标签</span>
<span>这是第二个span标签</span>
<span>这是第三个span标签</span>
<span>这是第四个span标签</span>
<hr>
<span>链接点击这里<a href="#">链接</a></span>
-
<a>：超链接。 -
<strong>：加粗文本，表示重要性。 -
<em>：斜体文本，表示强调。 -
<img>：插入图片。 -
<input>：输入框。 -
<label>：表单标签。 -
<button>：按钮。 -
<br>：换行符。 -
<i>：斜体文本。 -
<b>：加粗文本。 -
<small>：小号文本。 -
<sup>：上标文本。 -
<sub>：下标文本。 -
<code>：代码片段。 -
<time>：表示时间或日期。 -
3. 表单元素（Form Elements）
表单用于收集用户输入。常见的表单元素包括：
-
<form>：表单容器，用于包裹所有表单元素。 -
<input>：输入框，类型包括：-
text：文本输入。 -
password：密码输入。 -
email：电子邮件输入。 -
number：数字输入。 -
date：日期输入。 -
checkbox：复选框。 -
radio：单选按钮。 -
submit：提交按钮。 -
reset：重置按钮。 -
file：文件上传。
-
最常用的就是type属性：
<from><label for="username">用户名</label> //这是在文本框前面显示要填写的信息<input type="text" id="username" placeholder="请输入用户名"><br><br><label for="pwd">密码： </label> //在文本框前面显示输入的是密码<input type="password" id="pwd" placeholder="请输入内容">//也可以用单选框：rasio<label for="">性别</label><input type="rasio" name="gender"> 男 //name属性设置的单选<input type="rasio" name="gender"> 女<input type="rasio" name="gender"> 其他<br><br>//可以设置多选属性：chackbook<label> 爱好：</label><input type="checkbox" name="hobby">唱歌<input type="checkbox" name="hobby">跳舞<input type="checkbox" name="hobby">rap<input type="checkbox" name="hobby">打篮球//显示提交<input type="submit" value="上传">
</from>以上提交的位置：from标签有很多属性，自带的一个action属性，表示提交标签的时候向何处发送数据所以action的属性值也就是一个URL 但是，需要后端给我们提供API。所以可以直接用#来表示不跳转，不想提交的化也可以设置成上传。
运行 HTML
总结
示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表单示例</title>
</head>
<body><h1>注册表单</h1><form action="/submit" method="post"><div><label for="username">用户名:</label><input type="text" id="username" name="username" required></div><div><label for="password">密码:</label><input type="password" id="password" name="password" required></div><div><label for="email">电子邮件:</label><input type="email" id="email" name="email" required></div><div><label for="gender">性别:</label><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label></div><div><label for="country">国家:</label><select id="country" name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option></select></div><div><label for="bio">个人简介:</label><textarea id="bio" name="bio" rows="4" cols="50"></textarea></div><div><button type="submit">提交</button><button type="reset">重置</button></div></form>
</body>
</html>-
<textarea>：多行文本输入框。 -
<select>：下拉选择框。 -
<option>：下拉选择框的选项。 -
<label>：表单标签，用于描述输入字段。 -
<button>：按钮，可以用于提交表单或触发其他操作。 -
<fieldset>：用于将表单中的相关元素分组。 -
<legend>：用于描述<fieldset>的内容。 -
<datalist>：为输入框提供预定义的选项列表。 -
<output>：用于显示计算结果或脚本输出。 -
行内元素：不会独占一行，通常用于包裹文本或其他行内元素。
-
块级元素：独占一行，通常用于构建页面结构。
-
表单元素：用于收集用户输入，常见的表单元素包括
<input>、<textarea>、<select>等。
相关文章：
HTML中的块元素与行内元素
1.块级标签 块级元素会独占一行，通常用于构建页面的结构。常见的块级元素包括： <div>：通用的块级容器。没有任何语意。可以创建网页的不同部分，导航栏侧边栏等。 <body><div class"nav"><a hre…...
postgreSQL window function高级用法
正常使用：相当于对每个row做一次子查询 SELECT depname, empno, salary, avg(salary) OVER (PARTITION BY depname) FROM empsalary;order by 区别window frame and partition 没有order by， window function是对整个partition起作用， part…...
当中国“智算心跳”与全球共振：九章云极DataCanvas首秀MWC 2025
3月3日，西班牙巴塞罗那，全球通信与科技领域的盛会“2025世界移动通信大会（MWC 2025）”正式拉开帷幕。中国人工智能基础设施领军企业九章云极DataCanvas公司以全球化战略视野与硬核技术实力，全方位、多维度地展示了在智…...
机器视觉检测显卡与工控机选型指南
在机器视觉检测项目中，深度学习显卡和工控机的选择直接影响算法性能、系统稳定性和长期维护成本。以下是关键注意事项及建议： 一、深度学习显卡选择 核心需求分析 任务类型：检测任务复杂度（如YOLO、ResNet等模型的参数量）决定显存需求。 高分辨率图像（如4K以上）需大显存…...
配置安全网站
配置网站 确定是Debian系统 更新索引：apt update 安装包：apt upgrade -y 查看nginx状态：systemctl status nginx 安装：nginx：apt install nginx 启动：systemctl start nginx 在/var/www/里面创建一个…...
ds回答 什么是数据召回
数据召回（Data Recall）在不同领域有不同的具体含义，但核心都指向“从大量信息中筛选出相关数据”的过程。以下是其在不同场景下的定义和关键要点： 一、技术领域的定义（信息检索与推荐系统） 1. 基本概念 数…...
复现无人机的项目，项目名称为Evidential Detection and Tracking Collaboration
项目名称为Evidential Detection and Tracking Collaboration，主要用于强大的反无人机系统，涉及新问题、基准和算法研究。下面介绍项目的复现步骤： 安装环境：使用Anaconda创建并激活名为edtc的虚拟环境，Python版本为3…...
mac本地部署Qwq-32b记录
导语 昨天看到阿里开源了Qwq-32b，号称性能可以媲美Deepseek-R1。今天晚上有空就在Mac上折腾了一下，使用ollma进行了部署，效果感觉还不错，特此记录。 环境 硬件 型号：Macbook M1 Pro 14寸内存：512G 环境…...
实验三 Python 数据可视化 Python 聚类-K-means(CQUPT)
一、实验目的 Python 数据可视化： 1、学习使用 jieba、wordcloud 等类库生成词云图。 2、学习使用 Matplotlib 库进行数据可视化。 Python 聚类-K-means： 1、理解聚类非监督学习方法的基本原理。 2、掌握 Python、numpy、pandas、sklearn 实现聚类…...
通义万相2.1：开启视频生成新时代
摘要：文章开篇便点明了通义万相2.1在视频生成领域的重大突破，强调其作为阿里云通义系列AI模型的重要成员，不仅是简单的模型升级，更是视频生成技术迈向更智能、高效、精准的重要里程碑。其核心技术包括自研的高效VAE和DiT架构&…...
爬虫案例十一js逆向数位观察网
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、网站分析二、代码总结 前言 提示：这里可以添加本文要记录的大概内容： 爬虫案例十一js逆向数位观察网 提示：以下是本篇…...
WSL安装及问题
1 概述 Windows Subsystem for Linux（简称WSL）是一个在Windows 10\11上能够运行原生Linux二进制可执行文件（ELF格式）的兼容层。它是由微软与Canonical公司合作开发，开发人员可以在 Windows 计算机上同时访问 Windows 和…...
WordPress开发到底是开发什么？
WordPress 开发主要涉及基于 WordPress 平台构建、定制和扩展网站功能的过程。它不仅仅是简单的网站搭建，而是通过代码和技术实现个性化需求。 以下是 WordPress 开发的核心内容： 1. 主题开发（Theme Development） 功能ÿ…...
元脑服务器的创新应用：浪潮信息引领AI计算新时代
浪潮信息的元脑 R1 服务器现已全面支持开源框架 SGLang，能够在单机环境下实现 DeepSeek 671B 模型的高并发性能，用户并发访问量超过1000。通过对 SGLang 最新版本的深度适配，元脑 R1 推理服务器在运行高性能模型时，展现出卓越的处…...
SQL Server查询计划操作符（7.3）——查询计划相关操作符（9）
7.3. 查询计划相关操作符 78）Repartition Streams：该操作符消费多个输入流并产生多个输出流。期间，记录内容与格式保持不变。如果查询优化器使用一个位图过滤（bitmap filter），则输出流中的数据行数将会减少。一个输入流的每行记录被放入一个输出流。如果该操作符保留顺序…...
单片机项目复刻需要的准备工作
一、前言 复刻单片机的项目的时候，有些模块是需要焊接的。很多同学对焊接没有概念。 这里说一下做项目的基本工具。 比如：像这种模块，都需要自己焊接了排针才可以链接的。 二、基本模块 2.1 单排排针 一些模块买回来是没有焊接的&#x…...
【哇! C++】类和对象（五） - 赋值运算符重载
目录 编辑 一、运算符重载 1.1 运算符重载概念 1.2 全局运算符重载 1.3 运算符重载为成员函数 二、赋值运算符重载的特性 2.1 赋值运算符重载需要注意的点 2.2 赋值运算符重载格式 2.2.1 传值返回 2.2.2 传引用返回 2.2.3 检查自己给自己赋值 三、赋值运算符重载的…...
SpringCloud系列教程（十三）：Sentinel流量控制
SpringCloud中的注册、发现、网关、服务调用都已经完成了，现在就剩下最后一部分，就是关于网络控制。SpringCloud Alibaba这一套中间件做的非常好，把平时常用的功能都集成进来了，而且非常简单高效。我们下一步就完成最后一块拼图Se…...
vue+element|el-tree树设置懒加载和设置默认勾选
文章目录 导文代码实现1. 基本结构2. 懒加载实现3. 默认勾选功能4. 动态加载初始节点5. 节点勾选事件监听完整代码 导文 在实际开发中，很多数据过于庞大，需要分批请求，使用到懒加载。但是在tree的方法中，使用懒加载后无法直接使用…...
零售交易流程相关知识（top-down拆解）
引入 关于POS机交易时的后台数据交互 模块之间数据交换，都可以能被窃取或篡改。由此引入加密、解密机制和签名、验签机制 经典的加密、解密机制： 对称加密：DES\ TDES\ AES\ RC4 非对称加密：RSA\ DSA\ ECC 经典的签名、验签…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）࿰…...
AI，如何重构理解、匹配与决策？
AI 时代，我们如何理解消费？ 作者｜王彬 封面｜Unplash 人们通过信息理解世界。 曾几何时，PC 与移动互联网重塑了人们的购物路径：信息变得唾手可得，商品决策变得高度依赖内容。 但 AI 时代的来…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如，已知表达式3*52，依照子表达式的求值顺序，有两种可能的结果，如图9-3所示。 如果乘法先执行，结果是17。如果5…...
rknn toolkit2搭建和推理
安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 ，不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源（最常用） conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...
sshd代码修改banner
sshd服务连接之后会收到字符串： SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢？ 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头，…...
LangChain 中的文档加载器（Loader）与文本切分器（Splitter）详解《二》
🧠 LangChain 中 TextSplitter 的使用详解：从基础到进阶（附代码） 一、前言 在处理大规模文本数据时，特别是在构建知识库或进行大模型训练与推理时，文本切分（Text Splitting） 是一个…...
TCP/IP 网络编程 | 服务端 客户端的封装
设计模式 文章目录 设计模式一、socket.h 接口（interface）二、socket.cpp 实现（implementation）三、server.cpp 使用封装（main 函数）四、client.cpp 使用封装（main 函数）五、退出方法…...
qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001
qt 5.9.7 vs2013 qt add-in 2.3.2 起因是添加一个新的控件类，直接把源文件拖进VS的项目里，然后VS卡住十秒，然后编译就报一堆 error LNK2001 一看项目的Generated Files下的moc_和ui_文件丢失了一部分，导致编译的时候找不到了。因…...
spring boot使用HttpServletResponse实现sse后端流式输出消息
1.以前只是看过SSE的相关文章，没有具体实践，这次接入AI大模型使用到了流式输出，涉及到给前端流式返回，所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...
【多线程初阶】单例模式 指令重排序问题
文章目录 1.单例模式1)饿汉模式2)懒汉模式①.单线程版本②.多线程版本 2.分析单例模式里的线程安全问题1)饿汉模式2)懒汉模式懒汉模式是如何出现线程安全问题的 3.解决问题进一步优化加锁导致的执行效率优化预防内存可见性问题 4.解决指令重排序问题 1.单例模式 单例模式确保某…...