html标签的父子关系指直接嵌套（父标签内紧邻的子标签），兄弟关系指同属一个父标签的并列元素；二者构成dom树骨架，影响css选择器、js查询及渲染结果。
HTML标签之间的父子、兄弟关系不是语法装饰，而是DOM树的底层骨架——写错一层嵌套，querySelector就可能选不到元素，CSS :nth-child() 会失效，JavaScript操作也会出错。
怎么一眼看出父子关系？看是否直接包裹
父子关系只认「直接包含」：父元素的开始标签和结束标签之间，紧挨着的子标签才算子元素。中间有文本、注释或空格不影响判断，但嵌套层级跳过就不算。
-
<div><p>文字</p></div>中，<p></p>是<div> 的子元素；<code><span></span>在<p></p>里，它就只是<p></p>的子元素，不是<div> 的子元素（而是后代元素） <li> <code><ul> <li>A</li> <li>B</li> </ul>中，两个<li>都是<ul></ul>的子元素，互为兄弟 - 如果写成
<ul><div><li>A</li></div></ul>，那<li>就不再是<ul></ul>的子元素，ul > li这类子选择器会完全失效 -
<header><h1>标题</h1> <p>说明</p></header>：<h1></h1>和<p></p>是兄弟；但把<p></p>搬到<footer></footer>里，哪怕视觉上还挨着，它们就彻底不是兄弟了 - CSS中
h1 + p只匹配「紧跟在<h1></h1>后面的同级<p></p>」，前提是二者共父；如果中间插了个<div>，这个选择器就断掉 <li>用 <code>document.querySelector('h1').nextElementSibling获取兄弟时，返回的是 DOM 树中下一个同级元素，不是渲染后看起来“挨着”的那个 -
<title></title>必须是的子元素，不能塞进；否则浏览器会把它当普通文本渲染，而不是设页面标题 -
<p></p>不能作为的子元素，写了也不会报错，但会被浏览器自动移到开头（HTML解析器的容错机制），导致结构和预期不符 - 检查 DOM 结构时，用浏览器开发者工具看 Elements 面板，展开
就能清楚看到和并列排布
兄弟关系只看同级父容器，不看视觉位置
两个标签是不是兄弟，只取决于它们有没有同一个直接父元素，和它们在页面上排得近不近、样式怎么摆毫无关系。
这是初学者最常误解的一点： 和 都直接嵌套在 里，它们地位平等，互为兄弟——不是 包着 ，也不是反过来。
真正容易被忽略的是：父子/兄弟关系一旦写错，往往不会立刻报错，而是静默地改变 DOM 结构，让后续的 CSS 选择器、JS 查询、甚至 SEO 解析都偏离预期——问题通常出现在调试阶段才暴露，而不是写的时候。
