面试题HTML篇-总结

最新推荐文章于 2024-08-09 18:20:18 发布

风吹云灭

最新推荐文章于 2024-08-09 18:20:18 发布

阅读量389

点赞数 1

分类专栏： HTML 文章标签：前端面试总结 HTML 面试前端总结

本文链接：https://blog.csdn.net/m0_37452696/article/details/87806571

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.网页开头的doctype(文档类型) 的作用是什么？

简单来说就是告诉我们的浏览器采用什么方式渲染页面。

Doctype可声明三种DTD（Document Type Definition文档类型定义）类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
由于历史的原因，浏览器对页面的渲染方式是不一样的。在W3C标准出来之前，浏览器对页面的渲染没有同一的标准，产生了差异，quirks mod（混杂模式或者兼容模式），但在W3C标准出台之后，浏览器对页面的渲染有了同一的标准即（严格模式或标准模式）。但是为了保证以前就得页面仍然正常显示，有的浏览器就保存了这两种渲染模式（标准兼容模式）。那么究竟采用哪一种方式进行渲染，就要看DOCTYPE生命中的DTD。
文档类型定义（DTD）Document Type Definition
　　1. 是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。
　　2. 可通过比较文档和文档类型定义文件来检查文档是否符合规范，元素和标签使用是否正确。
两种呈现模式：标准模式和混杂模式
　　1. 在标准模式中，浏览器以其支持的最高标准呈现页面；
　　2. 在混杂模式中，页面以一种比较宽松的向后兼容(兼容老的版本)的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
模式触发
　　1. 浏览器根据DOCTYPE是否存在，以及使用的哪种DTD来选择要使用的呈现方法。
　　2. 如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
　　3. 包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
　　4. DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
html5既然没有DTD，也就没有严格模式与宽松模式的区别，html5有相对宽松的语法，事实上，已经尽可能大的实现了向后兼容。

2. 浏览器标准模式和怪异模式之间的区别是什么

在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式，如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，如果缺失就会采用怪异模式。

盒模型
在怪异模式下，盒模型为IE盒模型

W3C标准的盒模型
图片元素的垂直对齐方式
对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline，在怪异模式下，table单元格中的图片的vertical-align属性默认取值为bottom，因此在图片底部会有及像素的空间。（图片底部空白，通过设置vertical-align：center来解决）
<table>元素中的字体：
CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。
内联元素的尺寸：
标准模式下，non-replaced inline元素无法自定义大小，怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸。
元素的百分比高度：

a：CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。

b：当一个元素使用百分比高度时，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被正确应用。
元素溢出的处理：
标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当做扩展box来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。

3.HTML还有XHTML区别

XHTML比HTML更加严格，只是按照XML的要求来规范HTML

1. XHTML 元素必须被正确地嵌套。
错误：<p><span>this is example.</p></span>
正确：<p><span>this is example.</span></p>

2. XHTML 元素必须被关闭。
错误：<p>this is example.
正确：<p>this is example.</p>

3. 标签名必须用小写字母。
错误：<P>this is example.<P>
正确：<p>this is example.</p>

3.1 空标签也必须被关闭
错误：<br>
正确：<br/>

4.XHTML 文档必须拥有根元素。
所有的 XHTML 元素必须被嵌套于 <html> 根元素中。

5. XHTML中标签的属性值要使用双引号”。

4.请描述 cookies、sessionStorage 和 localStorage 的区别。

简析：

共同点：都是保存在浏览器端，且同源的。
区别：
1. cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会把数据发送给服务器，仅在本地保存。
2. cookie还有path的概念，可以限制cookie只属于某个路径下。
3. 存储大小限制也不同，cookie数据不能超过4k。sessionStorage和localStorage可以达到5M或更多。
4. 数据有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效localStorage始终有效，窗口或浏览器关闭也一直保存。Cookie在设置的过期时间之前一直有效。
5. 作用域不同，sessionStorage在不同的浏览器窗口间不能共享，即使是同一个页面。localStorage在所有同源窗口中都是共享的。Cookie也是同源窗口共享的。

5.渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 的区别

渐进增强: 先保证低版本浏览器的基本功能,再去兼容高版本浏览器效果和交互。
优雅降级: 先保证高版本浏览器的效果和交互等,再去兼容低版本的浏览器

6.为什么通常将css的`<link>`放置在`<head></head>`之间,而将js的`<script>`放置在`</body>`之前?有哪些例外吗?

浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,所以在当浏览器在渲染HTML遇到了_<script>标签会先去执行标签内的代码(如果是使用src属性加载的外链文件,则先下载再执行),在这个过程中,页面渲染和交互都会被阻塞。所以将<script>放在</body>之前,当页面渲染完成再去执行_<script>。

一般希望DOM还没加载必须需要先加载的js会放置在<head>中,有些加了defer、async的<script>也会放在<head>中。

7.script标签中defer和async属性的区别

async：与后续元素渲染异步执行，乱序执行，若js文件之间存在依赖关系，容易产生错误，只适用于完全没有依赖的文件，文档解析过程中异步下载，下载完成之后立即执行。
defer：（H5规范中，defer是有序执行的，但实际不一定是有序执行的）与后续渲染异步执行，延迟到界面文档解析完成之后执行，即为立即下载，延迟执行。所有执行均在DOMContentLoaded 事件触发之前完成。
async和defer异步加载，async下载完立即执行，defer待界面文档解析完成之后执行
不带属性：加载到script立即下载并执行，阻塞后续渲染的执行。

最佳方案：外部引用文件放在/body之前执行

8.`data-`属性的作用是什么？

data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取；
需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。所有主流浏览器都支持 data-* 属性。
即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

9.谈谈你对WEB标准的理解

WEB标准
- 结构：html
- 表现：css
- 行为：js（dom + es）
WEB标准（结构、表现、行为分离）有哪些优点呢?
- 易于维护：只需更改CSS文件，就可以改变整站的样式
- 页面响应快：HTML文档体积变小，响应时间短
- 可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别
- 设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式
- 搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名

10.可用性、可维护性、可访问性

可用性：产品是否容易上手，用户体验怎么样，可用性好是企业的核心竞争力
可维护性：出现问题时，修复bug的成本低则维护性好，还有一点是代码能够被其他开发人员理解，毕竟我们不是一个人再做产品
可访问性：就是所有人（盲人）都能理解你的网页。

11.href和src的定义与区别

href (Hypertext Reference超文本引用)网络资源的位置，浏览器识别当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被被暂停）。这与把css文件内容写在style标签里不相同，因此建议使用link标签而不是@import来吧样式表导入到html文档里。
src (Source)属性仅仅 嵌入当前资源到当前文档元素定义的位置，在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到script标签里类似。这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。

12.什么是渐进式渲染？

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。

在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。

举例：

（1）图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript将加载并显示图像。

（2）确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。

（3）异步加载HTML片段——当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器。

13.HTML5十个新特性

语义标签
增强型表单
- 新的input type
- 新的表单元素
  <input><textarea><select><option>…
  <datalist>：数据列表，为input提供输入建议列表
  <progress>：进度条，展示连接/下载进度
  <meter>：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)
  <output>：输出内容，语义上表示此处的数据是经过计算而输出得到的
- 表单元素的新属性
  通用属性：
  placeholder：占位提示文字
  mutiple：是否允许多个输入
  autofocus：自动获得输入焦点
  form：指定输入元素所从属的表单，可以实现输入框放在表单外部并能被提交的效果
  验证属性(了解即可)：
  required：输入框内容不能为空
  min：允许输入的数字最小值
  max：允许输入的数字最大值
  minlength：允许输入的字符串最小长度
  maxlength：允许输入的字符串最大长度
  pattern：输入框内容必须符合的正则表达式
视频和音频
Canvas绘图
SVG绘图
地理定位
拖放API
WebWorker
WebStorage
WebSocket

14. 语义化的理解

语义化就是用对的标签做正确的事，去掉和丢失样式的时候能够让页面呈现出清晰的结构。好处：

方便其他设备解析，如盲人阅读器，屏幕阅读器等，以意义化的方式来渲染网页。
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
便于团队开发和维护，语义化更具有可读性，减少差异化。

15. BOM和DOM有什么区别

BOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。
DOM是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。
由于DOM的操作对象是文档（Document），所以dom和浏览器没有直接关系。

16. 为什么要使用load事件？这个事件有什么缺点吗？你知道一些代替方案吗，为什么使用它们？

在文档装载完成后会触发load事件。此时，在文档中的所有对象都在DOM中，所有图像、脚本、链接和子框架都完成了加载（缺点：这意味着首屏加载时所用的时间会比较漫长）。
DOM 事件DOMContentLoaded将在页面的DOM构建完成后触发，但不要等待其他资源完成加载。如果在初始化之前不需要装入整个页面，这个事件是使用首选。