渲染新行的 HTML 规范?

2024-03-23

我正在尝试将一些简单的 HTML 文档(主要包含 div 和 br 标签)呈现为纯文本,但我在何时添加新行方面遇到了困难。我以为这会很简单<div> and <br/>生成新的线条,但看起来有各种微妙的规则。例如:

<div>one line</div>
<div>two lines</div>

<hr/>

<div>one line</div>
<div></div>
<div>still two lines because the empty div doesn't count</div>

<hr/>

<div>one line<br/></div>
<div></div>
<div>still two lines because the br tag is ignored</div>

<hr/>

<div>one line<br/></div>
<div><br/></div>
<div>three lines this time because the second br tag is not ignored</div>

<hr/>

<div><div>Wrapped tags generate only one new line<br/></div></div>
<div><br/></div>
<div>three lines this time because the second br tag is not ignored</div>

因此,我正在寻找有关如何在 HTML 文档中呈现新行的规范(当未应用 CSS 时)。知道在哪里可以找到此类文档吗?


如果您正在寻找规格<div> and <br>, 您不会在一个地方找到它,因为每个地方都遵循不同的规则。 DIV 元素遵循块格式规则,而 BR 元素遵循文本流规则。

我相信您感到困惑的原因是假设它们遵循相同的换行规则。 让我解释。

BR 元素。

BR 定义于HTML4 规范第 9.3 节 https://www.w3.org/TR/html401/struct/text.html#h-9.3.2.1关于行和段落:

BR 元素强制中断(结束)当前文本行。

And in HTML5 规范第 4.5 节 https://www.w3.org/TR/html51/textlevel-semantics.html#the-br-element关于文本级语义:


元素代表换行符。

该规范解释了第三个示例的结果:

<div>one line<br/></div>
<div></div>
<div>still two lines because the br tag is ignored</div>

在那里,BR 元素根本不会被忽略,因为它标记该线必须在该点断开。 换句话说,它标记当前文本行的结尾。 这并不是要创建新线路。

在你的第四个例子中:

<div>one line<br/></div>
<div><br/></div>
<div>three lines this time because the second br tag is not ignored</div>

BR 元素也标记了该行的末尾。 由于该行有零个字符,因此它被呈现为空行。

因此,第三个和第四个示例中的规则是相同的。 没有什么是被忽略的。

DIV 元素。

如果没有明确的样式表,则应用默认样式。 DIV 元素默认是块级元素,这意味着它遵循块格式化上下文 定义于CSS 规范第 9.4.1 节 https://www.w3.org/TR/CSS22/visuren.html#block-formatting:

在块格式化上下文中,框从包含块的顶部开始垂直排列,一个接一个。

因此,这也不是创建新行,因为在块格式化上下文中,没有行的概念。 它是从上到下逐个放置块元素。

在你的第二个例子中:

<div>one line</div>
<div></div>
<div>still two lines because the empty div doesn't count</div>

空 DIV 的高度为零,因此它对下一个块级元素的渲染没有影响。

在你的第五个例子中:

<div><div>Wrapped tags generate only one new line<br/></div></div>
<div><br/></div>
<div>three lines this time because the second br tag is not ignored</div>

外部 DIV 用作包含块,如中定义的第9.1.2节 https://www.w3.org/TR/CSS22/visuren.html#containing-block内部 DIV 的定义是我上面引用的第 9.4.1 节。 因为没有应用 CSS,所以 DIV 元素默认具有零边距和零填充, 这使得内部 DIV 的每条边都与外部 DIV 的相应边接触。 换句话说,内部 DIV 的渲染位置与外部 DIV 完全相同。

我相信这就是一切。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

渲染新行的 HTML 规范? 的相关文章

  • 元素存在之前的html5音频绑定时间更新

    我试图从音频标签绑定 timeupdate 事件 该标签尚不存在 我习惯这样做 body on click selector function e 我用音频标签尝试了这个 body on timeupdate audioPlayerJS a
  • SVG 图标像素对齐?

    在此图像中 左侧 黑色 垃圾桶是图标字体 它的字体大小是 16px 这使得图标在 100 的时间里看起来都很清晰 两个蓝色垃圾桶是 SVG 它们具有完全相同的标记 其中之一happened一个是像素对齐的 另一个不是 我怎样才能强制我的 S
  • 根据屏幕尺寸更改图像 src

    我正在尝试使用媒体查询根据屏幕尺寸更改图像 src 我尝试过背景 url x 但它不起作用 我在某处读到我应该使用 content url x 代替 但是当我这样做时 我得到一个空白页面 谁能告诉我我的代码有什么问题吗 HTML div c
  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何使用javascript将视频文件转换为字符串?

    我在 signalR 工作 我想通过将视频文件拆分为不同部分来将视频文件从一个客户端发送到另一个客户端 我已经通过分割图像源数据发送图像并在另一个客户端上接收该图像 document getElementById fileUpload ad
  • 半流体布局 CSS/Html

    我有一个两列布局 其中右列的静态宽度为 350px 左列的宽度应填充页面的其余部分 或者至少这是我想要发生的事情 但不幸的是事实并非如此 看一下我的 css html http jsfiddle net CmJ7P http jsfiddl
  • 复合组件和 CSS

    I have newcss css formdiv width 30 margin 150 auto 和复合组件
  • 无需画布/显示器即可拍摄隐形 WebRTC/视频照片

    我读了拍摄静态照片 https developer mozilla org en US docs Web API WebRTC API Taking still photos来自 MDN 的描述如何从网络摄像头捕获照片 使用视频元素和med
  • Jquery 动画背景图像过渡

    我有一个导航栏 当将鼠标悬停在某个项目上时 背景图像会发生变化 效果很好 但是 我希望该图像从顶部滑入 并在您停止悬停时向上滑回 我一直在尝试使用 JQuery 使用 css bacgroundImage 和滑动或切换来做到这一点 但这些似
  • Selenium 找不到“spec”文件夹

    因此 我正在尝试建立本地系统来帮助完成仅使用 Rails 的雇主的现有项目 他们希望我主要关注 rspec 测试 因为该项目几乎可以正常运行 我需要充实他们错过的东西 但是 我无法获取 rake spec 来构建我的测试文件夹 事实上 测试
  • 如何在 html 5 画布上旋转单个对象?

    我试图弄清楚如何在 html 5 画布上旋转单个对象 例如 http screencast com t NTQ5M2E3Mzct http screencast com t NTQ5M2E3Mzct 我希望每一张卡都能以不同的角度旋转 到目
  • 如何从 jQuery DataTable 中的所有页面中选择所有复选框

    我有 HTML 页面 其中有多个复选框 可以单独检查它们 我有 全选 当我单击此按钮时 所有复选框都应被选中 而当我再次单击同一按钮时 所有复选框都应被取消选中从所有页面 在我原来的程序中 有数千条记录 但一次显示 10 条记录 但是当用户
  • 如果使用jquery,如何在html5中查看显示分钟和秒的CurrentTime

    我想在显示器上看到当前时间分钟和秒的视频 var id main video player alert id get 0 currentTime worked i see 12 324543356 var minnow id get 0 c
  • 如何使用expressjs发送多个文件?

    我希望能够发送许多文件 如果可能的话 发送整个目录 以便我可以在从 html 文件调用的其他 js 文件中访问它 const app require express const http require http Server app co
  • 框架可以用什么代替?

    假设我有一个包含 50 个网页的网站 每个页面由 A Header 导航 左侧内容 右侧内容 Footer 不使用 Frames 服务器端编程 第三方工具和软件 构架 我需要将这 5 个部分的代码 HTML 标记 分别放入这 50 个页面中
  • JavaScript 原型继承和 html canvas

    我是一名 Ruby 开发人员 最终决定认真学习 JavaScript 所以我买了一些书 开始深入研究 但当我试图理解原型继承时 我很快就陷入了困境 这本书的例子之一如下 给定一个 Shape 其原型有一个绘制方法 以及两个子形状 一个 Tr
  • CSS3输入元素的圆角,没有js/图像

    谁可以为输入元素制作圆角 我需要一种不使用 javascript 和图像的方法 Added
  • 黑色左/右三角形大小不同

    我使用黑色左指三角形 右左指三角形几何形状作为网站上的链接 并使用它们的 HTML 代码 和 9664 9654 由于某种原因 即使我在没有其他元素的空白页面上使用三角形 它们也不会以相同的大小显示 在 Chrome 上 向左指向的位置比向
  • 与 body 相比,将 css 规则应用于 html 有什么区别?

    我看不出以下之间的区别 html background f1f1f1 and body background f1f1f1 有什么解释吗 没有真正的区别 如果你只是谈论在哪里申请background 否则BoltClock 对另一个问题的回
  • Django:单击按钮加载另一个模板

    我已经在 django 项目上工作了几个星期 只是玩玩以便掌握它的窍门 我有点困惑 我现在有一个名为 home html 的模板 我想知道是否可以将另一个名为 profile html 的模板设置为 home html 模板上的链接 我有一

随机推荐

  • 简单的 html 与 Razor 中的扩展方法(偏好)

    对于 MVC Razor 中的简单标签 您更喜欢使用简单的 HTML 还是使用扩展方法 例如
  • OleDbConnection 在任何打开的 Excel 窗口中以只读方式打开工作表

    这几乎是一个确切的问题 OleDbConnection 在任何打开的 Excel 窗口中打开 Excel 文件 但如果没有打开窗户则不会 https stackoverflow com questions 8229929 oledbconn
  • TreeMap - 搜索时间复杂度

    TreeMap 中 get 和 put 的时间复杂度是多少 实现方式和红黑树一样吗 从这里 http java sun com javase 6 docs api java util TreeMap html http java sun c
  • URL 的等效 is_file() 函数?

    检查给定 url 是否指向有效文件 即不返回 404 301 等 的最佳方法是什么 我有一个脚本可以在页面上加载某些 js 文件 但我需要一种方法来验证它收到的每个 URL 是否指向有效文件 我仍在查阅 PHP 手册 看看哪些文件函数 如果
  • popen() 是如何工作的以及如何在 Linux 上将其实现为 C++ 代码?

    我不知道如何使用popen 从 Linux 中的子程序获取 stdout 到主 C 程序 我环顾四周 发现这段代码可以实现我想要的功能 但我无法理解这个东西是如何工作的 我知道 C 编程的基础知识 我已经这样做了几个月了 但我很困惑 所以有
  • 将非 www 版本的域名重定向到 Jetty 中的 www

    我无法将我的非 www 域版本重定向到 wwwMovedContextHandler 它没有要重定向到的主机 Both www example com and example com指向我的网络服务器IP 当有人试图打开时example c
  • Prolog 中的失败谓词有什么用?

    我想不出我需要它的情况 优雅的系统提供false 0作为命令式的声明式同义词fail 0 它有用的一个例子是当您想要手动强制回溯副作用时 例如 between 1 3 N format line w n N false line 1 lin
  • 从 JComboBox 获取值

    I have JComboBox有 2 列 我有JButton 当我点击JButton 我需要得到结果JComboBox分别从第一列和秒列中选择值 我该怎么办 另外 如何设置 JComboBox 的标题 代码 public class Co
  • 如何从 Drools 列表中获取最大最小项目

    我有课 class Person public Date dateOfBirth public List
  • .Net4 应用程序中托管的 .Net2 程序集在 x86 中比在 AnyCpu 模式中表现更好?

    我有一个引用第 3 方 Net2 程序集的 Net4 WinForms 应用程序 其中包含图形密集型视觉控件 我注意到一个huge当我不小心将应用程序从 AnyCpu 切换到 x86 编译模式时 应用程序的视觉性能得到了改善 我的开发设备是
  • SSIS 对象变量计数?

    我在 BIDS 2008 中使用 SSIS 并且试图获取包含文件列表的对象变量的计数 关于如何做到这一点有什么想法吗 Thanks 您如何填充此对象变量 根据您填充变量的方式 可以列出更优雅的获取计数的方法 然而 这里有一个快速但肮脏的解决
  • 尽管删除了 IIS,但仍然设置了 IISMAJORVERSION 和 IISMINORVERSION

    我正在创建一个依赖于正在安装的 IIS 的安装程序 为了进行测试 我使用运行 Windows Server 2008 R2 的虚拟机 该虚拟机安装了 Web 服务器角色 我的安装程序使用此条件检查是否安装了 IIS
  • 如何使用 distutils 创建可执行的 .zip 文件?

    Python 2 6 及更高版本能够直接执行 zip 文件 如果 zip 文件包含 main py文件位于 zip 存档的顶部 我想利用此功能来提供我正在开发的工具的预览版本 该工具除了将 zip 文件复制到磁盘之外不需要安装任何内容 是否
  • 使用实体框架选择所有行

    我正在尝试使用实体框架从数据库中选择所有行进行操作 然后再将其发送到表单 var ptx modelname tablename ptx tablename Select 里面有什么 我使用了实体数据源 它提供了我想做的事情所需的一切 re
  • 如何使 div 跨越网格中的多行和多列?

    建立在上一个问题 https stackoverflow com questions 42946454 alternative to css grid layout but not tables 我正在尝试向我的网格布局添加更大的块 在最后
  • 阻止 iframe 设置parent.location(防止framebusting)

    我在自己的域上有一个网站 其中我将 iframe 包含到其他域上的其他网站以进行快速预览 问题是某些网站具有框架破坏代码 可以将用户从我的网站重定向 我怎样才能阻止这个 在 Framebuster 的情况下 即使根本不显示 iframe 也
  • 在对话框外部按下时如何关闭 DialogFragment?

    我正在使用一个DialogFragment 虽然我已成功设置图像以在按下时关闭 即关闭 对话框 但当用户单击对话框之外的任何位置时 我很难找到关闭对话框的方法 就像它与普通对话框一样 我以为会有某种 dialogFragment setCa
  • 枚举作为 TypeScript 中的参数

    是否可以将参数的类型设置为 Enum 像这样 private getRandomElementOfEnum e enum string var length number Object keys e length return e Math
  • 添加适用于 Firefox Webdriver 但不适用于 PhantomJS 的 Cookie

    我有一个带有饼干的泡菜 是通过以下命令创建的 def doLogin driver do login stuff pickle dump driver get cookies open cookies pkl wb 我有获取 cookie
  • 渲染新行的 HTML 规范?

    我正在尝试将一些简单的 HTML 文档 主要包含 div 和 br 标签 呈现为纯文本 但我在何时添加新行方面遇到了困难 我以为这会很简单 div and br 生成新的线条 但看起来有各种微妙的规则 例如 div one line div