HTML+CSS+JS基础知识大全
一、HTML 基础
1.1 什么是 HTML
HTML，即超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。它通过一系列的标签（tags）来描述网页的结构和内容，这些标签就像是网页的 “骨架”，告诉浏览器如何展示文本、图像、链接、表格等各种元素，从而将网页的内容呈现给用户。简单来说，HTML 是构建网页的基石，没有它，网页就无法正常显示各种信息。例如，当你在浏览器中输入一个网址并访问时，浏览器会读取该网页对应的 HTML 文件，然后根据其中的标签指令，将网页内容以正确的格式展示出来。
1.2 HTML 文档结构
一个基本的 HTML 文档包含以下几个关键部分：
<!DOCTYPE html>：这是文档类型声明，必须位于 HTML 文档的第一行，它告诉浏览器该文档遵循的 HTML 版本规范，在 HTML5 中，统一使用<!DOCTYPE html>，确保浏览器以标准模式渲染页面，避免出现兼容性问题。
<html>：这是 HTML 文档的根标签，所有其他 HTML 元素都包含在这个标签内，它标志着 HTML 文档的开始和结束，一个 HTML 文件只能有一个<html>标签。
<head>：头部标签，用于定义文档的头部信息，包含了一些辅助性的标签和元数据，如<title>（定义网页标题）、<meta>（定义字符编码、页面描述等元信息）、<link>（用于引入外部样式表等）、<script>（用于引入 JavaScript 脚本等）。这些信息不会直接显示在网页的主体内容中，但对网页的正确显示和功能实现起着重要作用。例如，<title>标签中的内容会显示在浏览器的标题栏上，帮助用户识别页面；<meta charset="UTF - 8">用于设置网页的字符编码为 UTF - 8，确保网页能正确显示各种字符。
<body>：主体标签，包含了网页的可见内容，如文本、图像、链接、表格、表单等各种元素。用户在浏览器中看到的实际内容都在<body>标签内。例如，<p>这是一个段落。</p>这样的文本段落元素，以及<img src="image.jpg" alt="示例图片">这样的图片元素，都应该放在<body>标签中。
以下是一个简单的 HTML 文档结构示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个简单的段落。</p>
</body>
</html>
1.3 常用 HTML 标签
1.3.1 标题标签（<h1> - <h6>）
HTML 提供了六级标题标签，从<h1>到<h6>，用于定义不同级别的标题。<h1>是最高级别的标题，通常用于表示网页的主标题，<h6>是最低级别的标题。随着级别的降低，标题的字体大小会逐渐减小，语义重要性也逐渐降低。例如：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
在浏览器中显示时，各级标题会有明显的大小差异，便于用户区分页面内容的层次结构。一般来说，一个网页中应该只有一个<h1>标签，用于突出页面的核心主题，其他级别的标题可以根据内容的逻辑结构适当使用。
1.3.2 段落标签（<p>）
<p>标签用于定义段落，它会自动在段落前后添加一些空白，使段落之间有明显的区分。在<p>标签内可以放置文本内容，例如：
<p>这是一个段落，用于展示一段相对独立的文本内容。可以包含多个句子，通过段落标签来组织和呈现，使网页内容更加清晰易读。</p>
如果需要在段落内换行，可以使用<br>标签，<br>是一个自闭合标签（即没有结束标签），例如：
<p>这是第一行文本<br>这是第二行文本</p>
1.3.3 链接标签（<a>）
<a>标签用于创建超链接，通过设置href属性来指定链接的目标地址。例如，创建一个指向百度的外部链接：
<a href="https://www.baidu.com">点击访问百度</a>
当用户点击 “点击访问百度” 这个文本时，浏览器会跳转到百度的网站。
如果要在新窗口中打开链接，可以设置target属性为_blank，例如：
<a href="https://www.baidu.com" target="_blank">在新窗口访问百度</a>
还可以创建内部链接，用于在同一页面内跳转到指定位置。首先需要给目标位置的元素添加一个id属性，例如：
<h2 id="section1">这是目标部分</h2>
然后在链接中使用#加上目标元素的id来创建内部链接：
<a href="#section1">跳转到目标部分</a>
当用户点击这个链接时，页面会自动滚动到id为section1的<h2>元素位置。
1.3.4 图像标签（<img>）
<img>标签用于在网页中插入图像，它是一个自闭合标签，需要设置src属性来指定图像的源文件地址。例如：
<img src="image.jpg" alt="美丽的风景">
其中，src属性的值是图像文件的路径，可以是相对路径（相对于当前 HTML 文件的位置）或绝对路径（完整的文件路径）。alt属性用于提供图像的替代文本，当图像无法显示时（例如文件路径错误或网络问题），浏览器会显示alt属性中的文本，同时alt属性对于搜索引擎优化（SEO）也很重要，能帮助搜索引擎理解图像的内容。
还可以设置图像的宽度和高度，通过width和height属性来实现，例如：
<img src="image.jpg" alt="美丽的风景" width="300" height="200">
这样可以指定图像在网页中显示的宽度为 300 像素，高度为 200 像素。如果只设置其中一个属性，另一个属性会按图像的原始比例自动调整。
1.3.5 列表标签（<ul>、<ol>、<li>）
无序列表（<ul>）：使用<ul>标签创建无序列表，列表项使用<li>标签定义，通常以项目符号（如圆点）显示。例如：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
有序列表（<ol>）：使用<ol>标签创建有序列表，同样列表项由<li>标签定义，会以数字或字母顺序显示。例如：
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
列表可以嵌套使用，即在一个列表项中再创建一个列表，例如：
<ul>
<li>主列表项1
<ul>
<li>子列表项1</li>
<li>子列表项2</li>
</ul>
</li>
<li>主列表项2</li>
</ul>
1.3.6 表格标签（<table>、<tr>、<td>、<th>）
<table>标签用于创建表格，表格由行和单元格组成。
<tr>标签定义表格中的一行，例如：
<tr>
<!-- 这里放置该行的单元格 -->
</tr>
<td>标签定义表格中的一个单元格，用于存放表格数据，例如：
<tr>
<td>单元格内容1</td>
<td>单元格内容2</td>
</tr>
<th>标签用于定义表格的表头单元格，通常表头文字会以加粗、居中的样式显示，以便与普通单元格区分，例如：
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
一个完整的简单表格示例如下：
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
</tr>
</table>
其中，border="1"属性用于设置表格的边框，值为 1 表示显示边框，值为 0 或不设置则表示不显示边框（在实际应用中，常使用 CSS 来更灵活地设置表格样式）。
1.3.7 表单标签（<form>及相关输入标签）
<form>标签用于创建表单，收集用户输入的数据。表单可以包含各种输入类型的元素，如文本框、密码框、单选按钮、复选框、下拉菜单等。
文本框（<input type="text">）：用于输入单行文本，例如：
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
</form>
这里的<label>标签用于为输入框提供描述信息，for属性的值与对应的<input>标签的id属性值相同，这样点击<label>文本时，会自动聚焦到对应的输入框。name属性用于标识输入框，在提交表单时，服务器可以通过name来获取输入框的值。
密码框（<input type="password">）：用于输入密码，输入的内容会以掩码形式显示（如星号或黑点），例如：
<form>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
</form>
单选按钮（<input type="radio">）：用于从多个选项中选择一个，多个单选按钮需要设置相同的name属性，通过value属性来区分不同的选项，例如：
<form>
<label for="male">男</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">女</label>
<input type="radio" id="female" name="gender" value="female">
</form>
复选框（<input type="checkbox">）：用于从多个选项中选择多个，每个复选框都有自己的name和value属性，例如：
<form>
<label for="hobby1">阅读</label>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby2">运动</label>
<input type="checkbox" id="hobby2" name="hobby" value="sports">
</form>
下拉菜单（<select>和<option>）：<select>标签创建下拉菜单，<option>标签定义菜单中的选项，例如：
<form>
<label for="city">城市：</label>
<select id="city" name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</form>
提交按钮（<input type="submit">）：用于提交表单数据到服务器，例如：
<form>
<!-- 其他输入元素 -->
<input type="submit" value="提交">
</form>
点击提交按钮后，表单数据会按照form标签的action属性指定的地址发送到服务器，method属性指定发送数据的方式（常用的有get和post）。
1.4 HTML 属性
HTML 标签可以拥有属性，属性为标签提供了额外的信息或设置，用于进一步定义标签的行为或外观。属性总是以名称 / 值对的形式出现，例如name="value"。
class属性：用于为 HTML 元素分配一个或多个类名，主要用于通过 CSS 样式表来为元素设置样式，也可以通过 JavaScript 来选择和操作具有相同类名的元素。例如：
<div class="container">这是一个具有container类的div元素\</div>
在 CSS 中可以这样定义.container类的样式：
.container {
background - color: lightblue;
padding: 10px;
}
id属性：为 HTML 元素分配一个唯一的标识符，在一个 HTML 文档中，每个id值必须是唯一的。可以通过 CSS 或 JavaScript 来选择和操作具有特定id的元素。例如：
<div id="myDiv">这是一个具有唯一id的div元素</div>
在 CSS 中可以这样定义#myDiv的样式：
#myDiv {
color: red;
font - size: 18px;
}
在 JavaScript 中可以通过document.getElementById('myDiv')来获取这个元素并进行操作。
style属性：允许直接在 HTML 元素上设置内联样式，不过通常不建议大量使用内联样式，因为这会使 HTML 代码和样式代码混合在一起，不利于维护。例如：
<p style="color: green; font - weight: bold;">这是一个设置了内联样式的段落\</p>
除了上述常见属性，不同的 HTML 标签还有各自特定的属性，如<a>标签的href属性、<img>标签的src属性等，用于实现标签的特定功能。
1.5 HTML 注释
HTML 注释用于在 HTML 代码中添加注释信息，注释内容不会在浏览器中显示，但可以帮助开发者理解和维护代码。注释的语法是：
<!-- 这是一个HTML注释 -->
可以在注释中添加对代码功能、逻辑、修改记录等的说明，例如：
<!-- 这是网站的头部区域，包含logo和导航栏 -->
<header>
<h1>我的网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</header>
注释还可以用于临时隐藏代码，在开发过程中，如果需要暂时不显示某些内容，可以将其注释掉，而不是直接删除，方便后续恢复。例如：
<!-- <p>这是一段暂时不需要显示的文本</p> -->
1.6 案例实践：创建简单网页
下面通过一个实际案例，展示如何运用上述 HTML 知识创建一个简单的网页。
<!DOCTYPE html>
<html lang="zh - CN">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device-width, initial - scale = 1.0">
<title>我的个人简介</title>
</head>
<body>
<!-- 网页头部 -->
<header>
<h1>欢迎来到我的个人页面</h1>
</header>
<!-- 个人信息部分 -->
<section>
<h2>个人信息</h2>
<p>姓名：张三</p>
<p>年龄：25岁</p>
<p>职业：前端开发工程师</p>
</section>
<!-- 工作经历部分 -->
<section>
<h2>工作经历</h2>
<ul>
<li>
<h3>公司A（2020 - 2022）</h3>
<p>担任前端开发工程师，负责公司网站的前端页面开发和维护。</p>
</li>
<li>
<h3>公司B（2022 - 至今）</h3>
<p>参与多个项目的前端开发工作，优化用户体验，提高页面性能。</p>
</li>
</ul>
</section>
<!-- 联系方式部分 -->
<section>
<h2>联系方式</h2>
<p>邮箱：zhangsan@example.com</p>
<p>电话：123 - 456 - 7890</p>
</section>
<!-- 网页底部 -->
<footer>
<p>© 2024 张三版权所有</p>
</footer>
</body>
</html>
二、CSS 基础
2.1 什么是 CSS
CSS，全称层叠样式表（Cascading Style Sheets），是一种用于描述 HTML 或 XML 文档样式的语言。它的主要作用是控制网页的样式和布局，包括字体、颜色、背景、边框、间距、排版等各个方面。通过 CSS，网页开发者可以将网页的结构（由 HTML 定义）和样式分离，使得网页的维护和更新更加方便。例如，我们可以使用 CSS 将网站所有标题的字体设置为 Arial，颜色设置为蓝色，而无需在每个 HTML 标题标签中重复设置这些样式。如果后续需要更改标题的样式，只需要在 CSS 中修改一处，整个网站的标题样式都会随之改变，大大提高了开发效率和代码的可维护性。简单来说，HTML 决定了网页的内容和结构，而 CSS 则负责让这些内容以美观、合理的方式展示给用户，它赋予了网页丰富的视觉效果和良好的用户体验。
2.2 CSS 引入方式
在网页中使用 CSS，有以下几种常见的引入方式：
2.2.1 内联样式
内联样式是直接在 HTML 元素的style属性中定义 CSS 样式。这种方式的优点是简单直接，作用范围明确，只对当前元素生效。例如：
<p style="color: red; font-size: 16px;">这是一个设置了内联样式的段落，文本颜色为红色，字体大小为16像素。</p>
在上述代码中，style属性的值color: red; font-size: 16px;就是 CSS 样式声明，color属性设置文本颜色为红色，font-size属性设置字体大小为 16 像素。多个样式声明之间用分号;分隔。然而，内联样式也有明显的缺点，它会使 HTML 代码和样式代码紧密耦合，不利于代码的维护和复用。如果有多个元素需要相同的样式，使用内联样式就需要在每个元素上重复编写相同的样式代码，增加了代码量和出错的可能性。所以，内联样式通常只用于对个别元素进行简单的、临时性的样式设置。
2.2.2 内部样式表
内部样式表是将 CSS 代码写在 HTML 文档的<head>标签内的<style>标签中。这种方式可以对整个 HTML 文档内的元素进行样式控制，实现了 HTML 结构和部分样式的分离。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>内部样式表示例</title>
<style>
p {
color: green;
font - weight: bold;
}
</style>
</head>
<body>
<p>这是一个应用了内部样式表的段落，文本颜色为绿色，字体加粗。</p>
</body>
</html>
在上述代码中，<style>标签内的p { color: green; font - weight: bold; }是 CSS 样式规则。p是选择器，表示选择所有的<p>元素，花括号内的color: green;设置文本颜色为绿色，font - weight: bold;设置字体加粗。使用内部样式表，当需要修改样式时，只需要在<style>标签内修改对应的样式规则，就可以影响到文档中所有被该选择器选中的元素。但它也有局限性，只能对当前 HTML 文档生效，无法在多个页面中复用样式。
2.2.3 外部样式表
外部样式表是将 CSS 代码写在一个独立的.css文件中，然后通过<link>标签将其引入到 HTML 文档中。这是在实际开发中最常用的方式，它实现了 HTML 结构和样式的完全分离，便于维护和管理，并且可以在多个 HTML 页面中复用同一个样式表。例如：
首先，创建一个名为styles.css的 CSS 文件，内容如下：
body {
background - color: lightgray;
}
h1 {
color: blue;
text - align: center;
}
然后，在 HTML 文档中引入这个 CSS 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>外部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>这是一个应用了外部样式表的标题</h1>
<p>这是页面的其他内容。</p>
</body>
</html>
在上述 HTML 代码中，<link>标签的rel="stylesheet"表示链接的是一个样式表文件，href="styles.css"指定了 CSS 文件的路径，这里是相对路径，表示styles.css文件与当前 HTML 文件在同一目录下。如果 CSS 文件在其他目录，需要根据实际情况调整路径。通过这种方式，多个 HTML 页面都可以引入同一个styles.css文件，实现样式的统一管理和复用。如果需要修改样式，只需要在styles.css文件中进行修改，所有引入该样式表的 HTML 页面都会自动更新样式。
2.3 CSS 选择器
CSS 选择器用于选择需要设置样式的 HTML 元素，通过选择器可以精确地控制哪些元素应用特定的样式。以下是常见的 CSS 选择器：
2.3.1 标签选择器
标签选择器通过 HTML 标签名称来选择元素。使用标签选择器可以快速为同一类型的所有元素设置相同的样式。例如：
p {
color: orange;
font - size: 14px;
}
上述代码中，p是标签选择器，它选择了 HTML 文档中所有的<p>元素，然后将这些元素的文本颜色设置为橙色，字体大小设置为 14 像素。这种方式简单直接，但缺乏针对性，如果只想对部分<p>元素设置样式，标签选择器就不太适用了。
2.3.2 类选择器（.class）
类选择器使用点号（.）加上类名来选择元素。一个 HTML 元素可以拥有一个或多个类名，通过类选择器可以为具有相同类名的元素设置相同的样式，也可以为不同类名的元素设置不同的样式，实现差异化的样式控制。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>类选择器示例</title>
<style>
.highlight {
background - color: yellow;
color: purple;
}
.big - font {
font - size: 20px;
}
</style>
</head>
<body>
<p class="highlight">这是一个具有highlight类的段落，背景为黄色，文本为紫色。</p>
<p class="highlight big - font">这是一个同时具有highlight和big - font类的段落，背景为黄色，文本为紫色，字体大小为20px。</p>
</body>
</html>
在上述代码中，.highlight和.big - font是类选择器。.highlight类选择器将具有highlight类的元素背景颜色设置为黄色，文本颜色设置为紫色；.big - font类选择器将具有big - font类的元素字体大小设置为 20 像素。一个元素可以同时拥有多个类名，多个类名之间用空格分隔，这样该元素就会应用所有这些类对应的样式。
2.3.3 ID 选择器（#id）
ID 选择器使用井号（#）加上 ID 名来选择元素。在 HTML 文档中，每个元素的 ID 值必须是唯一的，因此 ID 选择器可以精确地选择到特定的一个元素并设置其样式。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>ID选择器示例</title>
<style>
#unique - element {
border: 2px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div id="unique - element">这是一个具有唯一ID的div元素，有红色边框和10像素的内边距。</div>
</body>
</html>
在上述代码中，#unique - element是 ID 选择器，它选择了id为unique - element的<div>元素，并为其设置了 2 像素宽的红色边框和 10 像素的内边距。由于 ID 的唯一性，ID 选择器通常用于对特定的、独一无二的元素进行样式设置，比如页面的导航栏、特定的广告位等。
2.3.4 属性选择器
属性选择器根据元素的属性及属性值来选择元素。可以选择具有某个属性的所有元素，也可以选择属性值满足特定条件的元素。例如：
选择所有具有title属性的元素：
[title] {
color: green;
}
上述代码会将所有具有title属性的 HTML 元素的文本颜色设置为绿色。
选择type属性值为text的<input>元素：
input[type="text"] {
border: 1px solid blue;
}
这段代码会将所有type属性为text的<input>输入框设置为 1 像素宽的蓝色边框。属性选择器还支持更多复杂的匹配方式，如包含特定值、以特定值开头、以特定值结尾等，为选择元素提供了更灵活的方式。
2.3.5 伪类选择器
伪类选择器用于选择处于特定状态的元素，比如链接的不同状态（未访问、已访问、鼠标悬停、激活）、表单元素获得焦点时等。常见的伪类选择器有:link、:visited、:hover、:active、:focus等。例如：
链接的不同状态样式设置：
a:link {
color: blue;
text - decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text - decoration: underline;
}
a:active {
color: orange;
}
上述代码中，:link表示未访问的链接，设置其文本颜色为蓝色，无下划线；:visited表示已访问的链接，设置其文本颜色为紫色；:hover表示鼠标悬停在链接上时，设置文本颜色为红色，添加下划线；:active表示链接被激活（点击但未松开鼠标）时，设置文本颜色为橙色。通过这些伪类选择器，可以为链接在不同交互状态下提供不同的视觉反馈，提升用户体验。
表单元素获得焦点时的样式设置：
input:focus {
border: 2px solid green;
background - color: lightyellow;
}
这段代码会在<input>输入框获得焦点（用户点击输入框准备输入内容）时，将其边框设置为 2 像素宽的绿色，背景颜色设置为浅黄色，让用户清楚地知道当前可输入的位置。
2.4 CSS 常用属性
CSS 有众多属性，用于控制网页元素的各种样式和布局。以下是一些常用的 CSS 属性：
2.4.1 颜色属性（color、background - color 等）
color属性：用于设置文本的颜色。可以使用颜色名称（如red、blue、green等）、十六进制颜色值（如#FF0000表示红色，#0000FF表示蓝色）、RGB 值（如rgb(255, 0, 0)表示红色，rgb(0, 0, 255)表示蓝色）或 HSL 值等来指定颜色。例如：
p {
color: #333333;
}
上述代码将<p>元素的文本颜色设置为十六进制值#333333，这是一种深灰色。
background - color属性：用于设置元素的背景颜色，用法与color属性类似。例如：
body {
background - color: lightblue;
}
这段代码将整个页面的背景颜色设置为浅蓝色。
2.4.2 字体属性（font - family、font - size 等）
font - family属性：用于设置字体。可以指定多个字体，浏览器会按照顺序查找并使用第一个可用的字体。例如：
body {
font - family: Arial, sans - serif;
}
上述代码将页面的字体设置为 Arial，如果用户计算机上没有安装 Arial 字体，则会使用系统默认的无衬线字体（sans - serif）。
font - size属性：用于设置字体大小。可以使用像素（px）、百分比（%）、em、rem等单位来指定字体大小。例如：
h1 {
font - size: 32px;
}
这段代码将<h1>元素的字体大小设置为 32 像素。
font - weight属性：用于设置字体的粗细。可以使用关键字（如normal、bold、bolder、lighter）或数字（100 - 900，400 等同于normal，700 等同于bold）来指定。例如：
p {
font - weight: bold;
}
上述代码将<p>元素的字体设置为加粗。
font - style属性：用于设置字体的样式，如正常、斜体等。常见值有normal（正常）、italic（斜体）、oblique（倾斜）。例如：
p {
font - weight: bold;
}
这段代码将<em>元素的字体设置为斜体。
2.4.3 边框属性（border）
border属性用于设置元素的边框样式、宽度和颜色。它是一个复合属性，可以同时设置边框的各个方面，也可以分别使用border - width（边框宽度）、border - style（边框样式）、border - color（边框颜色）来单独设置。例如：
div {
border: 1px solid black;
}
上述代码为<div>元素设置了 1 像素宽、实线样式、黑色的边框。其中，1px是边框宽度，solid是边框样式（表示实线，还有dashed虚线、dotted点线、double双线等样式），black是边框颜色。也可以单独设置各个属性，如：
div {
border - width: 2px;
border - style: dashed;
border - color: red;
}
这段代码将<div>元素的边框设置为 2 像素宽、虚线样式、红色。
2.4.4 边距和内边距属性（margin、padding）
margin属性：用于设置元素的外边距，即元素与其他元素之间的距离。它也是一个复合属性，可以同时设置上、右、下、左四个方向的外边距，也可以分别使用margin - top、margin - right、margin - bottom、margin - left来单独设置。例如：
div {
margin: 10px;
}
上述代码为<div>元素设置了四个方向均为 10 像素的外边距。如果要分别设置不同方向的外边距，可以这样写：
div {
margin - top: 5px;
margin - right: 10px;
margin - bottom: 15px;
margin - left: 20px;
}
这段代码将<div>元素的上外边距设置为 5 像素，右外边距设置为 10 像素，下外边距设置为 15 像素，左外边距设置为 20 像素。
padding属性：用于设置元素的内边距，即元素内容与边框之间的距离。用法与margin类似。例如：
p {
padding: 5px;
}
上述代码为<p>元素设置了四个方向均为 5 像素的内边距。同样，也可以分别设置不同方向的内边距：
p {
padding - top: 2px;
padding - right: 4px;
padding - bottom: 6px;
padding - left: 8px;
}
这段代码将<p>元素的上内边距设置为 2 像素，右内边距设置为 4 像素，下内边距设置为 6 像素，左内边距设置为 8 像素。
2.4.5 布局属性（display、float、position 等）
display属性：用于设置元素的显示类型，常见的值有block（块级元素，独占一行，可设置宽度、高度、边距等）、inline（行内元素，不会独占一行，宽度、高度、上下边距等属性无效）、inline - block（行内块元素，既具有行内元素的特性，又具有块级元素的特性，可以设置宽度、高度、边距等，多个行内块元素可以在同一行显示）、none（元素不显示，不占据页面空间）等。例如：
span {
display: block;
}
上述代码将原本是行内元素的<span>设置为块级
三、JavaScript 基础
3.1 什么是 JavaScript
JavaScript 是一种高级的、解释型的编程语言，广泛应用于网页开发领域，用于为网页添加交互性和动态功能。它可以直接在浏览器中运行，通过操作 HTML 和 CSS，实现网页内容的动态更新、用户交互响应、表单验证、动画效果等功能。与 HTML 和 CSS 不同，HTML 负责构建网页的结构，CSS 负责美化网页的样式，而 JavaScript 则赋予网页 “生命”，使其能够响应用户的操作，如点击按钮、输入文本、滚动页面等。例如，当你在网页上点击一个按钮，弹出一个提示框，或者在输入框中输入内容时，实时检查输入格式是否正确，这些都是 JavaScript 在发挥作用。它不仅可以运行在浏览器端，借助 Node.js，JavaScript 还可以在服务器端运行，实现服务器端的编程和开发，如构建 Web 服务器、处理网络请求等。
3.2 JavaScript 引入方式
在 HTML 页面中使用 JavaScript，有以下两种常见的引入方式：
3.2.1 内部脚本
内部脚本是将 JavaScript 代码直接写在 HTML 页面的<script>标签中。<script>标签可以放在 HTML 文档的<head>标签或<body>标签内，通常建议将<script>标签放在<body>标签的末尾，这样可以确保 HTML 页面的结构和样式先加载完成，再加载 JavaScript 代码，提高页面的加载速度和用户体验。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>内部脚本示例</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<!-- 内部脚本 -->
<script>
// 这里编写JavaScript代码
alert('这是一个内部脚本弹出的提示框！');
</script>
</body>
</html>
在上述代码中，<script>标签内的alert('这是一个内部脚本弹出的提示框！');是 JavaScript 代码，alert函数用于弹出一个提示框，显示指定的文本内容。这种方式适用于少量的 JavaScript 代码，或者只在当前页面使用的特定功能代码。
3.2.2 外部脚本
外部脚本是将 JavaScript 代码写在一个独立的文件中，文件扩展名为.js，然后通过<script>标签的src属性将其引入到 HTML 页面中。这种方式有助于将 JavaScript 代码与 HTML 代码分离，提高代码的可维护性和复用性。例如：
首先，创建一个名为script.js的文件，内容如下：
alert('这是一个外部脚本弹出的提示框！');
然后，在 HTML 页面中引入这个文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>外部脚本示例</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<!-- 引入外部脚本 -->
<script src="script.js"></script>
</body>
</html>
在上述代码中，<script src="script.js"></script>表示引入当前目录下的script.js文件。如果script.js文件在其他目录，需要根据实际路径进行调整。需要注意的是，当使用src属性引入外部脚本时，<script>标签内的代码会被浏览器忽略。所以，如果同时需要内部脚本和外部脚本，需要分别使用<script>标签来引入。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF - 8">
<title>混合脚本示例</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<!-- 引入外部脚本 -->
<script src="script.js"></script>
<!-- 内部脚本 -->
<script>
console.log('这是内部脚本的日志输出。');
</script>
</body>
</html>
3.3 JavaScript 基本语法
3.3.1 变量与数据类型
变量的声明和使用：在 JavaScript 中，使用var、let或const关键字来声明变量。var是 ES5 中声明变量的方式，let和const是 ES6（ECMAScript 2015）引入的新的声明变量方式。
使用var声明变量：
var message; // 声明一个变量message，此时变量未赋值，值为undefined
message = 'Hello, JavaScript!'; // 给变量message赋值
console.log(message); // 输出变量message的值，会在控制台显示：Hello, JavaScript!
使用let声明变量：let声明的变量具有块级作用域，即变量只在其所在的代码块（如{}内）有效。
{
let num = 10; // 在代码块内声明变量num并赋值为10
console.log(num); // 输出10
}
// console.log(num); // 这里访问num会报错，因为num的作用域在上面的代码块内，这里超出了作用域
使用const声明常量：const声明的是常量，一旦声明，其值不能被改变，并且必须在声明时初始化。
const PI = 3.14159; // 声明常量PI并赋值为3.14159
// PI = 3.14; // 尝试修改PI的值会报错，因为PI是常量，不能被重新赋值
常见的数据类型：
字符串（String）：用于表示文本数据，由单引号（'）或双引号（"）包裹。例如：
let name = '张三';
let greeting = "欢迎来到我的网站！";
数字（Number）：JavaScript 只有一种数字类型，可以表示整数和浮点数。例如：
let age = 25; // 整数
let price = 19.99; // 浮点数
布尔值（Boolean）：只有两个值true和false，用于表示逻辑判断的结果。例如：
let isStudent = true;
let hasFinished = false;
null：表示一个空值，通常用于表示一个变量有意被赋值为空。例如：
let emptyValue = null;
undefined：当一个变量声明后没有被赋值时，它的值就是undefined。例如：
let unassigned;
console.log(unassigned); // 输出undefined
对象（Object）：用于存储多个键值对的数据集合，每个键值对称为对象的属性。例如：
let person = {
name: '李四',
age: 30,
job: '工程师'
};
数组（Array）：是一种特殊的对象，用于存储一组有序的数据。例如：
let numbers = [1, 2, 3, 4, 5];
let fruits = ['苹果', '香蕉', '橙子'];
函数（Function）：在 JavaScript 中，函数也是一种数据类型，可以将函数赋值给变量，作为参数传递给其他函数，或者作为函数的返回值。例如：
function add(a, b) {
return a + b;
}
let sum = add(3, 5); // 调用函数add，将返回值赋给sum
可以使用typeof运算符来检测变量的数据类型。例如：
console.log(typeof 'Hello'); // 输出string
console.log(typeof 123); // 输出number
console.log(typeof true); // 输出boolean
console.log(typeof null); // 输出object（这是JavaScript的一个历史遗留问题，null实际上被错误地判断为object类型）
console.log(typeof undefined); // 输出undefined
console.log(typeof { name: '张三' }); // 输出object
console.log(typeof [1, 2, 3]); // 输出object（数组在JavaScript中被视为一种特殊的对象）
console.log(typeof function () {}); // 输出function
3.3.2 运算符
JavaScript 提供了多种运算符，用于执行各种操作，如算术运算、比较运算、逻辑运算等。
算术运算符：用于执行基本的数学运算，如加（+）、减（-）、乘（*）、除（/）、取模（%，返回除法的余数）、自增（++）、自减（--）。例如：
let num1 = 10;
let num2 = 3;
console.log(num1 + num2); // 输出13
console.log(num1 - num2); // 输出7
console.log(num1 * num2); // 输出30
console.log(num1 / num2); // 输出3.3333333333333335
console.log(num1 % num2); // 输出1
let count = 5;
console.log(count++); // 先输出5，然后count变为6
console.log(++count); // 先将count加1变为7，然后输出7
比较运算符：用于比较两个值的大小或是否相等，返回一个布尔值（true或false）。常见的比较运算符有等于（==，会进行类型转换）、全等（===，不进行类型转换，要求值和类型都相同）、不等于（!=）、不全等（!==）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）。例如：
console.log(5 == 5); // 输出true
console.log(5 == '5'); // 输出true，因为==会进行类型转换，将'5'转换为数字5
console.log(5 === '5'); // 输出false，因为===要求值和类型都相同，5是数字类型，'5'是字符串类型
console.log(5 > 3); // 输出true
console.log(5 < 3); // 输出false
逻辑运算符：用于组合多个布尔值进行逻辑判断，返回一个布尔值。常见的逻辑运算符有逻辑与（&&）、逻辑或（||）、逻辑非（!）。
逻辑与（&&）：只有当两个操作数都为true时，结果才为true，否则为false。例如：
let a = true;
let b = false;
console.log(a && b); // 输出false
console.log(a && true); // 输出true
逻辑或（||）：只要两个操作数中有一个为true，结果就为true，只有当两个操作数都为false时，结果才为false。例如：
console.log(a || b); // 输出true
console.log(false || b); // 输出false
逻辑非（!）：用于对一个布尔值取反，true变为false，false变为true。例如：
console.log(!a); // 输出false
console.log(!b); // 输出true
赋值运算符：用于给变量赋值，常见的赋值运算符有等于（=）、加等于（+=）、减等于（-=）、乘等于（*=）、除等于（/=）、取模等于（%=）等。例如：
let num = 5;
num += 3; // 相当于num = num + 3，此时num的值变为8
num -= 2; // 相当于num = num - 2，此时num的值变为6
num *= 4; // 相当于num = num * 4，此时num的值变为24
num /= 3; // 相当于num = num / 3，此时num的值变为8
num %= 5; // 相当于num = num % 5，此时num的值变为3
3.3.3 条件语句（if - else、switch）
条件语句用于根据不同的条件执行不同的代码块。
if - else 语句：根据条件的真假来决定执行哪个代码块。语法如下：
if (条件) {
// 条件为true时执行的代码块
} else {
// 条件为false时执行的代码块
}
例如，判断一个数字是否大于 10：
let num = 15;
if (num > 10) {
console.log(num + '大于10');
} else {
console.log(num + '不大于10');
}
还可以使用else if来进行多条件判断，语法如下：
if (条件1) {
// 条件1为true时执行的代码块
} else if (条件2) {
// 条件1为false且条件2为true时执行的代码块
} else {
// 所有条件都为false时执行的代码块
}
例如，根据不同的分数给出对应的等级：
let score = 85;
if (score >= 90) {
console.log('等级为A');
} else if (score >= 80) {
console.log('等级为B');
} else if (score >= 70) {
console.log('等级为C');
} else {
console.log('等级为D');
}
switch 语句：用于基于不同的条件执行不同的代码块，它适用于对一个变量进行多个精确值的判断。语法如下：
switch (表达式) {
case 值1:
// 表达式的值等于值1时执行的代码块
break;
case 值2:
// 表达式的值等于值2时执行的代码块
break;
default:
// 表达式的值不等于任何case的值时执行的代码块
}
例如，根据星期几输出对应的信息：
let day = 3;
switch (day) {
case 1:
console.log('今天是星期一');
break;
case 2:
console.log('今天是星期二');
break;
case 3:
console.log('今天是星期三');
break;
case 4:
console.log('今天是星期四');
break;
case 5:
console.log('今天是星期五');
break;
case 6:
console.log('今天是星期六');
break;
case 0:
console.log('今天是星期日');
break;
default:
console.log('无效的星期值');
}
在switch语句中，break语句用于阻止代码继续执行下一个case，如果没有break，代码会继续执行下一个case，直到遇到break或switch语句结束。
3.3.4 循环语句（for、while）
循环语句用于重复执行一段代码，直到满足特定条件为止。
for 循环：适用于已知循环次数的情况。语法如下：
for (初始化表达式; 条件表达式; 更新表达式) {
// 循环体，重复执行的代码块
}
例如，输出 1 到 10 的数字：
for (let i = 1; i <= 10; i++) {
console.log(i);
}
在上述代码中，let i = 1是初始化表达式，只在循环开始时执行一次，用于初始化循环变量i；i <= 10是条件表达式，在每次循环开始前进行判断，如果为true，则执行循环体，否则结束循环；i++是更新表达式，在每次循环结束后执行，用于更新循环变量i的值。
while 循环：适用于循环次数不确定，只要条件为true就继续循环的情况。语法如下：
while (条件表达式) {
// 循环体，重复执行的代码块
}
例如，计算 1 到 100 的整数和：
let sum = 0;
let num = 1;
while (num <= 100) {
sum += num;
num++;
}
console.log('1到100的整数和为：' + sum);
在上述代码中，num <= 100是条件表达式，只要num小于等于 100，就会执行循环体，在循环体中，将num累加到sum中，并将num加 1。需要注意的是，在while循环中，一定要有改变条件表达式的语句，否则可能会导致无限循环。
3.3.5 函数
函数是一段可以重复调用的代码块，用于封装特定的功能，提高代码的复用性和可维护性。
函数的定义：在 JavaScript 中，可以使用function关键字来定义函数。语法如下：
function 函数名(参数1, 参数2,...) {
// 函数体，实现具体功能的代码
return 返回值; // 可选，用于返回函数执行的结果
}
四、综合案例：打造完整网页
4.1 项目需求分析
本次我们要打造一个简单的个人博客网页，目标是为用户提供一个展示个人文章、分享生活感悟和专业知识的平台。需要实现以下主要功能和展示相应内容：
文章展示：在首页展示多篇文章的标题、摘要和发布日期，点击文章标题可跳转到具体文章详情页面，显示完整的文章内容、作者信息以及评论区域。
导航栏：包含首页、关于我、联系我们等导航链接，方便用户在不同页面之间切换。点击“关于我”页面，展示博主的个人简介、照片和职业经历等信息；点击“联系我们”页面，提供联系方式，如邮箱、社交媒体链接等，方便用户与博主沟通交流。
搜索功能：在页面头部设置搜索框，用户可以输入关键词搜索相关文章，提高用户查找特定内容的效率。
评论功能：在文章详情页面，用户可以发表评论，输入自己的姓名、邮箱（可选）和评论内容，提交评论后，评论会显示在评论区域，增强用户与博主以及其他用户之间的互动。
4.2 页面结构搭建（HTML）
使用HTML搭建网页的整体结构，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人博客</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 导航栏 -->
<header>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
<form id="searchForm">
<input type="text" id="searchInput" placeholder="搜索文章">
<button type="submit">搜索</button>
</form>
</nav>
</header>
<!-- 首页文章列表 -->
<main id="homePage">
<h1>我的博客</h1>
<div class="article">
<h2><a href="article1.html">HTML基础入门</a></h2>
<p class="summary">本文详细介绍了HTML的基本概念、常用标签和文档结构，适合初学者快速入门。</p>
<p class="date">发布日期：2024-10-01</p>
</div>
<div class="article">
<h2><a href="article2.html">CSS样式美化技巧</a></h2>
<p class="summary">分享了一些实用的CSS样式技巧，帮助你打造美观的网页界面。</p>
<p class="date">发布日期：2024-10-05</p>
</div>
<!-- 更多文章可继续添加 -->
</main>
<!-- 文章详情页面 -->
<main id="articlePage" style="display: none;">
<h1 id="articleTitle"></h1>
<p id="authorInfo"></p>
<p id="articleContent"></p>
<h2>评论区</h2>
<form id="commentForm">
<label for="name">姓名：</label>
<input type="text" id="name" required>
<label for="email">邮箱：</label>
<input type="email" id="email">
<label for="comment">评论：</label>
<textarea id="comment" required></textarea>
<button type="submit">提交评论</button>
</form>
<div id="comments"></div>
</main>
<!-- 关于我页面 -->
<main id="aboutPage" style="display: none;">
<h1>关于我</h1>
<img src="avatar.jpg" alt="博主头像">
<p>我是一名热爱前端开发的博主，专注于分享网页开发相关的知识和经验。</p>
<p>在[具体公司1]担任前端开发工程师期间，参与了多个项目的开发，积累了丰富的实践经验。</p>
<p>目前在[具体公司2]继续深耕前端领域，不断学习和探索新技术。</p>
</main>
<!-- 联系我们页面 -->
<main id="contactPage" style="display: none;">
<h1>联系我们</h1>
<p>邮箱：your_email@example.com</p>
<p>微信：your_wechat_id</p>
<p>GitHub：<a href="https://github.com/your_username">https://github.com/your_username</a></p>
</main>
<footer>
<p>© 2024 我的个人博客版权所有</p>
</footer>
<script src="script.js"></script>
</body>
</html>
在上述代码中：
header部分包含导航栏和搜索框，使用
<nav>和<ul>构建导航链接，<form>创建搜索表单。main部分根据不同页面内容进行切换，初始显示
homePage，包含文章列表。每个文章项使用<div class="article">包裹，包含文章标题、摘要和发布日期，标题通过<a>标签链接到具体文章页面。articlePage用于展示文章详情，包括文章标题、作者信息、文章内容、评论表单和评论区。aboutPage展示博主个人信息，contactPage展示联系方式。footer包含版权信息。
4.3 页面样式设计（CSS）
运用 CSS 对网页进行样式设计，创建styles.css文件，内容如下：
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 导航栏样式 */
header {
background-color: #333;
color: white;
padding: 10px 0;
}
nav {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #ff9900;
}
#searchForm {
display: flex;
}
#searchInput {
padding: 5px;
border: none;
border-radius: 3px 0 0 3px;
}
#searchForm button {
padding: 5px 10px;
border: none;
background-color: #ff9900;
color: white;
border-radius: 0 3px 3px 0;
cursor: pointer;
}
/* 首页文章列表样式 */
#homePage {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.article {
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px;
margin-bottom: 20px;
}
.article h2 {
margin-top: 0;
}
.article h2 a {
color: #333;
text-decoration: none;
}
.article h2 a:hover {
color: #ff9900;
}
.article p.summary {
color: #666;
}
.article p.date {
font-size: 14px;
color: #999;
}
/* 文章详情页面样式 */
#articlePage {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
#articleTitle {
font-size: 28px;
margin-top: 0;
}
#authorInfo {
font-size: 14px;
color: #999;
margin-bottom: 20px;
}
#articleContent {
line-height: 1.6;
}
#commentForm {
margin-top: 30px;
}
#commentForm label {
display: block;
margin-bottom: 5px;
}
#commentForm input,
#commentForm textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 3px;
}
#commentForm button {
background-color: #ff9900;
color: white;
padding: 10px 15px;
border: none;
border-radius: 3px;
cursor: pointer;
}
#comments {
margin-top: 30px;
}
.comment {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 15px;
}
.comment p.name {
font-weight: bold;
margin-top: 0;
}
.comment p.email {
font-size: 14px;
color: #999;
margin-bottom: 5px;
}
.comment p.comment-text {
margin-bottom: 0;
}
/* 关于我页面样式 */
#aboutPage {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
#aboutPage img {
width: 200px;
height: 200px;
border-radius: 50%;
margin-bottom: 20px;
}
#aboutPage p {
line-height: 1.6;
text-align: left;
}
/* 联系我们页面样式 */
#contactPage {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
#contactPage p {
margin-bottom: 15px;
}
#contactPage p a {
color: #333;
}
#contactPage p a:hover {
color: #ff9900;
}
/* 页脚样式 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 30px;
}
在上述 CSS 代码中：
定义了全局的字体样式，设置了body的边距和内边距为 0。
对导航栏进行样式设置，包括背景颜色、文字颜色、链接的悬停效果等，搜索框和搜索按钮也有相应的样式。
首页文章列表的每个文章项有边框、内边距和外边距，文章标题、摘要和发布日期都有各自的样式。
文章详情页面的标题、作者信息、内容、评论表单和评论区都有详细的样式定义。
关于我页面和联系我们页面也有对应的样式，使页面布局合理、美观。
页脚设置了背景颜色和文字样式。
4.4 交互功能实现（JavaScript）
通过 JavaScript 实现网页的交互功能，创建script.js文件，内容如下：
// 获取导航链接和各页面元素
const homeLink = document.querySelector('nav ul li a[href="index.html"]');
const aboutLink = document.querySelector('nav ul li a[href="about.html"]');
const contactLink = document.querySelector('nav ul li a[href="contact.html"]');
const homePage = document.getElementById('homePage');
const aboutPage = document.getElementById('aboutPage');
const contactPage = document.getElementById('contactPage');
const articlePage = document.getElementById('articlePage');
// 导航栏点击事件处理
homeLink.addEventListener('click', function (e) {
e.preventDefault();
homePage.style.display = 'block';
aboutPage.style.display = 'none';
contactPage.style.display = 'none';
articlePage.style.display = 'none';
});
aboutLink.addEventListener('click', function (e) {
e.preventDefault();
homePage.style.display = 'none';
aboutPage.style.display = 'block';
contactPage.style.display = 'none';
articlePage.style.display = 'none';
});
contactLink.addEventListener('click', function (e) {
e.preventDefault();
homePage.style.display = 'none';
aboutPage.style.display = 'none';
contactPage.style.display = 'block';
articlePage.style.display = 'none';
});
// 模拟文章数据（实际应用中可从服务器获取）
const articles = [
{
id: 1,
title: 'HTML基础入门',
author: '张三',
content: 'HTML是超文本标记语言，用于创建网页结构……',
comments: []
},
{
id: 2,
title: 'CSS样式美化技巧',
author: '张三',
content: 'CSS可以为网页添加丰富的样式，提升视觉效果……',
comments: []
}
];
// 文章详情页面加载
const urlParams = new URLSearchParams(window.location.search);
const articleId = urlParams.get('id');
if (articleId) {
const article = articles.find(a => a.id == articleId);
if (article) {
document.getElementById('articleTitle').textContent = article.title;
document.getElementById('authorInfo').textContent = `作者：${article.author}`;
document.getElementById('articleContent').textContent = article.content;
homePage.style.display = 'none';
aboutPage.style.display = 'none';
contactPage.style.display = 'none';
articlePage.style.display = 'block';
// 评论提交功能
const commentForm = document.getElementById('commentForm');
const commentsDiv = document.getElementById('comments');
commentForm.addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const comment = document.getElementById('comment').value;
const newComment = { name, email, comment };
article.comments.push(newComment);
renderComments(article.comments);
commentForm.reset();
});
// 渲染评论
function renderComments(comments) {
commentsDiv.innerHTML = '';
comments.forEach(c => {
const commentDiv = document.createElement('div');
commentDiv.classList.add('comment');
commentDiv.innerHTML = `
<p class="name">${c.name}</p>
<p class="email">${c.email || '未提供邮箱'}</p>
<p class="comment-text">${c.comment}</p>
`;
commentsDiv.appendChild(commentDiv);
});
}
renderComments(article.comments);
}
}
// 搜索功能（简单模拟，实际应用中可结合后端搜索）
const searchForm = document.getElementById('searchForm');
searchForm.addEventListener('submit', function (e) {
e.preventDefault();
const searchInput = document.getElementById('searchInput').value.toLowerCase();
const articles = document.querySelectorAll('.article');
articles.forEach(article => {
const title = article.querySelector('h2 a').textContent.toLowerCase();
if (title.includes(searchInput)) {
article.style.display = 'block';
} else {
article.style.display = 'none';
}
});
});
在上述 JavaScript 代码中：
为导航栏的首页、关于我、联系我们链接添加点击事件，点击时切换显示不同的页面。
模拟了文章数据，当通过 URL 参数获取到文章 ID 时，加载对应的文章详情，包括标题、作者、内容，并实现评论提交和渲染功能。
为搜索表单添加提交事件，根据用户输入的关键词搜索文章标题，显示或隐藏相应的文章项。
文档下载链接
👉前端开发基础之HTML、CSS和JavaScript详细介绍及其简单综合案例应用
很感谢您能看到这里，整理不易，希望多多点赞收藏。