HTML5教程

WEB前端面试

本文主要是介绍WEB前端面试,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1.HTML+CSS

1. 行内元素(行级元素、内联元素)、行内块元素、块元素各有什么区别。

  1. html元素的分类
  2. 各种类型的区别
  3. 各有哪些元素

2. 清除浮动有哪些方法

  1. 为什么设置元素浮动(当前可以用flex布局替换浮动布局)
  2. 浮动元素的特性
  3. 使用空div清除浮动。
  4. overflow:hidden:扩展overflow的属性
  5. 伪元素:扩展伪元素的用法,img不可以添加伪元素,js不能操作伪元素

3. 前端优化

降低请求量:合并资源,减少 HTTP 请求数,minify / gzip 压缩,webP,lazyLoad。 加快请求速度:预解析 DNS,减少域名数,并行加载,CDN 分发。 缓存:HTTP 协议缓存请求,离线缓存 manifest,离线数据缓存 localStorage。 渲染:JS/CSS 优化,加载顺序,服务端渲染,pipeline

4. 盒子模型有哪些常用的属性,如何使用这些属性。

  1. margin
  2. padding
  3. border
  4. box-sizing

5. HTML5新增了哪些标签

  1. 布局:header、footer、section、aside、nav、article
  2. 媒体:audio、video
  3. 画板:canvus

5. px、em、rem的区别和用法。

  1. px是固定尺寸
  2. em参考父级font-size值
  3. rem参考html元素font-size值:多用于移动端百分比布局。

6. css选择器权重如何判断。

  1. 内联样式
  2. 嵌入样式
  3. 外部样式

7 . 如何使用css的定位(position属性)。

  1. 绝对定位
  2. 相对定位
  3. 固定定位
  4. 设置参照物

8. 让一个div垂直水平居中

  1. 使用定位
  2. 使用flex布局

/* 方法一 */ .container{ width:500px; height:500px; border:1px solid red; position: relative; } .box{ width:100px; height:100px; background-color: blue; /* 垂直水平居中 */ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } /* 方法二 */ .container{ width:500px; height:500px; border:1px solid red; display:flex; align-items: center; justify-content: center; } .box{ width:100px; height:100px; background-color: blue; }

9. 让两个块元素在同一行显示有哪些方法

  1. 元素浮动:需要清除浮动,如果不熟练,会引入很多新问题。
  2. 设置display:inline | inline-block:边距不好控制
  3. flex布局:推荐
  4. 定位(永远都不要用)

10. css3新增了哪些特性

  1. 更多的选择器
  2. 边框阴影、文字阴影、圆角、渐变
  3. transform:translate|scale|rotate
  4. 过渡效果:transition
  5. 引入外部字体
  6. 动画效果
  7. 媒体查询
  8. flex布局
  9. gird布局

11. 设置元素透明度有哪些属性

  1. rgba:只有当前元素透明
  2. opacity:子元素继承透明属性

12. display:none和visibility:hidden的区别

  1. display:none 隐藏不占位
  2. visibility:hidden隐藏占位

GET 和 POST 的区别:

 

get 参数通过 url 传递,post 放在 request body 中。 get 请求在 url 中传递的参数是有长度限制的,而 post 没有。 get 比 post 更不安全,因为参数直接暴露在 url 中,所以不能用来传递敏感信息。 get 请求只能进行 url 编码,而 post 支持多种编码方式 get 请求会浏览器主动 cache,而 post 支持多种编码方式。 get 请求参数会被完整保留在浏览历史记录里,而 post 中的参数不会被保留。 GET 和 POST 本质上就是 TCP 链接,并无差别。但是由于 HTTP 的规定和浏览器/服务器 的限制,导致他们在应用过程中体现出一些不同。 GET 产生一个 TCP 数据包;POST 产生两个 TCP 数据包。 画一个三角形   三角形原理:边框的均分原理 div { width:0px; height:0px; border-top:10px solid red; border-right:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid transparent; }

说一下浏览器缓存

缓存分为两种:强缓存和协商缓存,根据响应的 header 内容来决定。

强缓存相关字段有 expires,cache-control。如果 cache-control 与 expires 同时存在的话, cache-control 的优先级高于 expires。 协商缓存相关字段有 Last-Modified/If-Modified-Since,Etag/If-None-Match HTML5 新增的元素 首先 html5 为了更好的实践 web 语义化,增加了 header,footer,nav,aside,section 等语义 化标签,在表单方面,为了增强表单,为 input 增加了 color,emial,data ,range 等类型, 在存储方面,提供了 sessionStorage,localStorage,和离线存储,通过这些存储方式方便数 据在客户端的存储和获取,在多媒体方面规定了音频和视频元素 audio 和 vedio,另外还 有地理定位,canvas 画布,拖放,多线程编程的 web worker 和 websocket 协议。 HTML5 和 CSS3 用的多吗?你了解它们的新属性吗?有在项目中用过

 

html5: 1)标签增删 8 个语义元素 header section footer aside nav main article figure 内容元素 mark 高亮 progress 进度 新的表单控件 calander date time email url search 新的 input 类型 color date datetime datetime-local email 移除过时标签 big font frame frameset 2)canvas 绘图,支持内联 SVG。支持 MathML 3)多媒体 audio video source embed track 4)本地离线存储,把需要离线存储在本地的文件列在一个 manifest 配置文件 5)web 存储。localStorage、SessionStorage css3: CSS3边框如border-radius, box-shadow等; CSS3背景如background-size, background-origin 等;CSS3 2D,3D 转换如 transform 等;CSS3 动画如 animation 等。
这篇关于WEB前端面试的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!