行内元素有哪些?块级元素有哪些?行内块元素有那些?

在HTML中,元素的类型可以根据其在页面布局中的行为分为三种:行内元素、块级元素和行内块元素。
### 行内元素(Inline Elements)
行内元素通常只能包含文本或者其他行内元素,它们不会单独换行,并且其宽度、高度、内边距和外边距都是不可设置的(或者说是隐式的)。
- `a`:链接
- `abbr`:缩写
- `b`:粗体文本
- `bdi`:文本方向独立
- `bdo`:文本方向覆盖
- `br`:换行
- `cite`:引用
- `code`:代码片段
- `data`:数据
- `dfn`:定义术语
- `em`:强调
- `i`:斜体文本
- `img`:图像
- `input`:输入控件
- `kbd`:键盘文本
- `label`:标签
- `mark`:标记文本
- `q`:短引用
- `ruby`: ruby 注释(东亚语言的注音或字符)
- `s`:删除线
- `samp`:样本代码
- `script`:脚本
- `select`:下拉列表
- `small`:小号文本
- `span`:常用元素,用于文本或行内内容的组合
- `strong`:重要文本
- `sub`:下标
- `sup`:上标
- `textarea`:多行文本输入控件
- `time`:日期或时间
- `tt`:打字机文本
- `var`:变量
- `wbr`:单词边界
### 块级元素(Block-level Elements)
块级元素通常会占据一整行,并且可以设置宽度、高度、内边距和外边距。
- `address`:地址
- `article`:文章
- `aside`:侧边栏内容
- `blockquote`:块引用
- `canvas`:画布
- `caption`:表格标题
- `col`:表格列定义
- `colgroup`:表格列组
- `dd`:定义列表中的定义
- `div`:常用元素,用于将内容组织成块
- `dl`:定义列表
- `dt`:定义列表中的术语
- `fieldset`:表单布局
- `figcaption`:图表标题
- `figure`:图表
- `footer`:页脚
- `form`:表单
- `h1`到`h6`:标题
- `header`:页眉
- `hr`:水平线
- `li`:列表项
- `main`:主要内容
- `nav`:导航链接
- `noscript`:不支持脚本时的内容
- `ol`:有序列表
- `p`:段落
- `pre`:预格式化文本
- `section`:节
- `table`:表格
- `tfoot`:表格脚注
- `th`:表格表头
- `thead`:表格表头
- `ul`:无序列表
### 行内块元素(Inline-block Elements)
行内块元素同时具有行内元素和块级元素的特点。它们可以设置宽度和高度,但是不会独占一整行。
- `img`:图像
- `input`:输入控件
- `button`:按钮
- `select`:下拉列表
- `textarea`:多行文本输入控件
这些元素通常用于需要在一行内显示多个元素,但每个元素又需要有自己的宽度和高度的情况。通过将元素的`display`属性设置为`inline-block`,可以实现这种效果。
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/10920.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AcWing-168生日蛋糕-搜索/剪枝

题目 思路 表面积和体积公式&#xff1a;以下分析参考自&#xff1a;AcWing 168. 生日蛋糕【图解推导】 - AcWing&#xff1b;AcWing 168. 关于四个剪枝的最清楚解释和再次优化 - AcWing 代码 #include<iostream> #include<cmath> using namespace std;const in…

【爬虫基础1.1课】——requests模块上

目录索引 requests模块的作用&#xff1a;实例引入&#xff1a; 特殊情况&#xff1a;锦囊1&#xff1a;锦囊2: 这一个栏目&#xff0c;我会给出我从零开始学习爬虫的全过程。感兴趣的小伙伴可以关注一波&#xff0c;用于复习和新学都是不错的选择。 那么废话不多说&#xff0c…

C语言学习(九)多文件编程 存储类型 结构体

目录 一、多文件编程&#xff08;一&#xff09;不写头文件的方方式进行多文件编程 &#xff08;二&#xff09;通过头文件方式进行多文件编程&#xff08;1&#xff09;方法&#xff08;2&#xff09;头文件守卫 &#xff08;三&#xff09; 使用多文件编程实现 - * / 功能 二…

HC-06 蓝牙串口从机 AT 命令详解

HC-06 蓝牙串口从机 AT 命令详解 要使用 AT 命令&#xff0c;首先要知道 HC-06 的波特率&#xff0c;然后要进入 AT 命令模式。 使用串口一定要知道三要素&#xff0c;一是波特率&#xff0c;二是串口号&#xff0c;三是数据格式, HC-06只支持一种数据格式: 数据位8 位&#…

ubuntu arm64 阿里云源

阿里云源 https://developer.aliyun.com/mirror/ubuntu-ports?spma2c6h.13651104.d-1008.3.71414763blCksm deb https://mirrors.aliyun.com/ubuntu-ports/ focal main restricted universe multiverse deb-src https://mirrors.aliyun.com/ubuntu-ports/ focal main restric…

Qt | 时间系统(QDate、QTime、QDateTime)

​01、简介 说明:文中出现的 qint64,qint32之类的类型,都是由 qt 使用 typedef重新命名后的相应类型,主要是为了保证该类型在所有平台上都具有相同的长度,比如 qint32 就是 signed int类型,但Qt 可以保证在所有平台上 qint32 都是 32 位的长度。 1、QDate、QTime、QDat…

HTTP 连接详解

概述 世界上几乎所有的 HTTP 通信都是由 TCP/IP 承载的&#xff0c;客户端可以打开一条TCP/IP连接&#xff0c;连接到任何地方的服务器。一旦连接建立&#xff0c;客户端和服务器之间交换的报文就永远不会丢失、受损或失序 TCP&#xff08;Transmission Control Protocol&…

97. 交错字符串-----回溯、动态规划

题目链接 97. 交错字符串 - 力扣&#xff08;LeetCode&#xff09; 解答 递归回溯 题目所述为两个字符串交替组成第三个字符串&#xff0c;之前好像做过相似的题目&#xff0c;直接联想到可以考虑使用递归回溯的做法&#xff0c;让字符串s1和字符串s2分别作为起始字符串&…

Mybatis-Plus大批量插入数据到MySQL

MyBatis-Plus的saveBatch方法 GetMapping("/save1") public void save1() {// 数据准备List<MallOrder> orderList getMallOrderList();// mybatis-pluslong start System.currentTimeMillis();mallOrderService.saveBatch(orderList);System.out.println(&…

计算机服务器中了360后缀勒索病毒怎么解密,360后缀勒索病毒恢复

计算机网络技术的不断发展与应用&#xff0c;为企业的生产运营提供了极大便利&#xff0c;大大提高了企业的办公效率&#xff0c;为企业的生产运营注入了新的动力&#xff0c;但网络是一把双刃剑&#xff0c;在为企业提供便利的同时&#xff0c;也为企业的数据安全带来严重威胁…

google test 使用指南

目录 测试项目 calculator.h calculator.cpp test01.cpp 创建新项目 选择Google Test 选择要测试的项目 pch.cpp 加入依赖 设为启动项目 ​编辑 运行 ​编辑 关键点 测试项目 calculator.h #ifndef __CALCULATOR_H__ #define __CALCULATOR_H__#include <i…

Linux操作系统中管理磁盘的另外一种操作方式。即LVM——逻辑卷管理操作

在Linux操作系统中管理磁盘的一种方法名称——LVM&#xff0c;这种管理磁盘的优势。 1.使用LVM去管理磁盘可以在不影响原来数据的前提下去扩容磁盘空间或者是缩减磁盘空间。 在LVM中除了上层逻辑券可以扩容&#xff0c;下层的券组也可以扩容。 2.使用LVM管理的磁盘支持快照功…

C++和Python通信引文道路社评电商大规模行为图结构数据模型

&#x1f3af;要点 &#x1f3af;图论数学逻辑和计算&#xff1a;&#x1f58a;定向网络节点和边 | &#x1f58a;节点的入度 | &#x1f58a;出度和度 | &#x1f58a;源节点 | &#x1f58a;汇节点 | &#x1f58a; 孤立节点 | &#x1f58a;入度分布和出度分布 | &#x1f…

MySQL中的子查询

子查询,在一个查询语句中又出现了查询语句 子查询可以出现在from和where后面 from 表子查询(结果一般为多行多列)把查询结果继续当一张表对待 where 标量子查询(结果集只有一行一列)查询身高最高的学生,查询到一个最高身高 列子查询(结果集只有一行多列) 对上表进行如下操作 …

韩顺平0基础学Java——第10天

p202-233 类与对象&#xff08;第七章&#xff09; 成员方法 person类中的speak方法&#xff1a; 1.public表示方法是公开的 2.void表示方法没有返回值 3.speak&#xff08;&#xff09;中&#xff0c;speak表示方法名&#xff0c;括号是形参列表。 4.大括号为方法体&am…

WPF之多种视图切换

1&#xff0c;View切换&#xff0c;效果呈现 视图1 视图2 视图3 2&#xff0c;在Xaml中添加Listview控件&#xff0c;Combobox控件。 <Grid ><Grid.RowDefinitions><RowDefinition Height"143*"/><RowDefinition Height"30"/>&l…

【Arduino】delay()、millis() 时间函数

目录 1、延时函数 2、运行时间函数 3、不使用delay() 函数实现定时、等待 1、延时函数 通过延迟函数&#xff0c;我们可以实现LED灯以1S为间隔闪送。 void setup() {pinMode(LED_BUILTIN,OUTPUT); //定义引脚&#xff0c;告诉ESP8266那个引脚做什么用&#xff0c;模式是什…

Leetcode经典题目之用队列实现栈

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 目录 1、题目展示2、题目分析3、完整代码演示4、结语 1、题目展示 前面我们了解过如何实现队列…

unetr_plus_plus(UNETR++、nnU-Net)系列数据处理理解汇总

unetr_plus_plus&#xff08;UNETR、nnU-Net&#xff09;系列数据处理理解汇总&#xff0c;这是一个 3D 图像分割的任务系列集。 为什么说他们是一个系列集合呢&#xff1f;主要是因为&#xff1a; 论文的训练和评价数据集是一样的&#xff0c;都是来自于10全挑战赛&#xff…

第五百回 Get路由管理

文章目录 1. 概念介绍2. 使用方法2.1 普通路由2.2 命名路由 3. 示例代码4. 内容总结 我们在上一章回中介绍了"使用get显示Dialog"相关的内容&#xff0c;本章回中将介绍使用get进行路由管理.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章…