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 习题和实验
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结构。用户看到的第一个网页又叫做主页，所以主页的设计非常重要。
超链接
使用标签导入超链接。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工作制定和维护。
例子：
<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程序。
<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遍历和修改
实例程序
<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的格式是：协议类型：//域名（端口）/资源路径