星天HTML零基础入门教程

科技风排版 | 零基础友好 | 边学边练 | 全程无坑

1

认识HTML（小白必懂核心基础）

HTML 全称：超文本标记语言 (HyperText Markup Language)，是网页开发的入门基石，所有网页的基础结构都由HTML搭建。

💡
小白通俗3个比喻
1. HTML = 网页的骨架（决定网页有什么：标题、文字、图片）
2. CSS = 网页的颜值（决定网页好不好看：颜色、布局、样式）
3. JavaScript = 网页的灵魂（决定网页的交互：点击、动画、功能）

一、 HTML核心作用

  • 搭建网页基础结构，定义内容语义（标题/段落/图片等）
  • 承载网页所有核心内容，兼容各类文字、图片、链接资源
  • 跨设备兼容，一次编写，电脑、手机均可正常访问

二、 HTML三大核心特点

点击展开/收起 详细说明
  1. 简单易学：语法规则简单，标签多为英文缩写（h1=标题，p=段落），零基础1小时即可入门
  2. 跨平台兼容：支持Windows、Mac、手机、平板等所有设备，主流浏览器全部兼容
  3. 扩展性强：可与CSS、JavaScript完美配合，实现任意风格、任意功能的网页效果

三、 小白入门必知2问

✅
问：零基础能学会HTML吗？
答：完全可以！HTML是编程入门最简单的语言，无需英语基础，认识26个字母就能学，每天1小时，3天独立做简单网页。
✅
问：学HTML需要安装软件吗？
答：不需要！电脑自带记事本就能写代码，保存为.html格式，用浏览器直接打开预览效果。
2

手把手写第一个HTML网页（新手必实操）

入门关键一步！跟着步骤走，5分钟做出你的第一个网页，成就感拉满～

一、 准备工具（2种选择，小白首选第一种）

📌
新手首选：记事本（电脑自带，零门槛，无需安装，直接使用）
进阶选择：VS Code（免费代码编辑器，代码高亮+自动补全，后期必用）

二、 4步搞定第一个网页（记事本版，超详细）

  1. 打开记事本：Windows→开始菜单→搜索「记事本」；Mac→启动台→其他→文本编辑
  2. 复制模板代码：把下方基础模板完整复制粘贴到记事本，不要漏行、不要改格式
  3. 正确保存文件：点击文件→选择「另存为」
    ✅ 文件名：必须是 index.html（后缀一定要是.html，不能改）
    ✅ 保存类型：选择 所有文件（重点！否则会变成.txt文本文档）
    ✅ 保存位置：建议桌面（方便查找和打开）
  4. 预览网页：找到桌面的index.html文件，双击打开，自动用浏览器展示网页效果
⚠️
小白高频易错点（必看）：
1. 文件名后缀必须是.html，不能写成htm、html.txt，否则无法正常显示网页
2. 保存时一定要选「所有文件」，默认选项会导致文件变成.txt格式
3. 代码里的标点符号必须是英文，不能用中文的<>、""、；

三、 HTML万能基础模板（必须背熟！）

所有HTML网页的固定骨架，任何网页都从这个模板开始编写，缺一不可！

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个星天HTML网页</title> </head> <body> Hello！我在学星天HTML，零基础小白也能轻松学会～ </body> </html>

四、 模板代码逐句解析（小白秒懂）

点击展开逐句解释
  • <!DOCTYPE html>：文档类型声明，告诉浏览器这是HTML5网页，必须放在第一行
  • <html></html>：网页根标签，所有HTML代码都必须写在这对标签内
  • <head></head>：网页头部，负责页面配置，内容不会显示在网页上
  • <meta charset="UTF-8">：设置UTF-8编码，重中之重！没有它中文会显示乱码
  • <title></title>：设置网页标题，显示在浏览器顶部标签栏，方便识别网页
  • <body></body>：网页主体标签，网页上所有能看到的内容都要写在这里

五、 新手小练习

修改模板里的文字内容，比如改成「我是XXX，今天开始学习HTML，加油！」，保存后刷新网页，查看修改后的效果

我的第一个星天HTML网页

Hello！我在学星天HTML，零基础小白也能轻松学会～

3

HTML核心语法规则（新手必掌握，少踩坑）

HTML语法超简单，记住3个核心规则，就能避开90%的基础错误，写代码更规范！

一、 核心规则1：HTML标签的2种格式（重中之重）

HTML的核心就是标签，所有内容都需要用标签来标记，标签分为2种类型，规则必须记牢！

1. 双标签（最常用，成对出现）

格式：<标签名> 内容 </标签名> （开始标签 + 中间内容 + 结束标签）

核心特点：必须成对出现，结束标签比开始标签多一个 / 符号，缺一不可

<h1>这是一级标题（双标签）</h1> <p>这是段落内容（双标签）</p> <a href="#">这是链接（双标签）</a>
2. 单标签（自闭合，单独出现）

格式：<标签名> 或 <标签名/> （两种写法都可以，推荐第二种，更规范）

核心特点：没有内容，不需要结束标签，自身就能完成功能

<br> <hr/> <img src="1.jpg" alt="图片"/>

二、 核心规则2：标签可嵌套，绝对不能交叉

⚠️
嵌套 = 标签里面套标签（像套娃一样），必须层层包裹，不能互相交叉，否则浏览器会报错，页面显示异常

✅ 正确写法（规范嵌套）

<div> <h2>文章标题</h2> <p>文章段落内容，标签嵌套规范</p> </div>

❌ 错误写法（标签交叉，严禁使用）

<div> <h2>文章标题</div> </h2>

三、 核心规则3：标签属性（给标签添加功能）

属性可以让标签拥有更多功能，比如给链接指定跳转地址，给图片指定显示路径，属性必须写在开始标签内

标准格式：<标签名 属性名="属性值" 属性名2="属性值2"> 内容 </标签名>

💡
属性3大注意事项（必记）：
1. 属性必须写在开始标签内部，不能写在结束标签里
2. 属性值必须用双引号括起来（单引号也可以，推荐用双引号）
3. 多个属性之间用空格隔开，属性顺序没有要求
<a href="https://www.baidu.com" target="_blank">打开百度</a> <img src="photo.jpg" alt="我的照片" width="200"/>
4

小白必背：15个高频HTML标签（80%开发常用）

不用记太多标签，先掌握这15个核心高频标签，就能制作90%的基础网页，每个标签附详细用法+示例，一看就会

一、 标题标签（h1~h6）- 网页标题专用

📌
✅ h1最大（网页主标题，一个网页建议只写1个），h6最小
✅ 自动加粗+自动换行，自带上下间距，不用额外设置
✅ 用途：网页标题、文章标题、板块标题，突出重点内容
<h1>1级标题（网页主标题，最重要）</h1> <h2>2级标题（文章大标题/板块标题）</h2> <h3>3级标题（文章小标题/子板块标题）</h3> <h4>4级标题（次要标题）</h4> <h5>5级标题（辅助标题）</h5> <h6>6级标题（最小标题）</h6>

二、 文本类标签（最常用，必备）

1. 段落标签 <p> （必用）

作用：定义文本段落，自动换行，段落之间自带间距，排版更整齐美观

特点：双标签，独占一行，上下有默认间距

<p>这是第一段文字，星天HTML教学，专为零基础小白打造，通俗易懂，边学边练。</p> <p>这是第二段文字，段落标签可以让文本排版更规范，阅读体验更好，是网页中最常用的标签之一。</p>
2. 换行标签 <br> （单标签）

作用：强制换行，在段落内实现换行效果，不会像p标签那样产生间距

特点：单标签，无结束标签，直接换行，无额外间距

<p>这一行文字没有换行<br>这里用br标签强制换行了<br>这里又换了一行，换行后没有多余间距。</p>
3. 文本样式标签（加粗/倾斜/删除线）

作用：给文本添加样式，突出重点内容

<strong>文字加粗（推荐使用，语义更强，适合重点强调）</strong>
<b>文字加粗（单纯样式加粗，无特殊语义）</b>
<em>文字倾斜（推荐使用，语义更强）</em>
<i>文字倾斜（单纯样式倾斜）</i>
<u>文字添加下划线</u>
<del>文字添加删除线</del>

三、 链接标签 <a> （核心标签，必备）

核心作用：实现页面跳转、打开网址、锚点定位，是网页导航的核心标签

核心属性：href（必写，指定跳转地址）、target="_blank"（新窗口打开，推荐使用）

<a href="https://www.baidu.com">跳转到百度（当前窗口打开）</a>
<a href="https://www.baidu.com" target="_blank">新窗口打开百度（推荐）</a>
<a href="about.html">跳转到本地的关于页面</a>
<a href="#top">回到页面顶部（锚点跳转）</a>

四、 图片标签 <img> （单标签，必学）

核心作用：在网页中插入图片，让页面更生动美观

3个必写属性：src（图片路径，必填）、alt（图片加载失败提示）、width/height（图片尺寸）

<img src="scenery.jpg" alt="风景图" width="300"/>
<img src="https://img.xxx.com/photo.jpg" alt="网络图片" height="200"/>
⚠️
图片不显示？大概率是src路径错误！
1. 本地图片：必须和html文件放在同一文件夹，文件名完全一致（区分大小写，比如a.jpg≠A.jpg）
2. 网络图片：确保图片网址能直接在浏览器打开，网址不能有误

五、 列表标签（排版有序，整洁美观）

1. 无序列表 <ul>+<li> （项目符号）

作用：排列无顺序的内容，比如爱好、菜单、选项等，默认显示圆点符号

特点：ul是外层容器，li是列表项，必须配合使用，不能单独写

<ul> <li>HTML 基础入门</li> <li>CSS 网页美化</li> <li>JavaScript 交互开发</li> </ul>
2. 有序列表 <ol>+<li> （数字排序）

作用：排列有顺序的内容，比如步骤、排名、教程等，默认显示数字序号

特点：ol是外层容器，li是列表项，必须配合使用

<ol> <li>第一步：学习HTML基础标签和语法</li> <li>第二步：学习CSS，给网页美化样式</li> <li>第三步：学习JavaScript，实现网页交互功能</li> </ol>

六、 布局辅助标签（网页排版必备）

<div>块级盒子标签，独占一行，用来划分网页大区域，排版核心</div>
<span>行内标签，不独占一行，用来包裹行内小文字，设置局部样式</span>
<hr/>
5

小白实战：3个入门案例（从易到难，必练）

光看理论没用，多动手实操才是关键！3个案例整合所有核心知识点，复制即用，修改一下就是自己的作品，新手快速上手

案例1：简单个人介绍网页（基础必练）

难度：⭐ 用到标签：h1+hr+p+ul+ol+a+img （基础标签全覆盖）

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的个人介绍 | 星天HTML教学</title> </head> <body> <h1>✨ 我的个人小档案</h1> <hr/> <p>大家好！我是HTML零基础小白，正在跟着星天HTML教学学习网页制作，每天坚持练习，争取早日学会做自己的网页～</p> <h3>我的兴趣爱好</h3> <ul> <li>学习HTML网页制作</li> <li>看电影、听音乐</li> <li>户外运动、爬山徒步</lili>户外运动、爬山徒步</li> </ul> <h3>我的学习目标</h3> <ol> <li>熟练掌握HTML所有基础标签用法</li> <li>学会用CSS给网页美化样式，让页面更好看</li> <li>做出属于自己的个人主页和图文网页</li> </ol> <h3>我的个人主页</h3> <p><a href="#" target="_blank">点击访问我的个人主页</a></p> <h3>我的头像</h3> <img src="touxiang.jpg" alt="个人头像" width="200"/> </body> </html>

案例2：图文展示网页（进阶必练）

难度：⭐⭐ 用到标签：h1+h2+p+img+br+div+hr （图文排版核心）

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>美景分享 | 星天HTML教学</title> </head> <body> <h1>🌿 我的旅行美景分享</h1> <hr/> <div> <h2>海边日落</h2> <img src="sunset.jpg" alt="海边日落" width="400"/> <p>日落时分，夕阳把海面染成温暖的橘红色，波光粼粼的海面格外迷人，晚风拂面，惬意又治愈。<br>这是我海边旅行时拍下的美景，每一帧都值得珍藏。</p> </div> <div> <h2>山间云海</h2> <img src="cloud.jpg" alt="山间云海" width="400"/> <p>清晨登上山顶，无边无际的云海尽收眼底，山峰在云雾中若隐若现，宛如人间仙境，让人忘却所有疲惫。</p> </div> <div> <h2>林间小路</h2> <img src="road.jpg" alt="林间小路" width="400"/> <p>夏日的林间小路绿树成荫，阳光透过树叶洒下斑驳光影，草木清香扑面而来，走在其中格外舒服自在。</p> </div> </body> </html>

案例3：网址导航网页（实用必备）

难度：⭐⭐ 用到标签：h1+h3+ul+li+a+hr+div （实用导航制作）

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的实用网址导航 | 星天HTML教学</title> </head> <body> <h1>🔍 我的常用网址导航</h1> <hr/> <div> <h3>学习类网站</h3> <ul> <li><a href="https://www.bilibili.com" target="_blank">哔哩哔哩（学习视频）</a></li> <li><a href="https://www.baidu.com" target="_blank">百度（搜索资料）</a></li> <li><a href="https://fanyi.baidu.com" target="_blank">百度翻译（中英文互译）</a></li> </ul> </div> <div> <h3>娱乐类网站</h3> <ul> <li><a href="https://www.douyin.com" target="_blank">抖音（短视频娱乐）</a></li> <li><a href="https://www.iqiyi.com" target="_blank">爱奇艺（影视追剧）</a></li> <li><a href="https://www.kugou.com" target="_blank">酷狗音乐（听歌放松）</a></li> </ul> </div> <div> <h3>工具类网站</h3> <ul> <li><a href="https://tool.lu" target="_blank">在线工具大全</a></li> <li><a href="https://www.photopea.com" target="_blank">在线图片编辑</a></li> <li><a href="https://www.doc88.com" target="_blank">文档资料查询</a></li> </ul> </div> </body> </html>
6

常见错误&避坑指南（小白必看）

❌
小白高频5大错误（避坑重点）
1. 文件名后缀错误：把.html写成.txt，导致无法正常显示网页
2. 标签忘记闭合：双标签只写开始不写结束，页面排版混乱
3. 标点用成中文：把英文<>、""写成中文《》、“”，代码失效
4. 图片路径错误：图片和html文件不同文件夹，或文件名大小写不一致
5. 编码未设置：忘记写<meta charset="UTF-8">，中文显示乱码
✅
新手快速排错3个技巧
1. 检查标签：所有双标签必须成对出现，一一对应闭合
2. 检查标点：代码里所有符号全部换成英文标点
3. 检查路径：图片、本地网页链接路径一定要正确
7

小白学习文档（完整版）

一、 入门必备基础

  • 开发工具：记事本（新手）、VS Code（进阶），无需安装复杂软件
  • 运行方式：代码保存为.html格式，双击用浏览器打开即可预览
  • 核心原则：标签闭合、标点英文、路径正确，代码规范不出错

二、 核心标签速查表（必记）

  • 基础结构：!DOCTYPE html、html、head、meta、title、body（网页骨架）
  • 文本排版：h1~h6（标题）、p（段落）、br（换行）、hr（水平线）
  • 文本样式：strong（加粗）、em（倾斜）、u（下划线）、del（删除线）
  • 链接图片：a（链接，href+target属性）、img（图片，src+alt+width属性）
  • 列表排版：ul+li（无序列表）、ol+li（有序列表）
  • 布局标签：div（块级）、span（行内）

三、 学习步骤规划（小白专用）

  1. 第1天：认识HTML，掌握基础模板，做出第一个简单网页
  2. 第2天：熟记核心语法规则，掌握文本类、标题类标签用法
  3. 第3天：学会链接、图片标签，制作简单图文网页
  4. 第4天：掌握列表、布局标签，制作网址导航、个人介绍网页
  5. 第5天：多练3个实战案例，巩固所有知识点，熟练运用各类标签
8

常见问题解答（FAQ）

❓
问：为什么我的网页中文显示乱码？
答：缺少编码设置，在head标签内添加<meta charset="UTF-8">即可解决
❓
问：图片为什么显示不出来？
答：1.图片和html文件要放同一文件夹 2.文件名大小写一致 3.src路径填写正确
❓
问：链接点击没反应？
答：检查a标签的href属性是否填写正确，网址要带https://，本地网页要写正确文件名
❓
问：学习HTML之后，下一步学什么？
答：先学CSS（给网页美化样式），再学JavaScript（实现网页交互功能），三步就能做完整网页