计算机与信息技术基础 课件 第1-4章 计算机与计算思维 - 网页设计与布局

第1章计算机与计算思维01计算机的发展02计算机系统04计算机的信息表示03计算机思维目录Content05程序设计基础发展阶段起止年份电子元件特点应用领域第一代1946-1956电子管运算速度5000~30000次/秒，体积大，可靠性差军事计算、科学实验（如弹道计算等）第二代1957-1964晶体管运算速度几万~几十万次/秒，体积缩小，可靠性提高数据处理、工业控制、早期航空航天等第三代1965-1970小规模集成电路运算速度几十万~几百万次/秒，体积和重量进一步缩小，可靠性提高企业级应用、远程通信、教育科研等第四代1971-至今大规模、超大规模集成电路运算速度几百万次~上亿次/秒，体积和重量空前缩小，可靠性显著提高个人计算、互联网、多媒体、移动设备、云计算等第五代1980-至今超大规模集成电路和其他新型物理元件运算速度和存储能力都空前提高，高度智能化大数据分析、自动驾驶、物联网、智慧城市、AI研究计算机的发展1956年，计算机被列为发展科学技术的重点之一。1958年，中国第一台电子管计算机“103机”研制成功。2010年11月，中国国防科技大学研制的“天河一号”超级计算机以每秒2570万亿次的运算速度排名世界第一。2022年11月的全球超算Top500榜单中，中国在超级计算机的数量方面保持领先优势，“神威·太湖之光”和“天河二号”分别位列第七和第十位。中国的计算机发展计算机系统组成结构图办公软件、网络软件、多媒体软件等计算机硬件系统硬件系统即组成计算机的所有实体部件的集合。计算机硬件系统包括主机和外设。输入设备输出设备存储器运算器控制器程序、数据输出数据程序数据指令地址数据数据

冯·诺依曼计算机体系结构图CPUCPU是中央处理器（CentralProcessingUnit），是一块超大规模的集成电路，是计算机的运算核心和控制核心，决定着计算机的性能。功能：主要是解释执行计算机指令以及处理数据运算。目前Intel处理器占80%以上市场份额，此外常见还有AMD处理器、国产龙芯。内存内存（主存）又称为内部存储器，是计算机中的主要部件，它是外存与CPU进行沟通的桥梁。作用：用于暂时存放CPU中的运算数据，以及与硬盘等外部存储器交换的数据。内存是直接与CPU相连并协同工作的存储器。计算机中所有程序的运行都是在内存中进行的，内存的存取速度直接影响计算机的整体运行速度。根据存取方式的不同，内存分为随机存取存储器、只读存储器和高速缓冲存储器内部存储器的构成

随机存储器（RAM）只读存储器（ROM）高速缓存（CACHE）用以存放固定的程序和数据(BIOS)。只能读出，不能写入。断电后，信息不会丢失。既可以从中读出数据，也可以写入数据。断电后，信息会丢失。用以临时存放用户的程序和数据。最重要的存储器。整个计算机系统的内存容量主要由这个部分的容量决定。是位于CPU与内存之间，是一个读写速度比内存更快的存储器。通常包括一级cache,二级cache和三级cache。计算机的主要性能指标外存容量通常是指硬盘容量。运算速度计算机单位时间内执行指令的平均条数显存、硬盘转速、软件配置等内存容量主要是指RAM的部分。字长计算机一次运算中处理的一组二进制数的长度。计算机主要性能指标字长计算机在一次运算中处理的一组二进制数称为一个计算机的“字”，而这组二进制数的位数就是“字长”。字长总是8的整数倍。计算机字长一般分为8位、16位、32位、64位等。这里所说的内存容量主要是指RAM的部分，即通常所说的内存条。内存容量的大小反映计算机动态存储信息的能力。内存容量越大，能处理的数据量就越庞大。内存容量外存主要用来长期保存数据信息。外存容量通常是指硬盘容量（包括内置硬盘和移动硬盘）。外存储器容量越大，可存储数据就越多。外存容量运算速度计算机运算速度，是指计算机每秒钟所能执行的指令条数，用“百万条指令／秒”（MIPS，MillionInstructionPerSecond）来描述。微型计算机一般采用主频(CPU时钟频率）来描述运算速度。一般说来，主频越高，运算速度就越快。对比项目ENIAC微机（IntelCore10thi7)年代19462019运算速度5000次加法/s43亿次运算/s重量28吨1.3kg（笔记本电脑）尺寸占地100m213、14、15英寸计算机软件系统软件系统系统软件操作系统：Windows、Unix、Linux等办公软件、网络软件、多媒体软件等语言处理程序

数据库管理系统

应用软件系统工具软件位于软件系统最底层管理计算机硬件满足不同应用需求而开发的程序操作系统（OperatingSystem)：是计算机软件中最重要和最基本的系统软件，是计算机裸机与应用程序及用户之间的桥梁。负责指控制和管理整个计算机系统的硬件和软件资源。常用的操作系统有Windows、Unix、Linux系统等。操作系统在计算机中的作用可以概括为两点：1.对计算机的软硬件资源进行统一管理和调度，以提高计算机的使用效率。其中软件资源包括有关的程序和文档，硬件资源包括CPU、主存和外部设备等。2.为用户提供良好的人机界面，使得用户不必了解过多的计算机硬件细节，可以更便利达到使用和操作计算机的目的。计算机由五个基本部分组成。采用二进制形式表示计算机的指令和数据。“存储程序”与“程序控制”计算机设计的三大思想预先将需要执行的任务用程序设计语言写成程序（指令序列），与需要处理的原始数据一起通过输入设备输入并存储在计算机的存储器中存储程序

程序控制

每一条指令中明确规定了计算机从哪个地址取数，进行什么操作，然后送到什么地址去等步骤。运算器数据流计算机基本工作原理输入设备存储器输出设备控制流程序/数据指令流控制器0000001100000101+0000100035800001000计算思维

进入信息社会后，人们解决问题思维方式是利用现代计算工具进行数据处理和构建新的数据模型。这种运用计算机科学的基础概念进行问题求解、系统设计和理解人类行为的思维方式，称为计算思维。

在当今大数据网络时代，计算思维是人人都需要掌握的一种解决问题的能力。计算思维：是运用计算机科学的基础概念进行问题求解、系统设计、以及人类行为理解等涵盖计算机科学之广度的一系列思维活动。计算机信息存储单位位（bit,b)：最小的信息单位字节（byte,B)：最基本的信息存储单位1B（字节）=8b1KB（千字节）=210B=1024B1MB（兆字节）=220B=1024KB1GB（吉字节）=230B=1024MB1TB（太字节）=240B=1024GBTerabyteGigabyteMegabyteKilobytebyte计算机信息存储单位文件内存容量：8GB、16GB、32GB、64G等

硬盘容量：500GB、1TB

、2TB、4TB等U盘容量：128GB、256GB、1TB等数制，以表示数值所用的数符个数来命名，并按一定进位规则进行计数的方法。每一种数制都有它的基数和各数位的位权。二进制0、1两个基本数符逢二进一基数是2十进制0、1、2…9十个基本数符逢十进一基数是10八进制0、1、2…7八个基本数符逢八进一基数是8十六进制0…9，A…F十六个基本数符逢16进一基数是16数制与数制转换BinaryOctalHexadecimalDecimal

十进制数5678.123可以写成：10是基数，第i位的权是10i-1()1010

310

210

110010-110-210-3数制与数制转换千位百位十位个位十分位百分位千分位

2是基数，第i位的权是2i-1任意进制转换为十进制八进制

十进制十六进制

十进制二进制

十进制（3B）H=（）D想一想：59十进制转换为任意进制整数部分，除“n”取余，直到商为零。将所得各次余数依次排列，先取的余数为低位，后取的为高位。转换后R进制整数部分为余数自下而上排列。1363102222……1……0……1……1

低位

高位(13)10=()2取余十进制整数转为二进制1101十进制转为R进制，将整数部分和小数部分分别转换，然后再组合。小数部分，乘“n”取整。用n乘十进制小数，乘积有整数和小数部分。把整数取出，再用n乘小数部分，直到余下的小数部分全为0或满足精度。将所得整数依次排列，以首次取得的整数部分为高位。……1……0……1……1高位

低位(0.6875)10=()20.68752×1.37500.37502×0.75000.75002×1.50000.50002×1.0000取整0.1011十进制小数转为二进制（13.6875）D=（）B想一想：1101.1011二进制转为八、十六进制二进制转化成八进制和十六进制。二进制转八进制三位一组，转十六进制四位一组，不足补零。整数部分：从右向左进行分组。小数部分：从左向右进行分组。

（11

0110

1110.1101

0100）B=（36E.D4）H

36E

D

4

（001

101

101

110.110

101）B=（1556.65）O

155665整数部分位于最高位的11，不足4位，应以零补足，00110011二进制八进制00000011010201131004101511061117(2C.1D)H=(0010

1100.0001

1101)B十六进制转为二进制二进制十六进制10008100191010A1011B1100C1101D1110E1111F二进制十六进制0000000011001020011301004010150110601117八、十六进制转为二进制使用计算器来实现数制转换，方便快捷。主要适合整数的转换。数制与数制转换字符编码国际上最广泛使用的字符编码是美国信息交换标准码，即ASCII码(AmericanStandardCodeforInformationInterchange)。字符编码，是指对一切输入到计算机中的字符进行二进制编码的方式。ASCII码通常用7位二进制数来进行编码，27=128，所以可以表示128个字符（如下表）。包括控制字符、数字字符和大写、小写字母等。完整的ASCII码表1010111用一个字节来存放，所以实际上是01010111ASCII码数字<大写英文字母<小写英文字母ASCII码值大小关系：ASCII编码规律A

0100000165二进制十进制a

01100001970

00110000481.汉字输入码是为将汉字输入到计算机的代码，也叫“外码”。

如拼音码、五笔字型码等。音码：微软拼音、搜狗拼音输入法等。形码：五笔字型五笔字型码：dd“大”拼音码：da计算机内部由外到内由内到外汉字编码汉字内码：是指计算机内部存储、处理汉字所用的编码，即汉字系统中使用的二进制字符编码。内码是唯一的。汉字内码由两个字节组成。计算机内部由外到内由内到外b7

b6b5b4b3b2b1b0

b7

b6b5b4b3b2b1b0

用0和1编码汉字,每个汉字在计算机内部由2个字节表示0011010001110011国标码1011010011110011(机)内码汉字编码“大”“大”用0和1编码无亮点和有亮点形成字形信息,便于显示。

oooooo11oooooooooooooo11oooooooooooooo11oooooooooooooo11ooooo1oo1111111111111111oooooo11oooooooooooooo11oooooooooooooo11oooooooooooooo11oooooooooooooo111oooooooooooo11oo1oooooooooo11oooo1oooooooo11ooooo11ooooooo1ooooooo11ooooo1ooooooooo111o

11ooooooooooo1oo计算机内部由外到内由内到外大汉字字形码：是文字信息的输出编码，即通常所说的汉字字库。是使用计算机时显示或打印汉字的图像源。汉字字库分为点阵字库和矢量字库两种。汉字编码以“点阵字库”为例“大”da1011010011110011oooooo11oooooooooooooo11oooooooooooooo11oooooooooooooo11ooooo1oo1111111111111111oooooo11oooooooooooooo11oooooooooooooo11oooooooooooooo11oooooooooooooo111oooooooooooo11oo1oooooooooo11oooo1oooooooo11ooooo11ooooooo1ooooooo11ooooo1ooooooooo111o11ooooooooooo1oo计算机内部由外到内由内到外汉字处理过程:通过汉字外码输入,以汉字内码存储,以汉字字形码输出程序设计的基础程序设计语言低级语言

高级语言机器语言汇编语言解释型语言编译型语言Python、Perl、Ruby和JavaScript等C、C++、C#、Rust和Go语言等是一组计算机能识别和执行的指令，是人们用以解决问题的信息化工具。程序通常用文件的形式保存，是程序员使用某种程序设计语言编写的语句序列。程序程序设计程序设计是给出解决特定问题程序的过程，是软件构造活动中的重要组成部分。程序设计过程包括对求解问题的分析、设计、编码、测试、排错五个阶段。程序设计方法（1）面向过程的程序设计面向过程的程序设计，又称为结构化程序设计。该设计方法强调两个核心思想：一是数据结构和算法，二是结构化程序设计思想。（2）面向对象的程序设计面向过程程序设计中“数据”与“功能”是分离的，而面向对象程序设计方法是尽可能模拟人类的思维方式，使得软件的开发方法与过程尽可能接近人类认识世界、解决现实问题的方法和过程。目前，大多数的程序设计语言都是面向对象语言或具备面向对象技术特征，例如Java、C++、C#、Python等。封装面向对象的三个基本特性继承多态性算法基础算法是解决问题的有限步骤。计算机算法是指使用计算机来解决一个问题时所采取的特定方法和步骤。算法的描述常见方法有：自然语言、伪代码、流程图、N-S图等等方法。开始

a>b输入a,b,c

max=a

max=b

c>maxmax=c

输出max

结束NYYN【例题】从键盘任意输入三个整数，找出其中的最大值。用伪代码和流程图进行算法描述。Python简介Python语言是一种面向对象、解释型的高级程序设计语言。它具有开源、跨平台、语法简洁、功能强大的优点。Python在数据科学、人工智能、Web开发等领域都有广泛应用。简单易学的语法、丰富的库和框架（如TensorFlow、PyTorch等深度学习框架）使其成为人工智能和大数据领域广受喜爱的编程语言。数据处理与数据可视化金融分析Web开发Python的应用Python的安装非常简单，访问Python官网https://。第2章计算机网络基础01计算机网络基本概念02计算机网络协议04云计算03互联网目录Content05物联网计算机网络基本概念计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备，通过通信线路和通信设备连接起来，在网络操作系统、网络管理软件及网络通信协议的管理和协调下，实现资源共享和信息传递的计算机系统。计算机网络最重要的三个功能是信息交换、资源共享和分布式处理。计算机网络定义及功能计算机网络基本概念1．按覆盖范围划分的计算机系统：局域网、城域网、广域网2．按传输介质划分：有线网络、无线网络3．按通信方式划分：广播网络、点对点网络4．按网络拓扑结构划分：总线型、环型、星型、网状型等计算机网络分类计算机网络的分类方法有很多，对计算机网络的分类进行研究，有助于更好地理解计算机网络。从不同的角度对计算机网络可以进行不同的分类，常用的分类方法有：按网络覆盖的地理范围进行分类，按网络的拓扑结构进行分类，按网络的传输介质进行分类，按网络的通信传播方式进行分类，按网络的使用范围进行分类等。计算机网络协议（1）语义（Semantics）：语义规定了通信双方要发出什么控制信息、执行的动作和返回的应答，即确定协议元素的类型。它确保通信双方能够正确地理解彼此发送的信息，知道要发送什么内容、如何响应等。（2）语法（Syntax）：语法规定了通信双方彼此“如何讲”，即确定协议元素的格式，如数据和控制信息的格式。它确保数据在传输过程中的格式正确，使得接收方能够正确地解析和处理接收到的数据。（3）定时（Timing）：定时关系规定了信息交流的次序，即何时发送信息、何时接收信息等。它确保通信双方在正确的时间点上发送和接收信息，避免了信息的丢失和混乱。网络协议的组成计算机网络协议网络体系结构网络体系结构(NetworkArchitecture)是计算机网络的分层、各层协议和功能的集合。不同的计算机网络具有不同的体系结构，其层的数量、各层的名称、内容和功能都不一样。然而，在任何网络中，每一层都是为了向它邻接上层提供一定的服务而设置的，同时每一层均对上层屏蔽实现协议的具体细节。这样一来，网络体系结构就能做到与具体物理实现无关，哪怕连接到网络中的主机和终端的型号及性能各不相同，只要它们共同遵守相同的协议，就可以实现互通信和互操作。OSI参考模型TCP/IP参考模型计算机网络协议网络体系结构国际标准化组织(InternationalOrganizationforStandardization，ISO)为了建立使各种计算机可以在世界范围内联网的标准框架，制定了著名的开放式系统互连参考模型(OpenSystemInterconnectReferenceModel，简称OSI/RM)。OSI参考模型将计算机网络分为7层：应用层表示层会话层传输层网络层数据链路层物理层

对等层实体之间虚拟通信下层向上层提供服务实际通信在最底层完成计算机网络协议网络体系结构-

TCP/IP体系结构TCP/IP参考模型将计算机网络分为4个层次：应用层、传输层、网络层和网络接口层。如图所示为OSI参考模型与TCP/IP模型的对应关系。互联网互联网基本概念互联网是一个全球性的、开放性的、具有全球性影响力的计算机互联网络。它将世界各地的人们、组织、计算机、网站、应用和服务连接在一起，形成了一个逻辑上的单一巨大国际网络，连接了数以亿计的计算机和个人设备，涵盖了各种不同类型的网络，包括商业网络、教育网络、政府网络等。这些网络通过一系列协议和技术的连接，形成了一个庞大的网络体系。它将全世界范围内几乎所有国家与地区的各领域的信息资源联为一体，组成一个庞大的电子资源数据库，供全世界的网上用户共享。它对全人类社会发展和文明进步起到了巨大的推动作用。互联网互联网基本概念端接系统（PC、服务器、手机等）交换/节点设备（路由器、集线器、交换机等）通信链路（光纤、线缆、无线信号等）因特网服务提供商（ISP）提供网络接入本地ISP局域网区域性ISProuterworkstationserverlaptop路由器服务器计算机笔记本互联网Internet地址地址都是一个十分重要的概念，Internet的许多服务和特点都是通过IP地址体现出来。IPv4地址–32bit，IPv6地址–128bitIPv4地址的分类私有IP地址子网掩码网关DNS广播地址NAT互联网互联网的应用当前大部分服务都通过互联网提供资源及服务。网页浏览电子邮件搜索引擎（SearchEngines）及大语言模型即时通讯社交媒体视频流媒体在线购物网络游戏……互联网网络安全1．针对服务器的攻击（1）DDoS（分布式拒绝服务）攻击（2）SQL注入攻击（3）暴力破解攻击（4）缓冲区溢出攻击2．针对客户的攻击（1）网络钓鱼攻击（2）恶意软件攻击（3）社会工程学攻击3．针对传输过程的攻击（1）中间人攻击（2）窃听攻击（3）重放攻击互联网网络安全4．防范（1）谨慎设置密码，设置足够强度的不能通过猜测破解的密码。（2）对重要系统及网站使用不同的密码，启用多重验证，尽量少使用单点登陆。（3）陌生人的邮件附件不要点击。（4）不要从可疑源下载软件。（5）不要使用开放的无线网络进行敏感操作。（6）安装杀毒软件并保持更新。（7）定期备份重要的信息文件到安全位置。（8）保持系统更新，打开防火墙。（9）手机、路由器、物联网设备也是网络节点，也要按类似的方式尽可能防范。（10）限制个人信息被不必要的人获取，谨慎分享信息到互联网上。（11）对使用伪造短信、AI音频、AI视频等技术的社会学欺骗、攻击加多些心眼验证真伪。云计算云计算概述云计算是一种商业计算模型，它将计算任务分布到大量计算机构成的资源池上，使用户能够按需获取计算能力、存储空间和信息服务。1．云计算的概念2．云计算的基本特点3．云计算的服务模型：Iaas，PaaS，SaaS4．云计算的优势5．云计算的挑战云计算云计算主要技术云计算的成功离不开一系列核心技术的支撑，这些技术使得云平台能够实现弹性扩展、资源共享、低延迟等特性。1．虚拟化技术（Virtualization）2．分布式计算（DistributedComputing）3．云存储（CloudStorage）4．容器技术（Containerization）5．云网络与虚拟网络（CloudNetworkingandVirtualNetworking）6．大数据与数据分析技术（BigDataandAnalytics）云计算云计算的应用云计算的应用领域广泛，包括金融服务、医疗健康、教育科研、政府、制造业、能源交通、农业等。云计算技术涉及存储、计算、开发、分析、安全等多个典型应用场景。通过云计算，企业和个人能够更高效、更灵活地管理和利用资源，推动数字化转型、提升业务能力，并降低IT基础设施的复杂性和成本。1．在线存储和备份2．大数据和数据分析3．云机器学习和人工智能4．云安全5．虚拟化桌面和应用物联网物联网基本概念物联网（InternetofThings，简称IoT）是指通过互联网将物理世界中的各种设备、传感器、物品等连接起来，形成一个巨大的网络，进行数据交互和智能化管理的网络。每个物体都可以通过嵌入式传感器收集相关数据，传输到云平台或本地设备进行分析、处理和反馈，从而实现智能化决策和操作。物联网的核心思想是通过智能设备的互联互通，提升设备的智能化水平，实现对设备和环境的实时监测、数据分析、远程控制等功能。1．物联网的工作原理2．物联网的关键技术物联网物联网的体系结构物联网（IoT）体系结构是指物联网系统中各层之间的功能分配、工作流程和交互方式。物联网的体系结构通常是多层次的，每一层都承担着特定的功能和任务，确保物联网设备能够高效地感知、传输、处理和应用数据。每一层与其他层之间都通过标准的协议和接口进行通信和交互。物联网物联网的应用物联网（IoT）已经渗透到我们生活的方方面面，涵盖了从家庭到工业、城市到农村等多个领域。通过感知、连接、分析和控制，物联网在众多领域中提供了智能化的解决方案，极大地提升了效率、自动化和便捷性。以下是一些典型的物联网应用，涵盖了家庭、城市、工业等多个领域。1．智能家居2．智慧城市3．工业物联网4．健康医疗5．农业物联网本章小结本章概要地介绍了计算机网络的部分知识：计算机网络的定义计算机网络的分类网络协议及网络体系结构互联网Internet的概念及功能互联网的IP地址网络安全的常见威胁及防范云计算的概念及服务模式物联网的概念及常见应用网络知识种类繁多日新月异，需要在掌握基础网络知识后在日常使用中进一步了解学习。第3章web前端基础01Web技术概述02HTML基础04盒子模型03CSS基本语法目录Content3.1Web技术概述3.1.1

Web相关概念

WWW（World

Wide

Web）是万维网的简称，是基于超文本和超媒体的信息系统，通过网页链接实现信息的快速访问和共享。它由蒂姆·伯纳斯-李于1989年发明，极大地推动了互联网的普及和发展，成为现代信息传播的重要平台。1.WWW（1）超文本传输协议HTTPHTTP(Hypertext

Transfer

Protocol)，是一种详细规定浏览器和万维网服务器之间互相通信的规则。（2）超文本传输安全协议HTTPSHTTPS(Hypertext

Transfer

Protocol

over

Secure

Socker

Layer),在http传输中加入了

SSL层，是由SSL+HTTP构建的可进行加密传输、身份认证的网络协议，比http更安全。2.协议序号服务(协议)类型含义1http超文本传输协议2https用加密传送的超文本传输协议3ftp文件传输协议4mailto电子邮件地址5NewsUsenet新闻组6File当地计算机或网上分享的文件/xxgk/xxjj.htm:5051/111014/index.htm3.

URL

统一资源定位符URL(UniformResourceLocator)。即“网页地址”。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。主机域名或IP地址

4.

域名域名解析系统DNS(DomainNameSystem)。是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时对计算机的定位标识。任何一个连接在因特网上的主机或路由器，都有一个层次结构的名字，即域名。域名与IP地址一一对应，域名便于用户记忆。域名采用层次结构：…

.

三级域名

.

二级域名

.

顶级域名

教育

中国域名代码用途域名代码用途com商业组织cn中国edu教育机构ca加拿大gov政府部门de德国mil军事部门fr法国org非营利组织jp日本net网络支持中心uk英国int国际组织us美国常用的顶级域名和部分国家代码表网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。结构网页“是什么”表现网页“什么样”行为网页“做什么”CSSHTMLJavascript5.

Web标准（1）

网站、网页和主页网站：网站是由多个网页组成的集合，用于展示特定主题或服务的信息。网页：网站的基本单元。主页：网站的入口页面，通常包含网站的主要信息和导航链接。（2）静态网页和动态网页静态网页特点：静态网页内容固定，不随用户操作而改变，加载速度快，适合展示固定信息。例如，企业介绍页面通常采用静态网页形式。动态网页特点：动态网页可以根据用户输入或数据库数据动态生成内容，具有更强的交互性，适合复杂的Web应用。例如，用户登录系统、在线购物车等功能需要动态网页实现。应用场景：静态网页适用于内容更新频率低的场景，动态网页适用于需要实时交互的场景，如社交网络、在线教育平台等。6.网站与网页3.1.2

Web基本工作原理客户端（通常是浏览器）向服务器发送请求，请求中包含用户想要访问的资源信息，如网页、图片等。请求通过HTTP或HTTPS协议发送到服务器，服务器根据请求内容进行处理。服务器接收到客户端请求后，会根据请求内容查找相应的资源。如果资源存在，服务器会将资源内容和状态码一起返回给客户端。如果资源不存在，服务器会返回404等错误状态码，提示用户资源无法访问。1、客户端请求2、服务器响应浏览器接收到服务器返回的HTML文档后，会从上到下解析文档内容，构建DOM树（文档对象模型）。浏览器在解析HTML文档的同时，会加载和解析CSS样式表，根据CSS规则对DOM树中的元素进行样式渲染。最终，浏览器将解析后的DOM树和CSS样式结合，生成最终的页面布局，并将其显示在屏幕上。3、浏览器渲染3.1.3Web开发工具Dreamweaver是一款所见即所得的网页设计工具，适合初学者快速上手，支持可视化布局和代码编辑。它提供了丰富的模板和组件，可以快速生成网页，但灵活性相对较低。DreamweaverHBuilderX是基于HTML5的轻量级开发工具，支持多种编程语言和框架，具有强大的代码提示和调试功能。它专注于前端开发，适合有一定基础的开发者进行HTML5开发，能够提高开发效率。HBuilderXVisualStudioCode是微软推出的一款开源代码编辑器，功能强大，插件丰富，适用于各种前端和后端开发场景。它支持多种编程语言，具有智能代码补全、语法检查、调试等功能，是目前最流行的开发工具之一。VisualStudioCode3.2HTML基础3.2.1HTML发展历程1．起源与早期版本2．标准化与规范化3．功能扩展4．‌XHTML与HTML5的兴起5．持续演进与未来展望3.2.2HTML文档结构和基本语法(1)标记

HTML使用标记（也称为标签）来定义文档的结构和内容，标记分为单标记和双标记。双标记由首标记和尾标记组成，内容位于首尾标记之间。(2)属性

标记的属性用于定义标记的额外信息，通常位于首标记中，用于控制标记的行为和外观。属性的合理使用可以增强网页的交互性和可维护性。(3)元素的嵌套

HTML元素可以嵌套使用，通过嵌套可以构建复杂的文档结构。嵌套时需要注意标记的闭合顺序，确保文档结构的正确性。(4)注释

HTML注释使用<!--和-->包裹，注释内容不会被浏览器解析。注释可以用于解释代码的作用，提高代码的可读性。1.HTML基本语法2.HTML文件结构制作第一个网页：<html><head><title>我的第一个网页</title></head><body>厉害了，我设计的网页！</body></html>title标记设定网页标题头标记：提供关于当前文档的信息主体标记：提供文档要显示的内容3.2.3HTML常用标记1.文本排版类标记标题标记<h1>…<h6>段落标记<p>与换行标记<br>水平分隔线标记<hr>字体属性标记<font>其它文字样式的设置标记2.文本修饰类标记3.特殊文字符号的添加4.列表标记无序列表<ul>…<li>有序列表<ol>…<li>5.超链接标记参考第4章相关章节3.2.4 插入图像等多媒体元素gif无损压缩可使用透明色动画Gif文件容量小支持8位索引色（最多256色）png无损压缩支持透明度容量小不支持动图jpg有损压缩颜色更丰富不支持透明度1.常用的web图像格式2.

在HTML中插入图像元素3.在HTML中插入音频、视频等多媒体元素在网页中可使用<embed>标记插入多媒体文件，直接在Web文档中播放音频、视频和Flash动画。支持mp3、mp4和swf、avi、wav格式等。格式为：<img>标记可以在网页中插入图片。格式如下：<img

src=“路径/图像文件名”

alt=“说明性替代文字”>

<embed

src="路径/多媒体文件名"></embed>3.3CSS基本语法

3.3.1构造CSS规则CSS样式表由若干条规则组成，这些样式规则可以应用到不同的元素或文档中定义它们的显示效果。CSS的样式规则分为两部分：选择器和声明。选择器{声明；}选择器---样式的名称声明---样式的具体描述#ID选择器名{

}

先声明后应用。ID在一个页面中唯一，只能应用一次，针对性更强。.类选择器名{}

先声明后应用。可应用于多个不同标记，在应用的标记上生效。3.3.2基本CSS选择器基本选择器1.标记选择器2.类别选择器3.ID选择器HTML标记名{}在页面中所有与选择器同名的标记上生效定义：直接在HTML元素的style属性中定义样式。特点：优先级最高，便于临时调整。示例：<pstyle="color:red;">定义：将CSS代码放在HTML文档的<head>标记中的<style>标记内。特点：作用范围是整个HTML文档。示例：<style>p{color:red;}</style>内嵌样式表（InternalStylesheet）定义：将CSS代码保存在一个单独的.css文件中，通过链接或导入引入HTML文档。特点：便于代码复用和维护。示例：<linkrel="stylesheet"href="styles.css">外部样式表（ExternalStylesheet）行内样式（InlineStyles）

3.3.3 在html中使用CSS的方法2.交集选择器1.并集选择器3.后代选择器选择器1,选择器2,……选择器n{}选择器1选择器2……选择器n{}选择器1选择器2……选择器n{}多个选择器取并集，只要满足其中任何一个选择器，样式即可生效多个选择器取交集，必须满足所有选择器的要求，样式才生效满足后一个选择器是前一个选择器的后代，样式即可生效（后代包括子代、孙代等）3.3.4复合选择器继承是指某些CSS属性可以从父元素传递给子元素，如font-size和color等属性具有继承性。继承可以减少重复的样式定义，提高代码的简洁性。继承层叠是指当多个CSS规则同时作用于同一个元素时，浏览器会根据一定的规则决定最终应用的样式。层叠规则包括选择器的优先级、样式定义的先后顺序等。层叠CSS优先级规则决定了在多个样式冲突时，哪个样式会被应用。优先级从高到低依次为：行内样式>内嵌样式表>外部样式表>浏览器默认样式。优先级4.CSS的主要特性可以使用相对长度单位，或绝对长度单位。在网页制作中默认以像素为单位，如果需要其他单位必须注明，如2em，5cm,

8in等等。相对长度单位说明px像素，最常用，推荐使用em以目前字符的高度（font-size大小）为参考依据，若没有font-size属性，以浏览器默认字符高度为参考。绝对长度单位说明in英寸cm厘米mm毫米pt点3.3.5 用CSS设置文本样式1．长度单位2．颜色的定义颜色值有三种形式：颜色值，例：red、yellow#十六进制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)3．设置字体属性4．设置文本属性3.4盒子模型CSS盒子模型（Box

Model）是一种概念模型。在这个概念中，所有的文档元素都可以看成一个盒子（矩形框）。一个盒子是由内容（content）、边框（border）、内边距（padding）、外边距（margin）组成。3.4.1盒子基本概念3.4.2设置盒子的结构类属性1．宽度和高度（height、width）2．内边距（padding）3．外边距（margin）4．边框（border）5．复合属性padding:5px10px;border:solid2pxgreen;在页面中以区域块的形式出现。每个块元素通常都会独自占据一整行或多整行。可以对其设置宽度、高度、对齐等属性。块级元素不占有独立的区域。仅仅靠自身的字体大小和图像尺寸来支撑结构。一般不可以设置宽度、高度、对齐等属性。行内元素3.4.3块级元素与行内元素3.4.4用CSS设置图像和背景效果设置背景颜色（background-color）设置背景图像图像源文件(background-image)图像平铺(background-repeat)图像位置(background-position)位置固定(background-attachment)复合属性（background）1．用CSS设置图像效果2．用CSS设置背景效果本章小结本章全面介绍了Web前端基础的核心内容，涵盖Web技术概述、HTML基础、CSS基本语法和盒子模型。通过学习，使读者能够掌握构建Web页面所需的基本知识和技能，为后续深入学习和实践Web前端开发奠定坚实基础。这些内容不仅有助于理解Web前端的工作原理，还能为构建美观、功能丰富的Web应用提供有力支持。第4章网页设计与布局01标准流02盒子的浮动04利用盒子浮动布局03盒子的定位目录Content05超链接标记及用法06导航菜单制作08在网页中使用特效07网站开发过程标准文档流标准文档流是指不使用其他与排列和定位相关的特殊CSS规则，按照css默认规定的块级元素和行内元素的排列方式。<body><h1><span>第1个span</span><span>第2个span</span>

</h1><div>

<h3>小标题</h3>

<p>段落文本内容，段落文本内容，段落文本内容，段落文本内容，段落文本内容，段落文本内容，段落文本内容，段落文本内容。</p></div></body>对body里面的各元素设置边框和背景色嵌套关系：父层元素套住子层元素。并列关系：块级元素之间按上下顺序排列；行内元素之间按左右顺序排列标准流排列规则树型层次结构页面布局盒子的浮动利用浮动属性可以改变盒子默认的排列方式。属性值说明none元素为标准流，默认值left元素向父级元素的左侧浮动right元素向父级元素的右侧浮动Inherit继承父级元素的浮动属性浮动的特点（1）浮动元素脱离标准流，向其父元素（或前一个浮动元素）的左侧或右侧靠紧（多个同方向浮动的元素会水平依次排列，空间不足时自动换行。）。（2）如果没有未显式设置宽度，浮动元素的宽度会收缩至刚好包裹里面内容的宽度；如果通过width属性显式设置宽度，则调整为指定宽度。（3）其它后续的元素会忽略该元素向上移动填补上来，上移元素里面的内容围绕着浮动的元素显示。利用浮动属性实现环绕效果div设置右浮动，span设置左浮动，后续的内容位置上移，形成环绕效果pspan首字下沉span{font-size:43px;

float:left;}div右浮动div{float:right;}bodydivPspan利用Float属性实现水平排列布局浮动属性还可以实现多个并列的兄弟元素由默认的上下排列方式改变为左右排列的布局效果。左浮动#num1{

width:220px;

float:left;}左浮动或者右浮动#num2{

width:220px;

float:left;}清除浮动属性在CSS中可以通过clear属性清除前面浮动元素的影响。属性值说明定义left清除前面元素左浮动对其位置的影响clear:left;right清除前面元素右浮动对其位置的的影响clear:right;both清除前面元素所有浮动对其位置的的影响clear:both;扩展父盒子的高度1．直接设定父元素的高度值2．利用clear属性:在#father里面最后一个浮动盒子#num2后面插入一个空的块级<divid=“back1”>元素，然后设置清除属性#back1{clear:both}3．利用overflow属性

#father{

overflow:hidden;}盒子的定位利用属性position，称为定位属性，可以实现将元素精确地定位在固定的网页位置。属性值说明static静态定位，即标准流，默认值relative相对定位，相对于其原文档流的位置进行定位absolute绝对定位，相对于其上最近的已定位父元素进行定位fixed固定定位：相对于浏览器窗口进行定位相对定位是指网页元素相对于它原来的位置进行偏移定位，其后续的元素位置不受影响。一般情况下，如果元素选择相对定位方式，需要通过top、bottom、left和right等属性值调整偏移位置。若没有设置偏移量相对定位的元素在原位置不变。相对定位relative#num1和#num2分别相对定位后的位置变化绝对定位是指网页元素脱离标准流，以离它最近的一个已经定位的祖先元素所在位置进行偏移定位，若没有已经定位的祖先元素则以<body>位置（即是浏览器窗口）进行偏移定位，元素的宽度改变为刚好能显示里面的内容或指定宽度，同时绝对定位元素变成块级类型，其后续的元素位置受影响，向前移动填补上来。已经定位的元素是指设置非静态定位方式的元素。绝对定位absolute#num2设置绝对定位的效果及偏移情况固定定位是指网页元素脱离标准流变成块级类型，元素的宽度改变为刚好能显示里面的内容或指定宽度，总是相对于浏览器窗口即<body>进行偏移定位，其后续的元素位置受影响，向前移动填补上来。固定定位fixed固定定位的浏览器显示效果z-index属性用于指定元素的堆叠顺序。z-index#num1和#num2的层叠效果#num1{ background-color:#3CC; border:4pxdashed#F0F; position:absolute; top:20px; right:60px; z-index:2;}#num2{ background-color:#F9C; border:4pxdotted#00f; position:absolute; top:5px; right:120px;z-index:1;}利用盒子浮动布局DIV+CSS技术是目前进行网页布局比较流行的方式，DIV负责对网页内容区域的划分，CSS负责网页样式效果的呈现。DIV+CSS的设计布局一般会将网页中要作为一个整体的对象进行设计布局的所有html内容放在一个<div>中，然后用CSS对<div>设计其大小、对齐方式与排列方式等等。一列布局常见的类型是一列固定宽度居中布局和一列自适应宽度居中布局固定宽度是设置一列的宽度为固定值。一列布局一列布局的效果两列布局是指将网页内容排列为左右两列的排列方式，这种布局常用于一列为导航侧栏另一列为主要内容栏。根据DIV+CSS技术为需要左右排列的两组内容分别添加<div>标记，再利用CSS设计两列外观与布局。标准文档流下两个<div>是上下排列关系，利用浮动实现左右排列布局。两列布局两列（侧栏在左、内容在右）居中布局三列布局是指网页内容排列为左中右三列水平显示的排列方式。为需要水平排列的三组内容分别添加<div>标记，标准文档流下三个<div>是上下排列关系，可以利用浮动属性设置为三列布局，三列布局三列固定宽度居中布局超链接标记及用法超链接是网站不可或缺的一个部分。同一个网站可以由很多网页组成，超链接技术实现网页之间的跳转和返回，即一个网页能通过鼠标单击操作访问另一个网页、定位到网页的某个位置、或下载文件等等。一个友好的网站可以通过超链接让用户遍历整个网站内的所有网页。创建文本超链接的代码如下：

<ahref=""target="_blank">链接到网易</a><ahref="base/book.html">科幻书籍</a>，创建文本超链接属性说明href规定链接所指向的页面路径target规定在何处打开链接时的目标窗口title超链接文字说明，鼠标悬停在链接时显示该提示download规定当用户单击超链接时将下载目标1．绝对路径绝对路径是指文件的完整路径，路径包含协议名称、主机名称、层级文件夹名称和文件名称。一般链接到其他网站的文件用绝对路径。如下所示：<ahref="/news/file.html">链接到网易</a>2．相对路径相对路径是以当前文件所在位置为起点到目标文件所经过的路径。一般在同一个站点中的两个文件之间的链接都要用相对路径。利用相对路径书写可以省略当前文件和目标文件的共同、路径部分。两个网页文件在同一个文件夹中。目标文件在源文件的下一级文件夹目标文件在当前文件的上一级文件夹超链接路径1．设置图片的超链接:<ahref=”read.html”><imgsrc=”../img/book1.jpg”/></a>2．设置锚点链接设置一个锚点链接的步骤分为两步：①在网页的目标位置建立锚点（又称书签），在目标位置的标签中添加id属性：<标记id=”id”>内容</标记>②使用<a>标记的href属性设置跳转到目标锚点：<ahref=”URL#id”>链接文本</a>3．下载文件链接超链接变为下载链接，弹出下载窗口，可允许“learn.docx”文档保存到本地。<ahref="base/learn.docx">学习方法</a>4．电子邮件链接创建电子邮件链接，邮件地址是：suggetion2025@163.com。<ahref="mailto:suggetion2025@163.com">联系</a>其他类型的超链接导航菜单制作导航菜单是网站中最常见的导航功能，通常导航菜单里必须由超链接组成，好的导航可以引导用户快速找到所需信息。设计出既美观又实用性强的导航菜单至关重要。目前比较流行的导航菜单是采用DIV+CSS布局方式，常规一般是在一个div里放置一个序列表，在每个列表项li里设置超链接，然后通过设置列表的样式进行制作。下面介绍