HTML（HyperText Markup Language）和 CSS（Cascading Style Sheets）与 JavaScript 是构建网页的三大核心技术，三者紧密配合，HTML 负责内容结构，CSS 负责呈现样式，JavaScript 负责网页的交互和动态效果。
HTML 概述
定义
HTML 是一种用于创建网页的标准标记语言，它使用标记标签来描述网页的结构和内容。浏览器通过解析 HTML 代码，将其渲染成用户可见的网页。
基本结构
一个简单的 HTML 文档通常包含以下基本部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例页面</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一段段落文本。</p>
</body>
</html>
<!DOCTYPE html>：声明文档类型为 HTML5。<html>：根标签，包裹整个 HTML 文档。<head>：包含文档的元数据，如字符编码、页面标题等，这些信息不会直接显示在页面上。<title>：设置页面在浏览器标签栏显示的标题。<body>：包含页面的可见内容，如文本、图片、链接等。
常用标签
- 标题标签：
<h1>–<h6>，用于定义不同级别的标题，<h1>级别最高，字体最大。 - 段落标签：
<p>，用于定义段落文本。 - 链接标签：
<a>，用于创建超链接，例如<a href="https://www.example.com">示例链接</a>。 - 图片标签：
<img>，用于在页面中插入图片，例如<img src="example.jpg" alt="示例图片">。 - 列表标签：有序列表
<ol>和无序列表<ul>，配合列表项<li>使用，用于创建列表。
CSS 概述
定义
CSS 是一种用于描述 HTML 元素如何显示的样式表语言，它可以控制网页的布局、颜色、字体、大小等外观样式，使网页更加美观和易读。
引入方式
- 内联样式：直接在 HTML 标签的
style属性中添加 CSS 样式，例如<p style="color: red;">这是红色文本</p>。 - 内部样式表：在 HTML 文件的
<head>标签中使用<style>标签定义 CSS 样式。如下所示：
<head>
<style>
p {
color: blue;
}
</style>
</head>- 外部样式表：将 CSS 代码保存为一个独立的
.css文件，然后在 HTML 文件的<head>标签中使用<link>标签引入。如下所示：
<head>
<link rel="stylesheet" href="styles.css">
</head>常用属性
- 颜色属性：
color用于设置文本颜色，background-color用于设置元素的背景颜色，例如p { color: green; background-color: yellow; }。 - 字体属性：
font-family用于设置字体类型，font-size用于设置字体大小，font-weight用于设置字体粗细，例如h1 { font-family: Arial; font-size: 24px; font-weight: bold; }。 - 盒模型属性：包括
width（宽度）、height（高度）、margin（外边距）、padding（内边距）和border（边框），用于控制元素的尺寸和间距，例如div { width: 200px; height: 100px; margin: 10px; padding: 20px; border: 1px solid black; }
JavaScript 概述
定义
JavaScript 是一种轻量级的脚本语言，用于为网页添加交互性和动态效果。它可以直接嵌入到 HTML 页面中，也可以作为外部文件引入。
引入方式
- 内联脚本：直接在 HTML 标签的事件属性中添加 JavaScript 代码，例如
<button onclick="alert('Hello!')">点击我</button>。 - 内部脚本：在 HTML 文件的
<head>或<body>标签中使用<script>标签定义 JavaScript 代码。如下所示：
<head>
<script>
function showMessage() {
alert('这是一个消息！');
}
</script>
</head>- 外部脚本：将 JavaScript 代码保存为一个独立的
.js文件，然后在 HTML 文件的<head>或<body>标签中使用<script>标签引入。如下所示：
<body>
<script src="script.js"></script>
</body>- 常用操作：
- DOM 操作：Document Object Model（文档对象模型）允许 JavaScript 访问和修改 HTML 元素。例如，获取一个元素并修改其内容：
<!DOCTYPE html>
<html lang="en">
<body>
<p id="myParagraph">原始文本</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.textContent = '修改后的文本';
</script>
</body>
</html>- 事件处理：JavaScript 可以监听 HTML 元素的各种事件，如点击、鼠标移动等。例如，为按钮添加点击事件：
<!DOCTYPE html>
<html lang="en">
<body>
<button id="myButton">点击我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function () {
alert('按钮被点击了！');
});
</script>
</body>
</html>
HTML 与 CSS 的协同工作
HTML 负责搭建网页的骨架，定义了网页中有哪些元素和内容；而 CSS 则为这些元素添加样式，使其更加美观和吸引人。通过选择器（如元素选择器、类选择器、ID 选择器等），CSS 可以精确地控制 HTML 元素的样式。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.highlight {
color: orange;
font-weight: bold;
}
</style>
<title>HTML + CSS 示例</title>
</head>
<body>
<p>这是一段普通文本。</p>
<p class="highlight">这是一段高亮显示的文本。</p>
</body>
</html>在上述示例中，HTML 定义了两个段落元素，而 CSS 通过类选择器 .highlight 为第二个段落添加了橙色文本颜色和加粗字体样式。
HTML、CSS 与 JavaScript 的协同工作
HTML 负责搭建网页的骨架，定义了网页中有哪些元素和内容；CSS 为这些元素添加样式，使其更加美观和吸引人；JavaScript 则为网页添加交互性和动态效果。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.highlight {
color: orange;
font-weight: bold;
}
</style>
<title>HTML + CSS + JS 示例</title>
</head>
<body>
<p>这是一段普通文本。</p>
<p class="highlight">这是一段高亮显示的文本。</p>
<button id="changeTextButton">改变文本</button>
<script>
const button = document.getElementById('changeTextButton');
const paragraph = document.querySelector('.highlight');
button.addEventListener('click', function () {
paragraph.textContent = '文本已改变！';
});
</script>
</body>
</html>在上述示例中，HTML 定义了段落元素和按钮，CSS 通过类选择器 .highlight 为段落添加样式，JavaScript 为按钮添加了点击事件，点击按钮后会改变段落的文本内容。
HTML+CSS代码使用方法
1. 编写 HTML 代码
HTML 是用于构建网页结构的基础，你可以使用任何文本编辑器（如记事本、Visual Studio Code、Sublime Text 等）来编写 HTML 代码。
2. 编写 CSS 代码
CSS 用于为 HTML 元素添加样式，同样可以使用文本编辑器编写 CSS 代码。如记事本、Visual Studio Code、Sublime Text 等）来编写 CSS代码。
3. 保存代码
将编写好的 HTML 文件保存为 .html 扩展名，如 index.html；如果使用了外部样式表，将 CSS 文件保存为 .css 扩展名，如 styles.css。确保 HTML 文件和 CSS 文件在同一目录下（如果使用相对路径引入），或者根据实际情况调整引入路径。尤其要注意HTML代码中的<link rel=”stylesheet” href=”styles.css”>行，<link rel=”stylesheet” href=”styles.css”>代表CSS的名字必须为styles.css，且styles.css和index.html在同一目录下。当然，路径、CSS名称可以按需修改，只要css和html文件位置、名称符合修改的代码就行。
须知：本网站大多数开源HTML+CSS代码都不是使用原始的命名规则，例如实现一个聚光灯效果的HTML代码中的<link rel=”stylesheet” href=”css/聚光灯.css” />表明css文件名为聚光灯.css，聚光灯.css应该是在一个叫css的文件夹中，HTML文件假设为 index.html，那么 index.html与css文件夹放在一块，聚光灯.css放在css文件夹里即可正常使用HTML+CSS代码实现一个聚光灯效果。
4. 在浏览器中查看效果
打开浏览器（如 Chrome、Firefox 等），使用 “文件” -> “打开文件” 菜单，选择保存好的 HTML 文件即可在浏览器中查看网页效果。如果对代码进行了修改，保存后刷新浏览器页面，即可看到更新后的效果。
HTML + CSS + JS 代码使用方法
1.编写 HTML 代码
HTML 是用于构建网页结构的基础，你可以使用任何文本编辑器（如记事本、Visual Studio Code、Sublime Text 等）来编写 HTML 代码。
2.编写 CSS 代码
CSS 用于为 HTML 元素添加样式，同样可以使用文本编辑器编写 CSS 代码。
3.编写 JavaScript 代码
使用文本编辑器编写 JavaScript 代码，可以将其作为内联脚本、内部脚本或外部脚本引入 HTML 文件。
4.保存代码
将编写好的 HTML 文件保存为 .html 扩展名，如 index.html。
如果使用了外部样式表，将 CSS 文件保存为 .css 扩展名，如 styles.css。
如果使用了外部脚本，将 JavaScript 文件保存为 .js 扩展名，如 script.js。
确保 HTML 文件、CSS 文件和 JavaScript 文件在同一目录下（如果使用相对路径引入），或者根据实际情况调整引入路径。
5.在浏览器中查看效果
打开浏览器（如 Chrome、Firefox 等），使用 “文件” -> “打开文件” 菜单，选择保存好的 HTML 文件即可在浏览器中查看网页效果。如果对代码进行了修改，保存后刷新浏览器页面，即可看到更新后的效果。
注意事项
本网站的开源前端代码均是网络收集而来，仅供学习使用。
