html5页面必须从最小合法结构起步：（大小写敏感）、、含、，缺一不可；资源加载顺序、表单默认行为拦截、移动端适配等需严格遵循规范。
用 html 标签起步，别碰模板引擎
现在做 HTML5 页面，不是“从零开始”，而是“从最小合法结构开始”。浏览器只认 + <code> + + 这四样，缺一不可。很多人卡在第一行就错——比如写成 （小写）看似能跑，但某些旧版 IE 或校验工具会报错；又或者漏掉 <code>，导致屏幕阅读器识别语言失败。
常见错误现象：Uncaught SyntaxError: Unexpected token '（其实是 JS 脚本被当 HTML 解析了，根源常是没写 <code><script src="..."></script> 或路径错）
- 必须用
，大小写敏感，不能加空格或注释 -
标签要带lang属性，中文页写lang="zh-CN" -
里至少要有<meta charset="UTF-8">，否则中文乱码几乎必然发生 - 别在
里直接写<script>console.log(...)</script>，除非加defer或放在底部
CSS 和 JS 加载顺序直接影响渲染和交互
HTML5 不是“写完 HTML 就完事”，它默认按顺序加载资源。JS 阻塞解析，CSS 阻塞渲染，顺序错了页面就白屏、卡顿、按钮点不动。
使用场景：你改了按钮样式但没生效，或者点击没反应，大概率是资源加载时机不对。
立即学习“前端免费学习笔记（深入）”；
SiteDynamic企业网站管理系统采用较为成熟的ASP+ACCESS编写，是迄今为止国内较先进的ASP语言企业网站管理系统。系统为企业级网站提供一个框架，能满足企业的基本应用，同时系统开放全部源码，用户可以根据自己的需求扩展出自己需求的模块，如：单页面、新闻、产品展示、下载、友情链接、电子商务、广告、会员、在线支付、人才招聘等。整套系统的设计构造，完全考虑大中小企业类网站的功能要求，网站的后台
- CSS 一律放
里，用<link rel="stylesheet" href="style.css">，别用@import（它会阻塞后续 CSS 下载） - JS 如果操作 DOM，必须等 DOM 构建完成：
<script defer src="app.js"></script>（推荐）或<script src="app.js"></script>放在前 - 不要用
<script async src="..."></script>加载依赖其他脚本的代码（比如先加载 jQuery 再加载插件），async不保证执行顺序 - 本地开发时，Chrome 控制台 Network 标签页看
Status列：404 代表路径错，(blocked:mixed-content)代表 HTTP 资源混入 HTTPS 页面
表单提交不跳转？检查 type 和 event.preventDefault()
做登录、搜索这类交互，很多人写完 <form></form> 发现一提交就刷新页面，JS 绑定的 submit 事件根本没触发。问题不在 JS 语法，而在表单默认行为没拦住。
参数差异：<button></button> 默认 type="submit"，<input type="button"> 才不提交；很多新手把 <input type="submit"> 当普通按钮用，结果触发表单提交。
- 监听表单提交必须用
event.preventDefault()，光return false不够（它只阻止默认行为+冒泡，但现代写法建议明确写preventDefault） - 表单内
<button></button>没写type属性时，浏览器按submit处理——这是最隐蔽的刷新原因 - 如果用
fetch提交，注意后端返回的是text/plain还是application/json，response.json()遇到非 JSON 会直接抛错 - 调试技巧：在
submit回调开头加console.log('submit fired')，没输出说明事件根本没绑定上（DOM 未加载完就执行 JS 是常见原因）
移动端适配不是加个 viewport 就完事
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是起点，不是终点。它只告诉浏览器“按设备宽度渲染”，但字体太小、点击区域太窄、横向滚动条莫名出现，这些才是真实问题。
性能影响：用 rem 做响应式时，如果 JS 动态计算根字体大小（document.documentElement.style.fontSize），每次 resize 都重排，滑动卡顿明显；纯 CSS 的 clamp() 或媒体查询更稳。
- 别用固定
px写按钮高度或行高，移动端手指点不准；最小点击区域建议 ≥ 44×44px（iOS 人机接口指南） -
user-scalable=no在 iOS 上已基本失效，且影响可访问性，别加 - 图片记得加
width: 100%; height: auto;，否则宽屏下溢出容器，触发横向滚动 - 调试真机：Chrome DevTools 的 Device Toolbar 只模拟视口，不模拟触摸事件；真机连电脑用
chrome://inspect查看 console 和元素
复杂点在于：HTML5 页面一旦涉及表单验证、离线缓存、摄像头调用、PWA 安装提示，每个功能背后都有独立的权限模型、兼容性断层和用户拒绝路径。别指望一个页面全堆上去，先让基础结构在 Chrome/Firefox/Safari 最新版里不报错、不白屏、不乱码——这就已经超过八成人的实际需求了。
