前端开发经典面试题及答案-HTML篇

端的面试题相对较多，霸哥结合网上的面试经验，整理了一份前端高频面试题，猩码学苑的学员也在用，欢迎伙伴们收藏观看。

由于内容过多，为了让伙伴们更好的记忆和掌握，霸哥今天先出HTML部分内容，后续每天会发一篇，直至发完。

前端开发经典面试题及答案——HTML篇

一、cookie和WebStorage的区别与联系？

二、link和@import的区别

link和@import是外部引入CSS的两种方式。

结论：慎用@import方式。使用@import需要注意很多语法规则、引入顺序、资源文件下载引起的http请求过多。

区别：

HTNL中CSS有四种引入方式：

三、浏览器如何实现不同标签页的通信？

浏览器内多个标签页之间通信，简言之，浏览器中开了多个窗口，其中一个窗口产生行为其他窗口不用刷新也有相关表现。

1、cookie+setInterval方式

将要发送的信息写入cookie：

在另一个页面读取cookie：

2、websocket协议

新建webSocket文件夹，在该目录下打开终端 → 运行npm init （npm安装及配置步骤） → 初始化node项目（因为需要引入ws包） → 回车到结束 → 安装ws包 → 依旧在当前目录下终端运行npm i -save ws → 在webSocket目录下新建sever.js、send.html、reveive.html文件

四、iframe的优缺点

优点：

1、能够把嵌入的网页原封不动的展示出来；

2、多个网页调用iframe，只需要修改iframe的内容，就能实现所有引用页面的修改，方便快捷；

3、提升代码的复用性；

4、可解决页面加载缓慢的问题。

缺点：

1、不易管理；

2、链接书写失误会导致链接死循环

4、部分移动设备无法完全显示，设备兼容性差。

5、增加服务器的http请求，对大型网站不友好。

五、canvas

1、canvas是什么？

是html5新标签，属于h5新特性。canvas标签是一个图形的容器，可以在上形状，画logo，通过javascript绘制。

2、canvas用于什么？

①制作web网页游戏

②数据可视化（echarts就是基于canvas）

③广告banner的动态效果

④内嵌网页

六、做项目用到哪些h5新特性？

七、localstorage和sessionStorage可以写什么？

1、sessionStorage可用于写临时交流的留言板或是交流记录

2、localStorage可用于写记住用户名和密码的功能

八、如何解决页面内容加载缓慢的问题？

1、优化图片大小、格式

2、图片懒加载

3、优化CSS

4、网址后加/

5、标明宽度和高度

6、减少http请求

九、对H5新增的语义化标签的理解？

为什么要用语义化标签：

①使布局更加清晰，有利于浏览器对页面的读取

②用户体验良好

③有利于团队开发和维护

④可读性更强，减少差异化

十、页面渲染过程

1、解析HMTML标签，构建DOM树

2、解析CSS，构建CSSOM树

3、把DOM和CSSOM组合成渲染树（render tree）

4.在渲染树的基础上进行布局，计算每个节点的几何结构

5、把每个节点绘制到屏幕上（painting）

十一、网页上哪里可以看到请求的所有信息

此处霸哥以谷歌浏览器为例，打开控制台，点击netWork，参照下图：

十二、如何在浏览器查看和清除localstrorage保存的数据？

打开控制台 → 切换到 Application → 点击Localstrorage即可查看

十三、页面之间是怎么传参数的？

以上就是霸哥今日整理的前端经典面试题及答案HTML篇，如有疑问，欢迎私信霸哥！

HTML的世界里，一切都是由容器和内容构成的。容器，就如同一个个盒子，用来装载各种元素；而内容，则是这些盒子里的珍宝。理解了这一点，我们就迈出了探索HTML布局的第一步。

在HTML中，布局标签主要用于控制页面的结构和样式。本文将介绍一些常用的布局标签及其使用方法，并通过代码示例进行演示。

一、理解布局的重要性

布局在我们前端开发中担任什么样的角色呢？想象一下，你面前有一堆散乱的积木，无序地堆放在那里。

而你的任务，就是将这些积木按照图纸拼装成一个精美的模型。HTML布局标签的作用就像那张图纸，它指导浏览器如何正确、有序地显示内容和元素，确保网页的结构和外观既美观又实用。

下面我们就来看看在HTML中常用的基础布局标签有哪些，如何使用这些布局标签完成我们的开发目标。

二、常用的布局标签

1、div标签

div标签是一个块级元素，它独占一行，用于对页面进行区域划分。它可以包含其他HTML元素，如文本、图片、链接等。通过CSS样式可以设置div的布局和样式。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>这是一个div元素

</div>

</body>
</html>

运行结果：

2、span标签

span标签是一个内联元素，它不独占一行，用于对文本进行区域划分。它主要用于对文本进行样式设置，如字体、颜色等。与div类似，span也可以包含其他HTML元素。
示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>这是一个<span>span元素</span>。</p>

</body>
</html>

运行结果：

3、table标签

table标签用于创建表格，它包含多个tr（行）元素，每个tr元素包含多个td（单元格）或th（表头单元格）元素。

<table> 定义一个表格，<tr> 定义表格中的行，而 <td> 则定义单元格。通过这三个标签，我们可以创建出整齐划一的数据表，让信息的展示更加直观明了。

需要注意的是：

<table>和</table>标记着表格的开始和结束。
<tr>和</tr>标记着行的开始和结束，几组表示该表格有几行。
<td>和</td>标记着单元格的开始和结束，表示这一行中有几列。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

运行结果：

4、form标签

<form>标签的主要作用是定义一个用于用户输入的HTML表单。这个表单可以包含各种输入元素，如文本字段、复选框、单选按钮、提交按钮等。

<form>元素可以包含以下一个或多个表单元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

运行结果：

5、列表标签

1）无序列表

指没有顺序的列表项目
始于<ul>标签，每个列表项始于<li>
type属性有三个选项：disc实心圆、circle空心圆、square小方块。默认属性是disc实心圆。

示例代码：

<!DOCTYPE html>
<htmml>
<head>
<meta charst="UTF-8">
<title>html--无序列表</title>
</head>
<body>
<ul>
<li>默认的无序列表</li>
<li>默认的无序列表</li>
<li>默认的无序列表</li>
</ul>
<ul>
<li type="circle">添加circle属性</li>
<li type="circle">添加circle属性</li>
<li type="circle">添加circle属性</li>
</ul>
<ul>
<li type="square">添加square属性</li>
<li type="square">添加square属性</li>
<li type="squaare">添加square属性</li>
</ul>
</body>
</html>

运行结果：

也可以使用CSS list-style-type属性定义html无序列表样式。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！「链接」

2）有序列表

指按照字母或数字等顺序排列的列表项目。
其结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整。
始于<ol>标签，每个列表项始于<li>。

示例代码：

<ol>
<li>默认的有序列表</li>
<li>默认的有序列表</li>
<li>默认的有序列表</li>
</ol>
<ol type="a" start="2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li value="20">第四项</li>
</ol>
<ol type="Ⅰ" start="2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>

运行结果：

同样也可以使用CSS list-style-type属性定义html有序列表样式。

3）自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。
基本语法：

<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>

<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>

<dl>即“definition list（定义列表）”，
<dt>即“definition term（定义名词）”，
而<dd>即“definition description（定义描述）”。

示例代码：

<dl>
<dt>计算机</dt>
<dd>用来计算的仪器</dd>

<dt>显示器</dt>
<dd>以视觉方式显示信息的装置</dd>
</dl>

运行结果：

以上就是HTML中常用的布局标签及其使用方法。在实际开发中，还可以结合CSS和JavaScript来实现更复杂的布局和交互效果。

掌握了这些HTML常用布局标签，你已经拥有了构建网页的基础工具。记住，好的布局不仅需要技术，更需要创意和对细节的关注。现在，打开你的代码编辑器，开始你的布局设计之旅吧！

1）圆角边框在 CSS3 中，使用 border-radius 属性来设置圆角边框。

border-radius 属性的值表示圆角的直径，可以设置四个值，其值的顺序为：左上角，右上角，右下角，左下角。

其语法格式为：

border-radius: 取值;

我们也可以分开设置四个角的属性值，语法如下所示：

border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-radius: 取值;

例子，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color:rgb(163, 161, 161);
            border-radius: 140px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

border-radius:左上右上右下左下（都是直径px）

可以使用 border-radius 属性来灵活变换元素的形状了，大家快点发挥想象创造一些好看的图形

（2）设置边框颜色的属性：border-color 属性

知识点

border-color 属性

border-color 属性可以给元素设置上下左右四个边框的颜色。

其语法结构为：

border-color: 上边框值 右边框值 下边框值 左边框值;

也可分开设置边框每条边的属性值。

border-top-color: 取值;
border-right-color: 取值;
border-bottom-color: 取值;
border-left-color: 取值;

例子，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:400px;
            height:400px;
            border-style: solid;
            border-color: rgb(255, 182, 182) rgb(123,234,234) rgb(84, 105, 163) rgb(255, 238, 107);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

border-color: 上右下左

（3）设置边框阴影的属性：box-shadow 属性

知识点

box-shadow 属性

box-shadow 属性可以用来设置一个或多个下拉阴影的框，视觉效果就像是盒子有了阴影一样。

其语法格式为：

box-shadow: h-shadow v-shadow blur spread color inset;

其属性值的意义如下所示：

值	说明
h-shadow	必选，水平阴影的位置，允许负值。
v-shadow	必选，垂直阴影的位置，允许负值。
blur	可选，模糊距离。
spread	可选，阴影的大小。
color	可选，阴影的颜色。
inset	可选，将外部阴影改为内部阴影。

举个例子来看看吧～

新建一个 index.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            text-align:center;
            background-color:rgb(218, 255, 131);
            box-shadow: 10px 10px 5px #6a29ac
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面上有一个宽为 200px、长为 100px 且具有绿色背景颜色的 div 元素，我们使用 box-shadow: 10px 10px 5px #26ad8c 设置了水平值为 10px，垂直值为 10px，模糊距为 5px，阴影颜色为 #6a29ac 的边框阴影。

练习：挑战要求：新建一个 index1.html 文件。页面上有一个高和宽均为 100px 的正圆形 div 元素，其元素带有一个绿色的边框阴影。

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端开发经典面试题及答案-HTML篇

一、理解布局的重要性

二、常用的布局标签

1、div标签

2、span标签

3、table标签

4、form标签

5、列表标签

1）无序列表

2）有序列表

3）自定义列表

知识点

知识点

您的项目需求