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工作原理

引用一张图来说明:

web三件套之HTML——Web概述(一)_第1张图片

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

输入的请求是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>

效果显示:

web三件套之HTML——Web概述(一)_第2张图片

发展历史

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

web三件套之HTML——Web概述(一)_第3张图片

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>

web三件套之HTML——Web概述(一)_第4张图片

1.6 习题和实验

1、选择题

错题:

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

2、填空题

错题:

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

你可能感兴趣的:(#,html,python,css,web,java)