doctype、lang、charset 必须写在最前面，否则触发怪异模式导致渲染异常；语义化标签是 dom 最小契约，不可替代；组件复用应使用 customelements.define()；轻量化不等于删减语义，而是拒绝用 js 替代 html 本职。
为什么 doctype、lang、charset 必须写在最前面
浏览器解析 HTML 是流式的，一旦遇到不符合规范的开头，就可能触发 Quirks Mode（怪异模式），导致 CSS 盒模型、JS 行为、甚至 document.body 初始化都不可靠。这不是“建议”，是硬性前提。
必须是文件第一行，不能有空格、BOM 或注释在它前面；否则 Safari 和部分旧版 Edge 会直接降级渲染-
要紧随其后，不能等 JS 动态设置——document.documentElement.lang只影响后续 JS 执行，对语音朗读器、字体 fallback、SEO 解析无效 -
<meta charset="UTF-8">必须出现在前 1024 字节内，且不能被任何 CSS/JS 阻塞；若放在<link rel="stylesheet">后面，IE 和某些安卓 WebView 会乱码
语义化标签不是“锦上添花”，而是 DOM 结构的最小契约
用 <div class="header"> 替代 <code><header></header> 看似省事，实则把结构责任推给 CSS 类名和 JS 逻辑，破坏了 HTML 的自描述能力。
-
<main></main>全页只能有一个，屏幕阅读器靠它定位核心内容；多写一个或漏写，会导致焦点跳转错乱、SEO 权重分散 -
<nav></nav>不是“有链接就套”，必须包裹真正起导航作用的链接组；面包屑、页脚友情链接、广告跳转链都不该放里面 -
<section></section>和<article></article>不可互换：<article></article>内容必须能独立分发（如 RSS、转发），<section></section>只是逻辑分区，无此语义
HTML 组件复用：别碰 document.write 和 <iframe></iframe>
想复用 header/footer？硬拼字符串或 iframe 是反模式。前者破坏 DOM 构建流程，后者隔离样式、中断 SEO、阻塞 onload。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 原生方案只有一条路：
customElements.define()+<template></template>，组件名必须含短横线（如"site-header"），否则浏览器直接忽略 -
<template></template>内不能写<style></style>或<script></script>；CSS 得用adoptedStyleSheets注入，JS 事件监听必须绑定到this.shadowRoot，而非document - 若项目不允许 JS 运行时注册（如纯静态托管、CSP 严格限制），那就老实用构建时预处理——
include是服务端的事，前端强行模拟只会埋坑
轻量化的代价：你删掉的每个标签，都在增加 JS/CSS 的耦合成本
删 <label></label> 换 div + onclick，省了 12 字节，但让表单无法被键盘聚焦、不支持 VoiceOver 朗读、破坏 for/id 关联逻辑。
- 省略闭合标签（如
<p>xxx</p>）虽合法，但会让querySelectorAll('p')返回意外结果——DOM 解析器自动补全的规则复杂，不同浏览器略有差异 - 用
<img srcset>却不配<sizes></sizes>，等于放弃响应式图片控制权；浏览器按 viewport 宽度猜尺寸，经常加载远超需要的高清图 - 所有
<input>必须有id和显式<label for="xxx"></label>；靠 CSS 模拟点击区域，对残障用户就是不可用
