2024-12-10-Web前端个人知识总结

2024-12-10 约 2667 字预计阅读 6 分钟

https://bing.ee123.net/img/rand?artid=144372716

Web前端个人知识总结

一、Web介绍

Web（万维网）是一个广泛的信息系统，它彻底改变了人们获取和分享信息的方式。

从技术层面来讲，Web 基于超文本传输协议（HTTP）。用户通过浏览器发送请求，服务器接收请求后返回相应的网页内容，这些内容主要是用 HTML（超文本标记语言）编写的。HTML 就像是建筑的蓝图，通过各种标签构建出网页的基本架构，如标题、段落、链接和图像等元素。

CSS（层叠样式表）则是网页的化妆师，它可以控制网页的布局和外观。比如设置字体、颜色、背景以及元素之间的间距等，让网页更具美感和可读性。

而 JavaScript 为网页增添了活力，使网页具备交互性。例如，实现表单验证，当用户输入错误信息时能够及时提醒；还有创建动态菜单，鼠标悬停或点击时能展示不同的内容。

在应用方面，Web 包含各种各样的网站，有提供新闻资讯的新闻网站，方便人们及时了解世界各地的大事；电子商务网站则让购物变得更加便捷，用户可以足不出户选购全球商品；还有社交网站，拉近了人与人之间的距离，方便沟通交流和分享生活。同时，企业也利用 Web 进行品牌推广、产品展示等诸多活动，Web 已经成为现代社会不可或缺的信息和商业平台。

二、前端开发技术

前端开发技术是指用于构建和设计网站或应用程序用户界面的一系列技术。以下是一些简单的前端开发技术及其实例：

1.HTML（超文本标记语言）

**HTML（超文本标记语言）这是构建网页的基础。它使用各种标签来定义网页的结构，如 `<html>` 标签作为根标签， `<head>` 用于包含网页的元数据，像文档标题、样式表引用等， `<body>` 标签则承载了在浏览器中展示给用户的内容。例如， `<p>` 标签用于定义段落， `<h1>`

<h6> 标签用于不同级别的标题，通过这些标签可以把文字、图像等内容合理地组织起来。** 例如，创建一个简单的网页结构：

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
</body>
</html>

2.CSS（层叠样式表）

CSS（层叠样式表）是 Web 开发中不可或缺的关键部分。它主要用于控制网页的样式与布局呈现。通过各种选择器，如标签选择器可对特定 HTML 标签统一设定样式，类选择器针对自定义类名的元素精准修饰，ID 选择器则聚焦于具有唯一标识的元素。其属性丰富多样，像设置颜色的 “ color ”、调整字体的 “ font-family ”、控制布局的 “ margin ” 与 “ padding ” 等，能全方位塑造网页外观。无论是文字的排版、背景的装饰，还是元素的定位与间距设置，CSS 都能轻松驾驭。它遵循层叠规则，当多个样式声明作用于同一元素时，依据优先级确定最终呈现效果。这使得开发者能够灵活地打造出美观、舒适且具有一致性的网页界面，极大提升了用户体验与网站的视觉吸引力。例如，将标题设置为红色和居中显示：

<h1 style="color: red; text-align: center;">欢迎来到我的网页</h1>

3.JavaScript

JavaScript 是一种高级的、解释型的编程语言，在 Web 开发中扮演着至关重要的角色。

它的基本语法包括变量声明（如使用 var、let、const）、数据类型（如数字、字符串、布尔值等）和控制流语句（如 if - else、for 循环）。

JavaScript 可以对 DOM（文档对象模型）进行操作。这意味着能够获取网页中的元素，比如通过 “ document.getElementById (’elementId’) ” 获取具有特定 ID 的元素，然后修改其属性或者内容，像改变元素的样式、文本等，让网页具备交互性。

它还能处理各种事件，如用户的鼠标点击、键盘输入等。为元素添加事件监听器，如 “ element.addEventListener (‘click’, function () { alert (‘Clicked!’); }) ”，当用户点击元素时就会触发相应的操作，极大地丰富了网页的功能

例如，创建一个按钮，点击后显示一条消息：

<button onclick="alert('你点击了按钮！')">点击我</button>

4.jQuery：

jQuery 是一个快速、简洁的 JavaScript 库。它的主要目的是简化 HTML 文档遍历、事件处理、动画制作和 Ajax 交互。在 HTML 元素选择上，jQuery 使用简洁的语法，比如 $('p') 就能选择所有的 <p> 元素，比原生 JavaScript 更加方便。对于事件处理，如 $('button').click(function() { alert('Clicked!'); }); ，可以轻松地为按钮添加点击事件。在动画方面，能实现如淡入淡出、滑动等效果，增强网页的动态感。并且，jQuery 提供了方便的 Ajax 方法，用于在不重新加载整个页面的情况下从服务器获取数据，从而优化用户体验，是提升前端开发效率的有力工具。

例如，使用jQuery在按钮点击时显示一条消息：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function(){
    $('button').click(function(){
      alert('你点击了按钮！');
    });
  });
</script>

以上是一些常用的前端开发技术和实例。当然还有一些没有介绍，前端开发技术和实例还有很多种类，涵盖了从网页布局设计到用户交互和动画效果等各个方面。

三、后端开发技术

1.服务器端语言

例如PHP、Python、Node.js等，用于处理服务器端的逻辑和数据库操作，例如：

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM myTable";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  while($row = $result->fetch_assoc()) {
    echo "Name: " . $row["name"]. " Age: " . $row["age"]. "<br>";
  }
} else {
  echo "0 results";
}

$conn->close();
?>

2.数据库

数据库是现代软件系统的核心组件之一，像 MySQL 和 MongoDB 是其中广为人知的代表。MySQL 是一种关系型数据库。它通过表格来存储数据，表格中的行代表记录，列则代表不同的属性。例如，在一个电商系统中，用户表可能包含用户 ID、姓名、密码等列。它使用 SQL（结构化查询语言）来操作数据，通过 “SELECT”“INSERT”“UPDATE” 和 “DELETE” 等语句，可以精准地查询、插入、更新和删除记录。其优势在于数据结构严谨，能够保证数据的一致性和完整性。MongoDB 是文档型的非关系型数据库。数据以类似 JSON 格式的文档形式存储，一个文档就像是一个对象，包含多个键值对。它更灵活，适合存储半结构化或非结构化的数据，如用户的评论、日志信息等。它没有固定的表结构，能轻松适应数据的变化，为开发者提供了更自由的数据存储方式。这里就不过多叙述了。

3.网络协议

HTTP（超文本传输协议）：用于在客户端和服务器之间传输超文本数据，例如：

GET /index.html HTTP/1.1
Host: www.example.com

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

四、Web安全

跨站脚本攻击（XSS）

通过在网页中注入恶意脚本来获取用户敏感信息。

<script>
  var data = document.cookie;
  // 发送恶意脚本到攻击者的服务器
</script>

2.跨站请求伪造（CSRF）

利用用户已登录的身份来发送未经用户授权的请求。

<img src="https://www.example.com/delete-account?id=12345" alt="Delete Account">

以上是我对一些常见的Web知识进行的个人总结和实例讲解，如有什么不对的也请各位海涵毕竟不是专业的

68747470733a2f2f626c6f67:2e6373646e2e6e65742f746a797768737762646e313435362f:61727469636c652f64657461696c732f313434333732373136