前端常见技术点-HTML扫盲(17问)

这里总结一下 WEB 前端面试 HTML 部分的常见问题,同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级工程师是必须掌握本文列出的这些知识的,资深工程师则要对这些基本概念的纵向深度进行挖掘。

HTML技术部分:


1、!DOCTYPE 的作用?严格模式与混杂模式如何区分?它们有何意义?

根据 <!DOCTYPE> 是否存在选择呈现模式,被称为 <!DOCTYPE> 切换或 <!DOCTYPE> 侦测

一个文档类型标记的目的是要告诉浏览器的解析器,它应该使用什么样的文档或规范(DTD)来解析文档。

严格模式:正确的 <!DOCTYPE> 标记,浏览器按照标准渲染页面。

混杂模式:<!DOCTYPE> 标记不存在或格式不正确会导致文档以混杂模式呈现,该模式下页面以一种比较宽松的向后兼容的方式显示。

意义:当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。

判断当前文档解析模式:document.compatMode == "CSS1Compat" ? "标准模式" : "混杂模式";

2、HTML5 为什么只需要写 <!DOCTYPE HTML>?

HTML5 不基于 SGML,因此不需要 <!DOCTYPE> 对 DTD 进行引用,但是需要其来规范浏览器行为。HMTL4.01 是基于 SGML 的。

3、行内元素有哪些?块级元素有哪些? 空(Void)元素有那些?

行内:span strong em img 等;

块元素:div p h1-h6 等;

空元素:hr br 等;

行内块元素:input, textarea, keygen, select, button 等;

4、常见的浏览器内核

Trident内核:IE;Gecko内核:Mozilla Firefox;WebKit内核:Safari、Chrome;

5、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别?

title 在 SEO 的权重中比 h1 要高,strong 着重内容,b 无强调或着重意味的粗体;em 强调内容,i 无强调或着重意味的斜体;

6、简述一下你对 HTML 语义化的理解?

为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构;增强用户体验;利于页面的 SEO;方便其他设备解析;便于团队开发和维护,语义化更具有可读性;

7、HTML5 离线储存的工作原理?

<!-- 为 <html> 标签添加如下属性 --> manifest="index.manifest"

<!-- index.manifest --> CACHE MANIFEST #version 1.3 CACHE: /images/logo.png NETWORK: *

// applicationCache 对象存储着很多与 Application Cache 有关的方法和属性; window.applicationCache

8、如何在页面上实现一个圆形的可点击区域?

<img alt="Planets" height="126" src="planets.gif" usemap="#planetmap" width="145"><map name="planetmap"> <area alt="Sun" coords="0,0,82,126" href="sun.htm" shape="rect"> <area alt="Mercury" coords="90,58,3" href="mercur.htm" shape="circle"> <area alt="Venus" coords="124,58,8" href="venus.htm" shape="circle"></map>

9、如何实现浏览器内多个标签页之间的通信?

本地 Cookie,SessionStorage,LocalStorage,WebSql,Application Cache,IndexedDB 等;

10、HTML5 的 form 表单如何关闭自动完成功能?

设置属性 autocomplete 为 "off" 来关闭自动补全功能;

11、label 标签的 for 属性有什么作用?

for 属性规定 label 与哪个表单元素绑定。当用户点击 label 时,焦点会自动跳转都对应的 input 输入框上。

12、iframe 有哪些缺点?

不利于页面的 SEO,网页结构化差,增加 HTTP 请求;

13、WebSocket 如何兼容低浏览器?

使用 AS3 编写的 Flash 版本;或者使用轮询来代替 WebSocket。

14、浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的?

访问离线资源,同时检测 manifest 文件是否更新,如果更新了则从服务器拉取新的资源并缓存在本地 Cache。

15、页面可见性(Page Visibility)API 有哪些用途?

// visibilitychange 事件; // document.hidden 返回当前页面可见还是不可见; // document.visibilityState 返回页面的可见状态; // 主要应用场景为页面不可见时自动暂停网页播放的视频,当可见时继续播放; var audioElement = document.getElementById("audio_id"); function onVisibilityChanged(event) { var hidden = event.target.webkitHidden; if (hidden) audioElement.pause(); else audioElement.play(); } function load() { audioElement.play(); audioElement.loop = true; document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false); }

16、Cookies,Session, SessionStorage 和 LocalStorage 的区别?

Cookies 可以简单的理解为客户端浏览器的一种本地存储方式(4K),对应于每一个不同的客户端都有一个不同的 Session ID,这个 ID 一般会存储在本地的 Cookie 中(也可以通过 URL 携带,但不安全),并且在每次发送请求时携带上这个 Session ID 用来在服务器端区分用户身份;SessionStorage 是一种大容量(5M)的会话级别的本地存储方式,LocalStorage 是一种持久化的本地数据存储方式。所有的存储方式都需要同源(页面属于相同域名和端口)才能共享。

17、HTML5 Web Workers

可以把耗时操作放在独立的 Web Worker 中运行,这样不会阻塞整个页面。Workers 与主线程之间通过 postMessage 方法通信。

if(typeof Worker !== undefined) { var worker = new Worker("./worker.js"); } worker.addEventListener("message", function(msg){ // Deal with message from worker thread; msg = eval("({}&&" + msg.data + ")"); if(!msg.result) { worker.terminate(); console.log("Worker thread terminated!") } }); // worker.js ;(function(){ setTimeout(function(){ postMessage(JSON.stringify({result:false})); }, 5000); onmessage = function (evt){ var d = evt.data; postMessage(d); } })();

原文发布于微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文发表时间:2018-08-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券