1.1 网页. 网站

网页与网站的区别：

网页（Web Page）

定义：网页是构成网站的基本单位，是通过超文本标记语言（HTML）编写，用于在浏览器中显示信息的文档。网页可以包含文本、图像、视频、音频、链接、表单等多种元素。

结构：网页通常包含头部（header）、主体（body）和尾部（footer）等部分，用于组织和呈现信息。

功能：网页具有交互性，用户可以通过点击链接、填写表单等方式与网页进行交互。

链接：网页之间通过URL（Uniform Resource Locator）链接，形成网站的结构和导航。

网站（Website）

定义：网站是一组相互关联的网页，通过HTTP或HTTPS协议在网络上发布，为用户提供信息和服务的集合体。

结构：网站通常具有清晰的目录结构，包括主页、子页面、分类页面等，这些页面通过链接相互连接。

目的：网站通常有明确的构建目的，如提供信息、销售产品、提供服务、建立品牌等。

管理：网站通常由网站管理员进行管理和维护，可能包括更新内容、添加新页面、优化SEO（搜索引擎优化）等。

扩展性：网站可以包含多个子域、多个语言版本、移动版等，以适应不同用户的需求。

总结

网页是网站的基本组成单位，用于展示信息和实现交互。网站是由多个网页组成的集合，具有明确的结构和目的，通过链接将这些网页连接起来。 常用术语：

URL:统一资源定位符，指定通信协议和地址，如"heep://ww.baidu.com"是一个URL，"http://"表示通信协议为超文本传输协议，“www.baidu.com”表示网站名称.

FTP：文本传输协议，通过该协议，可把文件从一个地方穿到另外一个地方，从而正真的实现资源共享。

超链接：指从一个网页指向一个目标的的连接方式。连接目标可以为任意一个东西 （如：小程序 网页 app等 ）超链接本身也可以是一段网址，一个图片或一段视频。

1.12 动态网页与静态网页

静态网页

内容生成：静态网页的内容在服务器上是以文件形式存储的，通常是.html文件。当用户请求这些页面时，服务器直接将文件发送给用户的浏览器。交互性：静态网页通常不具备交互性，或者交互性非常有限。用户看到的页面内容是固定的，不会根据用户的行为或输入而改变。更新方式：更新静态网页需要手动修改HTML文件，然后重新上传到服务器。因此，内容更新相对麻烦。性能：由于不需要服务器端处理，静态网页的加载速度通常较快。适用场景：适用于内容更新不频繁的网站，如个人博客、小型企业网站等。动态网页

内容生成：动态网页的内容是在服务器上实时生成的。服务器会执行服务器端脚本（如PHP、ASP、JSP等），根据用户的请求、数据库中的数据或其他条件生成HTML内容。交互性：动态网页可以提供高度的交互性，如用户注册、登录、评论、购物车等功能。更新方式：动态网页的内容更新通常通过数据库操作实现，不需要手动修改HTML文件，使得内容更新更加方便快捷。性能：由于需要服务器端处理，动态网页的加载速度可能会比静态网页慢，尤其是在数据量较大或服务器处理能力有限的情况下。适用场景：适用于内容更新频繁、需要用户交互的网站，如电子商务网站、社交媒体、新闻网站等。总结来说，静态网页适合内容固定、更新少的场景，而动态网页适合内容多变、需要用户交互的场景。在实际应用中，许多网站会结合使用静态和动态网页技术，以实现最佳的用户体验和网站管理效率。

1.2 网页的基本构成要素

1.21 网页的布局结构

除此之外还有许多种（例如：拐角型 标题行等）这里不一 一讲述了。

1.22 网页的色彩搭配

网页的色彩搭配对于用户体验至关重要，它不仅能够影响用户的情绪，还能帮助传达网站的主题和品牌形象。以下是关于网页色彩搭配的一些基本指南：

1. 色彩的基本组成

主色：网页的主色通常用于背景、大标题或重要元素，它是网站色彩搭配的基础。辅助色：辅助色用于网页的次要元素，如小标题、文字链接等，它能够与主色形成对比或协调。强调色：强调色用于突出特定元素，如按钮、图标或重要信息，通常使用较为鲜艳的颜色。2. 色彩搭配原则

对比原则：使用对比色或近似对比色来突出重要元素，增强视觉效果。和谐原则：使用相邻色或类似色来创造一个统一的视觉体验。平衡原则：在网页设计中保持色彩的平衡，避免某一颜色过于突出或过多使用。焦点原则：确保网页有一个清晰的焦点，避免过多鲜艳的颜色分散用户的注意力。3. 色彩搭配技巧

使用色轮：色轮可以帮助你找到互补色、相邻色等，以实现有效的色彩搭配。限制色彩数量：通常建议使用不超过三种主色调，过多的颜色会使网页显得杂乱无章。考虑色彩心理学：不同的颜色能够引发不同的情感反应，例如红色通常与激情和活力相关，蓝色则给人以平静和专业的感觉。响应式设计：考虑不同设备和屏幕对色彩显示的影响，确保网页在多种设备上都能正确显示。4. 常见的色彩搭配方案

单色搭配：使用单一颜色及其不同的阴影和亮度来设计网页，简洁而统一。互补色搭配：选择色轮上相对位置的颜色进行搭配，如蓝色与橙色。类似色搭配：选择色轮上相邻的颜色进行搭配，如蓝色与绿色。三角形搭配：在色轮上形成等边三角形的三种颜色搭配，如红色、黄色和蓝色。5. 工具和资源

在线色彩搭配工具：如Adobe Color、Coolors等，可以帮助你快速生成和测试色彩搭配方案。设计指南：参考知名品牌和网站的设计指南，了解他们是如何使用色彩的。合理的色彩搭配能够提升网页的美观度和用户体验，因此在设计网页时，应当充分考虑色彩的使用。

1.3 Web前端技术简介

1.31 初识Web前端

Web前端开发是构建网页和网站用户界面（UI）的过程，它主要关注用户在浏览器中看到和与之交互的部分。

定义

Web前端开发是指使用HTML、CSS和JavaScript等技术和工具来创建网页内容和用户界面的过程。它涉及到网页的设计、布局、交互和性能优化。

目标

创建美观且易于使用的用户界面。确保网页在不同设备和浏览器上的兼容性。提供丰富的交互体验。1.32Web前端开发的三大核心技术

1 HTML(超文本标记语言)：

作用：HTML是网页的骨架，用于定义网页的结构和内容。常用标签：

：定义HTML文档。：包含文档的元数据（如标题、样式表链接等）。：包含网页的主体内容。

到

：定义标题。

：定义段落。：定义链接。：定义图像。

和 ：用于布局和样式控制。2 CSS（层叠样式表）：

作用：CSS用于控制网页的样式和布局，包括颜色、字体、间距、布局等。常用属性：

color：设置文本颜色。font-size：设置字体大小。background-color：设置背景颜色。margin 和 padding：设置元素的外边距和内边距。display：控制元素的显示方式（如block、inline、flex等）position：控制元素的定位方式（如relative、absolute等）3 JavaScript

作用：JavaScript用于实现网页的动态效果和交互功能，如表单验证、动画、数据交互等。常用语法：

var、let、const：定义变量。if、else：条件语句。for、while：循环语句。function：定义函数。DOM操作：通过JavaScript操作HTML元素（如document.getElementById、document.querySelector等）。事件处理：如onclick、onmouseover等。1.33 Web前端开发工具

Web前端开发工具主要分为以下几类：

浏览器

浏览器是Web前端开发中不可或缺的工具，它用于查看和测试网页。以下是一些常用的浏览器：

Google Chrome：功能强大，内置开发者工具，支持多种插件。Mozilla Firefox：开源浏览器，强大的开发者工具，良好的兼容性。Safari：苹果公司的浏览器，优化了iOS和macOS上的网页显示。网页编辑器

网页编辑器是用于编写和编辑HTML、CSS和JavaScript代码的工具，以下是一些流行的网页编辑器：

Sublime Text：轻量级、跨平台的代码编辑器，具有丰富的插件生态系统。Visual Studio Code：由微软开发，功能强大，支持多种编程语言，拥有丰富的插件。

HBuilder 是国产软件，使用简单，支持前端代码编写与跨平台APP开发。

切图软件

切图软件主要用于从设计稿中提取图片资源，以下是一些常用的切图软件：

Photoshop：Adobe公司出品的图像处理软件，功能强大，是设计师和前端开发者的常用工具。GIMP：一个开源的图像处理软件，功能类似于Photoshop。Fireworks：Adobe公司出品的网页设计软件，已停止更新。这些工具各有特点，开发者可以根据自己的需求和喜好选择合适的工具。在实际开发过程中，这些工具往往需要相互配合使用，以达到最佳的开发效率。

1.4 HTML语法基础

1.41 HTML概述

HTML 的主要特点包括：

简单易学：语法相对简单，容易理解和掌握。标记语言：通过使用各种标签来定义文本的格式、结构和语义。跨平台性：可以在各种操作系统和设备上显示。与其他技术结合：常与 CSS（层叠样式表）和 JavaScript 等技术一起使用，实现更丰富的网页功能和样式。1.42HTML基本结构

HTML 的基本结构包括：

：声明文档类型为 HTML。：根标签，包含整个网页的内容。：头部标签，包含网页的元数据，如标题、样式表链接等。：主体标签，包含网页的实际内容，如文本、图像、链接等。1.5 创建HTML文档

以下是一个简单的 HTML 文档的示例：

欢迎来到我的网页

这是一个简单的段落。

点击这里访问示例网站

在上述代码中：

声明这是一个 HTML文档。 是整个 HTML 文档的根元素。 部分包含关于文档的元数据，如文档标题（

在上述代码中， 定义了网页的标题为“我的网页标题”。

关于

临江仙 送钱穆父

宋 苏轼

一别都门三改火，天涯踏尽红尘。

依然一笑作春温。

无波真古井，有节是秋筠。

惆怅孤帆连夜发，送行淡月风云。

尊前不用翠眉颦。

人生如逆旅，我亦是行人。

---

网页制作教程Copyright©深空大学

上一篇 下一篇