【前端之旅】Web基础与开发工具

简介: 【前端之旅】Web基础与开发工具

image.png

Web

web(World Wide Web)即全球广域网,WWW (Web) 是World Wide Web的缩写,也称为万维网,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务,为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面,其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

web包括:web服务器和web客户端两部分


三大构建要素


统一资源定位符(URL):解决网上资源在何处的问题


资源访问方式(HTTP):解决用什么方式访问资源的问题


超链接:提供在资源之间自由访问的手段


URL的基本结构

通信协议:// 服务器名称[:通信端口号]/目录结构/文件名

  • 通信协议:Web的通信协议一般为HTTP(或HTTPS)
  • 服务器名:域名或IP地址
  • 端口号:可选,默认为80(HTTP)或443(HTTPS)

1665309005613.png


HTTP

http是在Internet上传送超文本的协议,它是运行在TCP/IP集之上的应用协议。简单地说,HTTP就是专门为Web设计的协议。


HTTP协议特点:


  • 无状态:第一次请求完成后,服务器不会记住客户的状态。第二次请求时,服务器需要重新读取客户的信息。
  • 基于请求和应答的模式:浏览器向服务器发送请求,服务器根据浏览器的请求作出不同的应答。

HTTPS: HTTP的安全版,HTTP下加入SSL层


《图解HTTP》这本书中曾提过HTTPS是身披SSL外壳的HTTP。HTTPS是一种通过计算机网络进行安全通信的传输协议,经由HTTP进行通信,利用SSL/TLS建立全信道,加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证,同时保护交换数据的隐私与完整性。


超链接


超链接是指当鼠标单机一些文字、图片或者其他网页元素时,浏览器会根据其指示载入一个新的页面或者跳转到页面的其他位置,超级链接除了可链接文本之外,还可以链接各种各样的多媒体,如声音、图像动画等,通过他们可享受丰富多彩的多媒体世界。

建立超链接所使用的HTML标记为<a></a>

超链接最重要的两个要素;超链接指向的目标的地址设置为超链接的网页元素。

基本的超链接结构为


<a href=URL>网页元素</a>


网页三大元素


对于网页来说,有三大基本元素。那就是大家所熟悉的 HTML、CSS和JavaScript,对于这三者来说,主要描述如下:


  • html :网页的基本结构
  • css :网页的展现效果
  • javascript :网页的功能行为

B/S结构


Browser/Server,浏览器/服务器模式


基于Web的协同计算模式,是一种三层架构的瘦客户机/肥服务器的计算模式

  • 第一层为客户端表示层,客户层只保留一个Web浏览器,其运行代码可以从位于第二层Web服务器下载到本地的浏览器中执行,几乎不需要任何管理工作
  • 第二层是应用服务器层,由一台或多台服务器(Web服务器也位于这一层)组成,处理应用中的所有业务逻辑,包括对数据库的访问等
  • 第三层是数据中心层,主要由数据库系统组成

开发工具


一、Visual Studio Code


详细介绍及插件推荐看我的另一篇文章就够了 文章链接


二、Hbuilder X

下载地址:http://www.dcloud.io/


前端开发小白入门首选,是国产的一款前端开发工具而且是完全免费的,优点是有强大的其他语言支持和开发webapp等功能,在语法提示、转到定义、重构、调试等方面都非常高效。十分强大。

1665309192603.jpg


相关文章
|
20天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
35 3
|
1月前
|
前端开发 JavaScript 测试技术
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
1月前
|
前端开发 测试技术 持续交付
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
1月前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
63 0
|
10天前
|
前端开发 JavaScript 开发工具
独家揭秘:前端大牛们都在用的高效开发工具,你get了吗?
前端开发领域日新月异,Visual Studio Code、Webpack、React/Vue和Git等工具凭借高效、便捷的特点,深受前端大牛们青睐。本文将揭秘这些工具的使用技巧,帮助你提升开发效率,轻松应对各种前端挑战。
20 3
|
17天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
21天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
21 3
|
21天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
36 2
|
1月前
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js
|
1月前
|
缓存 前端开发 JavaScript
探索现代Web开发中的前端性能优化策略
【10月更文挑战第5天】探索现代Web开发中的前端性能优化策略
下一篇
无影云桌面