文章目录

web三件套之HTML（一）
- Web前端开发技术综述

web三件套之HTML（一）

Web前端开发技术综述

1.1 Web概述

起源

1980年Tim Berners （蒂姆-伯纳斯-李）在欧洲核子物理实验室构建了一个项目——ENQUIRE。这是一个类似于维基百科的超文本在线编辑数据库。1989年3月，他编写了一篇文章，里面提到了一个更加精巧的管理模型——万维网。1990年与RobertCailliau合作。1990年11月13日在一台NeXT工作站写了第一个网页以实现他的想法。后来这台NeXT工作站成为了世界上第一台互联网服务器。同年圣诞节假期，其设计了一套开展网络工作所需的所有工具：第一个万维网浏览器（也是编辑器）和第一个web服务器。

1991年8月6日在alt.hypertext新闻组正式发布关于万维网的文章。标志着因特网上万维网公共服务的首次亮相。

Tim Berners的另外一个重大突破是将超文本嫁接到因特网。并发明了一个全球网络资源唯一认证的系统：统一资源标识符（Uniform Resource Indentifier，URI）。

而后，为了万维网（world wide web）不被少数人控制，Tim组织成立了World Wide Web Consortium，即W3C。致力于引导Web发挥其最大的潜力。HTML的各个版本协议都出自该W3C会议。

1.2 Web的特点

1、易导航和图形化的界面

Web很流行，他可以在同一页同时显示色彩和文本，而在之前的Internet只能显示文本信息。同时浏览很方便，只需要从一个链接跳转到另外一个链接即可。
2、与平台无关性

无论计算机系统是什么平台，都可以通过Internet访问WWW，没有平台的限制。
3、分布式结构

大量的图片、音频、视频信息会占用很多的磁盘空间，事先难以预料信息的多少，对于Web来说信息可以放在不同的站点，而没有必要集中在一起。浏览的时候只需要在浏览器指向该站点即可。也就是实现了物理上不一定在一个站点的信息逻辑上是一体的。
4、动态性

站点的信息是可以更新的，如果能保证实时性，则实现了动态性。
5、交互性

Web的交互性首先体现在其超链接上，用户的浏览顺序完全由其自己决定。另外通过表达Form的形式可以从服务器获取动态的信息。用户向服务器提交申请，服务器根据用户请求返回响应信息。

1.3 Web工作原理

引用一张图来说明：

在这里插入图片描述

流程说明：
用户发送请求-》浏览器和服务器建立连接-》浏览器将请求数据封装为协议符合的格式（请求头、请求体）-》服务器收到用户请求-》将请求解析处理-》返回对应的请求响应（应答体、应答消息头）-》浏览器收到信息则解析显示给用户

输入的请求是URL，然后通过域名解析器对域名解析，根据解析结果访问指定的ip地址的web服务器，发送HTTP请求。

1.4 Web前端开发

Web1.0时代

网页制作，网站只是信息的发布者，主要内容以静态的方式呈现，用户只是网站的访客。

Web2.0时代

对网站的内容重构，使用HTML+CSS+Javascript、DIV、DOM、AJAX等技术实现网站的整体优化和用户体验改善。发达国家：前端人员：后端人员=1：1.我国仍然缺乏前端人才。

于是Web2.0时代催生出的前端开发工程师日益受到重视。

1.5 Web前端开发技术

1.5.1 Web开发标准三剑客之HTML

HTML（Hypertext Markup Language）是超文本标记语言。是一种标记语言而不是编程语言，因为不需要编译。HTML是web页面的结构。它使用标记来描述网页。网页内容包括标题、副标题、段落、表格、表单等。

HTML文档

用来描述网页的，用HTML标记和纯文本构成的文本文件。Web浏览器能够解析该类型的文件，以网页的形式显示他们。

版本	时间
HTML1.0	1993年6月
HTML2.0	1995年11月
HTML3.2	1996年1月
HTML4.0	1997年12月
HTML4.01	1999年12月
HTML5	2014年10月

统一资源定位器URL

又叫统一资源定位符（Uniform Resource Locator）。我们可以理解为网页的地址。是因特网上标准的资源地址（Adress）。

组成——协议类型://服务器地址（端口号）/路径/文件名

协议

如HTTP，HTTPS，ftp，file

主机域名及路径（端口等）

http://info.cern.ch/www20/
http:/www.enu.cn/kexuetansuo_12385/index.html
ftp://ftp.pku.edu.cn/

主机资源的具体地址

协议和主机域名用 //隔开.其余的用/。

Web服务器

又叫网站，指在Internet上提供Web访问服务的站点。由软件和硬件组成的有机整体。必须为Web服务器分配IP地址和域名才能对外提供Web服务。架构基本数是B/S结构。用户看到的第一个网页又叫做主页，所以主页的设计非常重要。

超链接

使用<a></a>标签导入超链接。Web页面都是由若干个超链接构成。Web超链接很重要！

<a href='https://www.baidu.com'>百度百科</a>

1.5.2 Web开发标准三剑客之CSS(级联样式表)

因为NetScape和Microsoft两家公司在自己的浏览器软件上不断添加新的HTML标记和属性到HTML规范里面导致了网站的内容独立于网站表现层变得很困难。W3C组织肩负起了HTML标准化的使命。在HTML4.0之外创建了样式（Style）。所有的主流浏览器都支持CSS（层叠样式表）

CSS的作用

级联样式表（Cascading Style Sheet，CSS）也称为层叠样式表。可以有效的对页面布局、字体、颜色和其他的效果进行更加精准的控制。只需要对相应的代码做一些简单的修改，就可以改变同一个页面的不同部分。采用CSS技术是为了解决网页内容和表现分离的问题。

CSS是一种标记语言，直接由浏览器解析。CSS标准由W3C的CSS工作制定和维护。

例子：

<!doctype html>
<html lang="en">
  <head>
    <meta charset='utf-8'>
    <title>CSS样式表应用</title>
    <style type="text/css">
    p{
     
     
      font-size:24px; /*设置字号*/
      font-family:黑体;/*设置字体*/
      text-indent:2em;/*设置首行缩进*/
      color:#FF0000;/*设置颜色*/
    }
    #div1 p{
     
     
      font-size:18px;
      color:blue;
      border:1px doublle #000099;/*边框样式*/
    }
    </style>
  </head>
  <body>
    <p>第一个段落</p>
    <div id="div1" class="">
     <P>图层段落</p>
    </div>
  </body>
</html>

效果显示：

在这里插入图片描述

发展历史

CSS1:1996年12月17日发布，W3C推荐标准
CSS2:1999年1月11日发布，W3C标准，添加了对媒体（打印机和听觉设备）、可下载字体的支持
CSS3:计划将CSS划分为更小的模块，这些模块分为盒子模型、列表模型、超链接方式、语言模型、背景和边框、文字特性、多栏布局等。

1.5.3 Web开发标准三剑客之JavaScript

由来

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML添加动态功能。如响应用户的各种操作。最初由Netscape（网景公司）的Brendan Eich（布兰登·艾奇）设计，由Netscape的LiveScript发展而来、原型化继承面向对象动态类型的客户端脚本语言。只有Netscape和Sun公司合作，更名了为JavaScript。同时ECMA(欧洲计算机制造商协会)制定了以JavaScript为基础的ECMAScript标准。

JavaScript的组成

一个完整的JavaScript由三个不同部分组成：

核心（EMCAScript）
文档对象模型（Document Object Model，DOM）
浏览器对象模型（Browser Object Model,BOM）

Javascript实际上是一个文本文件的文档，使用时需要嵌入到HTML文档里面。所以任何文档编辑器都可以开发JavaScript程序。

<!doctype html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>JavaScript的简单应用</title>
  </head>
  <body>
  <script>
  document.write("hello,World");/*直接在浏览器视窗显示*/
  alert("hello,World");/*开启对话窗显示*/
  </script>
  </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GqXRtNti-1598152051197)(2020-08-23-10-07-05.png)]

1.5.4 HTML DOM

HTML DOM 是（Document Object Meodel）HTML文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器、平台无关的接口，使得用户可以访问页面上其他的标准组件。DOM与JavaScript结合起来实现了Web网页的行为和结构的分离。

DOM的由来
历史可以追溯到20世纪90年代后期Microsoft和Netscape两家公司的“浏览器大战”。双方为了在JavaScript和JScript方面决一死战，于是大规模添加浏览器强大的功能。导致了非微软浏览器无法显示正常的网页。DOM解决了Netscape的JavaScript和Microsoft的JScript的冲突。为Web设计师和开发者提供了一个处理HTML或者XML文档标准的方法。

HTML DOM定义了访问和操作HTML文档的标准方法。JavaScript可以重构整个HTML文档，但是需要获得对HTML文档元素访问的入口，这个入口连同对HTML元素的移动添加删除等操作都要通过DOM获取。

DOM的结构

DOM是以层次模型组织的节点或者信息片段的集合。将整个页面规划为由节点组成的文档。允许开发人员遍历节点信息。如图所示：被认为是基于树或者基于对象的结构

在这里插入图片描述

HTML DOM Level

HTML DOM Level1 1998年10月发布，W3C推荐规范，含有DOM Core和 DOM HTML两个模块
HTML DOM Level2 引入DOM视图、DOM事件、DOM样式、DOM遍历和范文；用于处理新的接口类型
HTML DOM Level3 引入以统一方式载入和保持文档的方法，包含在新模块DOM Load and Save和DOM Validation方法，进一步扩展DOM

1.5.5 BOM

BOM(Browser Object Model)又叫做浏览器对象模型。浏览器对象模型定义了JavaScript可以进行操作的浏览器各个功能部件的接口。提供了访问文档各个功能部件（如窗口本身、屏幕功能部件、浏览器历史记录）的图解和操作方法。

BOM主要处理浏览器窗口和框架，不过通常浏览器特定的JavaScript扩展都可以被看做BOM的一部分。这些扩展如：对cookie的支持、弹出新的浏览器窗、调节大小等。

常见的BOM对象有：Window、Navigator、Screen、History、Location

1.5.6 AJAX

AJAX(Asynchronous JavaScript and XML)也叫做异步JavaScript和XML，它是Web2.0时代最多使用的技术之一。是多种技术的综合。使用XHTML和CSS标准化呈现，使用DOM动态显示和交互，使用XML和XSTL进行数据交互和处理等。更重要的是它打破了使用页面重载的惯例技术组合。

工作原理
AJAX的核心是JavaScript对象XMLHTTPRequest。该对象在Internet Explorer5中首次引入，它支持异步请求的技术。可以使用JavaScript向服务器提出请求并处理响应而不阻塞用户。

通过AJAX，可以使用JavaScript的XMLHTTPRequest对象直接和服务器通信，不需要重载页面和web服务器交互数据。

AJAX在浏览器和Web服务器之间使用了异步数据传输（HTTP请求），这样网页就可以从服务器请求少量信息而不是整个页面

1.5.7 jQuery

jQuery是一套跨浏览器的JavaScript库，简化了HTML和JavaScript之间的操作。是一个优秀的JavaScript框架。宗旨：“Write less， do more”——写更少的代码，做更多的事。

jQuery中添加网页的方法

我们可以在jQuery官网下载最新的jQuery文件库，然后通过以下方式添加到网页里面：

<head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
</head>

jQuery的替代

若不想在自己的计算机存放jQuery文件库，可以从goole或Microsoft内容分发网络加载：

1、Google的CDN

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" ></script>
</head>

2、Microsoft的CDN

<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" type="text/javascript" ></script>
</head>

jQuery的特性
既然是一个JavaScript函数库，拥有的特性如下：

HTML元素选取、元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
AJAX
实用工具
HTML DOM遍历和修改

实例程序

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery的简单应用</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js" type="text/javascript" ></script>
    <script>
      $ (document).ready(function(){
     
     
        $ ("p").click(function(){
     
     
          $ (this).hide();
        });
      });
    </script>
  </head>
  <body>
    <p>你点击我我会隐藏</p>
    <p>你点击我我也会隐藏</p>
    <p>你也要点击我！</p>
  </body>
</html>

在这里插入图片描述

1.6 习题和实验

1、选择题

错题：

设计JavaScript的公司是Netscape而不是Sun公司

2、填空题

错题：

HTML文档是由HTML标记和纯文本构成的文本文件。
AJAX的全称是异步JavaScript和XML。
CSS的全称是级联样式表。
URL的格式是：协议类型：//域名（端口）/资源路径

web三件套之HTML——Web概述（一）

文章目录

web三件套之HTML（一）

Web前端开发技术综述

1.1 Web概述

1.2 Web的特点

1.3 Web工作原理

1.4 Web前端开发

1.5 Web前端开发技术

1.5.1 Web开发标准三剑客之HTML

1.5.2 Web开发标准三剑客之CSS(级联样式表)

1.5.3 Web开发标准三剑客之JavaScript

1.5.4 HTML DOM

1.5.5 BOM

1.5.6 AJAX

1.5.7 jQuery

1.6 习题和实验

猜你喜欢