前端面试题(一)--HTML

最新推荐文章于 2024-09-30 15:42:36 发布

qinqinzqq

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量95

点赞数

分类专栏：前端基础文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qinqinzqq/article/details/126527873

版权

前端基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML

知识点：

1、文档声明

<!DOCTYPE>是文档声明，HTML文档通常以文档声明开始，该声明的作用是帮助浏览器确定其尝试解析和显示的HTML文档类型，例如<!DOCTYPE html>；文档声明并非一个HTML标签。它是一条“信息”，告知浏览器期望的文档类型。

文档声明必须是HTML文档的第一行，且顶格显示，对大小写不敏感。因为任何放在DOCTYPE前面的东西，比如批注或XML声会令IE9或更早期的浏览器触发怪异模式。

2、浏览器渲染模式

怪异模式（混杂模式）【Quirks mode】

严格模式（标准模式）【Standars mode】

几乎标准模式【Almost standars mode】

在怪异模式下设置margin:0,auto进行水平居中会失效；解决方法：用text-align属性：body{text-align:center};#content{text-align:left}

3、语义化标签

4、W3C

指万维网联盟，主要是对web进行标准化，创建并维护WWW标准

5、SEO

指的是搜索引擎优化，它是指从自然搜索结果获得网站流量的技术和过程，是在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，获得更多流量，从而达成网站销售及品牌建设的目标；

SEO内部优化:1)合理的title、description、keywords（即TDK）2)语义化的HTML代码，符合W3C规范 3)非装饰性图片必须加alt 4）对于不显示的对象谨慎使用display:none 5)重要内容HTML代码放在最前面 6）少用iframe

6、iframe

称之为嵌入式框架，嵌入式框架可以把一个完整的网页内容嵌入到现有的网页中

示例：

<body>

        <p>iframe示例</p>

        <iframe src="https://juejin.cn"><iframe>

</body>

7、微格式：

是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。具体表现是把语义嵌入到HTML中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾HTML文档的人机可读性，相当于对Web网页进行了语义注解

例如：<a href="http://www.bbon.cn" rel="homepage"></a> 通过添加ref属性，为已有的链接元素添加了具体的结构和意义。

8、页面可见性

长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法，不清楚用户是否去看别的网站了，他们切换回来没有？现在，HTML5里页面可见性接口就提供给程序员一个方法，让他们使用visibilitychange页面事件来判断当前页面可见性的状态，并针对性的执行某些任务，同时还有新的document.hidden属性可以使用：

常用的API如下：

document.hidden这个新出现的属性，它显示页面是否为用户当前观看的页面，值为true或false

document.visibilityState：visibilityState的值要么是visible，表明页面为浏览器当前激活tab，而且窗口不是最小化状态；要么是hidden,表示页面不是当前激活tab页面，或者窗口最小化了；或者prerender，表示页面正在重新生成，对用户不可见。

visibilitychange事件：监听页面可见性变化事件

使用场景：

1）网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片

2）显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新

3）页面想要监测是否正在渲染，以便可以准确的计算网页浏览量

4）当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）

面试真题：

1、什么是<!DOCTYPE>?是否需要在HTML5中使用？

它是HTML的文档声明，通过它告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的历史中，HTML出现过很多个版本，不同版本在元素、属性等书写格式上略有差异，如果不预先告诉浏览器，浏览器就不知道我们的文档标准是什么，在这种情况下，大部分浏览器将开启最大兼容模式来解析网页，我们称之为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。而文档声明有多种书写格式，对应不同的HTML版本，<!DOCTYPE>这种书写是告诉浏览器，整个文档使用HTML5的标准进行解析

2、什么是严格模式与混杂模式？

严格模式：又称标准模式，是指浏览器按照W3C标准解析代码

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码

如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的DTD直接相关

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么就会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式

3、列举几条怪异模式中的怪癖行为

宽高的算法与W3C盒模型不同；在表格中的字体样式不会继承；怪异模式下可以设置行内元素宽高；怪异模式下white-space：pre会失效

4、为什么要语义化？

代码结构：使页面没有css的情况下，也能够呈现出很好的内容结构；

有利于SEO:帮助爬虫抓取更多的有效信息；

提升用户体验；

便于团队开发和维护：语义化使得代码更具有可读性，让其他开发人员更理解你的html结构，减少差异化；

方便其他设备解析：比如屏幕阅读器；

5、请描述下SEO中的TDK

在SEO中，所谓的TDK其实就是title、description、keywords

title就是浏览器标题，设置的title可以被搜索引擎进行读取

description也就是网页的内容摘要，这是对于一个网页的简要概述，描述内容要和页面内容相关

keywords主要作用是告诉搜索引擎本页内容是围绕哪些词展开的

6、iframe用来干什么？有哪些优缺点？

iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中

优点：1）重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少了数据的传输，增加了网页下载速度）2）方便制作导航栏

缺点：1）会产生很多页面，不容易管理 2）调用外部页面，需要额外调用css，给页面带来额外的请求次数 3）会阻塞页面的加载，window的onload事件需要在所有iframe加载完毕后（包含里面的元素）才会触发 4）浏览器的后退按钮无效 5）无法被一些搜索引擎索引到 6）多数小型的移动设备（PDA手机）无法完全显示框架

由于上面诸多缺点，因此不符合标准网页设计的理念，已经被标准网页设计抛弃，目前框架的所有优点完全可以使用Ajax实现，因此已经没有必要使用iframe框架。