📘 HTML & JavaScript 基础 · 互动学习

每一个标签都「活」在页面上 —— 对照代码，看见效果

🧱 HTML 基础 骨架

📄 1.1 概念
HTML（超文本标记语言）是构建网页的骨架。 浏览器读取 HTML 文件，将其渲染成可视页面。 下面的代码就是最基础的网页结构：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到我的主页</h1> <p>这是一个段落。</p> </body> </html>
▶ 渲染效果

欢迎来到我的主页

这是一个段落。

📝 文本标签 h1 ~ h6 · p · br · hr · strong · em

<h1> ~ <h6> 标题
六级标题，数字越大字号越小。
▶ 渲染效果

h1 一级标题

h2 二级标题

h3 三级标题

h4 四级标题

h5 五级标题
h6 六级标题
<h1>h1 一级标题</h1> <h2>h2 二级标题</h2> <h3>h3 三级标题</h3> <h4>h4 四级标题</h4> <h5>h5 五级标题</h5> <h6>h6 六级标题</h6>
<p> 段落
定义一个段落，浏览器会自动在段落前后添加间距。
▶ 渲染效果

这是第一个段落。段落之间会有间距。

这是第二个段落。Lorem ipsum dolor sit amet.

<p>这是第一个段落。段落之间会有间距。</p> <p>这是第二个段落。Lorem ipsum dolor sit amet.</p>
<br> · <hr> 换行 · 水平线
<br> 换行（单标签），<hr> 绘制水平分割线。
▶ 渲染效果

第一行文字
第二行文字（使用了 <br> 换行）

上面有一条水平线（<hr>）

<p> 第一行文字<br /> 第二行文字（使用了 &lt;br&gt; 换行） </p> <hr /> <p>上面有一条水平线（&lt;hr&gt;）</p>
<strong> · <em> · <b> · <i> 加粗 · 斜体
<strong> / <b> 加粗； <em> / <i> 斜体。 strong 和 em 带有语义强调。
▶ 渲染效果

strong 加粗（语义强调） ， b 加粗（仅样式）

em 斜体（语义强调） ， i 斜体（仅样式）

<p> <strong>strong 加粗（语义强调）</strong> ， <b>b 加粗（仅样式）</b> </p> <p> <em>em 斜体（语义强调）</em> ， <i>i 斜体（仅样式）</i> </p>
<a> 超链接
使用 href 属性指定目标地址。
▶ 渲染效果

访问示例网站 (新窗口打开)  ·  跳转到本页顶部 (锚点)

<a href="https://www.example.com" target="_blank">访问示例网站 (新窗口打开)</a> <a href="#sec-html">跳转到本页顶部 (锚点)</a>
<img> 图片
使用 src 指定图片路径，alt 提供替代文本。 请将图片放在 ./img/ 目录下。
▶ 渲染效果

📁 本地图片 (./img/photo1.jpg)

示例图片1 - 请将图片放在 ./img/photo1.jpg

📁 本地图片 (./img/photo2.jpg)

示例图片2 - 请将图片放在 ./img/photo2.jpg
💡 提示：在项目根目录创建 img 文件夹，放入 photo1.jpg 和 photo2.jpg 即可看到实际图片。
<!-- 图片标签示例 --> <img src="./img/photo1.jpg" alt="示例图片1" width="280" /> <img src="./img/photo2.jpg" alt="示例图片2" width="280" />

📋 列表 <ul> · <ol> · <li>

<ul> 无序列表 项目符号
▶ 渲染效果
  • 项目一
  • 项目二
  • 项目三
<ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
<ol> 有序列表 编号
▶ 渲染效果
  1. 第一步
  2. 第二步
  3. 第三步
<ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol>

📊 表格 <table> · <tr> · <th> · <td>

<table> 表格
<tr> 定义行，<th> 表头，<td> 单元格。 border="1" 添加边框。
▶ 渲染效果
姓名 年龄 城市
小明 20 北京
小红 22 上海
小刚 19 广州
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>小明</td> <td>20</td> <td>北京</td> </tr> <tr> <td>小红</td> <td>22</td> <td>上海</td> </tr> <tr> <td>小刚</td> <td>19</td> <td>广州</td> </tr> </table>

📦 容器 <div> · <span>

<div> 块级容器
<div> 是块级容器，独占一行，用于分组和布局。
▶ 渲染效果
div 区块 A — 背景为浅蓝色
div 区块 B — 背景为浅粉色
<div style="background:#dbeafe; padding:12px 16px;"> <strong>div 区块 A</strong> — 背景为浅蓝色 </div> <div style="background:#fce7f3; padding:12px 16px;"> <strong>div 区块 B</strong> — 背景为浅粉色 </div>
<span> 内联容器
<span> 是内联容器，不换行，用于对行内文本或元素分组。
▶ 渲染效果

这是一段文字，其中 span 高亮 了部分内容， span 改变颜色 且不换行。

<p> 这是一段文字，其中 <span style="background:#fef08a; padding:0 6px;">span 高亮</span> 了部分内容， <span style="color:#2563eb; font-weight:600;">span 改变颜色</span> 且不换行。 </p>

📝 表单 <form> · <input> · <label>

<form> 表单
表单用于收集用户输入。<label> 关联输入框， <input> 定义输入字段。
▶ 渲染效果
<form> <label for="username">用户名：</label> <input type="text" id="username" placeholder="请输入用户名" /> <br /> <label for="password">密码：</label> <input type="password" id="password" placeholder="请输入密码" /> <br /> <input type="submit" value="登录" /> </form>

⚡ JavaScript 基础 变量 · 条件 · 循环 · 函数

变量 & 输出 let · const · console.log · alert
使用 let 声明可变变量，const 声明常量。 console.log() 在控制台输出，alert() 弹出提示。

▶ 点击按钮体验：

💡 点击按钮查看效果（控制台按 F12 打开）
// 变量声明 let message = "Hello, JavaScript!"; const pi = 3.14159; // 输出 console.log(message); alert("这是一个 alert 弹窗！");
条件判断 if · else if · else
根据条件执行不同的代码块。

▶ 输入分数查看评级：

💡 输入分数（0-100），点击「评级」
let score = 85; if (score >= 90) { console.log("优秀"); } else if (score >= 60) { console.log("及格"); } else { console.log("不及格"); }
循环 for · while
for 循环和 while 循环用于重复执行代码。

▶ 运行循环示例（控制台输出）：

💡 点击按钮，在控制台查看循环输出
// for 循环 for (let i = 1; i <= 5; i++) { console.log("第 " + i + " 次循环"); } // while 循环 let count = 0; while (count < 3) { console.log("计数：" + count); count++; }
函数 function · 参数 · 返回值
函数封装可复用的代码块。

▶ 调用 add 函数：

+
💡 输入两个数字，点击「计算」
// 定义函数 function add(a, b) { return a + b; } // 调用函数 let result = add(3, 5); console.log(result); // 输出 8

🎯 DOM 操作入门 getElementById · querySelector · innerHTML · style · 事件

获取元素 & 修改内容 DOM 操作
通过 document.getElementById() 或 document.querySelector() 获取元素， 然后修改 innerHTML 或 textContent。

▶ 修改下方文字：

🖐️ 这是原始文本，点击「修改内容」会改变我。
// 获取元素 let el = document.getElementById("dom-demo-text"); // 修改内容 el.innerHTML = "新内容！<strong>HTML 可以嵌套</strong>"; // 修改样式 el.style.color = "#2563eb"; el.style.fontSize = "20px";
事件处理 onclick · addEventListener
响应用户操作，如点击、悬停等。

▶ 点击按钮触发事件：

💡 点击按钮查看效果
// 方式一：onclick document.getElementById("event-btn-1").onclick = function() { alert("按钮被点击了！"); }; // 方式二：addEventListener document.getElementById("event-btn-2").addEventListener("click", function() { document.getElementById("event-output").innerText = "内容已更新！"; });

🧮 综合示例 · 计数器 完整交互

计数器 HTML + CSS + JS
点击按钮增加或减少数值，实时更新显示。
▶ 交互效果
0
<!-- HTML --> <h2>计数器</h2> <p id="counter">0</p> <button id="increment">加一</button> <button id="decrement">减一</button> <!-- JavaScript --> let count = 0; const counterDisplay = document.getElementById("counter"); document.getElementById("increment").onclick = function() { count++; counterDisplay.textContent = count; }; document.getElementById("decrement").onclick = function() { count--; counterDisplay.textContent = count; };

✏️ 小练习 动手实践

📋 个人简介页面 综合练习
任务： 编写一个个人简介 (profile) 页面，介绍你自己。 包含：名字、身份、成就、爱好等。 可以使用本页学到的任何标签！

📌 建议包含：

  • 使用 <h1> 显示你的名字
  • 使用 <p> 写一段自我介绍
  • 使用 <ul> 或 <ol> 列出你的爱好或技能
  • 使用 <img> 放一张你的照片（或占位图）
  • 使用 <a> 添加一个链接到你的社交媒体或作品集
  • 使用 <table> 展示一些个人信息（如教育经历）
💡 提示：参考文档中的示例，在本地新建一个 profile.html 文件， 用浏览器打开查看效果。不断修改、刷新，直到满意为止！
↑ 回到顶部 🌟 查看示例 (仅供灵感)