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

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

程序员

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册

推荐阅读

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

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

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

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

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

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

css
新浪笔试题

1:有如下一段程序：packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]

蜡笔小新   2024-12-27 19:32:17

css
深入理解Tornado模板系统

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

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

css
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新   2024-12-27 18:20:43

css
Xcode 中多行代码缩进技巧

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

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

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

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

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

css
Linux 自动化安装脚本详解

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

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

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

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

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

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

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

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

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

本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]

蜡笔小新   2024-12-27 14:38:54

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

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

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

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

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

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

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

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

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

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

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

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

8023pxeb_256

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

Tags | 热门标签

dom

focus

vue

css3

json

chrome

firebug

cookies

bootstrap

js

build

css

正则

button

iframe

layout

overflow

微信开发

jq

requirejs

v8

svg

chart

webkit

vue.js

react

view

scheme

ajax

console

RankList | 热门文章

1html5中新特性之语义化标签的实例分析

2浅谈HTML5和HTML4之间的不同

3HTML5桌面通知提示功能的实现

4html5怎样操作indexedDB

5html5 shiv.js和respond.min.js详细介绍

6怎样用H5 Canvas实现3D动态Chart图表

7HTML5实现微信jssdk录音播放语音的实例

8html5实现分层屏幕适配

9input[type='date']自定义样式与日历校验功能

10怎样用canvas实现自定义头像功能

11html5大文件上传技术分享

12如何解决IOS中html5上传图片方向问题？

13关于HTML5中input标签（type属性）的详细介绍

14微信html5页面如何调用第三方位置导航

15微信中打开网页，下拉会显示网页由XXX提供，但是有些网页却没有，不同平台不同手机也不一样，这是什么原因？