1.绪论

目录

1.1 Web原理基础

1.1.1 Internet与万维网

1.1.2 Web架构

1.2 Web前端技术基础

1.2.1 HTML技术

1.2.2 CSS技术

1.2.3 JavaScript技术

1.3 Web前端新技术

1.3.1 HTML5技术

1.3.2 CSS3技术

1.3.3 jQuery技术

1.4 Web开发工具


1.1 Web原理基础

1.1.1 Internet与万维网

     Internet,中文名称叫做“因特网”,也被人们称为“国际互联网”。它是由成千上万台计算机设备互相连接,基于TCP/IP协议进行通信从而形成的全球网络。通过Internet,用户可以获得以下服务:

  • WWW浏览服务
  • 电子邮件服务(E-mail
  • 文件传输服务(FTP
  • 远程登陆服务(Telnet

    万维网(WWWWorld Wide Web),Internet上最重要的服务之一,也常被简称为“W3”或“Web”。万维网主要使用超文本传输协议HTTPHypertext Transfer Protocol)将互联网上的资源结合在了一起,并在浏览器中以Web页面的方式呈现给用户。每一个网络资源都有一个唯一的统一资源标识符URIUniform Resource Identifier),因此在Web页面中可以以超文本链接的形式相互引用,从而把不同的页面关联在一起。在使用PC、手机等设备上网浏览的网站都属于WWW提供的服务。

    注意,万维网与Internet并不是同一个概念,Internet上除了万维网还有其他服务,比如电子邮件服务、文件传输服务等。

1.1.2 Web架构

    Web架构是由Web服务器Web浏览器两部分组成的,也可以称为是浏览器/服务器(B/S,Browser/Server)架构,如图所示。

     Web服务器是在实体机或虚拟机服务器设备中安装的服务器软件,在联网环境中可以接收用户在Web浏览器中输入的URLUniform Resource Locator,统一资源定位符)地址,然后将该地址对应的文本、图片等内容发送给用户并显示在用户使用的Web浏览器中。Web服务器通常用于放置网页文件和数据供用户访问和下载常用的Web服务器有ApacheIISNginx等。

    Web浏览器是安装在客户端(PC端或移动设备)的软件,用于访问和显示Web资源。用户打开Web浏览器后输入正确的URL地址就可以访问网络上的资源,Web资源一般会以HTML文件(后缀名为.html.htm的文件)的形式发送给浏览器。浏览器可以解析和运行接收到的HTML文件,使其在浏览器中呈现带有文字、图像、超链接等丰富内容并且具有排版布局效果的画面,即Web页面。 目前常用的浏览器有Microsoft Edge、ChromeFirefoxSafariOpera等,

     Web应用不需要安装,其程序资源都部署在Web服务器中。用户通过在Web浏览器中输入不同的URL地址就可以远程访问Web应用。所有的Web应用都可以理解为存放在Web服务器端,并且可以在浏览器中呈现的软件。这些软件在浏览器中以Web页面的形式存在,包括文字、图片、音频、视频等内容,这些图形用户界面(Graphic User InterfaceGUI)也称为Web前端Web应用需要调整更新时,只需要更新服务器端存放的相关内容即可,用户通过浏览器可以直接访问到最新的内容,免去了客户端与服务器端同时需要更新的麻烦。

1.2 Web前端技术基础

HTML、CSS和JavaScript一起被称为是Web开发的三大核心技术。

1.2.1 HTML技术

HTML简介

    HTML来源于Hypertext Markup Language(超文本标记语言)的首字母缩写,是用于架构和呈现网页的一种标记语言,也是万维网(World Wide Web)上应用最广泛的核心语言。它使用标签的形式将网页内容划分结构层次。HTML还使用超文本链接(简称“超链接”)将网络上不同的Web资源进行关联,任何页面上的文字或图片都可以被指定为超链接,点击后可以跳转到相关联的其他Web资源页面。

HTML的特点

  • 简易性
  • 通用性
  • 平台无关性

1.2.2 CSS技术

CSS简介

    CSS全称为Cascading Style Sheets(层叠样式表),用于为网页文档中的元素添加各类样式,如字体大小、背景颜色、对齐方式等,起到了网页文档美化作用。层叠样式表的工作原理是将样式规则存放在样式表中,网页文档通过对样式表的引用可为目标区域的元素添加样式。目前所有主流浏览器均支持层叠样式表。

CSS的特点

  • 内容与表现分离
  • 易于应用与维护
  • 提高浏览器加载速度

1.2.3 JavaScript技术

JavaScript简介

    JavaScript是一种轻量级的直译式编程语言,基于ECMAScript标准(注:一种由ECMA国际组织通过ECMA-262标准化的脚本程序语言)。通常在HTML网页中使用JavaScript为页面增加动态效果和功能。目前JavaScript已经广泛应用于Web开发,市面上绝大多数网页都使用JavaScript代码。可以说当今所有浏览器都支持JavaScript,无需额外安装第三方插件。

JavaScript的特点

  • 脚本语言
  • 简单性
  • 弱类型
  • 跨平台
  • 大小写敏感

1.3 Web前端新技术

1.3.1 HTML5技术

HTML5简介

    HTML5指的是HTML语言的第五次修改版,也是目前HTML语言的最新版。HTML5标准规范是201410月由W3C组织正式发布,该标准规范中新增了对于多媒体技术的支持,为PC端和移动平台带来无缝衔接的丰富内容。

HTML5的特点

  • 元素标签的改进
  • 新增API
  • 错误处理机制

1.3.2 CSS3技术

CSS3简介

    CSS3Cascading Style Sheets, level 3)是CSS的第三版,也是目前CSS的最新标准。CSS3语言的特点是模块化,其中各个模块都新增了新的功能,或者在CSS2的基础上对功能进行了扩展。其中新增了对于网页上各类元素边框、背景、文本和字体等内容的特效。CSS3还新增了动画技术,无需使用脚本代码即可实现网页元素的动画效果。

CSS3的特点

  • 完全向后兼容
  • 模块化的新增功能
  • 变形与动画效果

1.3.3 jQuery技术

jQuery简介

    jQuery JavaScript 的扩展和补充。jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了许多常见的任务,如 HTML 文档遍历和操作、事件处理、动画效果以及 AJAX。通过使用简洁而强大的 APIjQuery 可以帮助开发者更轻松地编写跨浏览器的 JavaScript 代码。

jQuery的特点

  • 简洁而强大的选择器
  • 事件处理DOM操作
  • 丰富的动画效果和过渡效果
  • AJAX 支持

1.4 Web开发工具

Visual Studio Code(免费,需要自己配置)

Visual Studio Code 是一个免费且开源的文本编辑器,它支持多种编程语言,并提供了许多扩展来支持 Web 开发。它具有智能代码补全、自动格式化、调试器等功能,可以帮助开发者更方便地编写和调试代码。

Sublime Text(收费)

Sublime Text 是一款流行的付费文本编辑器,它提供了多种功能,如代码折叠、多重选择、自动完成等。它也支持插件和主题,可以满足开发者的个性化需求。

Eclipse(免费,用的人少)

Eclipse 是一个免费且开源的集成开发环境,它支持多种编程语言,并提供了多种插件来支持 Web 开发。它具有代码编译、调试、自动完成等功能,可以帮助开发者更快速和高效地完成 Web 开发任务。

IntelliJ IDEA(收费,需要自己破解)

IntelliJ IDEA 是一款商业 IDE ,它支持多种编程语言,包括 Java Python Ruby 等,并提供了许多插件来支持 Web 开发。它也具有智能代码补全、调试器、版本控制等功能,可以帮助开发者更轻松地进行 Web 开发。

HBuilderX(用的比较多,免费)

HBuilderX 轻如编辑器、强如IDE的合体版本,轻巧极速,vue开发强化,支持java插件、nodejs插件,并兼容了很多vscode的插件及代码块。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/540239.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Github和TeamCity的持续集成构建

一、简介 TeamCity是JetBrains旗下的一款持续集成[Continuous Integration,简称CI]工具,开箱即用。TeamCity提供一系列特性可以让团队快速实现持续集成:IDE工具集成、各种消息通知、各种报表、项目的管理、分布式的编译等等。 二、安装使用(…

Python实时追踪关键点组成人体模型

项目背景 最近遇到这样一个需求: 1:实时追踪关键点组成人体模型(手臂包括三个点:手腕,肘关节,双肩;腿部包括胯骨,膝盖,脚踝) 2:运用追踪到的关键…

github 中的java前后端项目整合到本地运行

前言: 本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容、敏感网址、数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 本文章未…

K8S CNI

OCI基本概念 OCI,Open Container Initiative,开放容器标准,是一个轻量级,开放的治理结构(项目),在 Linux 基金会的支持下成立,致力于围绕容器格式和运行时创建开放的行业标准。 OCI…

减资公告重磅上线:批量查询与实时监控,教你如何在公告期洞察企业风险!

官.网地址:合合TextIn - 合合信息旗下OCR云服务产品 新《公司法》将于2024年7月1日起施行。不少企业注意到其中的一大变化:新《公司法》对有限责任公司认缴登记制进行了完善,明确全体股东认缴的出资额由股东按照公司章程的规定自公司成立之日…

全栈的自我修养 ———— python使用绘制工具turtle

实现基础turtle入门 一、下载二、基础知识三、实现效果1、圆2、五3、蛇5、循环的正方形 一、下载 turtle是python中模块中自带的一般不需要下载如果报错如下,需要下载自己下载python-tk模块,详细请看python-tk下载 (mac的话可以直接用brew install python-tk) (my…

工具篇--分布式定时任务springBoot--elasticjob简单使用(1)

文章目录 前言一、elasticjob 介绍:二、elasticjob 使用:2.1 部署zookeeper:2.2 引入库2.2 定义任务:2.3 任务执行:2.4 任务执行控制台输出: 三、elasticjob 启动错误:3.1 KeeperErrorCode Ope…

JavaWeb(二)

目录 二、JavaScript 1.定义 2.js引入方式 1.内部脚本 2.外部脚本 3.js基本语法 1.书写语法 2.变量 3.数据类型、运算符、流程控制语句 1.原始类型 2.引用类型 3.运算符 4.类型转换 1.字符串类型转为数字: 2.其他类型转为boolean: 5.流程…

Git概述及安装步骤

一、Git简介 Git是一个免费的、开源的分布式版本控制系统,可以快速高效地处理从小型到大型的各种项目。Git 易于学习,占地面积小,性能极快。它具有廉价的本地库,方便的暂存区域和多个工作流分支等特性。其性能优于Subversion、CV…

Elasticsearch:使用标记修剪提高文本扩展性能

作者:来自 Elastic Kathleen DeRusso 本博客讨论了 ELSER 性能的令人兴奋的新增强功能,该增强功能即将在 Elasticsearch 的下一版本中推出! 标记(token)修剪背后的策略 我们已经详细讨论了 Elasticsearch 中的词汇和…

Windows客户端漏洞挖掘(红队角度)

0x01 前言 周五的时候看了key佬的演讲受益良多呀,来水水,写下目前针对Windows客户端类程序的部分挖掘入口吧,然后分享一下随手挖的很简单很简单的案例。 传统客户端 监听类的: 这里说的监听类的,指的就是安装客户端后启动的端口…

vue 引用百度地图

address.vue <template><div><!-- 地图 --><el-drawer:visible.sync"type1"direction"rtl"size"50%"append-to-bodyclass"map-drawer":before-close"beforeClose"><div style"width: 100%…