Web原理基础

Web架构

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

Web架构

Web服务器

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

Web浏览器

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

Web应用

  • Web应用不需要安装，其程序资源都部署在Web服务器中。用户通过在Web浏览器中输入不同的URL地址就可以远程访问Web应用。
  • 一个Web应用程序是由完成特定任务的各种Web组件构成的。Web应用程序是由多个Servlet、JSP页面、HTML文件以及图像文件等组成。所有这些组件相互协调为用户提供一组完整的服务。
  • “前端”是与用户直接交互的部分，包括你在浏览网页时接触的所有视觉内容，包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
  • 后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

Web前端技术基础

HTML技术

HTML简介

  • HTML来源于Hypertext Markup Language（超文本标记语言）的首字母缩写，是用于架构和呈现网页的一种标记语言。
  • 它使用标签的形式将网页内容划分结构层次。还使用“超链接”将网络上不同的Web资源进行关联，点击后可以跳转到相关联的其他Web资源页面。
  • 目前HTML标准由W3C组织（World Wide Web Consortium，是万维网最居权威和影响力的国际技术标准机构）进行维护。

HTML的特点

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

CSS技术

CSS简介

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

CSS的特点

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

JavaScript技术

JavaScript简介

  • JavaScript是一种轻量级的脚本程序语言。
  • 通常在HTML网页中使用JavaScript为页面增加动态效果和功能。
  • JavaScript和HTML、CSS一起被称为是Web开发的三大核心技术
  • 目前JavaScript已经广泛应用于Web开发，市面上绝大多数网页都使用了JavaScript代码。可以说当今所有浏览器都支持JavaScript，无需额外安装第三方插件。

JavaScript vs Java

  • 因为名称的相近，JavaScript常被误以为和Java有关，但事实上它们毫无关联。JavaScript是Netscape公司发明的一种轻量级语言，主要应用于网页开发，无需事先编译；而Java是由Sun公司发明的一种面向对象程序语言，需要先编译再执行。JavaScript的主旨是为非程序开发者快速上手使用的，而Java是更高级更复杂的一种面向专业程序开发者的语言，比JavaScript难度大、应用范围更广。

JavaScript的特点

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

Web前段新技术

HTML5技术

HTML5简介

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

HTML5的特点

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

CSS3技术

CSS3简介

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

CSS3的特点

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

jQuery技术

jQuery简介

  • jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
  • jQuery是一个轻量级的"写的少，做的多"的 JavaScript库。若把js比作木头，那么jQuery就是木板（半成品）。
  • jQuery基于JS语言，是JS的框架，是集合Ajax技术开发出来的JS库，封装JS和Ajax的功能，提供函数接口，大大简化了JS的操作。

jQuery的特点

  • 代码精致小巧
  • 强大的功能函数
  • 跨浏览器