前端面试题之三大件精选

一、HTML

1、 html语义化的理解

正确的标签做正确的事情

可以使页面可读性增强，内容结构化，更加便于浏览器、搜索引擎解析，就算没有样式的情况下也是可以以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫也依赖与html标记来确定上下文和各个关键字的权重，利于SEO，搜索引擎优化

2、 img标签上title与alt的属性的区别是什么

title：当鼠标放在img上的时候显示的文字，用于提示说明

alt：当img处于无法正常显示的情况下的文字代替，例如抓包丢失，网络延迟，适用于某一类残障人士的语言浏览器，或者被用户关闭图像显示的浏览器，而且alt 是用于搜索引擎识别的

3、iframe框架的优缺点

优点：

1、并行加载脚本
2、Security sandbox
3、解决加载缓慢的第三方内容。如图标和广告等的加载问题。

缺点：

1、iframe会阻塞主页面的Onload时间
2、即使内容为空，加载也需要时间
3、没有语意

4、href 与 src的区别

href: ( hypertext reference ) 指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点和资源之间定义一个链接或者关系。（目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目的地址）

src source的缩写，指向外部资源的位置，指向的内容将会应用到文档中当前标签的位置

href和src的区别：

1、请求资源类型不同：href指向网络资源的位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求src资源时会将其指向的资源下载并应用到文档中，比如JavaScript脚本，img图片等
2、作用结果不同：href用于在当前文档和引用资源之间建立联系，src是替换当前内容
3、浏览器解析方式不同：当浏览器解析src时，会暂停其他资源的下载和处理，直到把该资源加载，编译，执行完毕，图片和框架也如此，类似于将引用资源应用到当前内容，这也是为什么建议把js脚本放在底部而不是头部的原因

二、CSS

1、介绍下css的盒子模型

有两种： IE盒子模型 、W3C盒子模型：

盒模型：内容content、填充padding、边界margin、边框border

区别：IE的content部分把border和padding计算了进去

2、css选择器优先级

！important>行内样式（比重1000）>ID选择器（比重100）>类选择器（比重10）>标签（比重1）>通配符>继承>浏览器默认属性

3、垂直居中有几种方式

当行文本：line-height: height;

图片：vertical-align: middle;

absolute定位： top:50% left:50%；transform:translate(-50%,-50%);

flex:display:flex; margin:auto;

4、css中link和@import的区别和用法

link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；

@import属于css范畴，只能加载css

link引用css时，在页面载入时同时加载，

@import需要网页页面载入完全以后加载

link是xhtml标签，无兼容问题，

@import是css2.1提出的，低版本的浏览器不支持

link支持使用JavaScript去控制dom改变样式

@import不支持

5、rgba和opacity的透明效果有什么不同

opacity会继承父元素的opa