【问题标题】:Empty paragraph tags - should I allow in HTML editor or not?空段落标签 - 我是否应该允许在 HTML 编辑器中使用?
【发布时间】:2014-12-16 17:28:48
【问题描述】:

我正在使用 CKEditor 4,它的默认设置似乎是使用 <p></p> 来指示空行。到目前为止,我一直在 HTML 中看到由<p> </p> 表示的空行 - 即。不是空标签。

所以CKEditor的默认输出代表一个空行是,例如:

<p>paragraph before blank line</p>
<p></p>
<p>paragraph after blank line</p>

问题是,为了改变,IE7、8、9 似乎将此“正确”呈现为空白行,而 Firefox 和 Chrome 则没有 - 它们似乎忽略了空的 &lt;p&gt;&lt;div&gt; 标记,在布局条款。

所以,目前,我必须告诉 CKEditor 在空行中包含 &amp;nbsp;(由于某种原因不是默认设置),并在后端替换任何可能出现的空 &lt;p&gt; 标签溜过去。

我的问题是,在 HTML 中表示空行的黄金标准是什么?好老的&lt;p&gt;&amp;nbsp;&lt;/p&gt;,还是别的什么?

另外,鉴于 CKEditor 的默认设置是空行的空 &lt;p&gt; 标记,Chrome 和 Firefox 是否错误地忽略它们?还是 IE 将它们渲染为空行是错误的,CKEditor 的默认值真的应该是使用&lt;p&gt;&amp;nbsp;&lt;/p&gt;

【问题讨论】:

    标签: html blank-line


    【解决方案1】:

    根据HTML 4.01 on the p element&lt;p&gt;&lt;/p&gt; 有效但不应使用,浏览器应忽略它。浏览器行为不一致,通常不遵守规范。例如,您使用 &lt;hr&gt;&lt;hr&gt;&lt;p&gt;&lt;/p&gt;&lt;hr&gt; 对此进行测试——在 Chrome 上,它显示虽然 p 元素的高度为零,但它具有顶部和底部边距,因此它会影响渲染,即不会被忽略。 – HTML5 CR 似乎对这个问题保持沉默,即它没有具体说明内容为空的 p 元素。 更新: HTML5 有一个 general statement 关于以短语内容作为内容模式的元素(例如 p):这样的元素应该包含“应该至少有一个后代 Text 节点不是元素间空白,或至少一个作为嵌入内容的后代元素节点”。这意味着不应使用&lt;p&gt;&lt;/p&gt;;但这是一个建议,而不是一致性要求(“应该”,而不是“应该”)。

    规范中未定义&lt;p&gt;&amp;nbsp;&lt;/p&gt; 的效果(未定义不间断空格字符的渲染),但浏览器通常将不间断空格视为另一个图形字符,恰好被渲染带有一个空字形。所以在实践中它会生成一个线框,其高度由line-height 的计算值决定。

    默认情况下,p 元素之间有边距,对应一个空行。因此,p 元素之间需要空行似乎是由覆盖默认样式引起的,例如 CSS 中的 p { margin: 0 }。为了覆盖它,应该使用额外的 CSS 而不是人工的 p 元素。也就是说,一些p 元素应该有一个合适的非零底部或顶部边距。

    HTML 4.01 将 “white space characters” 定义为引用 Ascii 空格、Ascii 选项卡、Ascii 换页符和零宽度空格(例如,not 为不间断空格),定义了它们的渲染,并补充说:“本规范不指示空格字符的行为,渲染或其他方式,除了此处明确标识为空白字符的那些。出于这个原因,作者应该使用适当的元素和样式来实现包含空格而不是空格字符的视觉格式效果。”

    【讨论】:

    • 非常感谢。然后,我假设 CKEditor 对空白行(空 P 标记)的默认行为是“不正确的”(就内容编辑器的行为而言),所以我将在此基础上处理它。干杯。
    • 很好的答案,非常彻底!如果我错了,请纠正我,但是 OP,我认为 Jukka 的意思是你应该使用 CSS 来处理这个间距,而不是“纠正”CKEditor 以附加 &amp;nbsp;?
    • @anotherdave,你是对的。在这里使用 CSS 不仅更合乎逻辑;它也更实用、更灵活,因为您可以使用 CSS 单位将垂直间距设置为所需的值,而不是为虚拟 p 元素及其边距获取一些与浏览器相关的高度。
    • 这里关于边距的讨论有些误导,因为边距重叠。因此 4 个连续的空 &lt;p&gt; 标签高度为零,因此所有边距都呈现在彼此之上。更糟糕的是,非空的&lt;p&gt; 后跟空的&lt;p&gt;s 使空的P 标签基本上消失了。
    【解决方案2】:

    我会说 IE 有这个错误,空段落对我来说毫无意义。

    来自 w3.org:

    我们不鼓励作者使用空的 P 元素。用户代理应该忽略空的 P 元素。

    我建议当您的用户创建空白行时,您将他们的文本换成段落。

    所以而不是:

    before line break<p>&nbsp;</p>after line break
    

    你应该生成

    <p>before line break</p><p>after line break</p>
    

    有道理吗?

    【讨论】:

    • 谢谢,是的,我认为 IE 只是想对那些空标签“太有帮助”。但是,我并不是说段落没有被换行,只是空行不包括  元素。
    【解决方案3】:

    当使用符合标准的 HTML 和 CSS 编码进行编码时,网站文本内容的关键因素将放置在正常的段落标签中。这写为&lt;p&gt;。为了在编写段落文本时使 SEO 友好的段落文本,需要查看前一个子标题,然后创建解释和扩展此标题文本的网页内容。是的,您必须在 HTML 编辑器中使用空段落标签。

    【讨论】:

    【解决方案4】:

    我认为导航器呈现一个空的&lt;p&gt; 对 SEO 不利。在将其保存到 ddbb 之前,我将其替换为 js 或 php :)

    【讨论】:

    • 搜索引擎几乎不会关心空的p 元素。他们处理和索引文本。而且他们真的看不到浏览器是否呈现了一些东西。
    • 当然,对于搜索引擎来说,空&lt;p&gt; 标签很重要。网站的内容必须在一起并且结构良好。 &lt;p&gt;&amp;nbsp;&lt;/p&gt; 元素不好。可以使用以下行修改 /include/js/ckeditor_config.js 文件:config.ignoreEmptyParagraph = false;Here let you a link。我并不是说这是 SEO 最糟糕的事情,但它确实不是一个好的 SEO 实践。
    猜你喜欢
    • 1970-01-01
    • 2019-02-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多