内容展示区
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
此处粘贴
</body>
</html>
相同点:都是极简代码,两者在桌面浏览器上显示效果一致。
上面的代码在移动端适配(viewport)和语义化(lang)方面更完善,是更推荐的做法。
语言标注
第一段:<html lang="zh-CN"> 明确声明为简体中文,有利于屏幕阅读器发音、搜索引擎识别、:lang() 选择器、CJK(中日韩)断行/标点处理等。
第二段:无 lang,校验器会给出“建议添加 lang”的警告,辅助技术与搜索引擎需猜测语言。
移动端视口
第一段:包含 <meta name="viewport" content="width=device-width, initial-scale=1">,在手机上按设备宽度渲染,文字尺寸正常。
第二段:无 viewport,移动端会使用约 980px 的布局视口,页面整体被缩小,文字显得更小,需要手动放大。
校验器差异
两段都没有 <title>,W3C 校验会报错“head 缺少必需的 title”。
第一段因为有 lang,避免了“建议添加 lang”的警告;第二段会出现该警告。
两段的 <meta charset> 都在 head 最前,符合规范(前提是文件前面没有BOM或其他字节)。
代码结构与渲染
第一段更“生产可用”:国际化更明确、移动端可用性更好。
第二段更“极简”,但在移动端体验与可访问性较差。
如果想要最小差异且更规范的“极简可上线”版本,建议在你的极简页面里至少保留:
<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" …>
一个 <title>(如果需要通过 W3C 校验)
第二段代码在下面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>此处粘贴</body>
</html>