当前位置：首页 > news >正文

HTML中的块元素与行内元素

news 2025/6/24 1:00:33

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…...

编程日记 2025/3/11 6:22:28

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…...

编程日记 2025/3/11 6:21:27

当中国“智算心跳”与全球共振：九章云极DataCanvas首秀MWC 2025

3月3日，西班牙巴塞罗那，全球通信与科技领域的盛会“2025世界移动通信大会（MWC 2025）”正式拉开帷幕。中国人工智能基础设施领军企业九章云极DataCanvas公司以全球化战略视野与硬核技术实力，全方位、多维度地展示了在智…...

编程日记 2025/3/11 6:20:26

机器视觉检测显卡与工控机选型指南

在机器视觉检测项目中，深度学习显卡和工控机的选择直接影响算法性能、系统稳定性和长期维护成本。以下是关键注意事项及建议：一、深度学习显卡选择核心需求分析任务类型：检测任务复杂度（如YOLO、ResNet等模型的参数量）决定显存需求。高分辨率图像（如4K以上）需大显存…...

编程日记 2025/3/11 6:19:24

配置安全网站

配置网站确定是Debian系统更新索引：apt update 安装包：apt upgrade -y 查看nginx状态：systemctl status nginx 安装：nginx：apt install nginx 启动：systemctl start nginx 在/var/www/里面创建一个…...

编程日记 2025/3/11 6:17:21

ds回答什么是数据召回

数据召回（Data Recall）在不同领域有不同的具体含义，但核心都指向“从大量信息中筛选出相关数据”的过程。以下是其在不同场景下的定义和关键要点： 一、技术领域的定义（信息检索与推荐系统） 1. 基本概念数…...

编程日记 2025/3/11 6:16:20

复现无人机的项目，项目名称为Evidential Detection and Tracking Collaboration

项目名称为Evidential Detection and Tracking Collaboration，主要用于强大的反无人机系统，涉及新问题、基准和算法研究。下面介绍项目的复现步骤： 安装环境：使用Anaconda创建并激活名为edtc的虚拟环境，Python版本为3…...

编程日记 2025/3/11 6:15:16

mac本地部署Qwq-32b记录

导语昨天看到阿里开源了Qwq-32b，号称性能可以媲美Deepseek-R1。今天晚上有空就在Mac上折腾了一下，使用ollma进行了部署，效果感觉还不错，特此记录。环境硬件型号：Macbook M1 Pro 14寸内存：512G 环境…...

编程日记 2025/3/11 6:14:15

实验三 Python 数据可视化 Python 聚类-K-means(CQUPT)

一、实验目的 Python 数据可视化： 1、学习使用 jieba、wordcloud 等类库生成词云图。 2、学习使用 Matplotlib 库进行数据可视化。 Python 聚类-K-means： 1、理解聚类非监督学习方法的基本原理。 2、掌握 Python、numpy、pandas、sklearn 实现聚类…...

编程日记 2025/3/11 6:13:14

通义万相2.1：开启视频生成新时代

摘要：文章开篇便点明了通义万相2.1在视频生成领域的重大突破，强调其作为阿里云通义系列AI模型的重要成员，不仅是简单的模型升级，更是视频生成技术迈向更智能、高效、精准的重要里程碑。其核心技术包括自研的高效VAE和DiT架构&…...

编程日记 2025/3/11 6:11:10

爬虫案例十一js逆向数位观察网

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、网站分析二、代码总结前言提示：这里可以添加本文要记录的大概内容： 爬虫案例十一js逆向数位观察网提示：以下是本篇…...

编程日记 2025/3/11 6:08:07

WSL安装及问题

1 概述 Windows Subsystem for Linux（简称WSL）是一个在Windows 10\11上能够运行原生Linux二进制可执行文件（ELF格式）的兼容层。它是由微软与Canonical公司合作开发，开发人员可以在 Windows 计算机上同时访问 Windows 和…...

编程日记 2025/3/11 6:06:04

WordPress开发到底是开发什么？

WordPress 开发主要涉及基于 WordPress 平台构建、定制和扩展网站功能的过程。它不仅仅是简单的网站搭建，而是通过代码和技术实现个性化需求。以下是 WordPress 开发的核心内容： 1. 主题开发（Theme Development） 功能&#xff…...

编程日记 2025/3/11 6:03:01

元脑服务器的创新应用：浪潮信息引领AI计算新时代

浪潮信息的元脑 R1 服务器现已全面支持开源框架 SGLang，能够在单机环境下实现 DeepSeek 671B 模型的高并发性能，用户并发访问量超过1000。通过对 SGLang 最新版本的深度适配，元脑 R1 推理服务器在运行高性能模型时，展现出卓越的处…...

编程日记 2025/3/11 5:58:55

SQL Server查询计划操作符（7.3）——查询计划相关操作符（9）

7.3. 查询计划相关操作符 78）Repartition Streams：该操作符消费多个输入流并产生多个输出流。期间，记录内容与格式保持不变。如果查询优化器使用一个位图过滤（bitmap filter），则输出流中的数据行数将会减少。一个输入流的每行记录被放入一个输出流。如果该操作符保留顺序…...

编程日记 2025/3/11 5:56:52

单片机项目复刻需要的准备工作

一、前言复刻单片机的项目的时候，有些模块是需要焊接的。很多同学对焊接没有概念。这里说一下做项目的基本工具。比如：像这种模块，都需要自己焊接了排针才可以链接的。二、基本模块 2.1 单排排针一些模块买回来是没有焊接的&#x…...

编程日记 2025/3/11 5:55:52

【哇! C++】类和对象（五） - 赋值运算符重载

目录编辑一、运算符重载 1.1 运算符重载概念 1.2 全局运算符重载 1.3 运算符重载为成员函数二、赋值运算符重载的特性 2.1 赋值运算符重载需要注意的点 2.2 赋值运算符重载格式 2.2.1 传值返回 2.2.2 传引用返回 2.2.3 检查自己给自己赋值三、赋值运算符重载的…...

编程日记 2025/3/11 5:46:42

SpringCloud系列教程（十三）：Sentinel流量控制

SpringCloud中的注册、发现、网关、服务调用都已经完成了，现在就剩下最后一部分，就是关于网络控制。SpringCloud Alibaba这一套中间件做的非常好，把平时常用的功能都集成进来了，而且非常简单高效。我们下一步就完成最后一块拼图Se…...

编程日记 2025/3/11 5:44:40

vue+element|el-tree树设置懒加载和设置默认勾选

文章目录导文代码实现1. 基本结构2. 懒加载实现3. 默认勾选功能4. 动态加载初始节点5. 节点勾选事件监听完整代码导文在实际开发中，很多数据过于庞大，需要分批请求，使用到懒加载。但是在tree的方法中，使用懒加载后无法直接使用…...

编程日记 2025/3/11 5:39:34

零售交易流程相关知识（top-down拆解）

引入关于POS机交易时的后台数据交互模块之间数据交换，都可以能被窃取或篡改。由此引入加密、解密机制和签名、验签机制经典的加密、解密机制： 对称加密：DES\ TDES\ AES\ RC4 非对称加密：RSA\ DSA\ ECC 经典的签名、验签…...

编程日记 2025/3/11 5:36:32

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...

编程新知 2025/6/21 13:23:32

QMC5883L的驱动

简介本篇文章的代码已经上传到了github上面，开源代码作为一个电子罗盘模块，我们可以通过I2C从中获取偏航角yaw，相对于六轴陀螺仪的yaw，qmc5883l几乎不会零飘并且成本较低。参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/6/21 13:57:28

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端目录技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/6/22 2:52:46

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/6/22 9:09:10