Web 基础课程 on ClearSec Wiki

css

Mon, 01 Jan 0001 00:00:00 +0000

CSS（层叠样式表）

CSS 是一种用于控制网页样式和布局的语言，它可以让开发者定义网页的外观，例如字体、颜色、间距、布局等。CSS 的主要作用是将HTML文档的结构与样式分离，从而提高开发效率和页面的可维护性。

1. CSS 的作用

样式设计：定义字体、颜色、背景、边框等视觉元素。
布局控制：通过CSS的布局模型（如Flexbox、Grid、定位等）来安排页面元素的位置。
响应式设计：通过媒体查询（Media Queries）实现不同设备上的自适应布局。
动画和交互：创建简单的动画效果（如过渡、关键帧动画）和交互反馈（如悬停效果）。

2. CSS 的基本语法

CSS 的基本语法由选择器和声明块组成：

选择器 {
 属性1: 值1;
 属性2: 值2;
 ...
}

选择器：用于选择页面中的HTML元素，例如类选择器（.class）、ID选择器（#id）、标签选择器（div）等。
声明块：包含一系列属性和值，用于定义样式。

3. 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CSS 示例</title>
 <style>
 /* 样式定义 */
 body {
 font-family: Arial, sans-serif;
 background-color: #f0f0f0;
 color: #333;
 }
 .box {
 width: 200px;
 height: 200px;
 background-color: #4CAF50;
 color: white;
 text-align: center;
 line-height: 200px;
 border-radius: 10px;
 transition: transform 0.3s ease;
 }
 .box:hover {
 transform: scale(1.1);
 }
 </style>
</head>
<body>
 <div class="box">Hover over me</div>
</body>
</html>

在这个示例中，CSS 定义了一个绿色的盒子，并在鼠标悬停时放大。

html

Mon, 01 Jan 0001 00:00:00 +0000

HTML

1. HTML（HyperText Markup Language）

1.1 HTML的定义与作用

HTML是用于构建网页结构的标记语言。它通过一系列的标签（Tags）定义网页的内容和结构，告诉浏览器如何显示页面内容。HTML文件以.html为扩展名，通常包含以下基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document Title</title>
</head>
<body>
 <h1>Welcome to My Web Page</h1>
 <p>This is a paragraph of text.</p>
</body>
</html>

1.2 HTML文档结构

<!DOCTYPE html>：
- 声明文档类型，告诉浏览器这是一个HTML5文档。
<html>：
- 根元素，包含整个HTML文档的内容。
- lang属性指定文档的语言（如en表示英语）。
<head>：
- 包含文档的元数据（Metadata），这些内容不会直接显示在页面上。
- 常见的元数据包括：
  - <meta charset="UTF-8">：指定字符编码为UTF-8。
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">：优化移动设备的显示效果。
  - <title>：定义文档的标题，显示在浏览器的标题栏或标签页上。
  - <link>：用于引入外部资源，如CSS文件。
  - <script>：用于引入外部JavaScript文件或定义内联脚本。
<body>：
- 包含用户可见的内容，如文本、图像、按钮等。

1.3 常用HTML标签

HTML标签分为块级标签（Block-level）和行内标签（Inline-level）。

1.3.1 文本标签

标题标签：<h1>到<h6>，定义不同级别的标题。

<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>

段落标签：<p>，定义段落。
```
<p>This is a paragraph of text.</p>
```
文本修饰：
- <strong>：加粗文本。
- <em>：斜体文本。
- <u>：下划线文本。
- <s>：删除线文本。
```
<p>This is <strong>important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
```

1.3.2 列表标签

无序列表：<ul>，列表项用<li>表示。

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

有序列表：<ol>，列表项用<li>表示。

<ol>
 <li>First Item</li>
 <li>Second Item</li>
 <li>Third Item</li>
</ol>

1.3.3 图像与链接

图像：<img>，通过src属性指定图像路径，alt属性提供图像的描述。
```
<img src="image.jpg" alt="Description of Image">
```
超链接：<a>，通过href属性指定链接目标。
```
<a href="https://example.com">Visit Example</a>
```

1.3.4 表格

表格：<table>，通过<tr>定义行，<td>定义单元格。

<table border="1">
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 </tr>
 <tr>
 <td>Row 1, Cell 1</td>
 <td>Row 1, Cell 2</td>
 </tr>
 <tr>
 <td>Row 2, Cell 1</td>
 <td>Row 2, Cell 2</td>
 </tr>
</table>

1.3.5 表单

表单：<form>，用于收集用户输入。

<form action="/submit" method="post">
 <label for="username">Username:</label>
 <input type="text" id="username" name="username"><br><br>
 <label for="password">Password:</label>
 <input type="password" id="password" name="password"><br><br>
 <input type="submit" value="Submit">
</form>

1.3.6 容器标签

<div>：块级容器，用于布局。

<span>：行内容器，用于文本包装。

<div class="container">
 <h1>Welcome</h1>
 <p>This is a paragraph inside a div.</p>
</div>

1.4 HTML属性

HTML标签可以有属性，用于提供附加信息。属性以“名称-值”对的形式出现，放在开始标签中。常见的属性包括：

javascript

Mon, 01 Jan 0001 00:00:00 +0000

JavaScript

JavaScript 是一种运行在浏览器中的脚本语言，用于实现网页的交互功能。它可以让网页“动起来”，例如响应用户输入、操作DOM（文档对象模型）、发送和接收数据等。

1. JavaScript 的作用

交互功能：实现按钮点击、表单验证、动态内容更新等。
DOM 操作：动态修改HTML元素的属性、内容和样式。
事件处理：监听和响应用户操作（如点击、键盘输入、鼠标移动等）。
异步通信（AJAX）：在不刷新页面的情况下与服务器通信，实现动态加载数据。
框架和库：通过Vue.js、React.js、jQuery等框架和库，简化开发流程。

2. JavaScript 的基本语法

JavaScript 是一种基于对象的语言，支持函数式编程和面向对象编程。以下是基本语法：

// 变量声明
let name = "Kimi";
const age = 25;

// 函数定义
function greet() {
 alert("Hello, world!");
}

// 事件监听
document.getElementById("myButton").addEventListener("click", function() {
 alert("Button clicked!");
});

3. 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>JavaScript 示例</title>
</head>
<body>
 <button id="myButton">Click me</button>
 <script>
 // 获取按钮元素
 const button = document.getElementById("myButton");

 // 添加点击事件监听
 button.addEventListener("click", function() {
 alert("Button clicked!");
 });
 </script>
</body>
</html>

在这个示例中，JavaScript 为按钮添加了一个点击事件，点击按钮后会弹出一个对话框。

Readme

Mon, 01 Jan 0001 00:00:00 +0000

Web Foudation html.md css.md javascript.md hw.pdf

Web开发基础

Mon, 01 Jan 0001 00:00:00 +0000

Web开发基础

1. Web通信

Web通信是Web应用的核心，主要涉及客户端（通常是浏览器）与服务器之间的交互。其核心概念和框架如下：

1.1 HTTP协议

定义：HTTP（HyperText Transfer Protocol，超文本传输协议）是Web通信的基础协议，用于定义客户端和服务器之间请求和响应的格式。
请求（HTTP Request）：
- 请求方法：常用的有GET（获取资源）、POST（提交数据）、PUT（更新资源）、DELETE（删除资源）。
- 参数传递：可以通过路径（如/info/aaa）、查询字符串（如?username=aaa）或请求体（如JSON格式）传递数据。
- 身份验证：通过Cookies等方式实现用户身份验证，但也存在安全性问题（如第三方Cookies）。
响应（HTTP Response）：
- 状态码：用于表示请求的结果，如200（成功）、400（请求错误）、403（禁止访问）、404（未找到）、500（服务器错误）。
- 正文：响应中可以携带文件或数据，如HTML页面、图片等。
HTTPS：HTTP的加密版本，通过SSL/TLS协议实现数据加密传输，解决HTTP的不安全问题（如信息明文传输、无法验证身份等）。

1.2 请求与响应流程

以网上选课系统为例：

用户通过浏览器访问选课系统（GET请求）。
服务器返回选课页面（200 OK状态码）。
用户输入用户名和密码并提交（POST请求）。
服务器验证用户信息，返回课表数据（响应正文）。

1.3 调试工具

Postman/Apifox：用于手动发送HTTP请求，测试API接口。

2. Web页面

Web页面是用户通过浏览器访问的内容，由HTML、CSS和JavaScript组成，统称为“前端三件套”。

2.1 HTML（HyperText Markup Language）

定义：HTML是用于描述网页内容的标记语言，通过标签定义网页的结构和内容。
常用标签：
- 文本标签：<h1>-<h6>（标题）、<p>（段落）、<ul>（无序列表）、<ol>（有序列表）、<li>（列表项）。
- 图像和链接：<img>（插入图片）、<a>（超链接）。
- 容器标签：<div>（分区容器）、<span>（文本片段）。
- 其他：<header>（页眉）、<style>（内部样式表）。
属性：HTML标签可以有属性，如class（类名）、id（唯一标识符）、style（样式）、src（外部资源链接）。

2.2 CSS（Cascading Style Sheets）

定义：CSS用于美化网页，定义HTML元素的样式。
使用方式：
- 内联样式：通过style属性直接在HTML标签中定义样式。
- 内部样式表：在<head>中使用<style>标签定义样式。
- 外部样式表：将样式定义在单独的.css文件中，通过<link>标签引入。
层叠性（Cascading）：当多个样式定义冲突时，优先级顺序为：内联样式 > 内部样式表 > 外部样式表。

2.3 JavaScript（JS）

定义：JavaScript是一种脚本语言，用于实现网页的动态交互。
功能：
- 操纵HTML元素（如修改样式、内容）。
- 响应用户事件（如点击按钮）。
- 与服务器交互（如通过AJAX动态加载数据）。
使用方式：
- 嵌入HTML：通过<script>标签直接写在HTML文件中。
- 外部脚本：将JavaScript代码写在单独的.js文件中，通过<script src="...">引入。

3. Web应用基础

Web应用是基于Web技术构建的应用程序，分为静态网页和动态网页，采用前后端分离的开发模式。