以下是关于网页设计与制作的核心知识点及相关扩展内容，涵盖技术栈、设计原则与实践方法：
网页设计（Web Design）侧重于视觉表现与用户体验，网页制作（Web Development）聚焦前端代码实现，二者需协同完成以下内容：
| 技术分类 | 核心组件 | 功能说明 |
|---|---|---|
| 结构层 | HTML5 | 定义页面内容与语义化结构 |
| 表现层 | CSS3 | 控制布局、颜色、动画等视觉样式 |
| 行为层 | JavaScript | 实现交互逻辑与动态效果 |
| 响应式框架 | Bootstrap/Tailwind | 快速构建跨设备兼容界面 |
1. F型视觉动线：依据用户眼球移动规律布局关键信息
2. CRAP原则：对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密性（Proximity）
3. 色彩系统：主色不超过3种， contrast ratio ≥4.5:1保证可读性
| 标签 | 用途 |
|---|---|
| <header> | 页面头部区域 |
| <nav> | 导航链接容器 |
| <article> | 独立内容区块 |
| <section> | 文档逻辑分区 |
• 盒模型：content + padding + border + margin
• Flex/Grid布局：实现复杂响应式结构
• 媒体查询：@media (max-width: 768px) { ... }
| 类别 | 具体内容 |
|---|---|
| DOM操作 | getElementById、querySelector |
| 事件处理 | addEventListener、事件委托 |
| 异步通信 | Fetch API、AJAX |
1. Viewport元标签：<meta name="viewport" content="width=device-width">
2. 流体网格（Fluid Grids）：使用%替代px
3. 响应式图片：<img srcset="..." sizes="...">
4. 断点设置参考（基于主流设备）：
| 设备类型 | 屏幕宽度 |
|---|---|
| 手机（竖屏） | <576px |
| 平板（竖屏） | 576px - 768px |
| 桌面端 | >992px |
• 代码级优化：CSS/JS文件压缩合并（Webpack工具链）
• 资源加载策略：懒加载（Lazy Load）、异步加载
• 缓存控制：设置Cache-Control/ETag头部
• 关键指标标准：首次内容绘制（FCP）<1.8秒
1. 语义化HTML：正确使用h1-h6层级
2. Meta标签优化：
<meta name="description" content="...">
3. 结构化数据：使用JSON-LD格式
4. 移动优先索引：Google主要采用移动版内容排名
设计阶段：Figma/Skitch（原型设计）
开发环境：VS Code + Chrome DevTools
版本控制：Git + GitHub/GitLab
自动化构建：Node.js + npm脚本/Gulp
注：新技术趋势如Web Components微前端架构、CSS Houdini底层API等技术需持续关注。
查看详情
查看详情
