前端面试--html5、Css3

辉会飞
277 阅读13分钟

W3C 标准

  • 需要声明（ DOCTYPE ）文档类型
  • 需要定义语言编码 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" />
  • JS 必须要用 <script language=“javascript” type=“text/javascript”> 来开头定义
  • CSS 必须要用 <style type=“text/css”> 开头来定义
  • 正确使用注释，不要在注释内容中使用 –
  • 所有标签的元素和属性名字都必须使用小写
  • 所有的属性必须用引号 " " 括起来
  • 所有特殊符号（ < 和 & ）用编码表示
  • 所有属性必须有属性值
  • 所有的标记都必须有相应的结束标记
  • 所有的标记都必须合理嵌套
  • 图片添加有意义的 alt 属性
  • 在 form 表单中增加 label，以增加用户友好度

Web 语义化

指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。
利于SEO，便于阅读维护理解。

  1. 正确的标签做正确的事情
  2. 页面内容结构化
  3. 便于阅读维护和理解
  4. 便于浏览器、搜索引擎解析。利于爬虫标记、利于SEO

@import 和 link的区别

名称从属关系加载顺序缺点
@importCSS 提供的语法规则，导入样式表页面加载完毕后，加载阻塞加载，兼容性差
linkHTML提供的标签，可以加载 CSS 文件、定义 RSS、rel 连接属性加载页面，同时加载

CSS 盒模型

标准盒模型 box-sizing = content-box

width/height = content

IE 盒模型 box-sizing = border-box

width/height = border + padding + content

px、em、rem 区别

px

相对长度单位。相对于显示器屏幕分辨率。

em

相对长度单位。相对于当前对象内（元素）文本的字体大小

rem

相对长度单位。相对于HTML根元素的字体大小

display 常用属性

  • display: block;：块级元素
  • display: inline;：行内元素
  • display：table;：表格布局
  • display: grid;：网格布局
  • display：flex;：弹性布局
  • display: none;：隐藏元素
  • display: inline-block;：行内块元素
  • display: inline-table;：行内表格元素
  • display: inline-flex;：行内弹性布局
  • display: inherit;：继承父元素的 display属性

清楚浮动

  • 伪类
  • overflow: hidden

布局

Flex 布局

父容器：需要添加弹性布局的父元素
子项目：弹性布局容器中的每一个子元素
主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴
交叉轴：与主轴垂直的另一方向，称为交叉轴

父容器的属性
属性描述默认值其他值
flex-direction决定主轴的方向row 水平方向，起点左端row-reverse 水平方向，起点右端； column 垂直方向，起点上沿； column-reverse 垂直方向，起点下沿
flex-wrap处理换行nowrap 不换行，当容器宽度不够时，每个项目会被挤压宽度wrap 换行，第一行在容器最上方； wrap-reverse 换行，第一行在容器最下方
flex-flow是 flex-direction 和 flex-wrap 的简写row nowrap
justify-content子项目在主轴上的对齐方式，此属性与主轴方向息息相关flex-start 主轴起点flex-end 主轴终点； center 主轴居中； space-between 两端对齐，项目之间的间隔都相等(开头和最后的项目，与父容器边缘没有间隔)； space-around 每个项目两侧的间隔相等
align-items子项目在交叉轴上的对齐方式stretch 如果子项目未设置高度或设为 auto，将占满整个容器的高度。flex-start 交叉轴起点； flex-end 交叉轴终点； center 交叉轴居中； baseline 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
align-content多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用stretch 轴线占满整个交叉轴同 justify-content，只是为交叉轴
子项目的属性
属性描述默认值其他值
order排列顺序，数值越小，排列越靠前0
flex-grow扩展比例，基于剩余空间0 如果存在剩余空间，也不放大
flex-shrink缩小比例1 如果空间不足，该项目将缩小示例： 0 不被挤压、缩小，显示正常； 2 宽度为原来宽度的二分之一
flex-basis占据的主轴空间。如果主轴为水平，设置这个属性，相当于设置项目的宽度，原 width 将会失效auto
flexflex-grow, flex-shrink 和 flex-basis 的简写0 1 auto
align-self单个项目自身在交叉轴上的排列方式，可以覆盖掉父容器上的 align-items 属性auto 继承父容器的 align-items 属性值同父容器 align-items

双栏布局

使用 float 左浮左边栏，右边模块使用 margin-left 撑出内容块做内容展示

三栏布局

左右两栏固定宽度，中间自适应

布局方案具体实现缺点优点
浮动左右两栏固定宽度和浮动，中间栏增加左右外边距当宽度缩小到不足以显示三栏时，右侧栏会被挤到下方兼容性好
绝对定位容器为相对定位，左右两栏分绝对定位，中间栏增加左右外边距宽度缩小到无法显示主体内容时，主体内容会被覆盖无法显示内容可以优先加载
Flex容器为flex，左右栏固定宽度不可伸缩，中间栏为自动伸缩无法兼容低版本的浏览器代码简洁，DOM结构清晰，主流实现方式
网格容器为grid，设置三栏的宽度兼容性相对弹性盒要差代码简洁，DOM结构清晰
表格容器为table且宽度为100%，子元素为table-cell非语义化兼容性好
圣杯左中右三栏分别左浮动。中间栏width 为 100%。左栏margin-left为 -100% 。右栏margin-left为自身宽度的负值。容器设置左右 padding 为左右两栏留出空间，以展示中间栏内容。左右两栏为相对定位，左栏的 left 和右栏的 right 为内边距的宽度的负值。当中间栏宽度比左栏宽度小时，布局会发生混乱内容可以优先加载，兼容性好
双飞翼基于圣杯布局，引入一个容器来放置中间栏，并且设置中间栏的外边距，不需要使用相对定位。中间栏的子元素左右边距为左右栏的width，以展示中间栏内容。DOM结构较复杂支持内容优先加载；当中间栏宽度比左栏宽度小时，布局不会发生混乱

BFC

BFC 即 Block Formatting Contexts（块级格式化上下文）
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素

触发条件（任意一个）

  1. HTML 根元素
  2. 浮动元素：float 除 none 以外的值
  3. 绝对定位元素：position (absolute、fixed)
  4. display 为 inline-block、table-cells、flex、flow-root
  5. overflow 除了 visible 以外的值 (hidden、auto、scroll)

应用场景

  1. 相邻元素margin重叠问题
  2. 自适应两栏布局
  3. 清除浮动

前端数据存储方式 localStorage、sessionStorage、cookie 对比

储存方式生命周期存储容量存储位置应用场景
cookie保存在内存中，随浏览器关闭失效，如果设置过期时间，则到过期后失效4KB保存在客户端，每次请求时都会带上跟踪浏览用户身份
localStorage永久有效，除非主动清除4.98MB（不同浏览器情况不同）保存在客户端，不与服务端交互。节省网络流量页适合持久化缓存数据，比如页面的默认偏好配置等
sessionStorage仅在当前网页会话下有效，关闭页面或浏览器后会被清除4.98MB（部分浏览器没有限制）保存在客户端，不与服务端交互。节省网络流量适合一次性临时数据保存

HTTP常见状态码

1xx - 信息响应

这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个 1xx 响应。

  • 100 - Continue 继续 初始的请求已经接受，客户端应当继续发送请求的其余部分。如果已经完成，则忽略它
  • 101 - Switching Protocols 交换协议 服务器将遵从客户的请求转换到另外一种协议
  • 102 - Processing 处理中 服务器已收到并正在处理该请求，但没有响应可用

2xx - 成功响应

这类状态代码表明服务器成功地接受了客户端请求。

  • 200 - Ok 成功 请求成功。服务器已成功处理了请求
  • 201 - Created 已创建 请求成功并且服务器创建了新的资源
  • 202 - Accepted 已接受 服务器已接受请求，但尚未处理
  • 203 - Non-Authoritative Information 非授权信息 服务器已成功处理了请求，但文档可能来自另一来源，非权威性信息
  • 204 - No Content 无内容 服务器成功处理了请求，但没有返回任何内容。
  • 205 - Reset Content 重置内容 服务器成功处理了请求，但没有返回任何内容。但浏览器应该重置它所显示的文档。用来强制浏览器清除表单输入内容
  • 206 - Partial Content 部分内容 客户端发送了一个带有Range头的GET请求（分块请求），服务器完成了它

3xx - 重定向

客户端浏览器必须采取更多操作来实现请求

  • 300 - Multiple Choices 多选 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
  • 301 - Moved Permanently 永久重定向 永久重定向。请求的资源已被分配了新的URL（URL在Location头部），以后应使用新的URL
  • 302 - Found 临时重定向 临时重定向。类似于301，但新的URL应该被视为临时性的替代，而不是永久性的
  • 303 - See Other 类似于301/302。不同之处在于，如果原来的请求是POST，Location头部指定的重定向资源应该通过GET提取
  • 304 - Not Modified 未修改 客户端发送了一个有条件的请求。服务器告诉客户端，原先的文档还可以继续使用。
  • 305 - Use Proxy 使用代理服务器 被请求的资源必须通过指定的代理才能被访问，代理的位置在Location头部
  • 307 - Temporary Redirect 临时重定向 临时重定向。和302大致相同

4xx - 客户端错误

发生错误，客户端有问题

  • 400 - Bad Request 错误的请求 请求出现语法错误
  • 401 - Unauthorized 未经授权 访问被拒绝，当前请求需要用户验证
  • 403 - Forbidden 禁止 资源不可用，服务器理解客户端的请求，但拒绝处理它
  • 404 - Not Found 未找到 请求失败，服务器上无法找到请求的资源
  • 405 - Method Not Allowed 不允许的方法 请求方法对指定的资源不适用
  • 406 - Not Acceptable 不接受 指定的资源已经找到，但它的的内容特性（MIME）无法满足请求头中（Accpet）的条件
  • 407 - Proxy Authentication Required 需要代理身份验证 类似于401，表示客户端必须先经过代理服务器的授权
  • 408 - Request Timeout 请求超时 请求超时。在服务器许可的等待时间内，客户一直没有发出任何请求
  • 409 - Conflict 冲突 请求无法完成。和被请求的资源的当前状态之间存在冲突
  • 410 - Gone 已删除 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址

5xx - 服务器错误

服务器由于遇到错误而不能完成该请求

  • 500 - Internal Server Error 内部服务器错误 服务器遇到了意料不到的错误情况，不能完成客户端的请求
  • 501 - Not Implemented 未实现 请求方法不被服务器支持且无法被处理。例如，客户发出了一个服务器不支持的PUT请求
  • 502 - Bad Gateway 错误的网关 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答
  • 503 - Service Unavailable 暂停服务 服务不可用，服务器由于维护或者负载过重未能应答
  • 504 - Gateway Timeout 网关超时 网关超时，由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答

浏览器从 URL 输入到页面展现的整个过程

DNS 域名解析

TCP 三次握手

  1. 客户端发送标有 SYN 的数据包，表示我将要发送请求
  2. 服务端发送标有 SYN/ACK 的数据包，表示我已经收到通知，告知客户端发送请求
  3. 客户端发送标有 ACK 的数据包，表示我要开始发送请求，准备被接受

发送 HTTP 请求

服务器处理请求并返回 HTTP 报文

浏览器解析渲染页面

  1. 根据 HTML 解析 DOM 树
  2. 根据 CSS 解析生成 CSS 规则树
  3. 结合 DOM 树和 CSS 规则树，生成渲染树
  4. 布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸
  5. 回流：在布局完成后，某个元素的尺寸发生了变化影响了布局，则需重新计算渲染树，重新渲染
  6. 绘制：根据计算好的信息绘制页面
  7. 重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性发生变化，将只会引起浏览器的重绘。

断开连接，TCP 四次挥手

  1. 客户端发送请求，申请断开连接。此时不会发送数据，但是会继续接收数据
  2. 服务端接收请求后，告知客户端已明白。不会再接收数据，但是会继续发送数据
  3. 服务端发送完剩余的数据后，告知客户端可以断开连接。此时服务端不会发送和接收数据
  4. 客户端收到后，告知服务端我开始断开连接

TCP / IP 协议， HTTP / HTTPS 协议

TCP / IP协议

传输层协议，主要是解决数据如何在网络中传输

HTTP / HTTPS 协议

应用层协议，主要是解决如何包装数据

HTTP

超文本传输协议（Hypertext Transfer Protocol ）。是建立在 TCP 协议之上的一种应用。
特点：客户端发送的每次请求 都需要服务器回送响应，在请求结束后，会主动释放连接。这个过程称为“一次连接”。

HTTP 和 HTTPS 的区别

  • HTTPS 需要申请证书
  • HTTPS 是超文本传输协议，属于明文传输。 HTTPS 是具有安全性的 SSL 加密传输协议
  • HTTP 和 HTTPS 是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443
  • HTTP 的连接很简单，是无状态的。HTTPS 是由 SSL+HTTP 构建的可进行加密传输、身份认证的网络协议，比 HTTP 安全。
avatar
文章
阅读
粉丝