【前端之旅】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


相关文章
|
21天前
|
前端开发 JavaScript 测试技术
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
21天前
|
前端开发 测试技术 持续交付
前端工程化:构建高效、可维护的现代Web应用
【10月更文挑战第5天】前端工程化:构建高效、可维护的现代Web应用
|
27天前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
48 0
|
17天前
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js
|
21天前
|
缓存 前端开发 JavaScript
探索现代Web开发中的前端性能优化策略
【10月更文挑战第5天】探索现代Web开发中的前端性能优化策略
|
21天前
|
前端开发 API 云计算
探索现代Web开发中的微前端架构
【10月更文挑战第4天】在快速发展的软件开发领域,微前端架构(Micro Frontends)逐渐成为构建大型、复杂前端应用的热门选择。本文深入探讨微前端架构的概念、优势及其实现方式。微前端架构将应用分解为独立模块,每个模块可由不同团队独立开发、测试和部署,从而提高开发效率和应用的可维护性。其优势包括独立性、技术多样性、可扩展性和灵活性。实现微前端架构需定义边界、选择通信机制、构建基础框架、开发独立模块并进行集成与测试。现代Web开发中,常用方法包括使用Web Components、模块化CSS、状态管理和服务端渲染等。随着云计算和微服务架构的普及,微前端架构预计在未来几年内持续增长。
|
1天前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
5 0
|
25天前
|
缓存 前端开发 JavaScript
前端技术趋势:探索现代Web开发的新领域
【10月更文挑战第1天】前端技术趋势:探索现代Web开发的新领域
73 4
|
25天前
|
前端开发 JavaScript API
前端开发趋势与实践:拥抱Web Components
前端开发趋势与实践:拥抱Web Components
30 4
|
25天前
|
前端开发 JavaScript Go
前端开发趋势:从响应式设计到Web组件的探索
【10月更文挑战第1天】前端开发趋势:从响应式设计到Web组件的探索
29 3