直接双击index.html即可运行，需用UTF-8编码的纯文本编辑器编写，最小结构含DOCTYPE、html根元素及meta charset；img和a标签须规范使用；CSS初学建议内联style；必加viewport meta适配移动端。
直接双击 index.html 就能看效果，不需要装服务器、不用配环境——这是最真实、最轻量的起步方式。
用纯文本编辑器写，别用 Word 或 WPS
Word/WPS 会偷偷插入不可见字符（比如全角空格、智能引号、隐藏格式），导致浏览器解析失败或页面空白。控制台常报错 Uncaught SyntaxError: Unexpected token ILLEGAL 或渲染异常。
- 推荐用 VS Code、Notepad++、Sublime Text 等纯文本编辑器
- 保存时务必选
UTF-8编码（VS Code 右下角可点击切换） - 文件名必须含
.html后缀，如index.html或about.html
只保留三样东西就能跑起来
最小可行结构不是越简越好，而是“刚好够浏览器识别并显示”。缺一不可：
-
<!DOCTYPE html>—— 告诉浏览器这是 HTML5 -
<html><head></head><body></body></html>—— 根元素和内容容器 -
<meta charset="UTF-8">放在<head>里 —— 防止中文乱码
别加多余空行或注释在 <!DOCTYPE html> 前面，否则触发怪异模式（Quirks Mode），CSS 行为会不可预测。
立即学习“前端免费学习笔记（深入）”；
<img> 和 <a> 是唯二必须立刻掌握的标签
它们是用户真正“看到”和“用到”的功能入口，但参数和行为极易出错：
-
<img src="logo.png" alt="公司标志">：必须有src和alt；alt为空或写“图片”会影响读屏软件和 SEO -
<a href="contact.html">联系我们</a>：本地跳转用相对路径；外链必须带https://，否则变成找当前目录下的www.example.com文件 -
<a href="#">仅限临时占位，上线前必须替换成真实地址，否则点击后页面跳顶 - 新窗口打开要加
target="_blank" rel="noopener"，漏掉rel="noopener"会让目标页获得window.opener权限，存在安全风险
CSS 先写进 <style>，别急着分文件
初学阶段把样式写在 <head> 里的 <style> 中，比建 style.css 再引入更可控——没有路径错、没缓存卡、没引用漏。
- 例如让导航横排：
nav ul { display: flex; list-style: none; padding: 0; margin: 0; } - 常见坑：
<ul>默认有padding-left，不设padding: 0会导致整体左偏 -
<a>默认是内联元素，悬停时只有文字区域响应，需加display: block或inline-block扩展点击热区
真正容易被忽略的，是 <meta name="viewport"> 这一行。不加它，移动端页面会自动缩放成小字版，用户得双指放大才能看清——这不是 bug，是默认行为。
