HTML5 JavaScript教程从哪学起？核心要点有哪些？-建站教程-锦华智联科技

HTML5 + JavaScript 综合教程

这份教程分为三个主要部分：

（图片来源网络，侵删）

第一部分：HTML5 基础 - 构建网页的骨架。
第二部分：JavaScript 基础 - 为网页注入灵魂和交互性。
第三部分：项目实战 - 将所学知识整合,创建一个简单的动态网页。

第一部分：HTML5 基础

HTML (HyperText Markup Language) 是用来描述网页结构的标记语言，HTML5 是其最新的版本，引入了许多新的语义化标签和功能，让网页结构更清晰、功能更强大。

什么是 HTML？

想象一下，你要盖一座房子，HTML 就是房子的钢筋骨架，它定义了哪里是头部，哪里是正文，哪里是标题,哪里是段落。

第一个 HTML 页面

创建一个名为 index.html 的文件，然后用文本编辑器（如 VS Code, Sublime Text, 甚至记事本）打开它,输入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个段落。</p>
    <a href="https://www.google.com">这是一个链接，点击我</a>
</body>
</html>

代码解释：

（图片来源网络，侵删）

<!DOCTYPE html>: 声明这是一个 HTML5 文档。
<html>: 整个网页的根元素。
<head>: 包含网页的元数据（数据的数据），比如标题、字符编码、引入的样式表等,这些内容不会直接显示在页面上。
<title>: 显示在浏览器标签页上的标题。
<body>: 包含所有在页面上可见的内容，如标题、段落、图片、链接等。
<h1>: 一级标题,最重要的标题。
<p>: 段落标签。
<a>: 链接标签，href 属性指定链接的目标地址。

HTML5 语义化标签

HTML5 引入了许多语义化标签，让代码更容易阅读，也有利于搜索引擎优化（SEO）。

<header>: 页面或区域的头部。
<nav>: 导航链接区域。
<main>: 页面的主要内容。
<article>: 独立的内容单元,比如一篇博客文章。
<section>: 文档中的一个区域,通常有标题。
<aside>: 侧边栏或与主要内容相关但独立的内容。
<footer>: 页面或区域的底部。

示例：

<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <a href="#">首页</a> | <a href="#">lt;/a> | <a href="#">联系</a>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是文章的正文内容。</p>
        </article>
    </main>
    <aside>
        <h3>侧边栏</h3>
        <p>这里是侧边栏的一些链接或信息。</p>
    </aside>
    <footer>
        <p>&copy; 2025 我的网站，保留所有权利。</p>
    </footer>
</body>

其他常用 HTML5 元素

媒体元素:
- <video src="movie.mp4" controls></video>: 插入视频，controls 属性显示播放控件。
- <audio src="sound.mp3" controls></audio>: 插入音频。
表单元素:
- <form>: 定义表单。
- <input>: 输入字段，类型可以是 text (文本), password (密码), email (邮箱), submit (提交按钮) 等。
- <button>: 按钮。
- <label>: 为输入字段提供标签。

第二部分：JavaScript 基础

JavaScript (JS) 是一种脚本语言，它可以让你的网页“活”起来，它可以响应用户的操作（如点击、输入），修改网页内容,甚至与服务器通信。

什么是 JavaScript？

继续用盖房子的比喻，如果说 HTML 是骨架，CSS 是装修和粉刷，JavaScript 就是房子的水电系统、智能家居和安防系统,它让房子具备交互和智能功能。

（图片来源网络，侵删）

如何在 HTML 中使用 JavaScript？

最常见的方式是在 HTML 文件中通过 <script> 标签引入。

内联脚本（直接写在 HTML 文件中） 在 <body> 或 <head> 标签内添加 <script>

<!DOCTYPE html>
<html lang="zh-CN">
<head>JS 示例</title>
</head>
<body>
    <h1 id="myHeading">你好，世界！</h1>
    <button id="myButton">点击我</button>
    <script>
        // 1. 获取元素
        const heading = document.getElementById('myHeading');
        const button = document.getElementById('myButton');
        // 2. 为按钮添加点击事件监听器
        button.addEventListener('click', function() {
            // 3. 当按钮被点击时，改变标题的文本
            heading.textContent = '你点击了按钮！';
        });
    </script>
</body>
</html>


代码解释：

document.getElementById('myHeading'): 在整个文档中查找 id 为 myHeading 的元素。
addEventListener('click', function() { ... }): 为按钮添加一个“点击”事件的监听器，当点击事件发生时,执行后面的函数。
heading.textContent = '...': 修改 heading 元素的文本内容。

JavaScript 核心概念
a. 变量
用于存储数据，使用 let 和 const (推荐) 来声明变量。

let: 声明一个可以被重新赋值的变量。
const: 声明一个常量,一旦赋值就不能改变。

let name = "张三"; // 可以改变 name = "李四";
const age = 25;    // 不能改变 age = 26; // 会报错
b. 数据类型

字符串: 文本，用单引号或双引号括起来。let greeting = "你好";
数字: 整数或小数。let score = 95.5;
布尔值: true 或 false。let isStudent = true;
数组: 一个有序的数据列表。let colors = ['红色', '绿色', '蓝色'];
对象: 键值对的集合。let person = { name: "王五", age: 30 };

c. 函数
可重复使用的代码块。
// 定义一个函数
function sayHello(userName) {
    return "你好, " + userName + "!";
}
// 调用函数
let message = sayHello("赵六");
console.log(message); // 在浏览器控制台打印 "你好, 赵六!"
d. 条件语句
根据不同的条件执行不同的代码。
let score = 85;
if (score >= 90) {
    console.log("优秀！");
} else if (score >= 60) {
    console.log("及格。");
} else {
    console.log("不及格。");
}
e. 循环
重复执行代码。
let fruits = ['苹果', '香蕉', '橙子'];
// for...of 循环遍历数组
for (let fruit of fruits) {
    console.log(fruit);
}
操作 DOM (文档对象模型)
DOM 是浏览器将 HTML 文档转换成一个树状结构，JavaScript 可以通过这个结构来访问和修改 HTML 元素。


选择元素:

document.getElementById('id'): 通过 ID 选择。
document.querySelector('css选择器'): 通过 CSS 选择器（如类名、标签名）选择第一个匹配的元素。
document.querySelectorAll('css选择器'): 选择所有匹配的元素。



修改元素:

element.textContent: 修改元素的文本内容。
element.innerHTML: 修改元素的 HTML 内容。
element.style.property: 修改元素的 CSS 样式。element.style.color = 'blue';
`