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底阿妈定义在外部JS文件中。然后引入到HTML界面里
- 外部JS文件只包含JS代码，不包括
<script>标签 <script>标签不能自闭合（在html中有一些标签不用包围内容，没有单独的结束标签，而是在开始标签中添加/来进行闭合，这种标签称为自闭合标签）
- 外部JS文件只包含JS代码，不包括
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>
🏡个人主页：謬熙，欢迎各位大佬到访❤️❤️❤️~
👲个人简介：本人编程小白，正在学习互联网开发求职知识……
如果您觉得本文对您有帮助的话，记得点赞👍、收藏⭐️、评论💬，如果文章有什么需要改进的地方还请大佬不吝赐教🙏🙏🙏
原文地址：https://blog.csdn.net/qq_51706641/article/details/144400567
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！