前端面试题(基础)

 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

 

原文地址:https://www.cnblogs.com/molang/p/15469587.html