2021前端常见面试题及答案-HTML、CSS

---

HTML

---

1、img 标签 的 title 和 alt 有什么区别？

1.title是共性属性，当鼠标移上去的时候显示相应提示
2.alt 是 img 的特有属性，⽤于图⽚⽆法加载时显示、读屏器 阅读图⽚。可提图⽚⾼可访问性，除了纯装饰图⽚外都必须设置有意义的值，搜索引擎会 重点分析。

2. 语义化的理解

1、 用正确的标签做正确的事情！
2、HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
3、在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
4、搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
5、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

3. 请写出至少5个html5新增的标签，并说明其语义和应用场景？

1 . section：定义文档中的一个章节
2. nav：定义只包含导航链接的章节
3. header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
4. footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
5. aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。 标签定义其所处内容之外的内容
6. i 标签显示斜体文本效果。 兼容所有浏览器
7. video 标签定义视频
8. article 标签规定独立的自包含内容
9. main 标签规定文档的主要内容。

4. 网络中使用最多的图片格式有哪些

1. jpg，图片支持颜色比较多，图片可以压缩，但是不支持透明，一般jpg用来保存颜色丰富的图片
2. gif，支持的颜色少，只支持简单的透明，支持动态图
3. png，png支持的颜色多，并且支持复杂的透明，可以用来显示颜色复杂的透明图片
4. webp，谷歌推出的专门用来表示网页中的图片的一种格式，具备以上图片格式的所有优点，文件特别小，但是兼容性不好
5. base64，将图片使用base64编码，这样可以将图片转换成字符，通过字符的形式来引入图片，一般都是一些需要和网页一起加载的图片才会使用base64

5. 行内元素和块元素

行内元素：

< a > 、 < em > 、 < strong > 、 < span > 、 < i > 、< label >、 < br >

块级元素：

< div > 、 < p > 、 < h1…6 > 、 < ol > 、 < ul > 、 < table > 、< form >

内联块级元素：

< img > 、 < input >

空元素（没有内容的html元素，开始标签即关闭标签）：

< input / > 、 < link / > 、 < br / > 、 < hr / > 、 < img / > 、 < meta /

行内元素

设置宽高无效，宽高由字体决定
margin-left和margin-right设置有效，padding现在浏览器可以设置(以前浏览器设置无效)
元素在一行显示，不会自动换行 可以设置display: inline-block来支持设置自定义宽高

块级元素

可以设置宽高，margin，padding 会自动换行，相当于display:block 多个块状，默认排列从上到下
如果不设置宽度，那么宽度将默认变为父级的100%,高度是内容高度

6. Doctype作用？严格模式和混杂模式如何区分，有何意义？

声明位于文档中的最前面的位置， 处于 标签之前。 此标签可告知浏
览器文档使用哪种 HTML 或 XHTML 规范。 （重点： 告诉浏览器按照何种规范解析页面）

7. 说一下对css盒模型的理解

答：css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
盒模型有两种：标准盒模型和IE盒模型。
标准盒模型中width和height指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸；但在IE6浏览器的width不是内容的宽度，而是内容、内边距和边框的宽总和；IE的content部分包含了border和padding。

8. rem,px,em之间的关系和区别

答：px
实际上就是像素，用PX设置字体大小时，比较稳定和精确。
但是px不支持用户进行浏览器缩放或者不同移动端的兼容，因为像素是固定的，屏幕大小是变化的。
em
是根据父元素来对应大小，是一种相对值；
em值 = 1/父元素的font-size*需要转换的像素值。
进行任何元素设置，都有可能需要知道他父元素的大小，这很不方便。
rem
是根据根元素html的font-size来对应大小，
1rem = 16px,可以在根元素html中写固定像素也可以写百分比，然后在具体的标签上设置rem。

9. 五大浏览器及其内核

浏览器	内核
IE	Trident
Tirefox	Gexko
Opear	presto
Safari	Webkit
Chorme	Webkit

---

css

---

1.清楚浮动有哪些方法

---

js

---

1. 如何理解javaScript中的this

2.原始类型与引用类型有什么区别

3.如何深度克隆一个对象

4.数组去重有哪些方法

5.同步与异步的区别

6.get请求与post请求的区别

7.跨域请求有哪些方案

总结