• 前端面试题(基础)


     html

    基础面试题

    css 面试题

    js 面试题

     

    你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

    • IE: trident内核
    • Firefox:gecko内核
    • Safari:webkit内核
    • Opera:以前是presto内核,Opera现已改用Google - Chrome的Blink内核
    • Chrome:Blink(基于webkit,Google与Opera Software共同开发

     

     

     HTTP状态码及其含义

    • 1XX:信息状态码
      • 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
    • 2XX:成功状态码
      • 200 OK 正常返回信息
      • 201 Created 请求成功并且服务器创建了新的资源
      • 202 Accepted 服务器已接受请求,但尚未处理
    • 3XX:重定向
      • 301 Moved Permanently 请求的网页已永久移动到新位置。
      • 302 Found 临时性重定向。
      • 303 See Other 临时性重定向,且总是使用 GET 请求新的 URI。
      • 304 Not Modified 自从上次请求后,请求的网页未修改过。
    • 4XX:客户端错误
      • 400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
      • 401 Unauthorized 请求未授权。
      • 403 Forbidden 禁止访问。
      • 404 Not Found 找不到如何与 URI 相匹配的资源。
    • 5XX: 服务器错误
      • 500 Internal Server Error 最常见的服务器端错误。
      • 503 Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护
      •  

    2- AJAX运行步骤与状态值说明

    在AJAX实际运行当中,对于访问XMLHttpRequest(XHR)时并不是一次完成的,而是分别经历了多种状态后取得的结果,对于这种状态在AJAX中共有5种,分别是。

    readyState

    0 - (未初始化)还没有调用send()方法

    1 - (载入)已调用send()方法,正在发送请求

    2 - (载入完成)send()方法执行完成,

    3 - (交互)正在解析响应内容

    4 - (完成)响应内容解析完成,可以在客户端调用了

     

    if(ajax.readyState == 4 && ajax.status == 200) { putData(ajax.responseText);}

     

    js  如何获取http状态码  ajax  .status 

     

     

    HTTP的几种请求方法用途

    • GET方法
      • 发送一个请求来取得服务器上的某一资源
    • POST方法
      • 向URL指定的资源提交数据或附加新的数据
    • PUT方法
      • 跟POST方法很像,也是想服务器提交数据。但是,它们之间有不同。PUT指定了资源在服务器上的位置,而POST没有
    • HEAD方法
      • 只请求页面的首部
    • DELETE方法
      • 删除服务器上的某资源
    • OPTIONS方法
      • 它用于获取当前URL所支持的方法。如果请求成功,会有一个Allow的头包含类似“GET,POST”这样的信息
    • TRACE方法
      • TRACE方法被用于激发一个远程的,应用层的请求消息回路
    • CONNECT方法
      • 把请求连接转换到透明的TCP/IP通道

    #

     

    行内元素有哪些?块级元素有哪些?空(void)元素有那些?行内元素和块级元素有什么区别?

    • 行内元素有:a b span img input select strong
    • 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4… p
    • 空元素:<br> <hr> <img> <input> <link> <meta>
    • 行内元素不可以设置宽高,不独占一行
    • 块级元素可以设置宽高,独占一行

     

    4 从浏览器地址栏输入url到显示页面的

     

    head元素内有哪些元素

    <title><base><link><style><meta><script><noscript><command>

    列举meta 标签常见的属性

     

        charset 

     

    content

     

    viewport  视口,应用场景、目的

     

       viewport-fit=cover

    viewport-fit=contain  白边

     

    description

     

    X-UA-Compatible     IE=edge,chrome=1

     

     

    • renderer

    dns-prefetch

     

     

     cookiessessionStorage localStorage  indexdb

    • cookie 是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)
    • cookie 数据始终在同源的 http 请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
    • sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。
    • 存储大小:
      • cookie 数据大小不能超过 4k。
      • sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。
    • 有效期(生命周期):
      • localStorage: 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
      • sessionStorage: 数据在当前浏览器窗口关闭后自动删除。
      • cookie: 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭

     

    safari 隐私模式

     

    语义化 

    便于开发者阅读,更易维护,对爬虫更友好

    样式丢失时,仍然能够清晰的表达出层级关系

     

     

    • header    介绍信息
    • nav   导航栏
    • section  整体的一部分 一小节
    • article  一份独立的内容
    • footer  
    • aside 侧边栏
    • main  文章的主要内容

     

     

     

    • i  专业术语 斜体
    • em  内容的强调  也是协议
    • strong  重要性
    • b 粗体
    • figure 嵌入式的内容

    script

    async  加载完就执行

    defer  dom 解析完毕,渲染完再执行

    如果有多个defer脚本,会按照它们在页面出现的顺序加载,而多个async脚本是不能保证加载顺序的

     

    跨域请求cookie是否会传送到服务端

    设置 withCredentials 为 true

     

  • 相关阅读:
    Linux反编译
    函数调用 堆栈
    机器学习经典书籍
    linux kernel系列四:嵌入式系统中的文件系统以及MTD
    Linux Kernel系列三:Kernel编译和链接中的linker script语法详解
    单页面响应式模板:血色圆月
    Disqus评论框改造工程-Jekyll等静态博客实现Disqus代理访问
    25个Web前端开发工程师必看的国外大牛和酷站
    我们是谁? 程序员!
    GitHub万星项目:黑客成长技术清单
  • 原文地址:https://www.cnblogs.com/molang/p/15469587.html
Copyright © 2020-2023  润新知