web基础概念知识

Web基础概念知识详解

1. 互联网与万维网（WWW）

  • 互联网（Internet）: 全球互联的计算机网络，基于TCP/IP协议族进行通信，包含硬件设备（路由、服务器）和协议（HTTP, FTP, SMTP）。

  • 万维网（World Wide Web, WWW）: 基于互联网的信息共享系统，通过HTTP协议和超文本（HTML）链接资源，核心组件包括：

    • URL（资源定位符）
    • HTTP/HTTPS（传输协议）
    • Web浏览器（客户端工具）

    2. 网页核心三剑客

技术 角色 示例代码
HTML 定义页面结构 <h1>标题</h1>
CSS 控制样式与布局 body { background: #fff; }
JavaScript 实现动态交互 document.getElementById(“btn”).onclick = () => {…}

3. HTTP/HTTPS协议

  • HTTP（超文本传输协议）:
    • 无状态协议（每次请求独立）
    • 请求方法：GET（获取资源）, POST（提交数据）, PUT, DELETE等。
    • 状态码：200（成功）、404（未找到）、500（服务器错误）。
  • HTTPS:
    • 加密版HTTP，使用SSL/TLS协议保护传输安全。
    • 加密流程：
      1. 客户端发起HTTPS请求。
      2. 服务器返回数字证书（含公钥）。
      3. 客户端验证证书并生成对称加密密钥。
      4. 双方使用对称密钥加密通信。

4. URL结构解析

示例：
https://www.example.com:8080/path/to/page?name=John&age=25#section1

组件 作用
协议 https（定义传输方式）
域名/IP www.example.com
端口 :8080（默认80/443可省略）
路径 /path/to/page（资源位置）
查询参数 ?name=John&age=25（附加数据）
锚点 #section1（页面内跳转）

5. DNS域名解析流程

  • 关键点:
    • 递归查询： 客户端向本地DNS逐层查询直至获取结果。
    • TTL（生存时间）： 控制DNS缓存的过期时间。

6. 客户端与服务器交互

  • 请求头示例:
    1
    2
    3
    4
    GET /index.html HTTP/1.1
    Host: www.example.com
    User-Agent: Mozilla/5.0
    Accept-Language: en-US
  • 响应头示例:
    1
    2
    3
    4
    HTTP/1.1 200 OK
    Content-Type: text/html
    Content-Length: 1234
    Set-Cookie: session_id=abc123

7. 前端与后端协作

  • 前端： 负责用户界面和交互（React/Vue/HTML/CSS）。
  • 后端： 处理业务逻辑和数据处理（Node.js/Java/Python）。
  • API通信:
    1
    2
    3
    4
    5
    6
    // 请求
    POST /api/user
    {"username": "john", "password": "secret"}

    // 响应
    {"status": 200, "data": {"id": 1}}

8. 安全机制

  • XSS防护:

    • 对用户输入进行转义：<script> → &lt;script&gt;。
    • 设置HTTP头Content-Security-Policy。

  • CSRF防护:

    • 使用Token验证：<input type="hidden" name="csrf_token" value="...">。
    • 设置Cookie的SameSite属性为Strict。

9. 缓存与性能优化

  • 浏览器缓存：
    • 强缓存： Cache-Control: max-age=3600。
    • 协商缓存： Last-Modified与ETag验证。
  • CDN加速： 将静态资源缓存至全球边缘节点，降低延迟。

常见web前端语言

1. 三大基石：HTML / CSS / JavaScript

语言 类型 核心作用 示例代码
HTML 标记语言 定义网页内容结构 <h1>标题</h1>
CSS 样式表语言 控制页面布局与视觉样式 body { background: #fff; }
JavaScript 编程语言 实现动态交互与逻辑处理 document.querySelector(‘button’).onclick = () => { … }

2. JavaScript 与扩展语言

  • JavaScript (ES6+)
    • 现代语法： 箭头函数、解构赋值、Promise等。
    • 运行环境： 浏览器（DOM操作） & Node.js（服务端）。
      1
      2
      3
      // ES6模块化
      import { Component } from 'react';
      export const fetchData = async () => { ... };
  • TypeScript
    • 超集特性： 静态类型检测 + 接口定义。
    • 协作优势： 减少开发中低级错误。
      1
      2
      interface User { id: number; name: string; }
      const getUser = (id: number): User => { ... };

3. CSS 扩展语言与工具

工具 类型 功能特点 示例
Sass CSS预处理器 嵌套语法 / 变量定义 / Mixins $primary-color: #333;
Less CSS预处理器 动态样式计算 .box { height: @base * 2; }
PostCSS CSS处理工具 自动添加浏览器前缀 自动生成 -webkit- 前缀

4. 现代前端框架与库

框架 核心技术 核心优势 代码示例
React 虚拟DOM + JSX 组件化开发生态庞大 <Button onClick={handleClick}>Submit</Button>
Vue 响应式系统 + 模板 渐进式框架易上手
Angular 依赖注入 + 强类型 企业级全栈支持 @Component({…}) class AppComponent {}

5. 其他相关技术

  • WebAssembly (Wasm)
    • 非JS语言支持： 允许C/C++/Rust代码在浏览器运行。
    • 场景： 高性能计算（如游戏、图像处理）。
  • 模板引擎
    • 服务器端渲染： Handlebars、EJS。
      1
      2
      <!-- Handlebars示例 -->
      <div>{{#if user}}Welcome, {{user.name}}{{/if}}</div>
  • 静态网站生成器
    • 工具： Next.js（React）、Nuxt.js（Vue）、Gatsby。
    • 示例用途： 博客、文档站（基于Markdown）。

html标签

1. 基础结构标签

定义HTML文档的骨架，包含文档类型声明、根元素和核心结构。

标签 作用 示例代码 注意事项
React 虚拟DOM + JSX 组件化开发生态庞大 <Button onClick={handleClick}>Submit</Button>
<!DOCTYPE> 声明文档类型（HTML5标准） <!DOCTYPE html> 必须位于文档最前端
<html> 包裹整个HTML内容（根元素） <html lang=”zh-CN”>…</html> lang属性指定页面语言（SEO优化）
<head> 存放元数据和引用的外部资源 <head></head> 必须包含<title>和<meta charset>
<title> 定义浏览器标签页的标题 <title>我的网站</title> 重要SEO元素，推荐不超过60字符
<body> 存放页面实际显示内容 <body><h1>欢迎</h1></body> 所有可见内容都写在此处

2. 文本与段落标签

处理文本内容的关键标签，优化结构与可读性。

标签 作用 示例代码 注意事项
<h1>~<h6> 标题元素（从1级到6级） <h1>主标题</h1> 按层级使用，<h1>每个页面仅一个（SEO优化）
<p> 段落文本 <p>这是一段文字。</p> 避免嵌套块级元素（如div）在内部
<br> 换行符 第一行<br>第二行 无需闭合，直接在需要换行处插入
<hr> 水平分隔线 <hr> 常用于段落间的视觉分隔
<strong> 强调文本（加粗，语义化重要内容） <strong>警告！</strong> 优先用<strong>替代无意义的<b>
<em> 强调文本（斜体，语义化强调语气） <em>请注意</em> 优先用<em>替代无意义的<i>

3. 列表与链接

组织数据和导航的关键结构。

标签 作用 示例代码 注意事项
<ul> 无序列表（项目符号） <ul><li>苹果</li><li>香蕉</li></ul> 配合<li>使用
<ol> 有序列表（数字序号） <ol><li>第一步</li><li>第二步</li></ol> 可使用start属性自定义起始序号
<a> 超链接 <a href=”链接\">https://example.com">链接\ href可为URL、锚点(#id)或邮箱(mailto:)
<img> 插入图片 <img src=”logo.png” alt=”网站Logo”> alt属性必须填写（无障碍访问要求），若图片无法加载时显示

4. 表格与表单

用于展示结构化数据和用户输入的关键标签。

标签 作用 示例代码 注意事项
<table> 定义表格 <table><tr><th>姓名</th><th>年龄</th></tr></table> 需用<tr>定义行，<th>为表头，<td>为单元格
<form> 用户输入表单 <form action=”/submit” method=”POST”><input type=”text” name=”user”></form> method支持GET/POST，action指定提交地址
<input> 输入控件（文本/密码/按钮等） <input type=”email” placeholder=”输入邮箱”> 常见类型：text,password,checkbox,radio,submit
<textarea> 多行文本输入框 <textarea rows=”4” cols=”50”></textarea> 默认可拖拽调整大小，需CSS固定尺寸时可添加resize: none
<button> 按钮 <button type=”button”>点击 type默认为submit，设为button避免表单提交

5. 语义化标签（HTML5新增）

提升页面结构清晰度，辅助SEO和屏幕阅读器解析。

标签 作用 示例代码
<header> 定义页眉或区域的头部 <header><h1>网站标题</h1><nav>…</nav></header>
<footer> 定义页脚或区域的尾部 <footer>© 2023 版权所有</footer>
<nav> 导航菜单区域 <nav><a href=”/home”>首页</a><a href=”/about”>关于</a></nav>
<article> 独立的文章或内容块 <article><h2>新闻标题</h2><p>新闻正文…</p></article>
<section> 页面中的独立章节 <section><h2>产品介绍</h2><p>详细介绍…</p></section>
<aside> 侧边栏或附属内容 <aside><h3>相关链接</h3><ul>…</ul></aside>

6. 多媒体与容器标签

嵌入富媒体内容或通用容器。

标签 作用 示例代码
<video> 嵌入视频 <video controls><source src=”movie.mp4” type=”video/mp4”></video>
<audio> 嵌入音频 <audio controls><source src=”music.mp3” type=”audio/mpeg”></audio>
<div> 通用内容容器（块级元素）
<p>内容块</p></div>
<span> 通用文本容器（行内元素） <span style=”color: red;”>高亮文本</span>

7. 常用注意事项

  • 标签闭合： 部分标签如<img>、<br>是自闭合（无需</img>、</br>），其余必须显式闭合。
  • 语义优先： 用<nav>替代<div class="nav">提升代码可读性和SEO效果。
  • 属性规范：
    • <a>的target="_blank"建议加上rel="noopener"防止安全漏洞。
    • <img>必须包含alt属性，即使为空。
  • 兼容性： HTML5语义标签（如<header>）在旧版IE中需通过JS支持（或使用polyfill）。

CSS样式

1. 基础概念

CSS 用于控制网页的样式和布局，分离内容与表现，提升开发效率和可维护性。

核心机制 作用 示例
选择器 定位需要样式化的HTML元素 .class, #id, div, [attribute]
盒模型 元素布局基础（内容+内边距+边框+外边距） width, padding, border, margin
层叠与继承 样式优先级与继承规则 !important, 内联样式 > ID > 类 > 标签
单位 定义尺寸与颜色值 px, em, rem, %, rgb(), #HEX

2. 选择器类型

精准定位元素是CSS的核心能力，常用选择器分类如下：

类型 语法 匹配规则 示例
元素选择器 tag 匹配所有指定标签 div { color: red; }
类选择器 .class 匹配所有指定类名的元素 .btn { padding: 8px; }
ID选择器 #id 匹配唯一ID元素（页面中唯一） #header { height: 60px; }
属性选择器 [attribute] 或 [attr=value] 匹配具有特定属性的元素 input[type=”text”] { … }
后代选择器 selector1 selector2 匹配selector1内的selector2 .menu li { … }
子元素选择器 selector1 > selector2 匹配selector1直接子元素selector2 ul > li { … }
伪类选择器 :pseudo-class 匹配元素的特定状态（如悬停、聚焦） a:hover { color: blue; }
伪元素选择器 ::pseudo-element 创建虚拟元素（如首行、占位内容） p::first-line { … }
组合选择器 sel1, sel2 同时匹配多个选择器 h1, h2 { font-size: 24px; }

3. 盒模型与布局

掌握盒模型与布局技术是构建复杂界面的关键。

1
2
3
4
5
6
7
8
9
10
11
<!-- 盒模型示意图 -->
<style>
.box {
  width: 300px;         /* 内容宽度 */
  padding: 20px;        /* 内边距 */
  border: 2px solid #000; /* 边框 */
  margin: 10px;         /* 外边距 */
  box-sizing: border-box; /* 可选：宽度包含padding和border */
}
</style>
<div class="box">内容区域</div>
属性 作用 常用值
display 定义元素显示类型 block, inline, inline-block, flex, grid, none
position 定位方式 static, relative, absolute, fixed, sticky
float 元素浮动（图文环绕） left, right, none
flexbox 弹性布局（一维） display: flex; justify-content: center;
grid 网格布局（二维） display: grid; grid-template-columns: 1fr 2fr;
z-index 层叠顺序（需配合定位） 整数值（越大越靠前）

4. 常用样式属性

按功能分类的核心样式属性：

分类 属性示例 作用与代码示例
文本样式 font-family, font-size font-family: “Arial”, sans-serif;
text-align, line-height text-align: center; line-height: 1.5;
颜色背景 color, background-color color: #333; background-color: #f0f0f0;
background-image, opacity background-image: url(“bg.jpg”); opacity: 0.8;
边距边框 padding, margin padding: 10px 20px; margin: 0 auto;
border-radius, box-shadow border-radius: 8px; box-shadow: 2px 2px 5px #ccc;
动画过渡 transition, animation transition: all 0.3s ease;
@keyframes @keyframes fadeIn { from { opacity: 0; } }

5. 响应式设计

针对不同设备适配布局的核心方法：

1. 媒体查询（Media Queries）：

1
2
3
4
5
/* 视口宽度 ≤ 768px 时生效 */
@media (max-width: 768px) {
  .container { padding: 10px; }
  .menu { display: none; }
}

2. 视口单位：

  • vw（视口宽度 1%）、vh（视口高度 1%）
  • 适用于全屏元素或字体缩放：font-size: calc(16px + 1vw);

3. 弹性布局与网格：

1
2
3
4
5
6
7
8
9
10
11
/* 弹性布局自动换行 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
/* 网格自适应列宽 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

6. 预处理器与框架

提升开发效率的工具生态：

工具 描述 示例代码/用法
Sass/SCSS 支持变量、嵌套、混合的CSS扩展语言 scss $primary-color: #3498db; .btn { color: $primary-color; }
Bootstrap 流行UI框架（预设组件与响应式系统） <button class=”btn btn-primary”>按钮</button>
Tailwind CSS 原子化CSS框架（通过类名组合样式） <div class=”p-4 bg-blue-500 text-white”></div>

7. 调试与优化

1. 开发者工具：

  • 浏览器检查（Chrome DevTools）：实时修改样式、调试布局。
  • 使用border: 1px solid red;临时高亮元素布局。

2. 性能优化：

  • 避免过多嵌套选择器（如 .nav ul li a）。
  • 使用 transform 替代 top/left 实现动画（触发GPU加速）。
  • 压缩CSS文件：工具如 CSSNano。

3. 前缀兼容性：

  • 使用 Autoprefixer 自动添加浏览器前缀：
    1
    2
    3
    4
    /* 原始代码 */
    .box { display: flex; }
    /* 处理后 */
    .box { display: -webkit-box; display: -ms-flexbox; display: flex; }

JavaScript

1. 基础语法

JavaScript 是动态类型、基于原型的语言，用于实现网页交互逻辑。

概念 语法/示例 说明
变量声明 let, const, var let age = 25;（块级作用域），避免使用var
数据类型 String, Number, Boolean, null, undefined, Object, Symbol, BigInt typeof “Hello” → “string”
运算符 +, -, ==（松散相等）, ===（严格相等） “5” == 5 → true，”5” === 5 → false
条件语句 if…else, switch js if (score > 60) { console.log(“及格”); }
循环语句 for, while, for…of, for…in for (let i = 0; i < 5; i++) { … }
函数定义 function, 箭头函数 js const sum = (a, b) => a + b;

2. 核心概念

深入理解JavaScript的运行机制和设计模式。

特性 说明 示例
作用域 变量访问范围（全局、函数、块级作用域） let和const支持块级作用域，避免变量污染
闭包 函数可以记住并访问其词法作用域外的变量 js function outer() { let x = 10; return function() { console.log(x); }; }
原型链 对象通过__proto__继承属性和方法 js let arr = []; arr.proto === Array.prototype → true
this指向 根据调用上下文动态变化（可通过call, apply, bind绑定） js obj.method = function() { console.log(this); };
事件循环 JS单线程通过Event Loop处理异步任务 js setTimeout(() => console.log(“延迟执行”), 0);

3. DOM操作

与HTML元素交互的核心API，实现动态页面效果。

1
2
<div id="app">点击按钮</div>
<button class="btn">点击我</button>
方法 作用 示例
document.querySelector 获取单个元素 const btn = document.querySelector(“.btn”);
addEventListener 添加事件监听 btn.addEventListener(“click”, handleClick);
createElement 创建新元素 const div = document.createElement(“div”);
appendChild / removeChild 添加/移除子元素 document.body.appendChild(div);
classList 操作元素类名 div.classList.add(“active”);

注意事项：

  • 频繁操作DOM会导致重排（Reflow）和重绘（Repaint），建议批量修改或使用文档片段DocumentFragment。
  • 事件委托：通过父元素代理子元素事件，减少监听器数量（如ul监听所有li的点击）。

4. 异步编程

处理非阻塞操作的核心方式，优化用户体验。

技术 说明 示例
回调函数 通过函数传递异步结果 js fs.readFile(“file.txt”, (err, data) => { … });
Promise 解决回调地狱，链式调用 js fetch(url).then(res => res.json()).catch(err => console.log(err));
async/await 用同步写法处理异步任务（基于Promise） js async function loadData() { let data = await fetch(url); }
Fetch API 取代XMLHttpRequest的现代网络请求方法 js fetch(url, { method: ‘POST’, body: JSON.stringify(data) });

5. 现代ES6+特性

提升代码简洁性和可维护性的核心功能。

特性 说明 示例
解构赋值 从数组或对象提取值 js const [a, b] = [1, 2]; const { name } = user;
模板字符串 支持多行字符串和变量插入 js console.log(用户：${name});
模块化 import和export管理代码模块 js export default function() {…}; import app from ‘./app.js’;
展开运算符 合并数组或对象 js const arr = […arr1, …arr2];
可选链(?.) 安全访问深层属性，避免Cannot read property错误 js const value = obj?.prop?.subProp;

6. 工具与调试

提升开发效率和代码质量的工具链。

工具 作用 使用场景
Chrome DevTools 调试代码、监控网络、性能分析 使用Sources面板设置断点，Console快速测试代码
ESLint 代码规范检查 在VS Code中集成，自动提示缩进、变量名等问题
Babel 将ES6+代码转换为向后兼容的JS版本 配置.babelrc支持旧浏览器
Webpack 打包模块化代码，优化资源加载 合并JS、CSS、图片，支持热更新