草庐IT

渲染新行的 HTML 规范?

coder 2023-08-04 原文

我正在尝试将一些简单的 HTML 文档(主要包含 div 和 br 标记)呈现为纯文本,但我正在为何时添加新行而苦苦挣扎。我认为 <div> 会很简单和 <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> 的规范和 <br> , 你不会在一个地方找到它,因为它们每个都遵循不同的规则。 DIV 元素遵循 block 格式规则,而 BR 元素遵循文本流规则。

我认为造成您混淆的原因是假设它们遵循相同的换行规则。 让我解释一下。

BR 元素。

BR 在 HTML4 Specification Section 9.3 中定义关于行和段落:

The BR element forcibly breaks (ends) the current line of text.

并且在 HTML5 Specification Section 4.5关于文本级语义:

The <br> element represents a line break.

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

<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 元素默认是 block 级元素,这意味着它遵循 block 格式上下文 在 CSS Specification Section 9.4.1 中定义:

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

因此,这也与创建新行无关,因为在 block 格式化上下文中,没有行的概念。 它是从上到下一个接一个地放置 block 元素。

在你的第二个例子中:

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

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

在你的第五个例子中:

<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 用作包含 block ,如 Section 9.1.2 中定义的那样 并且内部 DIV 是我在上面引用的第 9.4.1 节中定义的。 因为没有应用 CSS,默认情况下 DIV 元素具有零边距和零填充, 这使得内部 DIV 的每个边缘都接触到外部 DIV 的相应边缘。 换句话说,内部 DIV 呈现在与外部 DIV 完全相同的位置。

我相信这就是一切。

关于渲染新行的 HTML 规范?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41014077/

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

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  5. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  6. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  7. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  8. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格? - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示,但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题,而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  9. ruby - 如何使用 Nokogiri 解析纯 HTML 表格? - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表,它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  10. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe? - 2

    考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证&符号不会被转义?由于我无法控制的原因,我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清,我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

随机推荐