HTML__CSS 高频面试题

1、你是怎么理解HTML语义化

HTML语义化简单来说就是用正确的标签来做正确的事。比如表示段落用 p 标签、表示标题用 h1-h6 标签、表示文章就用 article
复制代码

使用语义化标签的意义：

可访问性：帮助辅助技术更好的阅读和转译你的网页，利于无障碍阅读；

可检索性：有了良好的结构和语义，可以提高搜索引擎的有效爬取，提高网站流量

国际化：全球只有13%的人口是英语母语使用者，因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构

互用性：减少网页间的差异性，帮助其他开发者了解你网页的结构，方便后期开发和维护

2、BFC及其应用(重点)__外边距塌陷

BFC （块级格式化上下文）让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响

触发条件：

根元素

浮动元素：float 除 none 以外的值（left、right）

绝对定位元素：position (absolute、fixed)

display 为 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

约束规则：

属于同一个BFC区域的两个相邻的盒子垂直排列、margin发生重叠

BFC区域不会和flot的元素区域重叠

计算BFC高度时，浮动盒子元素也参与计算

文字层不会被浮动层覆盖，会环绕于周围

作用：

阻止元素被浮动元素覆盖

可以包含浮动元素（清除浮动）

阻止相邻元素的margin合并

3、水平垂直居中(重点)

子盒子元素固定宽高

absolute + 负margin

absolute + margin auto

absolute + calc

子盒子固定宽高

absolute + transform

lineheight

table

flex

display: grid;

display: table-cell;

4、meta viewport 是做什么用的，怎么写

目的：是为了在移动端不让用户缩放页面使用的

如何写：

每个词的意思

with=device-width 将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度

initial-scale=1 页面初始缩放比例为屏幕分辨率的宽度

maximum-scale=1 指定用户能够放大的最大比例

minimum-scale=1 指定用户能够缩小的最大比例

5、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有:<img>、<input>

知名的空元素：<br/> <hr/> <img/> <input/> <link/> <meta/> <br />

6、iframe有哪些缺点？

iframe是一种框架，也是一种很常见的网页嵌入方

iframe的优点：

原封不动的把嵌入的网页展现出来

如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

用iframe来嵌套，可以增加代码的可重用。

iframe的缺点：

会产生很多页面，不容易管理

如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差

代码复杂，无法被一些搜索引擎索引到，不利于搜索引擎优化

移动设备兼容性差

增加http请求

7、HTML5新特性

拖放（Drag 和 drop）onmousedown、onmousemove

地理定位getCurrentPosition()有两个回调函数参数，获取地理位置成功的回调和失败的回调

离线存储

Web 存储localStorage、sessionStorage

Web Workers是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能

语义化标签

8、script标签为什么要放在body标签的底部，【defer async】

因为浏览器在渲染html的时候，从上到下依次执行，遇到js文件就会停止当前页面的渲染，转而去下载js文件，如果将script标签放在头部，如果文件又很大的情况下，首屏时间就会延长，影响用户体验。解决方法：

defer\async的区别 首先都是让js文件能够异步下载，不阻塞页面的渲染 区别就是defer必须等待整个文档渲染完成后才执行 而async在下载完成后，会暂停html的解析，转去执行js

9、src 和 href的区别

href是超文本引用，它指向资源的位置，建立与目标文件之间的联系

src目标是把资源下载到页面中 浏览器解析方式 href 不会阻塞对文档的处理（这就是官方建议使用link引入而不是@import） src 会阻塞对文档的处理

10、DOCTYPE 标签

防止浏览器在渲染文档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。“”,确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

严格模式的排版和JS 运作模式是 以该浏览器支持的最高标准运行。

11、清除浮动(重点)

1、使用clear:both清除浮动

它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护

2、利用伪元素clearfix来清除浮动

给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

3、使用CSS的overflow属性

当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果

12、 Less/Sass/Scss的区别

Scss其实是Sass的改进版本

Less环境较Sass简单

变量符不一样，Less是@，而Sass是$，而且变量的作用域也不一样。

Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

Sass和Less的工具库不同

网络、性能优化

1、跨域

啥是跨域：协议，域名，端口不相同，就不能相互访问，浏览器对js的安全限制

跨域带来的影响：

Cookie、LocalStorage 和 IndexDB 无法读取

DOM 和 JS 对象无法获取

Ajax请求发送不出去

跨域的解决办法：

jsonp跨域，动态的创建script标签，再去请求一个带参网址来实现跨域通信

jquery：dataType:’jsonp’只能发送GET请求

跨域资源共享 CORS，CORS支持所有类型的HTTP请求

node、nginx代理跨域

vue中proxy属性

2、 HTTP和HTTPS的区别(必考)

HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头

HTTP 是明文传输，HTTPS 通过 SSL\TLS 进行了加密

HTTP 的端口号是 80，HTTPS 是 443

HTTPS 需要到 CA 申请证书，一般免费证书很少，需要交费

HTTP 的连接很简单，是无状态的

HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。

3、HTTP的状态码说一下

200(“OK”) 服务器已成功处理了请求

204 （无内容） 服务器成功处理了请求，但没有返回任何内容。

301 请求的网页已永久移动到新位置

302Found 重新加载，但由于是重定向

400(“Bad Request”)（错误请求） 服务器不理解请求的语法。

500(“Internal Server Error”) 服务器遇到错误，无法完成请求

403 资源没有权限访问

401未经授权：访问由于凭据无效被拒绝

404(“Not Found”) 服务器找不到请求的网页。

410如果请求的资源已永久删除

408 （请求超时）

此文为搬砖_点击跳转原文链接