HTML代码校验报Stray end tag html错误 求助排查解决方法

错误原因与修复方案 #

你遇到的Error: Stray end tag HTML报错核心原因是校验工具对HTML语法的解析规则比浏览器严格，浏览器的高容错性会自动忽略语法问题正常渲染，所以才会出现运行正常但校验不通过的情况，具体修复步骤如下：

• 第一步：删除<!DOCTYPE html>声明前的所有空格、换行、不可见字符，确保DOCTYPE是整个HTML文件的第一个内容，不能有任何前置字符。很多校验器如果检测到DOCTYPE前有内容，会判定DOCTYPE不合法，导致后续<html>标签的解析逻辑异常，最后识别到</html>时认为是多余的 stray 标签。
• 第二步：检查整个文件，确认仅存在一对<html>标签，且</html>是文件的最后一行内容，没有多写的结束标签。

额外优化建议（不影响本次报错，但可以提升校验通过率与作业质量） #

• HTML5规范中，<meta>、<link>、<img>、<br>这类单标签不需要在末尾加/，虽然不影响运行，但删除后更符合HTML5语法规范。
• 文本内容里的拼写错误selction修改为正确的selection。

修正后可通过校验的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alex's T's and V's</title>
  <link rel="shortcut icon" href="images/logo3.png">
  <link rel="stylesheet" href="Styles/normalize.css">
  <link rel="stylesheet" href="Styles/final.css">
</head>
<body>
    <header>
        <img src="images/logo.png" alt="Logo">
        <h1>Welcome to the Ultimate T Shirt and V Neck Store</h1>
        <h3>Enjoy your time and please stay as long as you would like</h3>
    </header>
    <main>
        <h2>Welcome to my small T shirt store please feel free to browse</h2>
        <br>
        <p> This is a small store meant to sell a few graphic T shirt and V neck designs. It has always been my goal to own my own store and this feels like the first step.
            Being a successful entrepreneur has always been a dream of mine and I will work hard to make sure my goal is accomplished.
        </p>
        <br>
        <p> Below you will find a small selection of Anime inspired graphic T shirts and V neck that are listed at competitive prices. <br> <strong>Note: Sizes available are Small, Medium, Large and Extra Large.</strong> </p>
        <br>
            <div class="row">
                <div class="column">
                   <img src="images/Tshirt1.jpg" alt="tshirt1" style="width: 48%;"> 
                   <p><br>"The Crew" 19.99</p>
                </div>
                <div class="column">
                    <img src="images/tshirt2.jpg" alt="tshirt2" style="width: 45%;">
                    <p><br>"Squad" 18.99</p>
                </div>
                <div class ="column"> 
                   <img src="images/tshirt3.jpg" alt="tshirt3" style="width: 50%;">
                   <p><br>"Ninetails T" 21.99</p>
                </div>
            </div>   
        <h3>More Products Coming</h3>
        <br>
        <p> As we grow as a company our selection will grow too! We plan to add more product and improve our designs based on consumer feedback.<br> We thank you for your time and support. We look forward to seeing you again! Have a nice day and don't forget, shop Alex's T's and V's for the best T shirts around.</p>
    </main>
    <footer>
    <p>&copy; 2021 Alex's T's and V's</p>
    </footer>
</body>
</html>

内容的提问来源于stack exchange，提问作者Alex D