JavaWeb——前端三剑客

前言：今天开始学习JavaWeb相关内容了，陆续会总结一些前后端分离开发的相关知识，有遗漏和错误的地方欢迎大家指出~

一、前端三剑客

Web前端主要包含三个核心部分：HTML（Hyper Text Markup Language，超文本标记语言）、 CSS（Cascading Style Sheets，层叠样式表）和 JavaScript（JS），它们共同协作，负责网页的结构、样式和行为。
在这里插入图片描述

HTML是构建网页内容和结构的基础。它使用一系列的标签来定义网页中的元素，如标题、段落、链接和图片等。HTML确保了网页内容的语义化，使得内容能够在不同的设备和浏览器上被正确解析和显示。
CSS负责网页的视觉表现，包括布局、颜色、字体和动画等。通过CSS，开发者可以控制网页的布局，使得网页在不同的屏幕尺寸和设备上都能保持良好的视觉效果，即响应式设计。
JavaScript是一种脚本语言，它为网页添加动态行为和交互功能。JavaScript能够响应用户的操作，如点击、滚动和表单输入，以及与后端服务器进行数据交互，实现数据的动态加载和更新。

二、HTML

2.1 HTML介绍

HTML 是用来描述网页的一种语言。

特点：

HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

超文本：超越了文本的限制，比普通文本强大，除了文字信息外，还可以定义图片、音视频等内容。

2.2 常用标签

类型	标签	含义及用法
元数据	`<meta>`	提供关于HTML文档的元数据。例如，`<meta charset="UTF-8">` 定义字符编码。
	`<title>`	定义文档的标题，显示在浏览器的标签页上。`<title>页面标题</title>`
	`<link>`	定义文档与外部资源的关系，如链接样式表。`<link rel="stylesheet" href="styles.css">`
	`<script>`	定义客户端的脚本，如JavaScript。`<script src="script.js"></script>`
文档结构	`<html>`	根元素，定义整个HTML文档。`<html>...</html>`
	`<head>`	包含文档的元数据，如`<title>`、`<style>`、`<script>`、`<link>`等。`<head>...</head>`
	`<body>`	包含可见的页面内容。`<body>...</body>`
分区	`<div>`	定义文档中的分区或节。`<div>分区内容</div>`
	`<section>`	定义文档中的节。`<section>节内容</section>`
	`<article>`	定义独立的内容区块。`<article>文章内容</article>`
	`<header>`	定义文档或区块的页眉。`<header>页眉内容</header>`
	`<footer>`	定义文档或区块的页脚。`<footer>页脚内容</footer>`
	`<aside>`	定义与页面主要内容稍微相关的侧边内容。`<aside>侧边栏</aside>`
	`<nav>`	定义导航链接的部分。`<nav>导航内容</nav>`
标题	`<h1>` - `<h6>`	定义标题，从`<h1>`到`<h6>`重要性依次降低。`<h1>最大的标题</h1>`
段落	`<p>`	定义段落。`<p>这是一个段落。</p>`
行内元素	`<span>`	定义行内的小块内容，用于样式或脚本应用。`<span style="color:red;">红字文本</span>`
文本格式化	`<strong>`	定义重要的文本，通常显示为粗体。`<strong>重要的文本</strong>`
	`<em>`	强调文本，通常显示为斜体。`<em>强调的文本</em>`
	`<b>`	粗体文本，不表示重要性。`<b>粗体文本</b>`
	`<i>`	斜体文本。`<i>斜体文本</i>`
列表	`<ul>`	定义无序列表。`<ul><li>列表项1</li><li>列表项2</li></ul>`
	`<ol>`	定义有序列表。`<ol><li>列表项1</li><li>列表项2</li></ol>`
	`<li>`	定义列表项。`<li>这是一个列表项</li>`
表格	`<table>`	定义表格。`<table><tr><td>单元格</td></tr></table>`
	`<tr>`	定义表格中的行。`<tr><td>单元格</td></tr>`
	`<td>`	定义表格中的单元格。`<td>单元格内容</td>`
	`<th>`	定义表格中的表头单元格。`<th>表头内容</th>`
表单	`<form>`	定义表单。`<form action="/submit" method="post">...</form>`
	`<input>`	定义输入控件。`<input type="text" name="username" placeholder="用户名">`
	`<textarea>`	定义多行文本输入控件。`<textarea name="message" rows="4" cols="50"></textarea>`
	`<button>`	定义按钮。`<button type="submit">发送</button>`
	`<label>`	定义表单控件的标签，提高可用性。`<label for="email">邮箱:</label><input id="email" type="email">`
	`<select>`	定义下拉列表。`<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option></select>`
	`<option>`	定义下拉列表中的选项。`<option value="beijing">北京</option>`
图像	`<img>`	定义图像。`<img src="image.jpg" alt="描述">`
媒体	`<audio>`	定义音频内容。`<audio src="audio.mp3" controls>音频内容</audio>`
	`<video>`	定义视频内容。`<video src="video.mp4" controls>视频内容</video>`
超链接	`<a>`	超链接。`<a href="https://example.com">访问示例网站</a>`
嵌入内容	`<embed>`	定义嵌入的内容，如视频。`<embed src="video.mp4" type="video/mp4">`
	`<object>`	定义嵌入的对象，如图像、音频、视频等。`<object data="image.gif" type="image/gif">`
	`<param>`	定义对象的参数。`<param name="src" value="movie.mp4">`
交互性	`<details>`	定义用户可以查看或隐藏的额外细节。`<details>详细信息</details>`
	`<summary>`	定义`<details>`元素的标题。`<summary>标题</summary>`
	`<dialog>`	定义对话框或窗口。`<dialog>对话框内容</dialog>`
	`<canvas>`	定义图形，如图表。`<canvas id="myCanvas" width="200" height="100"></canvas>`
	`<svg>`	定义SVG图形。`<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>`

三、 CSS

3.1 CSS介绍

CSS是一种用于描述HTML或XML文档的表现形式的样式语言。CSS不仅可以静态地修饰网页，还可以动态地控制页面布局。通过CSS，开发者可以将内容与表现形式分离，使得网页的结构更加清晰，同时提高网页的可维护性和可重用性。
CSS的主要作用是控制网页元素的外观，包括颜色、字体、间距、布局等。它允许开发者通过简单的规则来定义复杂的样式，从而实现丰富的视觉效果。

3.2 CSS引用的三种形式

CSS可以通过三种不同的方式被引入到HTML文档中：内联样式、内部样式和外部样式。

内联样式
内联样式是直接在HTML元素的style属性中定义CSS规则， 便于修改单个元素。

<p style="color: red; font-size: 14px;">这是内联样式的示例。</p>

内部样式
内部样式是通过<style>标签在HTML文档的<head>部分定义CSS规则（这样在页面加载时样式就已经被定义，可以立即应用到页面上），便于修改单个html文档中的标签样式。

<head><style>p {color: blue;font-size: 16px;}</style>
</head>
<body><p>这是内部样式的示例。</p>
</body>

外部样式
外部样式是将CSS规则保存在外部文件中，并通过<link>标签引入HTML文档，便于修改多个html文档中的标签样式。

<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>

/* styles.css */
p {color: green;font-size: 18px;
}

3.3. CSS选择器及其类型

CSS选择器用于选择HTML文档中的元素，并应用样式规则。

基本选择器
基本选择器包括元素选择器、类选择器和ID选择器。

/* 元素选择器 */
p {font-family: 'Times New Roman', serif;
}/* 类选择器 */
.highlight {background-color: yellow;
}/* ID选择器 */
#unique {color: purple;
}

组合选择器
组合选择器包括后代选择器、子代选择器、相邻兄弟选择器和通用兄弟选择器。

/* 后代选择器 */
div p {color: grey;
}/* 子代选择器 */
ul > li {font-weight: bold;
}/* 相邻兄弟选择器 */
h2 + p {margin-top: 0;
}/* 通用兄弟选择器 */
h2 ~ p {margin-left: 20px;
}

3.4 盒子模式

在这里插入图片描述

盒子模型的组成部分
- 内容（Content）：盒子的内容，即元素的文本、图片等。
- 内边距（Padding）：内容与边框之间的空间。
- 边框（Border）：围绕内边距的边框。
- 外边距（Margin）：边框外的空间，用于分隔其他元素。
盒子模型的CSS代码示例

/* 盒子模型样式 */
.box {width: 300px;height: 200px;background-color: #ddd;padding: 20px;border: 5px solid #333;margin: 30px;
}

<div class="box">这是一个盒子模型的示例。</div>

四、JavaScript（JS）

4.1 JS引入方式

内部脚本：将JS代码定义在HTML页面中
- JS代码必须放在 <script></script>内；
- 在HTML文档中，可以在任何地方放置任意数量的<script>；
- <script></script>标签通常放在<body></body>标签底部，这样脚本会在页面内容加载完成后加载和执行，不会阻塞页面渲染。
外部脚本：将JS底阿妈定义在外部JS文件中。然后引入到HTML界面里
- 外部JS文件只包含JS代码，不包括<script>标签
- <script>标签不能自闭合（在html中有一些标签不用包围内容，没有单独的结束标签，而是在开始标签中添加/来进行闭合，这种标签称为自闭合标签）

4.2 JS对象

自定义对象
JSON字符串
JSON (JavaScript Object Notation，js对象标记法) 一种简单的数据格式，是一种比较轻量级的数据存储格式，它是一种存储和交换数据的语法。由于其语法简单易解析，层次鲜明，现在多用于作为数据载体，在网络中进行数据传输。
BOM对象
Browser Object Model浏览器对象，允许JS与浏览器对话，JS将浏览器各个组件封装成对象。

获取当前页面的url，设置后页面跳转到指定url界面。

DOM对象
==当浏览器加载HTML文档时，它会构建一个DOM树，将文档中的标签转化为树的节点。==这个树状结构允许开发者通过编程方式访问和修改文档的任何部分。

在这里插入图片描述

一般流程为，查找到指定标签

查找选择
document.getElementById(id)：通过元素的ID选择节点。
document.getElementsByTagName(name)：通过标签名选择节点的集合。
document.getElementsByClassName(name)：通过类名选择节点的集合。
document.querySelector(selector)：使用CSS选择器选择第一个匹配的节点。
document.querySelectorAll(selector)：使用CSS选择器选择所有匹配的节点集合。

创建和删除节点
document.createElement(tag)：创建一个新的元素节点。
document.createTextNode(data)：创建一个新的文本节点。
node.appendChild(child)：将一个节点添加到另一个节点的子节点列表的末尾。
node.removeChild(child)：从一个节点移除一个子节点。

修改节点内容
element.innerHTML：获取或设置一个元素内部的HTML内容。
element.innerText：获取或设置一个元素内部的文本内容，不包括HTML标签。
element.setAttribute(name, value)：设置一个元素的属性值。
element.getAttribute(name)：获取一个元素的属性值。
element.removeAttribute(name)：移除一个元素的属性。

事件处理
element.addEventListener(event, listener)：为一个元素添加事件监听器。
element.removeEventListener(event, listener)：移除一个元素的事件监听器。
event.preventDefault()：阻止事件的默认行为。
event.stopPropagation()：阻止事件冒泡到更高的DOM层次。

遍历DOM树
node.parentNode：获取一个节点的父节点。
node.childNodes：获取一个节点的所有子节点。
node.firstChild 和 node.lastChild：分别获取一个节点的第一个和最后一个子节点。
node.nextSibling 和 node.previousSibling：分别获取一个节点的下一个和上一个兄弟节点。

4.3 事件

JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。

常见事件
事件绑定
以下是三种在JavaScript中常用的事件绑定方法的整理，包括示例代码和各自的优缺点，以Markdown格式呈现：

在DOM中直接绑定事件（行内事件处理器）

<input type="button" value="click me" onclick="hello()">
<script>
function hello() {alert("hello world!");
}
</script>

DOM元素绑定

<input type="button" value="click me" id="btn">
<script>
document.getElementById("btn").onclick = function() {alert("hello world!");
}
</script>

使用事件监听绑定事件

<input type="button" value="click me" id="btn">
<script>
document.getElementById("btn").addEventListener('click', function(event) {alert("hello world!");
});
</script>