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>：定义HTML文档。<head>：包含文档的元数据（如标题、样式表链接等）。<body>：包含网页的主体内容。<h1>到<h6>：定义标题。<p>：定义段落。<a>：定义链接。<img>：定义图像。<div>和<span>：用于布局和样式控制。
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 文档的示例：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个简单的段落。</p>
<img src="image.jpg" alt="示例图片" />
<a href="https://www.example.com">点击这里访问示例网站</a>
</body>
</html>在上述代码中：
<!DOCTYPE html>声明这是一个 HTML文档。<html>是整个 HTML 文档的根元素。<head>部分包含关于文档的元数据，如文档标题（<title>）。<body>部分包含网页的实际内容，如标题<h1>、段落<p>、图片<img>和链接<a>等。
1.6 网页头部标签
1.61 <title>标签
<title> 标签是 HTML 文档中用于定义网页标题的一个标签。它位于 <head> 部分内，并且每个 HTML 文档都应该包含一个 <title> 标签。网页标题通常显示在浏览器标签页的标题栏上，同时也会作为网页的标题在搜索结果中出现。
以下是 <title> 标签的基本使用示例：
<!DOCTYPE html>
<html>
<head>
<title>我的网页标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>在上述代码中，<title>我的网页标题</title> 定义了网页的标题为“我的网页标题”。
关于 <title> 标签的几个要点：
<title>标签的内容不会显示在网页的页面上，而是用于告诉浏览器和搜索引擎这个页面的标题是什么。- 网页标题对于搜索引擎优化（SEO）非常重要，因为它是搜索引擎判断页面内容的一个重要因素。
- 一个好的标题应该简洁、准确，能够概括页面内容，同时包含关键词。
- 通常建议
<title>标签的长度不要超过 60 个字符，以确保在搜索结果中能够完整显示。
1.62 <meta>标签
<meta> 标签在 HTML 中用于定义页面的元数据（metadata），这些数据不直接显示在页面上，但提供了关于页面内容的额外信息。元数据可以包括页面的描述、关键词、作者、最后修改时间、页面语言、字符集等。
<meta> 标签通常位于 <head> 部分中，并且可以包含多个属性，以下是一些常见的 <meta> 标签属性：
- charset：指定文档的字符编码，如
charset="UTF-8"。 - name：指定元数据的名称，例如
description、keywords、author等。 - content：指定与
name属性相关的具体内容。 - http-equiv：与 HTTP 头部信息相对应，如
http-equiv="Content-Type"。
以下是一些 <meta> 标签的示例：
- 指定字符集：
<meta charset="UTF-8">- 定义页面描述：
<meta name="description" content="这是一个关于HTML的简单介绍页面。">- 定义关键词：
<meta name="keywords" content="HTML, CSS, JavaScript">- 定义作者：
<meta name="author" content="张三">- 定义页面刷新：
<meta http-equiv="refresh" content="5;url=http://www.example.com">上述代码中的 refresh 属性指定页面在 5 秒后刷新，并跳转到 http://www.example.com。
- 定义 viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这个元数据用于移动端网页，确保网页在不同设备上正确显示。
<meta> 标签的完整语法如下：
<meta charset="字符集">
<meta name="名称" content="内容">
<meta http-equiv="HTTP头信息" content="内容">或者可以合并为一个更通用的形式：
<meta property="名称" content="内容">1.63 <link> 标签
<link> 标签在 HTML 中用于定义文档与外部资源之间的关系。它通常用于链接样式表（CSS）、图标（favicon）、RSS 订阅等。<link> 标签是一个空元素，意味着它不需要闭合标签。
<link> 标签通常位于 <head> 部分中，并且可以包含多个属性，以下是一些常见的 <link> 标签属性：
- href：指定外部资源的 URL。
- rel：指定当前文档与被链接资源之间的关系。常见的值包括
stylesheet、icon、alternate等。 - type：指定被链接资源的 MIME 类型。
- media：指定被链接资源适用的媒体类型或设备。
以下是一些 <link> 标签的示例：
- 链接外部样式表：
<link rel="stylesheet" href="styles.css">这个标签将 styles.css 文件链接到当前 HTML 文档，用于定义页面的样式。
- 定义网站图标（favicon）：
<link rel="icon" href="favicon.ico" type="image/x-icon">这个标签将 favicon.ico 文件链接到当前 HTML 文档，用于在浏览器标签栏或书签中显示网站图标。
- 定义移动设备上的图标：
<link rel="apple-touch-icon" href="apple-icon.png">这个标签用于为移动设备定义一个图标，当用户将网站添加到主屏幕时，会显示这个图标。
- 定义 RSS 订阅：
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss.xml">这个标签用于定义一个 RSS 订阅链接，用户可以通过这个链接订阅网站的更新。
- 定义不同设备的样式表：
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 768px)">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)">这个标签用于根据设备的屏幕宽度加载不同的样式表。desktop.css 适用于屏幕宽度大于等于 768px 的设备，而 mobile.css 适用于屏幕宽度小于等于 767px 的设备。
<link> 标签的完整语法如下：
<link rel="关系类型" href="资源URL" type="MIME类型" media="媒体类型">其中：
rel属性是必需的，用于指定关系类型。href属性是必需的，用于指定资源的 URL。type和media属性是可选的，用于进一步指定资源的类型和适用的媒体类型。
通过合理使用 <link> 标签，可以有效地管理网页的外部资源，提升网页的加载速度和用户体验。
1.64 <script>标签
<script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文档中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签中，以便于维护。 格式如下：
<scripttype="text/css" src="脚本文件名 n.js"></script>1.7 HTML5 文档注释和特殊符号
1.71 注释
注释在HTML文档中用于插入说明性的文本，它们不会被浏览器显示出来，但可以在源代码视图中看到。注释对于开发者来说是非常重要的，可以帮助其他人（或未来的你）理解代码的功能和结构。
注释的语法：
<!-- 这是一个注释 -->注释的用途：
- 提供代码的解释说明。
- 标记待办事项或待解决的问题。
- 隔离或临时禁用代码段。
1.73 特殊符号
特殊符号在HTML文档中用于表示那些在HTML中有特殊含义的字符，或者是一些无法直接通过键盘输入的字符。例如，小于号 < 和大于号 > 在HTML中用于定义标签，所以不能直接用来表示这些符号本身，需要使用特殊符号来表示。
以下是一些常见的HTML特殊符号及其代码：
| 显示效果 | 实体名称 | 实体编号 |
|---|---|---|
| & | & | & |
| < | < | < |
| > | > | > |
| " | " | " |
| ' | ' | ' |
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
特殊符号的用途：
- 避免浏览器解析错误。
- 在文本中插入特殊的符号，如版权符号、注册商标等。
使用特殊符号时，需要在符号前加上 &，后面跟上实体名称或编号，并以分号 ; 结尾。
例子：
<!-- HTML特殊符号示例 -->
<p>版权所有 © 2023</p>
<p>这段文本包含特殊字符：< > & "</p>在HTML文档中使用注释和特殊符号，可以使代码更加清晰，并且确保文档在不同浏览器中能够正确显示。
1.9 综合案例
结合上诉知识制作一个宋词展示网页
效果图如下：
代码如下：
<!--综合案例-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="宋词，苏轼"/>
<meta name="description" content="本网站收录精选宋词"/>
<title>宋词精选</title>
<style type="text/css"></style>
</head>
<body bgcolor="antiquewhite" text="#333333">
<h2 align = "center">临江仙 送钱穆父</h2>
<p align = "center">宋 苏轼</p>
<!--使用<br/>的效果-->
<p align = "center">一别都门三改火，天涯踏尽红尘。<br />
依然一笑作春温。<br />
无波真古井，有节是秋筠。<br />
惆怅孤帆连夜发，送行淡月风云。<br />
尊前不用翠眉颦。<br />
<font color = "微软雅黑">人生如逆旅，我亦是行人。</font></p>
<img scr ="img/1.1.jpg"/>
<!--水平线-->
<hr size = "2" color="biack" width="100%"/>
<p align="center">网页制作教程Copyright©深空大学</p>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
