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

HTML中的块元素与行内元素

news 2026/2/8 16:58:59

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

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/31 6:09:22

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2026/2/7 10:59:04

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/6 9:48:02

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2026/2/4 15:42:45

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2026/1/31 7:39:20

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

编程新知 2025/11/7 10:02:17

实战三：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

编程新知 2026/2/5 5:03:25

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...

编程新知 2026/1/23 17:06:01

Yii2项目自动向GitLab上报Bug

Yii2 项目自动上报Bug 原理 yii2在程序报错时, 会执行指定action, 通过重写ErrorAction, 实现Bug自动提交至GitLab的issue 步骤 配置SiteController中的actions方法 public function actions(){return [error > [class > app\helpers\web\ErrorAction,],];}重写Error…...

编程新知 2025/12/17 3:27:17