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 经典的签名、验签…...
手把手调参：BLDC有感启动的PWM占空比怎么给？从零到平滑启动的实战避坑指南
手把手调参：BLDC有感启动的PWM占空比实战指南 电机启动瞬间的电流冲击声像极了新手司机的"熄火"与"窜车"——要么纹丝不动，要么突然暴冲。这种尴尬在BLDC电机调试中尤为常见，特别是当负载特性未知时，如何设定…...
谷歌威胁情报报告：威胁行为者已将AI直接融入实际网络攻击流程
谷歌威胁情报小组（GTIG）最新报告警示，威胁行为者不再局限于对人工智能的简单试验，而是开始将生成式AI直接整合到真实攻击工作流程中。报告特别聚焦对谷歌自家Gemini模型的滥用与针对性攻击，表明生成式AI系统正日益成为…...
GLM-OCR与Transformer架构解析：从原理到高效部署
GLM-OCR与Transformer架构解析：从原理到高效部署 你是不是也好奇，那些能“看懂”图片里文字的AI，比如GLM-OCR，到底是怎么工作的？它凭什么能在一张复杂的海报里，准确无误地把文字抠出来，还能理解…...
RevokeMsgPatcher：微信QQ防撤回终极指南，轻松保留重要消息
RevokeMsgPatcher：微信QQ防撤回终极指南，轻松保留重要消息 【免费下载链接】RevokeMsgPatcher :trollface: A hex editor for WeChat/QQ/TIM - PC版微信/QQ/TIM防撤回补丁（我已经看到了，撤回也没用了） 项目地址: htt…...
7个实用技巧！Java Faker数据质量保证：如何验证生成数据的准确性和多样性
7个实用技巧！Java Faker数据质量保证：如何验证生成数据的准确性和多样性 【免费下载链接】java-faker Brings the popular ruby faker gem to Java 项目地址: https://gitcode.com/gh_mirrors/ja/java-faker Java Faker是一个强大的Java库&#x…...
如何用OpCore-Simplify轻松搞定黑苹果OpenCore配置？
如何用OpCore-Simplify轻松搞定黑苹果OpenCore配置？ 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是否曾想过自己动手装一个macOS系统…...
OpenClaw 的模型服务是否支持基于策略的流量控制？
关于OpenClaw模型服务是否支持基于策略的流量控制，这个问题其实触及了现代AI服务部署中一个相当核心的环节。直接说结论的话，答案是肯定的，但更值得探讨的是它具体如何实现，以及这种支持在实际场景中意味着什么。 在技术架构层面&…...
深入解析 Promise 核心原理，从零手写实现到实战应用
1. Promise 基础概念与使用场景 1.1 什么是 Promise？ 想象你点了一份外卖，商家给你一个取餐号而不是立即给你食物。这个取餐号就是 Promise，它代表一个未来才会完成的操作（外卖送达）。在 JavaScript 中，Pro…...
动态对抗Zygisk-IL2CppDumper：Unity游戏安全新策略
1. 认识Zygisk-IL2CppDumper的攻击原理 如果你开发过Unity游戏，一定对IL2CPP不陌生。这是Unity官方推荐的脚本后端，它把C#代码转换成C代码再编译为本地机器码，相比Mono模式确实安全不少。但最近一年，一个叫Zygisk-IL2CppDumper的工…...
终极Bash Infinity代码审查指南：确保Bash框架代码质量的完整检查清单
终极Bash Infinity代码审查指南：确保Bash框架代码质量的完整检查清单 【免费下载链接】bash-oo-framework Bash Infinity is a modern standard library / framework / boilerplate for Bash 项目地址: https://gitcode.com/gh_mirrors/ba/bash-oo-framework …...