前端面试题（一）

最新推荐文章于 2023-05-11 14:12:10 发布

asong_g1

最新推荐文章于 2023-05-11 14:12:10 发布

阅读量142

点赞数

分类专栏：秋招gogo 文章标签： html5

本文链接：https://blog.csdn.net/vege_bir/article/details/118826744

版权

秋招gogo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端面试笔记-html

Doctype作用？严格模式和混杂模式如何区别？它们有何意义
HTML5 为什么只需要写 ``？
简述一下你对 HTML 语义化的理解？
为什么我们要弃用 table 标签？
Img 标签的 alt 属性与 title 属性有何异同？strong 标签与 em 标签又有何异同？
- alt 属性与 title 属性
- strong标签与em标签
iframe 标签是什么？有哪些缺点？
label 标签的作用是什么？是怎么用的？
在 HTML 文件头部 head 标签内，经常看到添加了这一行 `` 代码，这一行代码具体有什么作用？
什么是 HTML 的全局属性，列举说说有哪些全局属性？
行内元素有哪些？块级元素有哪些？空元素有那些？
页面导入样式时，使用 link 和@import 有什么区别？
哪些元素可以自闭合？
HTML 和 DOM 的关系
form 表单的作用
head 元素的子元素大概分为哪三类，描述以下关于网页基本信息的各个标签内容的作用：
同样分享页面到 QQ 的聊天窗口，有些页面直接就是一个链接，但是有些页面有标题，图片，还有文字介绍。这些区别是通过设置什么实现的？
什么是 FOUC？如何避免？
前端需要注意哪些 SEO？
WEB 标准以及 W3C 标准是什么？
div+css 的布局较 table 布局有什么优点？
简述⼀下 src 与 href 的区别。
如何美化复选框 checkbox？
⽹⻚验证码是⼲嘛的，是为了解决什么安全问题？
解释一下以下 viewport 中 content 属性值里各参数的作用：
link 标签定义
.说一下html布局元素的分类有哪些?以描述下每种布局元素的应用场景么?

（文中题目大多网上转载只进行整理若有侵权请联系我删除）

Doctype作用？严格模式和混杂模式如何区别？它们有何意义

DOCTYPE 是用来声明文档类型和 DTD 规范的。
<!DOCTYPE html>声明位于 HTML 文档中的第一行，不是一个 HTML 标签，处于 html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和 JS 运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
在 HTML4.01 中<!doctype>声明指向一个 DTD，由于 HTML4.01 基于 SGML，所以 DTD 指定了标记规则以保证浏览器正确渲染内容。HTML5 不基于 SGML，所以不用指定 DTD。

HTML5 为什么只需要写 `<!DOCTYPE HTML>`？

HTML5 不基于 SGML，因此不需要对 DTD 进⾏引⽤，但是需要 doctype 来规范浏览器的⾏为
⽽ HTML4.01 基于 SGML ,所以需要对 DTD 进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型

简述一下你对 HTML 语义化的理解？

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

为什么我们要弃用 table 标签？

table 标签的缺点在于服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是 table 标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。如果要等到所有的图片全都加载完之后才显示出来的话那也太慢了，所以 table 标签现在我们基本放弃使用了。

Img 标签的 alt 属性与 title 属性有何异同？strong 标签与 em 标签又有何异同？

alt 属性与 title 属性

图片不正常显示时：会显示alt信息，鼠标放在图片上会显示title信息
图片正常显示时：不会显示alt信息，鼠标放在图片上会显示title信息

strong标签与em标签

第一个层次的区别:

<em>标签是告诉浏览器把其中的文本表示为强调的内容，把这段文字用斜体来表示。
如果只想使用斜体字来显示文本的话，使用<i>标签。
除了强调以外，当引入新的术语或者引用特定类型的术语或概念时作为固定样式的时候，也可以使用<em>标签。

<strong>标签和<em>标签一样，用于强调文本，但它强调的程度更高。<strong>标签中的内容用加粗的字体来显示其中的内容。

第二个层次：em用来局部强调，strong则是全局强调。

第三个层次：em表示内容的着重点，strong表示内容的重要性。strong不会改变句子所在的语意，只是强调重要性，但是em会改变句子所在的语义。

补充：
<b>、<i>标签是一个实体标签，它所包围的字符将被设为加粗/斜体，无强调。

iframe 标签是什么？有哪些缺点？

定义：iframe元素会创建包含另一个文档的内联框架。

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。

iframe 会阻塞主页面的 Onload 事件；
搜索引擎的检索程序无法解读这种页面，不利于 SEO;
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
增加服务器的http请求，对于大型网站不可取
很多的移动设备无法完全显示框架，设备兼容性差

使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src属性值，这样可以绕开以上第一个问题和第三个问题。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素

label 标签的作用是什么？是怎么用的？

label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。当我们鼠标点击 label标签里面的文字时，光标会定位到指定的表单里面
在这里插入图片描述

在 HTML 文件头部 head 标签内，经常看到添加了这一行 `<meta http-equiv="X-UA-Compatible" content="ie=edge">` 代码，这一行代码具体有什么作用？

IE8 的专用标记，用来指定 IE8 浏览器去模拟某个特定版本的 IE 浏览器的渲染方式（比如人见人烦的 IE6），以此来解决部分兼容问题。content=“ie=edge” 表示指定浏览器按照 IE 最高的标准模式 edge 内核解析页面。

什么是 HTML 的全局属性，列举说说有哪些全局属性？

全局属性是所有 HTML 元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。
常用的全局属性有 name、class、id、lang、style、value、title、以及 HTML5 新增的 spellcheck（对元素内容进行拼写检查）、hidden（通知浏览器不渲染该元素）、contenteditable（允许用户编辑元素中的内容）等等。

行内元素有哪些？块级元素有哪些？空元素有那些？

行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
空元素：
- 常见: br hr img input link meta
- 不常见: area base col command embed keygen param source track wbr

行内元素与块级元素直观上的区别：

行内元素会在一条直线上排列，都是同一行的，水平方向排列。
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

行内元素与块级元素属性的不同，主要是盒模型属性上。
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

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

link 属于 HTML 标签，除了加载 CSS 外，还能用于定义 RSS, 定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载 CSS;
页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 HTML 标签，无兼容问题;
link 支持使用 js 控制 DOM 去引入样式，而@import 不支持;

哪些元素可以自闭合？

input 元素、img 元素、br 元素、hr 元素、meta 元素、link 元素。

HTML 和 DOM 的关系

HTML 只是一个字符串，DOM 由 HTML 解析而来，JS 可以维护 DOM。

form 表单的作用

form 标签的作用是用于将其他表单标签"包"起来，以便作为一个整体，收集用户输入的信息，并可以提交数据到服务器。<form>标签用于为用户输入创建 HTML 表单，
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

head 元素的子元素大概分为哪三类，描述以下关于网页基本信息的各个标签内容的作用：

head 元素的子元素大概分为这三大类：描述网页基本信息的、指向渲染网页需要其他文件链接的、以及各大厂商根据自己需要定制的。
<title>深入了解 head 元素</title>: 表示文档标题，即浏览器标签中显示的文本。
<meta charset="utf-8">: 表示编码格式，如果你的页面出现乱码，那一般就是编码格式不对。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 表示对视窗进行设置，这里的设置表示显示窗口的宽度等于客户端的屏幕宽度（即满屏显示），显示的文字和图形的初始比例是 1.0。
<meta name="description" content=“帮助你深层次了解 HTML 文档结构”> : 表示的内容与搜索引擎 SEO 优化相关，搜索引擎会去读取 name 属性和 content 属性里的内容对网站进行分析。
<meta http-equiv="X-UA-Compatible" content="ie=edge"> : 是 IE8 的专用标记，用来指定 IE8 浏览器去模拟某个特定版本的 IE 浏览器的渲染方式（比如人见人烦的 IE6），以此来解决部分兼容问题。content="ie=edge" 表示指定浏览器按照 IE 最高的标准模式 edge 内核解析页面。

同样分享页面到 QQ 的聊天窗口，有些页面直接就是一个链接，但是有些页面有标题，图片，还有文字介绍。这些区别是通过设置什么实现的？

主要看页面有没有设置一下三行相关代码：
图片: https://uploader.shimo.im/f/yIGRUe5emQLOv0g7.png?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2MjY0NDU3MjAsImciOiI4RDNjVHB3Q3dSOENjY1F3IiwiaWF0IjoxNjI2NDQ1NDIwLCJ1c2VySWQiOjB9.XL3__4oJG_XWPuBbKahD6wE7x2zUdusx1q2EO1t52LQ

什么是 FOUC？如何避免？

FOUC 的全称为 Flash Of Unstyled Content，表示⽤户定义样式表加载之前浏览器使⽤默认样式显示⽂档，⽤户样式加载渲染之后再重新显示有了自定义样式的⽂档，造成⻚⾯闪烁。
解决⽅法：把样式表放到⽂档的 <head>

前端需要注意哪些 SEO？

合理的 title、description、keywords：搜索对着三项的权重逐个减⼩，title值强调重点即可，重要关键词出现不要超过 2 次，⽽且要靠前，不同⻚⾯ title 要有所不同；description把⻚⾯内容⾼度概括，⻓度合适，不可过分堆砌关键词，不同⻚⾯ description 有所不同；keywords 列举出重要关键词即可
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解⽹⻚
重要内容 HTML 代码放在 Y 前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取
重要内容不要⽤ js 输出：爬⾍不会执⾏ js 获取内容
少⽤ iframe 标签：搜索引擎不会抓取 iframe 中的内容
⾮装饰性图⽚必须加 alt
提⾼⽹站速度：⽹站速度是搜索引擎排序的⼀个重要指标

WEB 标准以及 W3C 标准是什么？

标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js、结构层⾏为层表现层的分离、语义化样式名、变量名…

div+css 的布局较 table 布局有什么优点？

改版的时候更⽅便只要改 css ⽂件。
⻚⾯加载速度更快、结构化清晰、⻚⾯显示简洁。
表现层与结构层相分离。
易于优化（ seo ）搜索引擎更友好，排名更容易靠前

简述⼀下 src 与 href 的区别。

src ⽤于替换当前元素，href ⽤于在当前⽂档和引⽤资源之间确⽴联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本、img 图⽚和 frame 等元素。
在这里插入图片描述

href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加那么浏览器会识别该文件为 css ⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅式来加载 css，⽽不是使⽤ @import ⽅式。

如何美化复选框 checkbox？

标签的 for 属性和标签的 id 属性捆绑
隐藏原⽣的标签
css 对 input:checked + 选择器进行样式自定义

⽹⻚验证码是⼲嘛的，是为了解决什么安全问题？

区分⽤户是计算机还是⼈的公共全⾃动程序。可以防⽌恶意破解密码、刷票、论坛灌⽔
有效防⽌⿊客对某⼀个特定注册⽤户⽤特定程序暴⼒破解⽅式进⾏不断的登陆尝试

解释一下以下 viewport 中 content 属性值里各参数的作用：

图片: https://uploader.shimo.im/f/2qnOoLj5UPpjRYSL.png?accessToken=eyJhbGciOiJIUzI1NiIsImtpZCI6ImRlZmF1bHQiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOiJhY2Nlc3NfcmVzb3VyY2UiLCJleHAiOjE2MjY0NDU3MjAsImciOiI4RDNjVHB3Q3dSOENjY1F3IiwiaWF0IjoxNjI2NDQ1NDIwLCJ1c2VySWQiOjB9.XL3__4oJG_XWPuBbKahD6wE7x2zUdusx1q2EO1t52LQ
width：设置可视区域的宽度，值可为数字或关键词 device-width（表示当前设备宽度）。
height：同 width。
initial-scale：表示页面首次被显示时可视区域的缩放级别，取值 1.0 时页面按实际尺寸显示，不进行任何缩放。
maximum-scale=1.0, minimum-scale=1.0：表示可视区域的缩放级别。maximum-scale 控制用户可将页面放大的程度，1.0 将禁止用户放大到实际尺寸之上。
user-scalable：表示是否允许用户对页面进行缩放，no 表示禁止缩放，yes 表示允许缩放。