开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

你不得不了解的HTML知识

这次要细说的只是块级元素和行内元素的内容，如有不对，请轻喷。块级元素和行内元素默认情况下块级元素会始终占居一行，而行内元素并不会。除了 table 元素的 display 属性比较特殊以外，基本上所有的 HTML 元素的 display 的属性值要么是 block，要么是 inline。无论你想了解哪个 HTML 元素，第一个要问的问题就是：它是块级元素还是行内元素，然后在编写标记的时候预想到这个元素在初始状态下是如何定位的，这样才能进一步想好将来怎么用 CSS 重新定位它，因为块级元素和行内元素在定位

06

【CSS】标签显示模式 ③ ( 标签显示模式转换 | 行内元素转换为块级元素 | 块级元素转换为行内元素 | 块级元素、行内元素转换为行内块元素 )

在 CSS 样式中设置属性值 display: block; , 可以将行内元素转换为块级元素 ;

01

您找到你想要的搜索结果了吗？

是的

没有找到

【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )

为 span 标签设置的宽高都是无效的 , 设置的 200 x 200 像素的宽高 , 显然没有成功 , 行内元素的宽高只取决于元素本身的宽高 ;

01

行内元素空白“消消乐”

相信大家应该都遇到过下面这个问题：“HTML 源码中行内元素之间的空白显示在了屏幕上”。可能大家都有自己的小技巧来消除这些意料之外的空白。但是方法有很多，有时候不能满足于一种方法，不同的方法适合于不同的场景。就像我之前一直用的方法，今天总结了之后才发现还有更好的方法。废话不多说，接下来我给大家总结一下消除行内元素 HTML 源码空白的小技巧。

01

display 属性

说明: 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

03

web前端开发初学者十问集锦（2）

行内元素（如a标签），在文档流中的时候因为是行内元素所以无法设置宽高；而当设置了绝对定位或者浮动，会生成块级框（即变成块级元素），所以就可以设置宽高了。

01

CSS笔记(4)

作用: 网页的标签非常多,在不同的地方会使用不同类型的标签,了解他们的特点可以更好的布局我们的网页.

01

前端学习之HTML【一】

块级元素默认占一行，一行内添加一个块元素后一般无法添加其他的元素，其宽度自动填满其父元素宽度

01

2.文本标签-HTML基础

这六个标题标签在页面中的重要性是有区别的，其中 h1 标签的重要性最高，h6 标签的重要性最低。

03

【前端就业课第二阶段】CSS 零基础到实战（02）列表

在学习CSS时，我们需要搞清楚HTML 标签的一些分类，HTML 一般可分为块元素、行内元素以及行内块元素，不同的种类在呈现上有着不同的表现形式。

01

HTML标签嵌套规则

HTML5学堂：HTML标签存在一定的嵌套规则，如果我们不遵循这个嵌套规则进行代码书写，也能够实现出基本的功能（这大概也是HTML+CSS的特殊之处吧），但是直接影响着我们的代码质量。很俗的来说，也跟工资挂钩啦~~~另外，温馨提示各位，记忆知识应当采用合适的方法，不要一句一句背诵。块就如同盒子，行就如同一段文字。之后就是块、行的嵌套关系，对于列表项、form、table对子层内容有一定的要求。这样来记忆要好很多~ 基本嵌套规则 1、body可以直接包含块状元素、ins、del、script。不可以直接包含行

04

HTML 面试要点：行内元素和块级元素

一个行内元素 (opens new window)只占据它对应标签的边框所包含的空间。

03

block、inline和inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

02

html基础语法总结

HTML(Hyper Text Mark-up Language超文本标记语言)：不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，Web 浏览器读取HTML 文档，并以网页的形式显示出来，浏览器不会显示 HTML 标签，而是通过标签来解释网页的内容。

01

行内元素和块级元素

HTML可以将元素种类分为行内元素、块级元素和行内块级元素三种，在使用过程中可以通过CSS的display属性相互转换。

02

【网页前端】CSS进阶之元素的显示模式

为了不同场景应用不同显示模式，更好布局页面，我们需要系统学习元素的显示模式。

03

前端面试题-行内元素和块级元素

（4）设置 padding 只有左右有效，上下无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

03

html编写规范

今天我为大家介绍一下html的基本知识。什么是html html指的是超文本标记语言(Hyper Text Markup Language)，它包含一系列的标签，我们把这些标签叫做HTML标签，它是HTML语言中最基本的单位、最重要的组成部分。html是用来描述网页的一种语言。上面是一个基本的html代码文件，下面我们来看看其具体含义。 html属性 DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档

CSS入门10-替换元素和非替换元素，块级元素和行内元素

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。）

00

html介绍

HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。

02

CSS专题，熟练布局技巧，需知文档流

3）标签与标签之间有一个以上的空格（n>1），网页上两个内容之间也只有一个空格。

03

【云+社区年度征文】html基础语法总结

HTML(Hyper Text Mark-up Language超文本标记语言)：不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，Web 浏览器读取HTML 文档，并以网页的形式显示出来，浏览器不会显示 HTML 标签，而是通过标签来解释网页的内容。

00

html5 块元素、行内元素学习笔记

1.html5 HyperText Markup Language 5.0 超文本标记语言5.0 2.页面基本框架 <!DOCTYPE html>

01

【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )

向 HTML 的 <body> 标签中 , 添加元素 , 并不是紧贴左侧和顶部 , 而是有一个默认的间距 , 如下图所示 :

01

html块标签、含样式的标签

标签块元素，表示一块内容，没有具体的语义。 2、标签行内元素，表示一行中的一小段内容，没有具体的语义。

02

4. html块标签、含样式的标签

“仅供学习，转载请注明出处” html块标签 1、

标签块元素，表示一块内容，没有具体的语义。 2、标签行内元素，表示一行中的一小段内容，没有具体的语义。 “编写一个示例如下：” <!DOCTYPE html> <html> <head> <title></title> </head> <body> 我是肥白

02

行内元素与块元素间的转换及行内块元素

在HTML中行内元素和块元素间的区分，本质上是其标签默认存在了一个 display 属性，当 display 属性的值为 block 那么所对应的标签即为块元素，反之当值为 inline 则标签为行内元素。

04

HTML布局的基本要点

image.png 如果要掌握、运用好Position、Float属性必须要对HTML的两个基本点有清晰的了解。盒子模型（box model） HTML的普通流（normal flow）盒子模型在HTML中元素的盒子模型分为两种：块状元素、行内元素，请注意这里的块状元素（Block）和行内元素（Inline）与Display属性中的inline、block两个属性值并不等同。盒子模型中的Inline、Block类似于是Display属性的父类，例如：Display属性中的list-item属性值是

07

行内元素、块级元素和行内块级元素的区别和联系

HTML，也叫“超文本标记语言”，其元素无非就是行内元素、块级元素和行内块级元素。

03

「css基础」如何理解Display的属性：None，Block，Inline，Inline-Block

如图所示，使用display: none，我们可以看出蓝色方块从中删除，中间的空位也被绿色的方块补位。

02

HTML标签嵌套规则

div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

01

标签显示模式（display）

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

02

一些常用的标签丨直接代码「建议收藏」

<!doctype html> <html> <head> <meta charset=”utf-8″ /> <meta name=”description” content=”网页描述” /> <title>小海绵就是我呀丨by：xiaohaimian</title> </head> <body>

行内元素：行内元素会在一条直线上排列，都是同一行的，水平方向排列丨行内元素不能包含块级元素丨

<b>粗体 <srtong><srong>表示粗体，具有语义化</srtong> 斜体 <em>斜体，具有语义化 <u>下划线 ~~<s>删除线~~ ^<sup>上标 _<sub>下标 <a>超链接 ”<img>图片链接”

”<img>图片链接”

<span>本身没有任何属性

块元素：块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行丨块级元素可以包含行内元素和块级元素丨行内元素与块级元素属性的不同，主要是盒模型属性上

<p>段落

<h1>h1~h6标题，h1~h6从大到小

03

HTML（元素基础篇）

置换元素：置换元素内容的部分不由文档内容直接表示，而是尤其它（图片、视频、链接等）文件替代（例：img置换元素）。

01

老板的手机收到一个红包，为什么红包没居中？

如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。

02

前端面试宝典（一）

Hello大家好，兔妞想着咱们分享也有好多了，而且新一轮的秋招又快到了，要不咱收集收集题目，也好自己查缺补漏一下吧～所以最近会有一些面试题目分享给大家，答案也会一并送出哦。但是穿插这中间还是会有干货的分享哟。

03

【原创】CSS中元素的分类及转换

一.元素： css中将标签叫做元素二.元素的分类：块级元素:html、body、h1-h6、p、hr、div、pre、ul+li、ol+li等

02

前端基础-CSS基础（八）

本文目录元素的分类相对定位绝对定位浮动其他属性参考元素的分类 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

04

【CSS】浮动 ③ ( 浮动特性 | 脱离标准流布局 | 取消占用位置 | 显示模式类似于行内块元素 )

块级元素设置为浮动 , 则该元素从标准流布局中脱离, 则标准流布局只剩下另一个 div 元素 ;

03

(2019)[前端]面试题[1]：小知识点大集合

答：不区分，（HTML, CSS都不区分，但为了更好的可读性和团队协作，一般都小写，而在XHTML 中元素名称和属性是必须小写的。）

00

视觉格式化模型-控制框

本文介绍了HTML中元素显示方式的控制，包括块级元素、行内元素、行内块级元素、以及display:inline-block、display:block、display:list-item、display:run-in、display:compact、display:marker、display:table、display:inline-table、display:table-row-group、display:table-header-group、display:table-footer-group、display:table-row、display:table-column-group、display:table-column、display:table-cell、display:table-caption、以及none。其中，块级元素、行内元素、行内块级元素、以及display:inline-block、display:block、display:list-item、display:run-in、display:compact、display:marker、display:table、display:inline-table、display:table-row-group、display:table-header-group、display:table-footer-group、display:table-row、display:table-column-group、display:table-column、display:table-cell、display:table-caption、以及none都可以用来控制元素的显示方式，并介绍了CSS中display的常用属性值及其意义。"

09

HTML初学笔记1

[TOC] 什么是HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如（<html>） HTML 标签通常是成对出现的

07

CSS标签显示模式及单行文本

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个（2）默认宽度就是它本身内容的宽度。（3）高度，行高、外边距以及内边距都可以控制。

03

CSS-02

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

03

每天10个前端小知识【Day 14】

浏览器会下载HTML解析页面生成DOM树，遇到CSS标签就开始解析CSS，这个过程不会阻塞，但是如果遇到了JS脚本，此时假如CSSOM还没有构建完，需要等待CSSOM构建完，再去执行JS脚本，然后再执行DOM解析，此时会阻塞。

01

CSS样式块级元素，行内元素，行内块级元素

HTML元素按布局属性可以分为三种类型：块级元素、行内元素、行内块元素这篇文章梳理一下他们的区别与联系

03

第2天：HTML常用标签

一、超链接a href：www.baidu.com(跳转页面)；id名（锚点跳到相应div位置）；01.rar(压缩包） target：_blank（新窗口打开）；_self(当前窗口打开）二、文件路径绝对路径：（1）线上：线上绝对路径（2）线下：完整路径

01

CSS知识框架（一）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情 >>

03

【CSS】浮动 ① ( 浮动引入 | 盒子模型位置摆放三大机制 - 普通流、浮动、定位 | 行内块元素的摆放缺陷 )

文章目录一、盒子模型位置摆放三大机制 - 普通流、浮动、定位二、行内块元素的摆放缺陷一、盒子模型位置摆放三大机制 - 普通流、浮动、定位 ---- 盒子模型位置摆放三大机制 : 普通流 : 默认的摆放样式 ; 块级元素摆放 : 每个块级元素独占一行 , 排列顺序从上到下 ; 如 : div , p , h1 等 ; 行内元素摆放 : 多个行内元素在同一行显示 , 排列顺序从左到右 , 显示到边缘自动换行 ; 如 : span , strong , a 等 ; 浮动 : 盒子模

03

2021前端面试高频 HTML + CSS

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭