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

HTML中的块元素与行内元素

news 2025/12/19 14:44:01

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.块级标签 块级元素会独占一行&#xff0c;通常用于构建页面的结构。常见的块级元素包括&#xff1a; <div>&#xff1a;通用的块级容器。没有任何语意。可以创建网页的不同部分&#xff0c;导航栏侧边栏等。 <body><div class"nav"><a hre…...

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

postgreSQL window function高级用法

正常使用&#xff1a;相当于对每个row做一次子查询 SELECT depname, empno, salary, avg(salary) OVER (PARTITION BY depname) FROM empsalary;order by 区别window frame and partition 没有order by&#xff0c; window function是对整个partition起作用&#xff0c; part…...

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

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

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

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

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

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

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

配置安全网站

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

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

ds回答 什么是数据召回

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

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

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

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

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

mac本地部署Qwq-32b记录

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

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

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

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

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

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

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

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

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

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

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

WSL安装及问题

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

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

WordPress开发到底是开发什么？

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

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

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

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

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

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

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

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

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

一、前言 复刻单片机的项目的时候&#xff0c;有些模块是需要焊接的。很多同学对焊接没有概念。 这里说一下做项目的基本工具。 比如&#xff1a;像这种模块&#xff0c;都需要自己焊接了排针才可以链接的。 二、基本模块 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中的注册、发现、网关、服务调用都已经完成了&#xff0c;现在就剩下最后一部分&#xff0c;就是关于网络控制。SpringCloud Alibaba这一套中间件做的非常好&#xff0c;把平时常用的功能都集成进来了&#xff0c;而且非常简单高效。我们下一步就完成最后一块拼图Se…...

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

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

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

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

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

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

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

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/12/9 0:41:46

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/11/5 20:18:24

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/10/28 23:14:00

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/12/17 22:08:49

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/10/14 13:57:17

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2025/12/14 0:22:03

【深度学习新浪潮】什么是credit assignment problem？

Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...

编程新知 2025/12/13 4:03:33

负载均衡器》》LVS、Nginx、HAproxy 区别

虚拟主机 先4&#xff0c;后7...

编程新知 2025/12/10 6:14:22