当前位置: 开发笔记 > 前端 > 正文

html标记分为哪两种

作者：8023pxeb_256 | 来源：互联网 | 2022-09-25 12:44

一般来说，分为行内元素和块状元素，行内元素意思是，比如两个行内元素在同一行，他们不会分行。块状的话，如果两个块状元素不能再同一行，意思就是他们会换行

推荐教程：Html教程

　　一般来说，分为行内元素和块状元素，行内元素意思是，比如两个行内元素在同一行，他们不会分行，比如,等他们不支持宽度和高度的属性，所以行内元素的高度和宽度只是其内容的高度和宽度。块状的话，如果两个块状元素不能再同一行，意思就是他们会换行，比如

...等，但是块状元素支持width和height的属性，而行内元素不支持，当然你可以通过css来把行内改成块状或者把块状改成行内。

1.行内元素

　　行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体和标签，还有_{和^{这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。}}

　　行内元素特征：(1)设置宽高无效

　　　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

　　　　　　　　　(3)不会自动进行换行

效果图

2.块状元素

　　块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

　　块状元素特征：(1)能够识别宽高

　　　　　　　　　(2)margin和padding的上下左右均对其有效

　　　　　　　　　(3)可以自动换行

　　　　　　　　　(4)多个块状元素标签写在一起，默认排列方式为从上至下

效果图

以上就是html标记分为哪两种的详细内容，更多请关注其它相关文章！

html

css

程序员

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

html
程序员妻子吐槽：丈夫北漂8年终薪3万，存款情况令人意外

一位程序员的妻子在网上分享了她丈夫在北京工作八年的经历，月薪仅3万元，存款情况却出乎意料。本文探讨了高学历人才在大城市的职场现状及生活压力。 ... [详细]

蜡笔小新   2024-12-28 11:14:15

html
存储器层次结构、随机访问存储器与数据存取机制

理解存储器的层次结构有助于程序员优化程序性能，通过合理安排数据在不同层级的存储位置，提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器（SRAM）和动态随机访问存储器（DRAM）的工作原理及其应用场景，并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]

蜡笔小新   2024-12-27 12:06:47

html
QUIC协议：快速UDP互联网连接

QUIC（Quick UDP Internet Connections）是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP，并结合了TLS级别的安全性，提供了更高效、更可靠的互联网通信方式。 ... [详细]

蜡笔小新   2024-12-28 12:33:18

html
深入理解Tornado模板系统

本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块，支持嵌入Python代码片段，帮助开发者快速构建动态网页。 ... [详细]

蜡笔小新   2024-12-27 19:22:16

html
Xcode 中多行代码缩进技巧

本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进，包括右缩进和左缩进的具体操作方法。 ... [详细]

蜡笔小新   2024-12-27 17:52:34

html
Python爬虫实战：豆瓣电影Top250数据抓取

本文详细介绍了如何使用Python编写爬虫程序，从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制，再到多页数据抓取的全过程，并提供了完整的代码示例。 ... [详细]

蜡笔小新   2024-12-27 16:55:07

html
Linux 自动化安装脚本详解

本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建，还处理了系统服务的配置和启动，确保在多种 Linux 发行版上都能顺利运行。 ... [详细]

蜡笔小新   2024-12-27 16:33:32

html
分页插件3指定到某一页

前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]

蜡笔小新   2024-12-27 15:19:01

html
深入理解CSS盒模型与box-sizing属性

本文详细介绍了W3C标准盒模型和IE传统盒模型的区别，探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析，帮助读者更好地理解和应用这一关键概念。 ... [详细]

蜡笔小新   2024-12-27 15:01:09

html
如何在WPS Office for Mac中调整Word文档的文字排列方向

本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤，用户可以轻松更改文本的水平或垂直排列方式，以满足不同的排版需求。 ... [详细]

蜡笔小新   2024-12-27 12:34:14

html
几何画板展示电场线与等势面的交互关系

几何画板是一款功能强大的物理教学软件，具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程，还能通过定量分析揭示物理现象背后的规律，尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ... [详细]

蜡笔小新   2024-12-27 10:46:07

html
使用Windows批处理脚本监控并重启Java应用程序

本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序，确保其持续稳定运行。脚本每30分钟检查一次，并在需要时重启Java程序。同时，它会将任务结果发送到Redis。 ... [详细]

蜡笔小新   2024-12-27 10:44:39

html
MySQL中枚举类型的所有可能值获取方法

本文介绍了一种在MySQL数据库中查询枚举（ENUM）类型字段所有可能取值的方法，帮助开发者更好地理解和利用这一数据类型。 ... [详细]

蜡笔小新   2024-12-27 10:36:44

bootstrap
移动 UI 设计基础：打造简洁高效的用户界面

本章将深入探讨移动 UI 设计的核心原则，帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧，您将能够创建出既美观又实用的移动应用。 ... [详细]

蜡笔小新   2024-12-27 08:43:40

html
实现密码输入框的掩码设置

本文介绍如何在应用程序中使用文本输入框创建密码输入框，并通过设置掩码来隐藏用户输入的内容。我们将详细解释代码实现，并提供专业的补充说明。 ... [详细]

蜡笔小新   2024-12-27 02:22:09

8023pxeb_256

这个家伙很懒，什么也没留下！

Tags | 热门标签

bootstrap

textview

console

overflow

v8

hybrid

listview

正则

js

ajax

html5

base64

chart.js

node.js

dialog

jq

javascript

checkbox

chrome

layout

hover

requirejs

yarn

firebug

firefox

webkit

vue

focus

html

scroll

RankList | 热门文章

1拖拽元素位置交换：使用 Sortable.js 实现

2Java 序列化接口详解

3Akka BackoffSupervisor的深入解析与实践

4深入理解CSS盒模型与box-sizing属性

5iOS设备进入安全模式的操作指南

6开源软件：新时代的商业机遇与挑战

7深入理解C++中的KMP算法：高效字符串匹配的利器

8CMake跨平台开发实践

9Java内存管理与优化：自动与手动释放策略

10在Linux系统中配置并启动ActiveMQ

11LeetCode 991：故障计算器的最优解法

12中国五大优质苹果产区，你最爱哪一个？

13C++: 实现基于类的四面体体积计算

14使用C#开发SQL Server存储过程的指南

15探索适用于Spring Boot的Web版SQL管理工具