为什么我的字体属性会导致删除部分代码并应用于非预期部分的错误？
Why is my font attribute causing an error that deletes parts of my code and applying to the unintended parts?
已解决：答案实际上在 Mio Mio 的评论中
我是 coding/programming 的超级新手，完全没有任何 maths/computing/sciences 的背景。在我的在线学习中遇到了一个小障碍，我相信这里的任何人都需要 5 秒才能看到问题。
所以我的整个代码是这样的：
<doctype! html>
<html>
<head>
<h1>Blah</h1>
<h3>blah, blah, blah</h3>
<button>blah</button> <button>blah</button>
<hr>
<h2>Review of blah</h2>
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300">
<p>blah blah blah.</p>
<hr>
然后我用
替换了 h1 标题
<h1 style="font-size:60px;">Blah</h1>
并且它删除了第一段之前的所有内容，并将第一段的所有文本转为 hr 标签大小 60 字体（有或没有 hr 标签，结果都是一样的）。
我有 NFC 为什么会发生这种情况，因为在编辑器上尝试它时：
<!DOCTYPE html>
<html>
<head>
<h2>The style Attribute</h2>
<p>The style attribute is used to specify the styling of an element, like color:</p>
<h1 style="font-size:60px;">This is a heading.</h1>
<p>what am I doing right here</p>
</head>
</html>
，它按预期工作。
就我的猜测而言，我已经关闭了 h1 标签，因此样式属性不应应用于 h1 标题以外的任何内容。
感谢任何帮助，解释为什么会发生这种情况，以及将来如何避免。提前致谢！
编辑：问题似乎出在我从记事本将其复制并粘贴到 w3 编辑器时。样式="font-size:60px;"我试过手动输入，然后再次手动输入记事本，然后复制粘贴，这不会导致上述错误。我没有看到任何差异，所以我不确定为什么它甚至将它们注册为不同。
编辑：对于那些好奇的人来说，这是引号！请参阅之前的编辑以了解导致问题的实际文本。
按照你说的替换，我觉得没问题，如下面的link。
https://jsfiddle.net/81qzL4ft/
可能是你的问题运行，尝试使用最新的google chrome.
<doctype! html>
<html>
<head>
<h1 style="font-size:60px;">Blah</h1>
<h3>blah, blah, blah</h3>
<button>blah</button> <button>blah</button>
<hr>
<h2>Review of blah</h2>
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300">
<p>blah blah blah.</p>
<hr>
我无法重现您描述的效果（可能是浏览器的差异 - 我试用了 Firefox 和 Chrome），但我认为第一步是确保您的HTML 正确：
- 文档类型应为
<!DOCTYPE html> 而不是 <doctype! html>
<head> 元素的内容应该是页面标题、CSS 和要包含的脚本文件等内容。您已将整个 body 页面放入 <head>，这是不正确的。- 改为将您网页的内容放入
<body> 元素中。
- 应关闭所有 HTML 个元素。例如，
<h1> 应该有匹配的 </h1>。对于 <br> 等空元素，您应该 <br></br> 或 <br/>.
我在这里重写了你有问题的例子：
<!DOCTYPE html>
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<h1>Blah</h1>
<h3>blah, blah, blah</h3>
<button>blah</button> <button>blah</button>
<hr>
<h2>Review of blah</h2>
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300" />
<p>blah blah blah.</p>
<hr/>
</body>
</html>
如果 HTML 代码不是 100% 正确，浏览器会尝试找出 "what you meant"，但是坚持标准可以让您在确保页面正确且相同地呈现方面大有帮助跨浏览器的方式。
如果您不确定是什么原因导致您的代码出现问题，您也可以通过 W3C 的 HTML 验证器 运行 尝试：https://validator.w3.org/。它非常严格（对于初学者来说可能很难理解），但在突出代码中的具体问题方面做得很好。
已解决：答案实际上在 Mio Mio 的评论中 我是 coding/programming 的超级新手，完全没有任何 maths/computing/sciences 的背景。在我的在线学习中遇到了一个小障碍，我相信这里的任何人都需要 5 秒才能看到问题。
所以我的整个代码是这样的：
<doctype! html>
<html>
<head>
<h1>Blah</h1>
<h3>blah, blah, blah</h3>
<button>blah</button> <button>blah</button>
<hr>
<h2>Review of blah</h2>
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300">
<p>blah blah blah.</p>
<hr>
然后我用
替换了 h1 标题<h1 style="font-size:60px;">Blah</h1>
并且它删除了第一段之前的所有内容，并将第一段的所有文本转为 hr 标签大小 60 字体（有或没有 hr 标签，结果都是一样的）。
我有 NFC 为什么会发生这种情况，因为在编辑器上尝试它时：
<!DOCTYPE html>
<html>
<head>
<h2>The style Attribute</h2>
<p>The style attribute is used to specify the styling of an element, like color:</p>
<h1 style="font-size:60px;">This is a heading.</h1>
<p>what am I doing right here</p>
</head>
</html>
，它按预期工作。
就我的猜测而言，我已经关闭了 h1 标签，因此样式属性不应应用于 h1 标题以外的任何内容。
感谢任何帮助，解释为什么会发生这种情况，以及将来如何避免。提前致谢！
编辑：问题似乎出在我从记事本将其复制并粘贴到 w3 编辑器时。样式="font-size:60px;"我试过手动输入，然后再次手动输入记事本，然后复制粘贴，这不会导致上述错误。我没有看到任何差异，所以我不确定为什么它甚至将它们注册为不同。
编辑：对于那些好奇的人来说，这是引号！请参阅之前的编辑以了解导致问题的实际文本。
按照你说的替换，我觉得没问题，如下面的link。 https://jsfiddle.net/81qzL4ft/
可能是你的问题运行，尝试使用最新的google chrome.
<doctype! html>
<html>
<head>
<h1 style="font-size:60px;">Blah</h1>
<h3>blah, blah, blah</h3>
<button>blah</button> <button>blah</button>
<hr>
<h2>Review of blah</h2>
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300">
<p>blah blah blah.</p>
<hr>
我无法重现您描述的效果（可能是浏览器的差异 - 我试用了 Firefox 和 Chrome），但我认为第一步是确保您的HTML 正确：
- 文档类型应为
<!DOCTYPE html>而不是<doctype! html> <head>元素的内容应该是页面标题、CSS 和要包含的脚本文件等内容。您已将整个 body 页面放入<head>，这是不正确的。- 改为将您网页的内容放入
<body>元素中。 - 应关闭所有 HTML 个元素。例如，
<h1>应该有匹配的</h1>。对于<br>等空元素，您应该<br></br>或<br/>.
我在这里重写了你有问题的例子：
<!DOCTYPE html>
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<h1>Blah</h1>
<h3>blah, blah, blah</h3>
<button>blah</button> <button>blah</button>
<hr>
<h2>Review of blah</h2>
<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300" />
<p>blah blah blah.</p>
<hr/>
</body>
</html>
如果 HTML 代码不是 100% 正确，浏览器会尝试找出 "what you meant"，但是坚持标准可以让您在确保页面正确且相同地呈现方面大有帮助跨浏览器的方式。
如果您不确定是什么原因导致您的代码出现问题，您也可以通过 W3C 的 HTML 验证器 运行 尝试：https://validator.w3.org/。它非常严格（对于初学者来说可能很难理解），但在突出代码中的具体问题方面做得很好。