WEB前端复习总结

超人bu会飞
160 阅读11分钟

FIRST

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

    Internet中的资源以URL统一资源定位符标识，主机以IP地址或域名标识。

    联系：

    1.URL包含了资源所在的主机地址

    2.当用户在浏览器中输入一个URL时，DNS会将其中的域名解析为IP地址，使得浏览器能够找到资源所在的主机，发送请求并获取资源。

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

    1. URL解析，确定协议、主机名、端口、路径、查询参数等。
    2. DNS解析，将域名解析成IP地址
    3. 使用解析得到的IP地址和端口号，与目标主机建立TCP连接
    4. 向目标主机发送HTTP的请求报文
    5. 目标服务器处理并响应
    6. 浏览器接收响应，并渲染页面，最终显示Web网页

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

    依赖于TCP传输层协议。TCP协议的特点是面向连接、可靠传输、流量控制和拥塞控制、数据流的有序传输、全双工通信。

  4. HTTP协议的全称是什么? HTTP/1.1协议的特点是什么?

    超文本传输协议HyperText Transfer Protocol。

    1. 基于请求与响应模式
    2. 明文传输请求、响应报文
    3. 简单、灵活、易于扩展
    4. 无状态

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

    请求报文格式包含四个部分：

    第一部分由请求方法、URL定位符、HTTP版本组成；

    第二部分是Header头部，包含关于请求的各种信息；

    第三部分是一个空行；

    第四部分是一个可选请求体，一些请求方法（如post）需要请求体保存发送端提交的数据。

    响应报文格式也包含四个部分：

    第一部分由HTTP版本、状态码、状态描述组成；

    第二部分Header头部，包含关于响应的各种信息；

    第三部分是一个空行；

    第四部分是一个可选响应体，用于传输服务器返回给客户端的数据

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

    HTTP/1.1 存在

    1. 队头阻塞，降低TCP连接利用率
    2. 头部字段臃肿，重复传输降低网络资源利用率
    3. 报文各字段长度不固定，增加协议解析的成本
    4. 不支持服务端推送
    5. 无状态特性，阻碍交互
    6. 明文传输，安全性低

    HTTP2主要改进了以上前四个问题

    1. 多路复用解决了队头阻塞问题
    2. 头部压缩，减少需要传输的头部字节数
    3. 二进制编码报文，使得每个字段长度固定，提高报文处理效率
    4. 支持了服务端向客户端推送资源

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

    一个“流”包含一条或多条“消息”

    一条“消息”包含一个或多个“帧”

    帧是最基本的数据单元，以二进制压缩格式存放HTTP1中的内容

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

    1. TCP以及TCP+TLS 建链时握手过多

    2. 多路复用与TCP的队头阻塞问题

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

    HTML 中的锚标签 主要用途有：

    1. 创建超链接，使用户能够点击链接跳转到其他页面或同一页面的不同位置。
    2. 提供文件下载链接
    3. 快速定位页面中某个标签的位置

  10. web技术中什么叫字体实体

    "字体实体" 通常是指使用特定的 HTML 或 CSS 代码来引入字体图标库中的符号或图标。这些符号或图标通常以字体的形式嵌入到网页中，并通过 CSS 样式进行调用和显示。

  11. 说明层叠样式表的作用和特点

    CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制，同时能够实现内容和表现的分离，使得网站的设计风格趋向统一、维护更加容易，并且能够被多种浏览器支持。

  12. 在HTML页面中使用CSS定义的样式有哪几种方式?各有什么优缺点?

    1. 内联样式。优点：可以直接在html标签的style属性定义样式，简单方便。缺点：需要在每个元素上定义样式，代码冗余，不利于样式的复用和维护
    2. 内部样式表。优点：样式与 HTML 文档紧密相关，可以集中管理页面的样式。缺点：CSS与与 HTML 混合在一起，冗余程度高，且不利于样式的复用，
    3. 外部样式表。优点：样式与 HTML 完全分离，易于维护和管理，提高样式的重用性。缺点：需要额外的CSS文件，增加了加载页面时的成本消耗
    4. 导入样式表。优点：便于管理和组织样式；缺点：影响浏览器的并行下载，降低页面加载速度

  13. CSS中定义了哪些常用选择符?什么是CSS选择符的优先级机制

  1. html元素选择符
  2. 类选择符
  3. id选择符
  4. 后代选择符和子元素选择符
  5. 直接相邻选择符和通用相邻选择符
  6. 伪类选择符
  7. 伪元素选择符
  8. 属性选择符

优先级机制是指：不同选择符对于同一个元素定义了不同的样式属性，此时选择符越特殊，样式属性越有效。

SECOND

  1. 在HTML文件中引入JavaScript代码的方式有哪几种？各有什么特点？

    1. 内嵌方式，在HTML文档的<script>标签中直接编写JavaScript代码。简便，但耦合度高，适合小脚本。
    2. 外部文件引入，将JavaScript代码存放在独立的.js文件中，并在HTML中通过<script>标签的src属性进行引用。js代码与html结构分离，提高代码的可读性、可维护性和可复用性。
    3. 行内JavaScript代码，实现简便，但耦合度高
    4. 动态加载JavaScript，灵活，但是控制复杂

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

    局部变量，只能在函数内部可见，外部无法访问。

    全局变量，函数内外都可以直接访问全局变量，不受作用域限制

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

    GET和POST。GET提交数据时直接将数据与URL进行拼接，而POST提交的数据被包含在请求的消息体中。

    GET方法的优点是获取数据简单、可被浏览器缓存，缺点是提交数据的安全性低，不适合提交大量数据和敏感信息；

    POST方法的优点是提交数据的安全性高，支持大量数据传输，缺点是不能被浏览器缓存。

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

    JavaScript 中的原型链机制是指每个对象都有一个指向其原型的内部链接。当试图访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript 引擎会沿着原型链向上搜索，直到找到对应的属性或方法，或者搜索到达原型链的末尾（即 null），意味着查找失败。

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

    JavaScript 中的伪继承机制是一种通过借用构造函数和原型链结合的方式来模拟类似于传统面向对象语言中继承的行为的机制。

  6. 简述浏览器中事件的冒泡传播机制。该机制有何用途？

    浏览器中事件的冒泡传播是指当一个元素上的事件被触发时，该事件会从当前元素开始，逐级向祖先元素传播事件，直至达到DOM树的根节点。冒泡传播机制的用途是事件委托。

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

    JavaScript 的作用域链是一种确定变量和函数访问权限的机制。当代码中的变量被引用时，JavaScript 引擎会沿着作用域链逐级向上查找，直到找到变量或到达全局作用域为止。

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

    JavaScript中的变量提升机制是指在代码执行过程中，JavaScript 引擎会将变量的声明（但不包括赋值）提升到其所在作用域的顶部，这意味着可以在变量声明之前访问这些变量，而不会报错，但可能会访问到未定义的变量。

  9. image-20240531140601170

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    期末考试成绩单
    <table border="1px" >
        <thead>
            <th>学号</th>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>90</td>
                <td>89</td>
            </tr>
            <tr>
                <td>002</td>
                <td>刘四</td>
                <td>92</td>
                <td>89</td>
            </tr>
            <tr>
                <td>003</td>
                <td>王五</td>
                <td>94</td>
                <td>99</td>
            </tr>
            <tr>
                <td colspan="4">提交表格时间: 2007年12月28日星期五</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
  1. image-20240531140621498
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    学员基本信息
    <form action="">
        姓名<input type="text"> <br>

        性别：男<input type="radio" , name="gender" , value="man">
        女<input type="radio" , name="gender" , value="woman">
        保密<input type="radio" , name="gender" , value="srect"><br>

        学历：<select name="edu">
            <option value="">--请选择--</option>
            <option value="">高中</option>
            <option value="">大专</option>
            <option value="">本科</option>
            <option value="">研究生</option>
            <option value="">其他</option>
        </select><br>

        选修课程：<input type="checkbox">Linux
        <input type="checkbox">Apache
        <input type="checkbox">Mysql
        <input type="checkbox">PHP <br>
        
        自我评价：<textarea rows="3" cols="20"></textarea><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>

</body>
</html>

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

NaN
false
true

image-20240531140651121

undefined<br/>
局部变量<br/>

image-20240531140656763

你好，Tom<br/>
name:Mary

image-20240531140706087

s1的subject属性：undefined<br/>
Student的subject属性：Java<br/>
s1的subject属性：Ruby<br/>

image-20240531140711770

1.145<br />
3.1452

image-20240531140720617

参数类型不符合undefined<br/>
参数类型不符合object<br/>
person的Age值为：10

  1. JavaScript程序设计

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

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

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

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

    image.png转存失败，建议直接上传图片文件

    <script>
    // 构造函数创建矩形对象
    function Rectangle(width, height) {
        this.width = width;
        this.height = height;
    }

    // 使用构造函数的原型属性添加计算面积的方法
    Rectangle.prototype.rectArea = function () {
        return this.width * this.height;
    }

    // 函数用于处理计算面积的操作
    function calculateArea() {
        // 获取输入框中的值
        var width = document.getElementById("width").value;
        var height = document.getElementById("height").value;

        // 检查输入值是否为大于0的正整数
        if (width > 0 && height > 0 && Number.isInteger(Number(width)) && Number.isInteger(Number(height))) {
            // 创建矩形对象
            var rect = new Rectangle(Number(width), Number(height));
            // 计算面积
            var area = rect.rectArea();
            // 显示结果
            document.getElementById("result").innerHTML = "矩形的面积是：" + area;
        } 
        else {
            document.getElementById("result").innerHTML = "请输入大于0的正整数！";
        }
    }
</script>
    1. 编写一段JavaScript脚本代码，要求：

​ （1）用构造函数的方式创建一个计算器对象，该对象中要求至少包含两个操作数实例成员（如属性number1和number2，操作数是正整数即可）；

​ （2）用构造函数的原型属性（prototype）为该矩形对象添加一个计算的成员方法（只能是一个方法，如compute），该方法需要输入一个运算符参数（要求通过运算符参数至少能指定加、减、乘和除四种运算，对于除法运算需要对分母为0的异常情况做出判断并给出提示信息）。

​ （3）用户需要在网页中通过输入框输入两个操作数（设定为大于0的正整数即可），并选择运算类型，点击“计算”按钮可在网页中显示出正确的计算结果。

网页页面如下图所示：

image.png转存失败，建议直接上传图片文件

<script>
    // 定义Calculator构造函数
    function Calculator(number1, number2) {
        this.number1 = number1;
        this.number2 = number2;
    }

    // 在原型对象上定义compute方法
    Calculator.prototype.compute = function (operator) {
        var result;
        switch (operator) {
            case '+':
                result = this.number1 + this.number2;
                break;
            case '-':
                result = this.number1 - this.number2;
                break;
            case '*':
                result = this.number1 * this.number2;
                break;
            case '/':
                if (this.number2 === 0) {
                    return "错误：除数不能为0";
                }
                result = this.number1 / this.number2;
                break;
            default:
                return "无效的运算符";
        }
        return result;
    }

    // 处理计算按钮点击事件
    function calculate() {
        // 获取用户输入的值
        var num1 = parseInt(document.getElementById("number1").value);
        var num2 = parseInt(document.getElementById("number2").value);
        var operator = document.getElementById("operator").value;

        // 验证输入的数值是否为大于0的正整数
        if (num1 > 0 && num2 > 0) {
            // 创建Calculator对象
            var calculator = new Calculator(num1, num2);
            // 计算结果
            var result = calculator.compute(operator);
            // 显示结果
            document.getElementById("result").innerHTML = "计算结果：" + result;
        } else {
            document.getElementById("result").innerHTML = "请输入大于0的正整数";
        }
    }
</script>
avatar
文章
阅读
粉丝