《Web基础知识》课件

基础知识Web欢迎来到基础知识的世界！Web我们将深入探讨的核心概念，并学习构建基本网页的技术Web什么是Web是一个全球性的信息网络，使用超文本传输协议（）连接各种Web HTTP设备和资源上包含各种网站、网页、数据和应用程序，为用户提供信息、服务Web和娱乐用户通过浏览器访问资源，例如网页、图片、视频、音乐等Web的发展历程Web万维网的诞生1989年，英国科学家蒂姆·伯纳斯·李在欧洲核子研究组织（CERN）提出了万维网（WWW）的概念，旨在实现信息共享HTML语言的出现1991年，伯纳斯·李发布了第一个HTML规范，并创建了世界上第一个网页浏览器WorldWideWebMosaic浏览器的问世1993年，Mosaic浏览器的出现，使得Web技术开始进入大众视野，并加速了Web的发展进程互联网时代的到来1990年代中期，互联网的普及，Web技术得到了快速发展，各种网站和应用层出不穷Web

2.0时代的兴起21世纪初，Web

2.0以用户生成内容和社交网络为核心，带来了新的Web应用和模式移动互联网的浪潮智能手机的普及，移动互联网迅速发展，Web技术也开始向移动端扩展Web

3.0时代的展望Web

3.0以去中心化、人工智能和物联网为主要特征，将推动Web技术向更智能、更开放的方向发展浏览器的概念与功能浏览器的定义浏览器的功能浏览器是用于访问万维网浏览器的主要功能包括加（）的软件应用程序载网页，显示网页内容，处WWW它允许用户查看网页，下载理用户输入，执行JavaScript文件，观看视频，并与互联代码，管理缓存和，保cookie网上的其他资源进行交互护用户隐私和安全等浏览器的组件一个完整的浏览器通常由以下组件组成渲染引擎，网络引擎，用户界面，引擎，插件和扩展等JavaScript常见的浏览器类型Google ChromeMozilla FirefoxMicrosoft EdgeSafari是目前最受欢是一款开源浏览器，是微软最新的浏览器，是苹果公司开发的浏Google ChromeFirefox EdgeSafari迎的浏览器之一，以其速度注重隐私保护和安全，拥有拥有更流畅的用户界面和更览器，以其简洁的设计和与快、功能丰富而著称强大的扩展功能好的兼容性设备的良好集成而闻Apple名域名的基本知识域名概念域名组成

1.

2.12域名是网站的名称，便于域名由两部分组成主机人们记忆和访问例如，名和顶级域名，使用点号是一个域名分隔www.example.com域名类型域名解析

3.

4.34域名类型根据其功能分为域名解析是将域名转换为通用顶级域名、国家顶级地址的过程，使计算机IP域名、组织顶级域名等等能够找到对应的网站服务器域名的注册与解析域名注册1选择域名注册商，填写注册信息，完成付款域名注册商会验证信息，并分配域名域名解析2将域名解析到对应的地址域名解析器会将域名转IP换为地址，以便浏览器找到相应的网站IP服务器DNS3服务器是负责域名解析的服务器它们存储着域名DNS与地址的对应关系IP什么是地址IP网络地址网络连接地址是分配给联网设备的唯一标识符，就像门牌号一样当您访问网站或与其他设备进行通信时，您的设备会使用IP它用于识别互联网上的每台设备地址来建立连接它们是互联网通信的基础IP地址的分类与特点IP地址地址IPv4IPv6地址使用位二进制数表示，通常地址使用位二进制数表示，使IPv432IPv6128用点分十进制表示，例如用冒号分隔的十六进制数表示，例如

192.

168.

1.12001:0db8:85a3:0000:0000:8a2e:0370:7334公网地址私网地址IP IP公网地址是分配给互联网上的设备私网地址是分配给局域网内的设备IP IP的地址，用于在互联网上进行通信的地址，用于在局域网内进行通信IP IP协议的基本原理TCP/IP连接建立数据传输连接断开协议使用三次握手协议建立连接，协议将数据分成数据包，并以有序协议使用四次挥手协议来断开连接，TCP TCPTCP确保双方都准备好进行数据传输的方式进行传输，确保数据完整性和确保双方都已完成数据传输并释放资可靠性源协议的工作原理HTTP请求1客户端发送HTTP请求到服务器响应2服务器收到请求后，返回响应数据3响应包含所请求资源的具体内容关闭连接4连接关闭，双方结束交互HTTP是一种应用层协议，用于在客户端和服务器之间传输数据请求和响应消息遵循特定的格式，包含请求方法、资源路径、协议版本等信息协议的安全特性HTTPS加密传输身份验证完整性校验数据隐私保护使用协议对数服务器需要提供数字证书，使用数字签名技术，协议可以有效保护用HTTPS SSL/TLS HTTPSHTTPS据进行加密，防止数据在传验证其身份，确保用户访问确保数据在传输过程中没有户数据隐私，防止敏感信息输过程中被窃取或篡改的是真实网站被篡改被泄露语言的基本语法HTML标签属性12使用标签来定义网页标签可以使用属性来提供HTML内容结构和元素额外的信息和控制元素的行为元素文本34标签和属性共同构成元素之间可以包含文HTML HTML元素，用来构建网页内容本，用于展示网页内容标签的使用技巧HTML语义化标签嵌套结构使用语义化标签可以使代码更清晰，也利于搜索引擎理解网页内容例如，使用`HTML标签之间可以嵌套，但要注意标签的顺序例如，``标签表示文章，``标签必须放在``标签内部`标签表示侧边栏属性与值HTML标签可以拥有属性，属性可以用来控制标签的行为例如，``标签的`src`属性用来指定图片的地址闭合标签大多数HTML标签需要闭合，例如``标签的闭合标签是``但也有一些标签不需要闭合，例如``标签页面的基本结构HTML文档类型声明1告知浏览器文档类型标签HTML2构建网页内容头部信息3网页标题，链接等网页主体4可见内容和布局页面由文档类型声明、标签、头部信息和网页主体组成每个部分都有其特定的作用，共同构成了完整网页结构HTML HTML样式的基本概念CSS网页设计图片网页设计图片网页设计图片是层叠样式表通过，我们可以控制网页元素的字与语言结合使用，可以实现更CSS CascadingStyle SheetsCSS CSSHTML的缩写，是一种用来定义网页元素样体、颜色、大小、位置等外观样式，美观、更易于维护的网页设计，提升式的语言以及网页的布局和结构用户体验选择器的使用方法CSS元素选择器类选择器根据元素的标签名进行选择，选择带有特定属性的元class例如选择所有标签元素素，例如选择所有属性p class为的元素example选择器属性选择器ID选择具有特定属性的元素，根据元素的属性名称和值进id每个属性值在整个页面中行选择，例如选择所有具有id只能使用一次属性的链接href属性的常见应用CSS字体样式背景设置•字体大小•背景颜色•字体颜色•背景图片•字体粗细•背景重复文本布局边框样式•文本对齐•边框宽度•行高设置•边框颜色•缩进•边框类型语言概述JavaScript动态网页的核心广泛应用场景是开发中必不可少的语言，它赋予网页交互不仅应用于网页开发，还广泛应用于移动应用、JavaScript WebJavaScript性和动态性服务器端开发和游戏开发等领域通过，可以实现网页元素的动态更新、用户交互的灵活性和跨平台特性使其成为开发各种应用程JavaScript JavaScript事件处理等功能，使网页更加生动有趣序的理想选择变量与数据类型JavaScript变量声明数据类型12使用关键字或声明支持多种数据类“var”“let”JavaScript变量，并赋予初始值型，包括数字、字符串、布尔值、数组和对象数据类型转换变量作用域34通过内置函数进行数据类变量的作用域分为全局作型转换，例如、用域和局部作用域Number和String Boolean函数的编写JavaScript函数定义1使用`function`关键字定义函数参数传递2函数可以接受参数，用于传递数据返回值3函数可以通过`return`语句返回结果函数调用4通过函数名和括号调用函数JavaScript函数是代码块，可以执行特定任务函数可以接收参数，执行操作，并返回结果函数可以提高代码可重用性和可读性，方便程序员编写复杂的应用程序事件处理机制JavaScript事件触发用户与网页交互，例如点击鼠标、键盘输入或页面加载完成时，会触发特定事件事件监听JavaScript代码可以通过监听特定事件，等待事件发生，以便执行相应的操作事件处理函数当事件触发后，预先定义的JavaScript函数会被调用，执行预定的代码逻辑事件对象事件对象包含事件相关的信息，例如事件类型、发生时间和目标元素，供代码使用库的基本使用jQuery简化操作简化事件处理动画和效果DOM提供了简洁的语法的事件处理机制更提供了丰富多彩的jQuery jQueryjQuery和方法，可以方便地操作加简便，可以轻松地为元动画效果，可以轻松地为文档中的元素，例如素绑定事件，例如点击、元素添加各种视觉效果，HTML选择、添加、修改和删除鼠标悬停、窗口大小调整例如淡入淡出、滑动、旋元素等转等它通过选择器来定位元素，它还提供了一些方法来处它还提供了一些方法来控并提供一系列方法来操作理事件，例如阻止事件冒制动画的速率、时间和方元素的属性、样式和内容，泡、取消默认事件等，提向，使动画效果更具表现简化了中的高了事件处理的效率和灵力JavaScript DOM操作活度前端框架简介React/Vue/AngularReact Vue.js12是一种由开是一款渐进式React FacebookVue.js发的库，用于构框架，专注于构JavaScript JavaScript建用户界面它以其高效建用户界面它易于学习，的虚拟和组件化开发并提供灵活性和可扩展性，DOM模式而闻名适用于各种规模的项目Angular3是一个由维护的全面框架，提供丰富的Angular GoogleJavaScript功能和工具，用于构建大型复杂应用程序前端开发工具介绍代码编辑器浏览器开发者工具版本控制工具设计原型工具功能强大，支持多种开发者工具集成了各是一个分布式版本控制系等设计原型工具能够帮VSCode ChromeGit Figma语言，并拥有丰富的扩展插种调试和分析功能，帮助开统，能够帮助开发者管理代助开发者创建交互式原型，件，方便开发者进行代码编发者在浏览器中调试网页、码版本、跟踪代码变更并协方便团队成员更好地理解设写、调试和管理分析性能并查看网页元素的同开发，确保代码的安全性、计思路，并进行快速迭代和结构和样式完整性和可追溯性改进服务器的基本原理Web处理请求Web服务器接收来自客户端（例如浏览器）的请求，例如访问网页或下载文件响应处理根据请求内容，Web服务器找到并处理相应的资源，例如网页文件、图片或视频数据传输Web服务器将处理后的资源以特定格式（例如HTML、CSS、JavaScript）发送给客户端前端与后端的交互Web前端请求数据1前端通过向后端发送请求，通常使用技术JavaScript AJAX后端处理请求2后端接收前端的请求，进行数据处理和逻辑运算返回数据给前端3后端将处理后的数据以或格式返回给前端JSON XML性能优化的技巧Web减少HTTP请求优化图片大小合并CSS和JavaScript文件，减少HTTP请求次数使用压缩工具，选择合适的文件格式，例如WebP，减少图片大小缓存静态资源延迟加载设置缓存策略，让浏览器缓存静态资源，减少服务器的负担延迟加载页面中不重要的资源，例如图片，提高页面加载速度安全防护的基本措施Web密码保护安全协议使用强密码，定期更改密码，使用协议进行加密通信，HTTPS避免使用相同密码确保数据传输安全漏洞扫描身份验证定期进行安全扫描，及时修采用多因素身份验证，提高复系统漏洞和安全缺陷账户安全级别，防止非法访问开发的发展趋势Web人工智能的应用移动优先设计数据可视化WebAssembly人工智能（）正越来越随着移动设备的普及，移数据可视化技术在开发是一种新的AI WebWebAssembly Web多地应用于开发中，包动优先设计越来越重要中得到越来越广泛的应用，标准，它允许开发者用、Web C括个性化推荐、智能搜索、这意味着网站的设计和开使数据更易于理解和分析，、等语言编写代码，C++Rust自然语言处理等例如，发应该优先考虑移动设备从而帮助用户做出更好的并将其编译为在浏览器Web聊天机器人、虚拟助手等的体验，提供良好的触控决策中运行的二进制代码，从正在改变人们与网站的互体验和快速加载速度而提高应用程序的性能Web动方式和效率。