web

第一章作业

1.请说明从用户在浏览器地址栏中输入网页URL地址到在浏览器中显示出Web页面期间浏览器的工作过程。

用户在浏览器地址栏中输入网页URL地址后，浏览器会先解析URL，确定要访问的服务器IP地址，然后通过DNS解析获取该服务器的IP地址。接着，浏览器会与服务器建立TCP连接，并发送HTTP请求报文。服务器接收到请求后，根据请求报文中的信息，生成对应的响应报文，并通过TCP连接返回给浏览器。浏览器接收到响应报文后，解析其中的HTML、CSS和JavaScript等资源，并通过渲染引擎将页面渲染出来，最终呈现给用户。

2.Internet中的资源如何标识？Internet中的主机地址如何标识？两者之间有何联系？

Internet中的资源通过URL进行标识，主机地址通过IP地址进行标识。URL是由协议、主机名、文件路径和查询参数等组成的字符串，用于唯一标识Internet上的资源。IP地址是由32位二进制数表示的网络地址，用于唯一标识Internet上的主机。在Internet中，URL和IP地址之间存在一一对应的关系。

3.HTTP协议的全称是什么？HTTP/1.1协议的特点是什么？

HTTP协议的全称是超文本传输协议（Hypertext Transfer Protocol），是一种用于传输Web页面等资源的应用层协议。

HTTP/1.1协议的主要特点包括：

1. 持久连接：客户端与服务器之间的连接可以被重用，从而避免了每次请求都需要重新建立连接的开销。
2. 管道化请求：客户端可以同时发送多个请求，而不需要等待之前的请求响应返回，从而提高了通信效率。
3. 报文分块传输：允许报文被分成多个部分（块）进行传输，从而减少了等待整个报文传输的时间。
4. 身份认证：提供了基本的身份认证和摘要认证机制，保障了通信的安全性。
5. 缓存机制：支持缓存机制，能够减少客户端和服务器之间的数据传输，提高了数据传输效率。
6. 支持多种数据格式：支持多种数据格式，包括HTML、XML、JSON等，使得服务器可以向客户端提供各种不同的数据。
7. 支持虚拟主机：支持虚拟主机，使得一台服务器可以托管多个网站，从而减少了服务器的成本。

4.在TCPIP协议栈中，HTTP/1.1协议的应用需依赖于哪种传输层协议？该协议的特点是什么？

在TCP/IP协议栈中，HTTP/1.1协议的应用需依赖于TCP传输层协议。TCP协议是一种可靠的、面向连接的传输协议，它通过三次握手建立连接，保证数据传输的可靠性和顺序性。

5.请描述HTTP/1.1协议请求报文格式与响应报文格式。

HTTP/1.1协议请求报文格式如下：

[请求方法] [请求URL] [协议版本][请求头部字段1]: [字段值1][请求头部字段2]: [字段值2]...[请求头部字段n]: [字段值n][请求数据]

HTTP/1.1协议响应报文格式如下：

[协议版本] [状态码] [状态描述][响应头部字段1]: [字段值1][响应头部字段2]: [字段值2]...[响应头部字段n]: [字段值n][响应数据]

6.HTTP/1.1存在什么问题？HTTP/2主要改进了HTTP/1.1的哪些问题？如何改进的？

HTTP/1.1存在的问题主要包括：

• 串行传输：HTTP/1.1协议采用的是串行传输，即每个请求需要等待前一个请求的响应才能发送，导致资源利用率较低；
• 队头阻塞：由于HTTP/1.1协议采用了串行传输，如果某个请求的响应较慢，会导致后续请求被阻塞；
• 头部信息冗余：每个请求和响应的头部信息都需要重复传输，导致网络带宽的浪费。

  HTTP/2主要改进了以下问题：

• 二进制分帧：HTTP/2将请求和响应分成若干个二进制帧进行传输，解决了队头阻塞的问题；
• 多路复用：HTTP/2允许在同一个TCP连接上并行发送多个请求和响应，提高了资源利用率；
• 首部压缩：HTTP/2采用HPACK算法对头部信息进行压缩，减少了网络带宽的浪费。

  7.描述HTTP/2中流、消息和帧的关系。

  在HTTP/2中，流是一个虚拟的双向通信通道，消息是HTTP/2通信的最小单位，帧是消息的二进制传输格式。一个流可以包含多个消息，一个消息可以由多个帧组成。

  #####8.HTTP/2协议存在什么问题？

  HTTP/2协议存在的问题主要包括：

  • 服务器端资源消耗较高：由于HTTP/2采用了二进制分帧和首部压缩等技术，导致服务器端需要消耗更多的CPU资源；

  • TCP慢启动问题：HTTP/2采用了同一TCP连接上并行发送多个请求和响应的技术，但由于TCP慢启动问题，可能会导致初始几个请求的响应较慢；

  • 兼容性问题：HTTP/2需要客户端和服务器都支持才能生效，但一些老旧的客户端和服务器可能不支持HTTP/2协议。

    第二章作业

    1.在HTML中锚标签的主要用途有哪些？

    锚点标签可以实现超链接功能，能够在不同网页下跳转访问。

    （1）锚点标签 和属性 href 结合，实现超链接，使得一个网页能链接到包括其他的网页、图像、音频等在内的其他网络资源。

    （2）锚点与属性name或id结合，访问本页面的一个书签。

    2.HTML中的表单数据提交方式有哪两种？各有什么优缺点？

    HTML中的表单数据提交方式有两种：GET和POST。GET方法会将表单数据附加在URL后面，在浏览器历史记录中留下明文记录，因此不适合传输敏感信息；而POST方法则将表单数据放在HTTP请求消息体中，相对安全，但会消耗更多服务器资源。

    3.什么叫字体实体？

    字体实体（font entity）是一种HTML字符实体，用来表示特定字体样式，比如粗体、斜体等。例如，代表粗体字，代表斜体字。使用字体实体能够增强文本的可读性和视觉效果，同时还可以方便地修改样式。

    #####4.

    编写能够实现上述Web页面的HTML代码

    期末考试成绩单

    期末考试成绩单

    学号	姓名	语文	数学
    001	张三	90	89
    002	刘四	92	89
    003	王五	94	99
    提交表格时间：2007年12月28日星期五

    #####5.

    编写能够实现上述Web页面的HTML代码

        学员基本信息    
    学员基本信息
    
    姓名：    
    
    性别：        男        女        保密
    
    学历：                                                    
    
    标记来定义样式，其中使用HTML注释标记，是为了当有浏览器不支持CSS语句时，遇到该语句就会自动忽略该段内容。 
    (3)在页面文件中嵌入外部样式表。上面两种方式都是讲CSS语句直接嵌套在页面文件中，这样这种CSS的定义语句只能使用于当前的页面文件。为了让多个页面文件可以共享CSS样式定义，可以将CSS语句段编写为单独的一个CSS文件，然后将它嵌入到页面文件中。
     
    (4)链接外部样式表。这种方式和嵌入外部样式表的方式相似，也要访问外部的样式表，但是嵌入外部样式表时是将样式文件直接加载到iot语句处，而链接外部样式表是直接向样式文件索取样式。
     
    3.CSS中定义了哪些常用选择符？什么是CSS选择符的优先级机制？
     
    HTML标记、CLASS选择符、ID选择符
     
    直接在页面文件中使用HTML标记的style属性定义的样式优先级最高。
     
    其他的样式定义按照在页面文件中出现的顺序，越后出现的优先级越高。
     
    ID选择符的优先级高于CLASS选择符。
     
    没有被定义样式控制的内容将使用浏览器的默认样式。
     
    4.什么是CSS的盒模型？
     
    CSS的盒模型指的是在页面中每个元素都被看作一个盒子，这个盒子包含了内容、内边距、边框和外边距四个部分。盒模型的大小由宽度（width）、高度（height）两个属性决定，其中宽度和高度设置的是内容区域的大小，而不是盒子整个大小。
     
    5.CSS中有哪几种布局模型？
     
    CSS中常见的布局模型有三种：流动模型、浮动模型和层模型。流动模型是默认的布局模型，元素按照文档流从上到下依次排列；浮动模型允许元素脱离文档流向左或向右浮动，允许多个元素并列显示；层模型允许元素在z轴方向上重叠显示，通过定位属性来控制元素的位置。
     
    6.CSS有哪些常见的设计模式？各有什么特点？
     
    (1)浮动布局(（float layout):通过使用float属性并将元素从正常的文档流中“"浮起来“浮动元素可以在文档中随意地移动。一般将浮动元素与清除浮动属性一起使用，以防止浮动元素对其它元素的影响。
     
    (2)IE盒子模型：是IE浏览器用于模拟怪异模式下的盒子模型，其宽度和高度包括了内容、内边距和边框，而不包括外边距。上述代码中，添加了一个box-sizing属性，值为border–box,就是使用IE盒子模型。
     
    (3)CSS3盒子模型(padding-box):是CSS3新增的一种盒子模型，其宽度和高度包括了内容和内边距，但不包括边框和外边距。在上述代码中，box-sizing属性值为content-box,即使用标准盒子模型，当盒子被鼠标悬停时，盒子变大，但不会改变边框大小。
     
    第四章作业
     
    #####1.在HTML文件中引入JavaScript代码的方式有哪几种？各有什么特点？
     
    在HTML文件中引入JavaScript代码的方式有三种：
     

    • 内联方式：在HTML标签中使用标签嵌入JavaScript代码。
    • 内部文件方式：在HTML文件中使用标签引入外部JavaScript文件。
    • 外部文件方式：在HTML文件中使用标签引入外部JavaScript文件，且指定了defer或async属性。

      内联方式的特点是代码与HTML混杂在一起，不利于代码维护和重用；内部文件方式的特点是代码与HTML分离，但同一个页面多处使用相同的代码时需要多次引入，不利于性能；外部文件方式则能够兼顾代码维护和性能需求。

      2.简述JavaScript中的变量提升机制。

      JavaScript中的变量提升机制指的是在函数作用域内，变量声明语句会被提升到函数体的顶部，但变量赋值语句仍然保留在原处。这意味着在变量声明语句之前，该变量就已经存在于作用域中，但其值为undefined。变量提升机制只适用于使用var关键字声明的变量，let和const声明的变量不会被提升。

      3.Javascript函数中可以定义哪几种变量？分别如何访问？

      JavaScript函数中可以定义三种变量：

      • 局部变量：在函数中使用var、let或const关键字声明的变量，只能在函数内部访问。
      • 形参变量：在函数定义中使用的参数，在函数内部作为局部变量使用。
      • 全局变量：在函数外部声明的变量，整个程序都可以访问。

        局部变量和形参变量可以直接访问，而全局变量需要使用window对象来访问。

        4.简述JavaScript作用域链机制。

        JavaScript中的作用域链机制指的是在函数作用域内，变量的查找顺序是从当前函数自身的作用域开始，逐级向上查找直到全局作用域。如果在函数内部找到了该变量，则直接使用该变量；否则继续向上查找，直到找到为止。作用域链的形成是由函数的定义方式和函数的调用方式决定的。

        5.简述JavaScript中闭包是如何产生的。

        JavaScript中闭包是指一个函数能够访问并使用其外部作用域中的变量，即使在该外部作用域已经执行完毕并被销毁的情况下仍然能够访问这些变量。闭包的产生是由于函数作用域的嵌套关系，在内部函数中引用了外部函数的变量，形成了对该变量的引用链，从而使得该变量不会被垃圾回收机制所回收。

        6.简述JavaScript的伪继承机制。

        JavaScript的伪继承机制指的是通过原型链和构造函数相结合的方式来实现对象间的属性和方法的共享。在伪继承中，先定义一个父类构造函数，再通过原型链将父类的属性和方法继承到子类构造函数中，从而使得子类对象能够共享这些属性和方法。在子类构造函数中，通过调用父类构造函数的方式来初始化父类对象的属性，从而达到伪继承的效果。

        7.简述JavaScript中的原型链机制。

        JavaScript中的原型链机制指的是在函数对象的原型属性中存储了一个指向其原型对象的指针，从而形成了对象间的原型链关系。在查找对象的属性时，如果对象本身不存在该属性，则会沿着原型链向上查找，直到找到该属性为止。如果在原型链上找不到该属性，则返回undefined。

        8.简述浏览器中事件的冒泡传播机制。

        浏览器中的事件冒泡传播机制指的是当某个元素触发了一个事件后，该事件会依次向上冒泡到该元素的父元素，直到到达文档根元素为止。在事件传播的过程中，可以通过调用事件对象的stopPropagation方法来阻止事件的进一步传播。

        9.给出下列程序运行结果

                 var a =Number.POSITIVE_INFINITY;       var b =Number.NEGATIVE_INFINITY;       var x = 0 /0;        var y =null;       document.writeln(a+ b);                       document.writeln(x==x);                      document.writeln(y==undefined);   

        NaN false true

        var scope = "全局变量";          functiontest()          {                 document.writeln(scope + "
        ");                  var scope = "局部变量";                 document.writeln(scope + "
        ");             };           test();

        undefined 局部变量

           function test(name){              this.name=name;              return "你好，" +this.name +'
        ';       }       var rval = test('Tom');      document.writeln(rval );       var obj = new test('Mary');       for(var i in obj)      {          document.writeln(i+":"+obj[i]);       }

        你好，Tom

        name:Mary

           function  Student(grade , subject){              this.grade= grade;              Student.subject= subject;       }       s1 = new  Student(5, 'Java');       document.writeln('s1的subject属性：' + s1.subject +"
        ");       document.writeln('Student的subject属性：' + Student.subject +"
        ");       s1.subject= 'Ruby';       document.writeln('s1的subject属性：' + s1.subject +"
        ");

        s1的subject属性：undefined

        Student的subject属性：Java

        s1的subject属性：Ruby

               var a = "3.145";       var b = a- 2;       var c = a+ 2;       document.writeln(b+"
        ");         document.writeln(c);

        1.145

        3.1452

        function  changeAge(person){              if(typeof person == 'object' && typeof person.age == 'number'){                     person.age= 10;                     document.write("person的Age值为："+ person.age +"
        ");              }              else {                     document.writeln("参数类型不符合" +typeof person +"
        ");              }       }       changeAge();       p = {abc :34};       changeAge(p);       person ={age : 25};       changeAge(person);

        参数类型不符合undefined

        参数类型不符合object

        person的Age值为：10

        10.JavaScript程序设计

        1.编写一段完整的HTML页面代码并加入JavaScript脚本，要求

        （1）在JavaScript脚本中要求定义一个矩形对象，用户可通过该对象的构造器指定矩形的长和宽，该对象具有可以计算矩形面积的功能；

        （2）在HTML的body部分调用矩形对象实例，并将矩形面积计算结果输出到HTML页面中。（注：所定义的对象应至少包含三个实例变量，分别是矩形的高、宽和一个计算面积的成员函数。）

          矩形面积计算器      // JavaScript代码    function Rectangle(length, width) {      this.length = length;      this.width = width;    }    Rectangle.prototype.calculateArea = function() {      return this.length * this.width;    };    // 在HTML页面加载完成后执行的函数    function calculateRectangleArea() {      var length = parseFloat(document.getElementById("lengthInput").value);      var width = parseFloat(document.getElementById("widthInput").value);      // 创建Rectangle对象实例      var rectangle = new Rectangle(length, width);      // 计算矩形面积      var area = rectangle.calculateArea();      // 将结果输出到HTML页面      document.getElementById("result").innerHTML = "矩形的面积是: " + area;    }    
        矩形面积计算器
          长度：    
          宽度：    
          计算  

        2.编写一段JavaScript脚本代码，要求：

        （1）用构造函数的方式创建一个矩形对象，矩形对象中要求至少包含长、宽两个实例成员（如属性width和height）；

        （2）用构造函数的原型属性（prototype）为该矩形对象添加一个计算面积的成员方法（如方法rectArea）。

        （3）用户需要在网页中通过输入框输入矩形的长和宽（设定为大于0的正整数即可），点击“计算面积”按钮可在网页中显示出正确的面积计算结果。

        网页页面如下图所示：

          矩形面积计算器      // JavaScript代码    function Rectangle(width, height) {      this.width = width;      this.height = height;    }    Rectangle.prototype.rectArea = function() {      return this.width * this.height;    };    // 在HTML页面加载完成后执行的函数    function calculateRectangleArea() {      var width = parseInt(document.getElementById("widthInput").value);      var height = parseInt(document.getElementById("heightInput").value);      // 检查输入是否为正整数      if (width         document.getElementById("result").innerHTML = "请输入大于0的正整数";        return;      }      // 创建Rectangle对象实例      var rectangle = new Rectangle(width, height);      // 计算矩形面积      var area = rectangle.rectArea();      // 将结果输出到HTML页面      document.getElementById("result").innerHTML = "矩形的面积是: " + area;    }      this.number1 = number1;    this.number2 = number2;  }  Calculator.prototype.compute = function(operator) {    switch (operator) {      case "+":        return this.number1 + this.number2;      case "-":        return this.number1 - this.number2;      case "*":        return this.number1 * this.number2;      case "/":        if (this.number2 == 0) {          return "除数不能为0！";        } else {          return this.number1 / this.number2;        }      default:        return "运算符不合法！";    }  };  function calculate() {    var num1 = parseInt(document.getElementById('num1').value);    var num2 = parseInt(document.getElementById('num2').value);    var operator = getOperator();    var calculator = new Calculator(num1, num2);    document.getElementById('result').innerHTML = num1 + operator + num2 + " = " + calculator.compute(operator);  }  function getOperator() {var operator = "";var radios = document.getElementsByName('operator');for (var i = 0; i