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 经典的签名、验签…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
