Web开发基础
I. 网页基础
A. HTML
1、结构标签
<html>: 定义整个HTML文档
<head>: 包含文档的元数据，如标题和链接
<body>: 包含可见的页面内容
<title>: 定义浏览器工具栏的标题
<meta>: 提供元数据信息，如字符编码
2、格式标签
<h1>到<h6>: 定义不同级别的标题
<p>: 定义段落
<div>: 定义一个块级元素，用于布局
<span>: 定义内联元素，用于样式化文本
3、链接与图片
<a>: 定义超链接，用于页面跳转
<img>: 插入图像，需要指定src属性
<map>: 定义图像映射，用于点击图像的不同区域
B. CSS
1、选择器
元素选择器： 通过HTML元素的标签名来选择元素
类选择器： 以.开头，用于选择具有特定类的元素
ID选择器： 以#开头，用于选择具有特定ID的元素
2、盒模型
内容(content): 实际内容所在区域
填充(padding): 内容和边框之间的空间
边框(border): 环绕在填充和外边距之间的线
外边距(margin): 元素周围的空间
3、布局方式
静态定位(static): 默认布局方式，元素按照正常的文档流进行排列
相对定位(relative): 元素相对于其正常位置进行偏移
绝对定位(absolute): 元素相对于最近的已定位祖先元素进行定位
固定定位(fixed): 元素相对于浏览器窗口进行定位
浮动定位(float): 元素脱离正常文档流并向左或向右移动
弹性盒子布局(flexbox): 提供更加有效的布局、对齐和空间分配方式
网格布局(grid): 二维布局系统，用于创建复杂的设计布局
C. JavaScript
1、变量与数据类型
基本数据类型： string, number, boolean, null, undefined
对象： 由键值对组成，可存储更复杂的数据结构
2、函数
定义函数： 使用function关键字声明
调用函数： 使用函数名后跟括号的方式执行
匿名函数： 没有具体名称的函数，通常用于事件处理或回调
3、事件处理
事件监听： 使用addEventListener方法监听特定事件
事件传播： 事件从触发元素向上冒泡至根节点的过程
事件捕获： 事件从根节点向下传递至目标元素的过程
II. Web安全
A. 跨站脚本攻击 (XSS)
描述： XSS是一种常见的攻击方式，攻击者通过在网页中注入恶意脚本，当其他用户浏览该网页时，这些脚本会在用户的浏览器上执行。
防护措施： 对用户输入进行验证和清理，使用内容安全策略（CSP）限制资源的加载，以及使用HTTP头部的XContentTypeOptions和XXSSProtection来防止攻击。
B. SQL注入
描述： SQL注入是攻击者通过在应用程序的查询字符串中插入恶意SQL代码，以此来操控数据库，获取、篡改或删除数据。
防护措施： 使用预编译语句和参数化查询，限制数据库的使用权限，以及实施严格的输入验证。
C. HTTPS与SSL/TLS
描述： HTTPS是在HTTP协议上增加SSL/TLS加密的安全协议，它为数据传输提供了加密保护，确保数据在传输过程中的安全性。
应用： 网站应当使用HTTPS来保护用户数据的隐私和完整性，特别是在处理敏感信息如登录凭据、支付信息等时。
D. 认证与授权机制
描述： 认证是确认用户身份的过程，而授权是授予用户访问资源的能力，这两者是网络安全的关键组成部分。
实践案例： 使用OAuth、OpenID Connect等开放标准进行认证，以及使用JSON Web Tokens (JWT)来管理用户的会话和授权信息，Google和Facebook的API就广泛使用了OAuth 2.0来进行用户认证。
III. Web性能优化
A. 网络请求优化
减少HTTP请求： 合并CSS和JavaScript文件，使用图片精灵和图标字体来减少请求次数。
使用CDN: 利用地理分布式的内容分发网络（CDN）来加速静态资源的加载速度。
压缩资源： 启用服务器端的GZIP或Brotli压缩来减小传输文件的大小。
B. 资源加载策略
异步加载： 使用async和defer属性来控制脚本的加载和执行时机。
按需加载： 实现代码拆分，只在需要时加载特定的模块或组件。
预加载： 使用<link rel="preload">来提前加载关键资源，加快页面渲染速度。
C. 缓存策略
HTTP缓存： 设置合适的CacheControl和Expires头部来指示浏览器缓存静态资源。
Service Workers: 使用Service Workers来控制页面和静态资源的缓存，即使在离线状态下也能提供服务。
应用案例： Amazon的电子商务平台通过优化图片大小和格式，以及实施智能的缓存策略，显著提高了页面加载速度和用户体验。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/653203.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复