第一章网页制作的基础知识

MY.余

已于 2024-09-12 09:32:01 修改

阅读量625

点赞数 20

文章标签：前端

于 2024-09-11 21:59:00 首次发布

本文链接：https://blog.csdn.net/2302_82060572/article/details/142052806

版权

1.1网页，网站

网页和网站的区别：

1. 定义上的区别

网站（Website）是一个由多个网页（Web Page）组成的集合，通常包含一个或多个主题，提供相关的信息和服务，网站可以是个人的、企业的、政府的等各种类型，用于展示、交流、销售等多种目的。

网页（Web Page）是网站中的一个基本单位，它是通过超文本标记语言（HTML）编写的，可以在浏览器中显示和访问，网页通常包含文本、图片、音频、视频等多媒体元素，以及链接到其他网页的超链接。

2. 结构上的区别

网站通常具有较为复杂的结构，包括导航栏、侧边栏、底部等多个部分，以便于用户浏览和查找信息，网站的结构可以通过目录结构、层次结构等方式进行组织。

网页的结构相对简单，通常只包含一个主体部分，用于展示内容，网页之间的跳转主要通过超链接实现。

3. 功能上的区别

网站通常具有多种功能，如用户注册、登录、评论、搜索等，以满足用户的多样化需求，网站还可以通过后台管理系统对内容进行更新和维护。

网页的功能相对较少，主要用于展示信息，虽然网页也可以包含一些简单的交互功能，如表单提交、图片点击等，但这些功能通常是辅助性的，不构成网页的主要功能。

4. 技术上的区别

网站的开发和维护涉及到多种技术，如服务器端编程（如PHP、Java等）、数据库管理（如MySQL、Oracle等）、前端开发（如HTML、CSS、JavaScript等）等，网站还需要进行域名注册、服务器部署等工作。

网页的开发相对简单，主要涉及到前端技术，网页可以使用各种编程语言和框架进行开发，如HTML、CSS、JavaScript等，网页的开发完成后，需要将其上传到服务器上，才能被用户访问。

常用术语：

‌超链接‌：允许用户从一个网页跳转到另一个网页或站点的一种元素。超链接可以指向网页、图片、电子邮件地址、文件，甚至是应用程序。
‌URL（统一资源定位符）‌：用于标识互联网上资源的地址，包括网页和其他资源，每个URL都是唯一的。
‌HTTP（超文本传输协议）‌：是互联网上应用最为广泛的协议之一，用于将超文本文档从WWW服务器传输到本地浏览器。
‌域名‌：是互联网中服务器或网络系统的名称，用于解决IP地址的记忆问题，便于用户访问。
‌浏览器‌：用于显示网页服务器或档案系统的文件，允许用户与这些文件互动的软件。
‌上传/下载‌：在网页设计中，上传指的是将文件发送到服务器，而下载则是从服务器获取文件。
‌UI设计‌：涉及用户界面的设计，包括颜色、字体、图标等视觉元素的布局，以提升用户体验。
‌UX设计‌（用户体验设计）：关注用户在使用产品过程中的整体感受，包括可用性、易用性和愉悦性。
‌API（应用程序接口）‌：计算机和应用程序之间相互通信的方式。
‌Bootstrap‌：一个开源的前端框架，用于设计网站和Web应用程序。
‌CSS选择器‌：用于选择HTML元素以应用样式。

1.1.2静态网页和动态网页

1) 更新和维护
静态网页内容一经发布到网站服务器上，无论是否有用户访问，这些网页内容都是保存在网站服务器上的。如果要修改网页的内容，就必须修改其源文件，然后重新上传到服务器上。静态网页没有数据库的支持，当网站信息量很大的时候网页的制作和维护都很困难。

动态网页可以根据不同的用户请求，时间或者环境的需求动态的生成不同的网页内容，并且动态网页一般以数据库技术为基础，可以大大降低网站维护的工作量。

2) 交互性
静态网页由于很多内容都是固定的，在功能方面有很大的限制，所以交互性较差。

动态网页则可以实现更多的功能，如用户的登录、注册、查询等。

3) 响应速度
静态网页内容相对固定，容易被搜索引擎检索，且不需要连接数据库，因此响应速度较快。

动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页，其中涉及到数据的连接访问和查询等一系列过程，所以响应速度相对较慢。

1.2网页的基本构成元素

1.2.1文本

1.2.2图片和动画

1.2.3超链接：

‌网页中的超链接是一种允许用户从一个网页跳转到另一个网页或网站上的不同部分的链接。‌

超链接是网页设计中一个核心的概念，它允许用户通过点击文本、图片或其他元素，从一个页面跳转到另一个页面，甚至是同一个页面的不同部分。这种链接可以是文本、图片或其他可点击的元素，当用户将鼠标移动到这些元素上时，鼠标的箭头通常会变成一只手的形状，表明这是一个可以点击的链接。点击这些链接后，浏览器会跳转到链接指向的网页或页面内的特定位置。

超链接的本质是通过使用特定的标记语言标签（如HTML中的<a>标签）来实现的，这些标签定义了链接的目标地址和描述信息。超链接的目标可以是另一个网页、相同网页上的不同位置、一个电子邮件地址、一个文件，甚至是一个应用程序。因此，超链接不仅是连接不同网页的重要工具，也是构成网站和网页应用的基础元素之一。

超链接的类型包括：

‌绝对URL的超链接‌：直接指向特定网页的完整URL，不受当前页面的位置影响。
‌相对URL的超链接‌：相对于当前页面的位置指定目标网页的位置。
‌同一网页的超链接‌：也称为书签，用于在同一个页面内导航到特定部分。

1.2.4音频和视频

1.2.5交互表单：网页的交互是指用户与网页元素之间的互动过程，包括用户与网页的视觉和交互元素（如按钮、链接、表单等）的互动，以及用户通过网页提交的请求和网站的反馈和响应。

1.2.6其他常见元素：

‌超链接‌：超链接是网页中最重要和最基本的元素之一，它可以使一些孤立的网页产生一定的相互联系，从而使各个网页形成一个有机的整体‌1。
‌表格‌：在网页中，表格元素主要用来控制网页中信息的布局方式‌12。
‌表单‌：用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮‌1。
‌导航栏‌：导航栏实际上是一组采用超链接技术的网页对象，包括文字、图像、按钮等，它们有效地连接了网站或其他页面‌1。
‌CSS样式表‌：虽然不是直接的可见元素，但它决定了整个站点的布局风格和颜色主题‌2。
‌HTML标签‌：HTML提供了各种不同的标签来表示不同类型的元素，比如<a>表示超链接，<img>代表图像等‌2。
JavaScript‌：通过JavaScript可以实现一些动态的交互式的效果和控制，增加用户体验度‌

1.3页面布局结构

1.3.1 网页页面布局
1.3.2 网页色彩搭配

1.4 Web前端技术简介

1.4.1 初识WEB前端：Web开发是指构建、编写和维护网站或Web应用程序的过程。它包括创建静态网页、动态网页以及交互式Web应用程序。本文将介绍Web开发的基本概念，包括前端、后端、HTTP协议、HTML、CSS和JavaScript等。

1.4.2 WEB前端开发的三大核心技术：

‌HTML‌（超文本标记语言）是网页内容的骨架，用于描述网页的结构和内容。它使用一系列的标签来定义网页中的各种元素，如标题、段落、表格、链接、图片等，这些元素通过标签（如<h1>、<p>、<img>等）来表示。HTML定义了网页的基本结构和内容，是构建Web页面的基础。
‌CSS‌（层叠样式表）用于设置网页的视觉效果和布局，如字体、颜色、间距、尺寸等。CSS通过选择器和属性来定义页面元素的外观，实现网页的美观和布局设计。CSS具有层叠的特性，可以定义全局样式，也可以针对特定元素或状态定义样式，实现响应式设计和动画效果。
‌JavaScript‌是一种客户端脚本语言，用于实现网页的交互和动态效果。JavaScript可以操作网页的各种元素，响应用户的操作，处理数据，与服务器进行通信。通过JavaScript，可以实现表单验证、动态内容更新、网络请求等交互功能，增强网页的交互性和用户体验。

这三大核心技术共同构成了现代Web前端开发的基础，它们互相配合、相互作用。HTML定义网页的结构和内容，CSS负责网页的样式和布局，JavaScript实现网页的动态效果和交互逻辑。通过它们的结合运用，可以构建出功能完善、用户友好的Web应用‌

1.4.2.1 HTML
，全称为超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。作为网页内容的载体，HTML包含了用户需要浏览的内容，包括图文、视频，即构成网页的基本元素
1.4.2.2 CSS语言

它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

它是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

1.4.2.3 JavaScript语言

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

1.4.3 前端开发工具：

‌代码编辑器‌：
- ‌‌Visual Studio Code‌：支持多种编程语言，具有丰富的插件生态系统，适合各种规模的代码编辑和调试。‌12
- ‌‌Sublime Text‌：轻量级编辑器，适合快速编辑和查找代码。
- ‌Atom‌：开源编辑器，支持自定义主题和插件，适合个性化设置。
‌集成开发环境（IDE）‌：
- ‌‌WebStorm‌：提供强大的代码提示和调试功能，适合大型项目开发。‌1
- ‌Eclipse‌：支持多种语言，适合复杂项目的开发和管理。
‌版本控制工具‌：
- ‌Git‌：分布式版本控制系统，适合团队协作和代码管理。‌12
- ‌‌SVN‌：集中式版本控制系统，适合中小型项目。
‌包管理工具‌：
- ‌‌npm‌：Node.js的包管理器，适合管理前端项目的依赖。‌2
- ‌‌Yarn‌：替代npm的包管理器，提供更快的安装速度和更好的依赖管理。
‌调试工具‌：
- ‌‌ESLint‌：JavaScript静态代码分析工具，帮助发现和修复代码问题。‌4
- ‌‌Chrome DevTools‌：浏览器内置的开发者工具，适合调试HTML、CSS和JavaScript代码。‌23
- ‌React Developer Tools‌ 和 ‌Vue DevTools‌：针对特定框架的调试工具，帮助开发者更好地调试React和Vue应用。‌24
‌自动化构建工具‌：
- ‌‌Webpack‌：模块打包工具，适合前端项目的构建和优化。‌12
- ‌‌Gulp‌：基于流的自动化构建工具，适合自动化任务执行。
‌前端框架和库‌：
- ‌React‌：Facebook开发的JavaScript库，适合构建用户界面。
- ‌Vue.js‌：渐进式的JavaScript框架，适合构建Web界面。
- ‌Angular‌：Google开发的Web应用框架，适合构建动态单页应用。
- ‌Sass、Less、Stylus‌：CSS预处理器，提供变量、嵌套和混合等功能。

除此之外，还有一些其他有用的工具如Firebug（用于Firefox浏览器的调试扩展）、GSAP（用于动画和交互效果的库）等。这些工具在Web前端开发中发挥着重要作用，帮助开发者提高效率、优化代码质量并创建出更好的Web应用。

1.4.3.1 浏览器：

‌Google Chrome‌：由Google公司开发，以其简洁、快速和安全的特点受到广泛欢迎。Chrome提供了丰富的调试工具、性能分析、网络监测等功能，适合开发者使用。
‌Mozilla Firefox‌：由Mozilla基金会开发，是一款开源的Web浏览器。Firefox以其强大的隐私保护和定制性著称，支持各种插件和主题，用户可以根据个人喜好进行个性化设置。
‌Safari‌：由苹果公司开发，主要在Mac和iOS设备上使用。Safari浏览器界面简洁、操作流畅，同时支持各种插件和扩展程序，保证了一定的兼容性和速度。
‌Microsoft Edge‌：微软推出的新一代浏览器，采用Chromium内核，提供了智能的隐私保护功能，并支持各种扩展程序。
‌Opera‌：由挪威Opera Software ASA公司开发，以其快速、稳定的特点和丰富的功能定制受到用户喜爱，支持各种插件和扩展程序。
‌QQ浏览器‌：腾讯公司开发，基于Chromium内核，提供了快速启动、智能地址栏、自动填表等功能，适合快速浏览和社交分享。
‌UC浏览器‌：阿里巴巴集团旗下产品，以速度快和省流量著称，适合移动端用户使用。

这些浏览器各有特色，用户可以根据自己的需求和使用习惯选择合适的浏览器‌

1.4.3.2 网页编辑器

1.4.3.3 切图软件

1.5 HTML语法基础

HTML(Hyper Text Mark-up Language超文本标记语言)：不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示等，这些都是利用Html标记来实现。

HTML的文档结构

所有的网页文件，通过都是四对标记来构成文档的骨架，它们是：

1.5.1 HTML概述

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

1.5.1.1 语言

WEB编程语言，主要分为WEB静态语言和WEB动态语言，WEB静态语言就是通常所见到的超文本标记语言 (标准通用标记语言下的一个应用)，WEB动态语言主要是ASP，PHP，JAVASCRIPT，JAVA，CGI等计算机脚本语言编写出来的执行灵活的互联网网页程序

1.5.1.2 超文本

超文本标记语言(标准通用标记语言下的一个应用、外语缩写:HTML)可以规定网页中信息陈列格式，指定需要显示的图片，嵌入其他浏览器支持的描述性语言，以及指定超文本连接对象，如其他网页、JAVA、CGI程序等。

1.5.1.3 标记

1.5.2 HTML基本结构

HTML文档的基本结构是所有网页的基础框架。一个典型的HTML文档由以下几个部分组成：

文档类型声明：位于文档的最开头，用来告诉浏览器这是一个HTML5文档。声明方式为 <!DOCTYPE html>1 4。
<html>标签：这是HTML文档的根元素，所有其他元素都应位于这对标签之内。它包含了<head>和<body>两个主要部分6。
<head>标签：这部分包含了文档的元信息，如标题、字符集、样式表链接等。<head>标签内的信息不会直接显示在网页上1 4。
<title>标签：位于<head>标签内部，定义了文档的标题，这个标题会显示在浏览器的标题栏或标签页上4。
<body>标签：这部分包含了网页的所有可见内容，如文本、图片、链接、表格等1 4。

以上就是HTML基本结构的主要内容。在实际开发中，你可能还会遇到更多的HTML元素和属性，但掌握这些基础知识对于理解和编写HTML代码至关重要。

1.5.2.1 HTML文档1.5.2.2 HTML文档头标签<head>...</head>

1.5.2.3 文档编码

一、web页面编码格式
1.jsp页面编码: jsp文件本身的编码（pageEncoding）
<%@ page pageEncoding="UTF-8"%>
1
2.web页面显示编码: jsp的输出流在浏览器中显示的编码（contentType）
<%@ page contentType="text/html; charset=UTF-8"%>
1
3.web页面输入编码: 输入框输入的字体编码(html页面charset)
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
1
4.web服务器输入的请求流: web server相应浏览器的请求数据(setCharacterEncoding)
request.setCharacterEncoding();
response.setCharacterEncoding();
1
2
5.web服务器输出的响应流: web server相应浏览器的输出数据(setContentType)
response.setContentType()

1.5.2.4 HTML文档主体标签<body>...</body>

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签
1.7.2 <meta>标签
1.7.2.1 keywords
1.7.2.2 description
1.7.3 <link>标签
1.7.4 <script>标签

1.8 HTML5文档注释和特殊符号

1.8.1 注释

是HTML中的注释标签，使用 < 和 > 是符合HTML标签语法规则的。
/* */是CSS的注释标签。
/* */ （注释代码块/注释多行）、//（注释单行）是JS的注释标签。
两种注释有各自的使用环境,并且不能相互替代。

举例用法如下：
1、 
2、//我在这一行才是注释内容 (在css或javascript中插入单行注释)
3、 (用于在css或javascript中插入多行注释)

/*

我是注释的第一行

我是注释的第二行

我是注释的第三行

看不见我~

*/

1.8.2 特殊符号标签<html>...</html>

1.9 综合案例——临江仙 · 送钱穆父

<!DOCTYPE html>
<html>
   <head>
       <meta name="keywords" conten="宋词,苏轼 "charset="utf-8" />
       <meta name="description" content="本网站收入精选宋词/>"
       <title>宋词精选</title>
       <style tyep="text/css">
           p{
           text-align: center;
       font-size: larger;

           }
       </style>
   </head>
   <body bgcolor="antiquewhite" text="#333333">
       <h2 align="center">临江仙·送钱穆父</h2>
       <p >宋苏轼</p>
       
       <p >一别都门三改火，天涯踏尽红尘。<br />
       依然一笑作春温。<br />
           无波真古井，有节是秋筠。<br />
           惆怅孤帆连夜发，送行淡月微云。<br />
           尊前不用翠眉颦。<br />
           <font color="brown" face6="微软雅黑">
           人生如逆旅，我亦是行人。</font></p>
<img src="img/1.1.jpg" />

<hr size="2" color="black" width="100%"/>
<p align="center">网页制作教程Copyright©广东南方职业学院</p>
   </body>
</html>

MY.余

关注

20
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
第一章网页制作的基础知识

1.4.1 初识WEB前端：Web开发是指构建、编写和维护网站或Web应用程序的过程。它包括创建静态网页、动态网页以及交互式Web应用程序。本文将介绍Web开发的基本概念，包括前端、后端、HTTP协议、HTML、CSS和JavaScript等。1.4.2 WEB前端开发的三大核心技术：‌HTML‌（超文本标记语言）是网页内容的骨架，用于描述网页的结构和内容。它使用一系列的标签来定义网页中的各种元素，如标题、段落、表格、链接、图片等，这些元素通过标签（如等）来表示。
复制链接

扫一扫