为什么在浏览器中 html 段落标记中的某些文本落在 <p></p> 之外

Question

请参阅下面的 html。在浏览器中查看时，最后两个句子位于段落标记之外，因此失去了段落的属性。如果你在文本编辑器中查看 html，你会看到所有的废话都在段落标记内，但在 Firefox 和 IE 等浏览器中则不会。在查看源代码或调试控制台中查看源代码。

    <html>
    <head>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TEST</title>
    <meta content="width=device-width" name="viewport">
    <meta charset="ISO-8859-1">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    </head>
    <body>
    <div id="page_body">
     <div id="my-content">
      <div id="mymsg" class="mymsgcount">
       <div class="my-menus">
        <div class="my-menutext my-menutext1">
                <h1>This is a test.</h1>
                <p>
                    <content>Determine why the last two sentences in this section falls out of paragraph tag in browswer:<br>
                        <ul>
                            <li>first list item</li>
                            <li>second list item</li>
                            <li>third list item</li>
                        </ul>
                        <br>This is the second last sentence which for some reason falls outside of the paragraph tag when viewed in browser.<br>
                        <strong>Last sentence to fall out of paragraph tag.</strong>
                    </content>
                </p>
        </div>
       </div>
      </div>
     </div>
    </div>
    </body>
    </html>

Answer 1

试一试...

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<meta content="width=device-width" name="viewport">
<meta charset="ISO-8859-1">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<style>
p {color:red}
</style>
</head>
<body>
<div id="page_body">
 <div id="my-content">
  <div id="mymsg" class="mymsgcount">
   <div class="my-menus">
    <div class="my-menutext my-menutext1">
            <h1>This is a test.</h1>
            <content>
                <p>Determine why the last two sentences in this section falls out of paragraph tag in browswer:</p><br>
                    <ul>
                        <li>first list item</li>
                        <li>second list item</li>
                        <li>third list item</li>
                    </ul>
                    <p><br>This is the second last sentence which for some reason falls outside of the paragraph tag when viewed in browser.<br>
                    <strong>Last sentence to fall out of paragraph tag.</strong></p>
            </content>
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

Answer 2

您的 HTML 结构已损坏。具体来说，如果遇到某些其他元素（包括 <ul>），<p> 元素将自动终止。这意味着无序列表及其后的所有内容都不是初始段落的一部分。

W3C 规范说：

A p element's end tag may be omitted if the p element is immediately followed by an address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, or ul, element, or if there is no more content in the parent element and the parent element is not an a element.

您可以将这些项目与 <div> 组合在一起。

你可以在W3C网站上找到这方面的具体参考资料here

Answer 3

Probalby 因为只有 phrasing content is allowed in the p-tag，这就是浏览器试图修复该问题的方式。也可能是因为 <content>-元素不是 HTML-标准的一部分。

为什么在浏览器中 html 段落标记中的某些文本落在 <p></p> 之外

Why does some of my text within html paragraph tag fall outside of the <p></p>when in browser

html

browser

element