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

HTML中的块元素与行内元素

news 文章来源：https://blog.csdn.net/2401_83201682/article/details/146161226 2025/4/21 21:49:41

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

混合存储HDD+SSD机型磁盘阵列，配上SSD缓存功能，性能提升300%

企业日常运行各种文件无处不在&#xff0c;文档、报告、视频、应用数据......面对成千上万的文件&#xff0c;团队之间需要做到无障碍协作&#xff0c;员工能够即时快速访问、共享处理文件。随着业务增长&#xff0c;数字化办公不仅需要大容量&#xff0c;快速高效的文件访问越…...

编程日记 2025/3/11 5:35:30

将本地已有的项目上传至仓库

上传的仓库为Gitee 进入项目目录&#xff1a; 使用命令行工具进入你想要上传的项目的根目录。 初始化Git仓库&#xff1a; 如果项目目录尚未初始化为Git仓库&#xff0c;执行以下命令&#xff1a; git init 执行完成后&#xff0c;项目根目录下会自动生成一个隐藏的.git文件夹…...

编程日记 2025/3/11 5:33:28

中级网络工程师面试题参考示例（3）

一、企业园区网络 问题1&#xff1a;如何实现园区网络的自动化部署和管理&#xff1f;请结合实际场景说明技术选型。 答案要点&#xff1a; 技术选型&#xff1a; SDN&#xff08;软件定义网络&#xff09;&#xff1a;通过控制器&#xff08;如Cisco DNA Center&#xff09;…...

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

祝福语【算法赛】

题目来源&#xff1a;第 27 场 蓝桥入门赛【算法题】 可以参考一下&#xff0c;本人也是比较菜 不喜勿喷&#xff0c;求求求 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);String S sc.nextLi…...

编程日记 2025/3/11 5:31:25

前端 | CORS 跨域问题解决

问题&#xff1a;Access to fetch at http://localhost:3000/save from origin http://localhost:5174 has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present on the request…...

编程日记 2025/3/11 5:26:19

MySQL知识点（第一部分）

MySQL 基础&#xff1a; 1、SQL语句的分类&#xff1a; DDL&#xff1a;用于控制数据库的操作DML&#xff1a;用于控制表结构的字段&#xff0c;增、删、修DQL&#xff1a;用于查询语句DCL&#xff1a;用于管理数据库&#xff0c;用户&#xff0c;数据库的访问 权限。 2、M…...

编程日记 2025/3/11 5:25:17

ChatGPT使用经验分享

ChatGPT 3.5模型 与 4模型的区别 ChatGPT 3.5 示例 问&#xff1a;树上有9只鸟&#xff0c;打死了一只还剩几只&#xff1f; 答&#xff1a;如果打死了一只鸟&#xff0c;那么树上还剩下8只鸟。 ChatGPT 4 示例 问&#xff1a;树上有9只鸟&#xff0c;打死了一只还剩几只&…...

编程日记 2025/3/11 5:20:13

Webshell原理与利用

本文内容仅用于技术研究、网络安全防御及合法授权的渗透测试&#xff0c;严禁用于任何非法入侵、破坏或未经授权的网络活动。 1. WebShell的定义与原理 定义&#xff1a;WebShell是一种基于Web脚本语言&#xff08;如PHP、ASP、JSP&#xff09;编写的恶意后门程序&#xff0c;…...

编程日记 2025/3/11 5:19:12

Java直通车系列15【Spring MVC】（ModelAndView 使用）

目录 1. ModelAndView 概述 2. ModelAndView 的主要属性和方法 主要属性 主要方法 3. 场景示例 示例 1&#xff1a;简单的 ModelAndView 使用 示例 2&#xff1a;使用 ModelAndView 处理列表数据 示例 3&#xff1a;使用 ModelAndView 处理异常情况 1. ModelAndView 概…...

编程日记 2025/3/11 5:12:04

大模型系列课程学习-基于Vllm/Ollama/Ktransformers完成Deepseek推理服务部署

1.机器配置及实验说明 基于前期搭建的双卡机器装机教程&#xff0c;配置如下&#xff1a; 硬件名称参数备注CPUE5-2680V42 *2&#xff08;线程28个&#xff09;无GPU2080TI-22G 双卡魔改卡系统WSL Unbuntu 22.04.5 LTS虚拟机 本轮实验目的&#xff1a;基于VLLM/Ollama/ktran…...

编程日记 2025/3/11 5:10:01