web开发选型，web开发毕业谁

什么是HTML?

HTML: ( Hypertext Markup Language )超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

特点:

• 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便;

• 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证;

• 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上;

• 通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器;

CSS 篇

link 与 @import 的区别

• link
   是 
  HTML
   方式， 
  @import
   是
  CSS
  方式

• link
   最大限度支持并行下载， 
  @import
   过多嵌套导致串行下载，出现 FOUC (文档样式短暂失效)

• link
   可以通过 
  rel="alternate stylesheet"
   指定候选样式

• 浏览器对 
  link
   支持早于 
  @import
   ，可以使用 
  @import
   对老浏览器隐藏样式

• @import
   必须在样式规则之前，可以在
  css
  文件中引用其他文件

• 总体来说： 
  link
   优于 
  @import
   ，
  link
  优先级也更高

BFC 有什么用

• 创建规则：

• 根元素

• 浮动元素（ 
  float
   不取值为 
  none
   ）

• 绝对定位元素（ 
  position
   取值为 
  absolute
   或 
  fixed
   ）

• display
   取值为 
  inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex
   之一的元素

• overflow
   不取值为 
  visible
   的元素

• 作用

• 可以包含浮动元素

• 不被浮动元素覆盖

• 阻止父子元素的 
  margin
   折叠

清除浮动的几种方式

• 父级 
  div
   定义 
  height

• 结尾处加空 
  div
   标签 
  clear:both

• 父级 
  div
   定义伪类 
  :after
   和 
  zoom

• 父级 
  div
   定义 
  overflow:hidden

• 父级 
  div
   也浮动，需要定义宽度

• 结尾处加 
  br
   标签 
  clear:both

Css3 新增伪类 - 伪元素

• p:first-of-type
   选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

• p:last-of-type
   选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

• p:only-of-type
   选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

• p:only-child
   选择属于其父元素的唯一子元素的每个 <p> 元素。

• p:nth-child(2)
   选择属于其父元素的第二个子元素的每个 <p> 元素。

• :enabled
   已启用的表单元素。

• :disabled
   已禁用的表单元素。

• :checked
   单选框或复选框被选中。

• ::before
   在元素之前添加内容。

• ::after
   在元素之后添加内容,也可以用来做清除浮动。

• ::first-line
   添加一行特殊样式到首行。

• ::first-letter
   添加一个特殊的样式到文本的首字母。

• 伪类语法一个：，它是为了弥补css常规类选择器的不足

• 伪元素语法两个：，它是凭空创建的一个虚拟容器生成的元素

IE盒子模型 、W3C盒子模型

• W3C盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；

• box-sizing: content-box

• width = content width;

• IE盒子模型： IE 的content 部分把 border 和 padding 计算了进去;

• box-sizing: border-box

• width = border + padding + content width

display:inline-block 什么时候不会显示间隙？

• 移除空格

• 使用 
  margin
   负值

• 使用 
  font-size:0

• letter-spacing

• word-spacing

行内元素float:left后是否变为块级元素？

行内元素设置成浮动之后变得更加像是 

inline-block

 （行内块级元素，设置 成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 

padding-top

 和 

padding-bottom

或者 

width 、 height

 都是有效果的

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是 60Hz 

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】

 ，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60*1000ms ＝ 16.7ms

stylus/sass/less区别

• 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性

• Sass
   和 
  LESS
   语法较为严谨， 
  LESS
   要求一定要使用大括号“{}”， 
  Sass
   和 
  Stylus
   可以通过缩进表示层次与嵌套关系

• Sass
   无全局变量的概念， 
  LESS
   和 
  Stylus
   有类似于其它语言的作用域概念

• Sass
   是基于 
  Ruby
   语言的，而 
  LESS
   和 
  Stylus
   可以基于 
  NodeJS NPM
   下载相应库后进行编译；这也是为什么安装Sass的时候有时候会报错，需要安装python脚本

优点：就不用我多说了，谁用谁知道，真香。

rgba()和opacity的透明效果有什么不同？

• rgba()
   和 
  opacity
   都能实现透明效果，但最大的不同是 
  opacity
   作用于元素，以及元素内的所有内容的透明度，

• 而 
  rgba()
   只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

水平居中的方法

• 元素为行内元素，设置父元素 
  text-align:center

• 如果元素宽度固定，可以设置左右 
  margin 为 auto
   ;

• 如果元素为绝对定位，设置父元素 
  position 为 relative
   ，元素设
  left:0;right:0;margin:auto;

• 使用 
  flex-box
   布局，指定 
  justify-content
   属性为
  center

• display
   设置为 
  tabel-ceil

垂直居中的方法

• 将显示方式设置为表格， 
  display:table-cell
   ,同时设置 
  vertial-align：middle

• 使用 
  flex
   布局，设置为 
  align-item：center

• 绝对定位中设置 
  bottom:0,top:0
   ,并设置 
  margin:auto

• 绝对定位中固定高度时设置 
  top:50%，margin-top
   值为高度一半的负值

• 文本垂直居中设置 
  line-height
   为 
  height
   值

浏览器 篇

浏览器内核的理解

• 主要分两个部分：
  渲染引擎
  、
  js引擎

• 渲染引擎：
  负责取得网页的内容（html css img ...），以及计算网页的显示方式，然后会输出至显示器或者打印机。浏览器的内核不同对于网页的语法解释也不同，所以渲染的效果也不一样

• js引擎：
  解析和执行javascript 来实现网页的动态效果

• 最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立，内核就倾向于只值渲染引擎

• IE : trident
   内核

• Firefox ： gecko
   内核

• Safari : webkit
   内核

• Opera
   :以前是 
  presto
   内核， 
  Opera
   现已改用
  Google - Chrome
   的 
  Blink
   内核

• Chrome:Blink
   (基于 
  webkit
   ，
  Google与Opera Software
  共同开发)

HTTP 的请求方式场景

• Get
   方法：获取数据通常(查看数据)-查看

• POST
   方法：向服务器提交数据通常(创建数据)-create

• PUT
   方法：向服务器提交数据通常(更新数据)-update，与
  POST
  方法很像，也是提交数据，但
  PUT
  制定了资源在服务器上的位置，常用在修改数据

• HEAD
   方法：只请求页面的首部信息

• DELETE
   方法：删除服务器上的资源

• OPTIONS
   方法：用于获取当前
  URL
  支持的请求方式

• TRACE
   方法：用于激活一个远程的应用层请求消息回路

• CONNECT
   方法：把请求链接转换到透明的
  TCP/IP
  的通道

HTTP状态码

• 1XX
   ：信息状态码

• 100 continue
   继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息

• 2XX
   ：成功状态码

• 200 ok
   正常返回信息

• 201 created
   请求成功并且服务器创建了新资源

• 202 accepted
   服务器已经接收请求，但尚未处理

• 3XX
   ：重定向

• 301 move per
   请求的网页已经永久重定向

• 302 found
   临时重定向

• 303 see other
   临时冲重定向，且总是使用get请求新的url

• 304 not modified
   自从上次请求后，请求的网页未修改过

• 4XX
   ：客户端错误

• 400 bad request
   服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求

• 401 unauthorized
   请求未授权

• 403 forbidden
   禁止访问

• 404 not found
   找不到如何与url匹配的资源

• 5XX
   ：服务器错误

• 500 internal server error
   最常见的服务器端的错误

• 503 service unacailable
   服务器端暂时无法处理请求（可能是过载活维护）

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](()

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。