第一章 面试题基础篇（HTML+CSS）

1.1 HTML面试题

1. 行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

行内元素：span、img、input...
块级元素：div、footer、header、section、p、h1...h6...
空元素：br、hr...


元素之间的转换问题：
display: inline;  			把某元素转换成了行内元素      ===>不独占一行的，并且不能设置宽高
display: inline-block; 	把某元素转换成了行内块元素		 ===>不独占一行的，可以设置宽高
display: block;					把某元素转换成了块元素			   ===>独占一行，并且可以设置宽高

2. 页面导入样式时，使用link和@import有什么区别？

区别一：link先有，后有@import（兼容性link比@import兼容）；
区别二：加载顺序差别，浏览器先加载的标签link，后加载@import

3. title与h1的区别、b与strong的区别、i与em的区别？

title与h1的区别：

定义：
    title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
    h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
    title他是显示在网页标题上、h1是显示在网页内容上
    title比h1添加的重要 (title > h1 ) ==》对于seo的了解
场景：
    网站的logo都是用h1标签包裹的	

b与strong的区别：

定义：
    b：实体标签，用来给文字加粗的。
    strong：逻辑标签，用来加强字符语气的。
区别：
    b标签只有加粗的样式，没有实际含义。
    strong表示标签内字符比较重要，用以强调的。
题外话：为了符合css3的规范，b尽量少用改用strong就行了。

i与em的区别：

定义：
    i:实体标签，用来做文字倾斜的。
    em：是逻辑标签，用来强调文字内容的
区别：
    i只是一个倾斜标签，没有实际含义。
    em表示标签内字符重要，用以强调的。
场景：
    i更多的用在字体图标，em术语上（医药，生物）。

4. img标签的title和alt有什么区别？

区别一：
    title ： 鼠标移入到图片显示的值
    alt   ： 图片无法加载时显示的值
区别二：
    在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

5. png、jpg、gif 这些图片格式解释一下，分别什么时候用？

png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。
gif:一般是做动图的。
webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。

6. 前端页面有哪三层构成，分别是什么？作用是什么？

前端页面主要由三层构成，分别是结构层、表示层和行为层。这三层各自的作用如下：

1. HTML（HyperText Markup Language）：结构层，它是网页的基础，用于定义网页的内容结构，如标题、段落、列表、图像等元素。HTML标签告诉浏览器如何组织和呈现这些内容。

2. CSS（Cascading Style Sheets）：样式层，CSS负责为HTML元素添加样式，如颜色、字体、布局、间距等，使得内容具有视觉吸引力并适应不同的设备和屏幕尺寸。通过媒体查询，可以实现响应式设计。

3. JavaScript（JS）：行为层，JavaScript是动态交互的核心，它使网页能够响应用户的操作，执行复杂的逻辑，比如表单验证、动画效果、数据绑定等。现代前端开发还可能用到框架和库（如React、Vue或Angular）来简化开发过程。

7. 怎么解决2个行内块元素中间的空白

导致原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

方案一：手动取消空格和换行：

<ul>
    <li>1</li><li>2</li><li>3</li><li>4</li>

</ul>

非常不推荐，原因：
1. 部分编译器可能会代码整理的时候会强制换行
2. 代码比较臃肿，美观度不行，一点不优雅

方案二：父元素设置font-size:0px（推荐）

<style type="text/css">
    *{margin: 0;padding: 0;}
    ul{
        list-style: none;
        font-size: 0;
    }
    ul li{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
        font-size: 18px;
    }
</style>

<ul>
    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

注意：如果子盒子有文本，需要单独设置font-size

8. iframe的优点和缺点？

是什么：用于嵌入另一个 HTML 文档或外部资源（如网页、视频、地图等）到当前页面中。

优点：

1.嵌入外部内容： <iframe> 允许你在一个网页中嵌入来自不同源或服务器的内容，这有助于创建丰富多彩的页面。
2.独立性： 内嵌的内容在 <iframe> 中运行，与主页面相互隔离，这意味着它不会受到主页面的影响，保持了独立性。
3.简便性： 使用 <iframe> 非常简单，只需提供要嵌入的资源的 URL 或相对路径即可。

缺点：

1.性能问题： 如果滥用 <iframe>，在同一个页面中加载多个 <iframe> 可能会导致性能问题，因为每个 <iframe> 都需要单独加载资源。
2.可访问性问题： 内嵌内容可能导致可访问性问题，因为屏幕阅读器等辅助技术可能无法正确解释和浏览 <iframe> 内的内容。
3.安全性风险： 如果未谨慎处理来自不受信任源的内容，可能会存在安全风险，例如点击劫持（clickjacking）攻击。

防止自己的网站被别人 iframe 嵌套

if (top != self) {
    top.location = self.location;
}
//这段代码会检测页面是否被嵌套，如果是，则将页面重定向到自身。

1.2 CSS面试题

1. 介绍一下CSS的盒子模型

CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
    标准盒子模型：margin、border、padding、content
    IE盒子模型 ：margi