HTML元素扩展 [1] $\color{red}{怪异模式}$ 模拟旧版本浏览器的行为，不同浏览器行为可能不一致没

元素

<!-- 
声明文档类型；大小写不敏感；必须在文档的第一行；该声明不是必须的，但建议添加
作用：
  [1]告诉浏览器使用哪个html版本进行解析
  [2]确保浏览器使用标准模式(而不是怪异模式)渲染页面
  [3]帮助保持跨浏览器的一致性 
-->
<!doctype html>
<html lang="en-US">  <!-- html为根元素；lang设置页面主要语言 -->
  <!--
   作为想在HTML页面中包含但不想展示给用户的内容的容器
   包括在搜索结果中显示的关键字和页面描述、css、字符集声明等
  -->
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> <!-- 视口元素可以确保页面以视口宽度进行渲染 -->
    <title>A Title</title>
  </head>
  <body>
     <!-- 标题：h1-h6 -->
     <!-- 有序ul/无序ol列表 -->
     <ul>
       <li>setfvg</li>
       <li>nfvg</li>
     </ul>
  </body>
</html>

扩展

[1] $\color{red}{怪异模式}$

模拟旧版本浏览器的行为，不同浏览器行为可能不一致
没有声明DOCTYPE/使用过时的DOCTYPE声明时触发
与标准模式的主要区别
- 盒模型计算：标准模式width+margin+padding+border;怪异模式width(已包含padding和border)+margin
- 图片元素垂直对齐(标准模式底部可能有空隙)
- 行内元素尺寸(怪异模式下width/height对行内元素生效)