如何从零开始用HTML5制作简易网页？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1165个文字，预计阅读时间需要5分钟。
不需要安装任何建站软件或可视化工具。直接使用纯文本编辑即可。
常见错误现象：hello world 写了但浏览器空白，大概率是文件被存成了 index.txt 或编码用了 UTF-8 with BOM；macOS 上用 TextEdit 默认存成富文本（.rtf），必须先选「格式 → 制作纯文本」再保存。
- 保存时务必手动输入完整文件名：
index.html，不能只输index - 编码选 UTF-8（无 BOM），VS Code 右下角可点编码切换
- 浏览器刷新快捷键是
Ctrl+R（Win）或Cmd+R（Mac），改完代码立刻按它看效果
<!DOCTYPE html> 必须顶格写在第一行
这是 HTML5 的唯一文档类型声明，告诉浏览器：“按最新标准解析”。漏掉、写错位置（比如前面空行或注释）、拼成 <!doctype html>（小写）一般不影响显示，但严格来说不符合规范，某些校验工具会报错，也不利于后续引入 CSS/JS 时的兼容预期。
正确结构开头长这样：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <p>Hello, HTML5!</p> </body> </html>
-
<html lang="zh-CN">中的lang属性建议加上，有助于屏幕阅读器和 SEO -
<meta charset="UTF-8">必须放在<head>靠前位置，否则中文可能乱码 - 所有标签都用小写，属性值用英文双引号，这是 HTML5 推荐写法
用 <img>、<a>、<h1> 等语义化标签直接组织内容
零基础不用学“框架”或“CSS 布局”，先用原生标签把信息分块：标题用 <h1>~<h6>，段落用 <p>，图片用 <img src="xxx.jpg" alt="描述">，链接用 <a href="https://example.com">文字</a>。浏览器有默认样式，能立刻看出层级关系。
容易踩的坑：
-
<img>的src路径写错最常见：图片和index.html在同一文件夹，就写src="photo.jpg"；如果图片在images/子目录，就得写src="images/photo.jpg"（不是./images/或/images/） -
<a>的href如果指向本地文件（如about.html），确保该文件真实存在且在同一目录 -
<h1>不代表“最大字号”，而是“最重要标题”，全文只该有一个<h1>
加点颜色和间距？直接用 style 属性写内联 CSS
不想碰外部文件或复杂语法，就用 style 属性临时调整：比如让标题变红加粗，写 <h1 style="color: red; font-weight: bold;">欢迎</h1>；让段落上下留空，写 <p style="margin: 20px 0;">内容</p>。这比学选择器、写 CSS 文件快得多，适合快速验证想法。
注意点：
- 多个样式用英文分号
;分隔，最后不加 - 颜色可用英文名（
red）、十六进制（#ff6b6b）、rgb（rgb(255, 107, 107)） - 单位别漏：
margin: 20px合法，margin: 20无效 - 这只是过渡手段，样式一多就难维护，后续再抽离到
<style>标签或外部 .css 文件
真正卡住新手的往往不是语法，而是路径、编码、大小写、引号这些细节。先跑通一个能打开、有文字、带图片的 index.html，比纠结“最佳实践”重要得多。等你改了十次、刷新二十次之后，那些规则自然就印脑里了。
本文共计1165个文字，预计阅读时间需要5分钟。
不需要安装任何建站软件或可视化工具。直接使用纯文本编辑即可。
常见错误现象：hello world 写了但浏览器空白，大概率是文件被存成了 index.txt 或编码用了 UTF-8 with BOM；macOS 上用 TextEdit 默认存成富文本（.rtf），必须先选「格式 → 制作纯文本」再保存。
- 保存时务必手动输入完整文件名：
index.html，不能只输index - 编码选 UTF-8（无 BOM），VS Code 右下角可点编码切换
- 浏览器刷新快捷键是
Ctrl+R（Win）或Cmd+R（Mac），改完代码立刻按它看效果
<!DOCTYPE html> 必须顶格写在第一行
这是 HTML5 的唯一文档类型声明，告诉浏览器：“按最新标准解析”。漏掉、写错位置（比如前面空行或注释）、拼成 <!doctype html>（小写）一般不影响显示，但严格来说不符合规范，某些校验工具会报错，也不利于后续引入 CSS/JS 时的兼容预期。
正确结构开头长这样：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <p>Hello, HTML5!</p> </body> </html>
-
<html lang="zh-CN">中的lang属性建议加上，有助于屏幕阅读器和 SEO -
<meta charset="UTF-8">必须放在<head>靠前位置，否则中文可能乱码 - 所有标签都用小写，属性值用英文双引号，这是 HTML5 推荐写法
用 <img>、<a>、<h1> 等语义化标签直接组织内容
零基础不用学“框架”或“CSS 布局”，先用原生标签把信息分块：标题用 <h1>~<h6>，段落用 <p>，图片用 <img src="xxx.jpg" alt="描述">，链接用 <a href="https://example.com">文字</a>。浏览器有默认样式，能立刻看出层级关系。
容易踩的坑：
-
<img>的src路径写错最常见：图片和index.html在同一文件夹，就写src="photo.jpg"；如果图片在images/子目录，就得写src="images/photo.jpg"（不是./images/或/images/） -
<a>的href如果指向本地文件（如about.html），确保该文件真实存在且在同一目录 -
<h1>不代表“最大字号”，而是“最重要标题”，全文只该有一个<h1>
加点颜色和间距？直接用 style 属性写内联 CSS
不想碰外部文件或复杂语法，就用 style 属性临时调整：比如让标题变红加粗，写 <h1 style="color: red; font-weight: bold;">欢迎</h1>；让段落上下留空，写 <p style="margin: 20px 0;">内容</p>。这比学选择器、写 CSS 文件快得多，适合快速验证想法。
注意点：
- 多个样式用英文分号
;分隔，最后不加 - 颜色可用英文名（
red）、十六进制（#ff6b6b）、rgb（rgb(255, 107, 107)） - 单位别漏：
margin: 20px合法，margin: 20无效 - 这只是过渡手段，样式一多就难维护，后续再抽离到
<style>标签或外部 .css 文件
真正卡住新手的往往不是语法，而是路径、编码、大小写、引号这些细节。先跑通一个能打开、有文字、带图片的 index.html，比纠结“最佳实践”重要得多。等你改了十次、刷新二十次之后，那些规则自然就印脑里了。