首页  思维导图  详情

前端面试 - HTML相关知识点

2021-01-26 19:41:29   0  举报





AI智能生成

整理了前端面试中 html 和 html5 相关的知识点，供参考，会不断更新

前端开发

面试

HTML

互联网

前端

作者其他创作

大纲/内容

Html5

浏览器支持

新的语义元素：通过设置display: block;让旧版本浏览器正确显示

使用document.createElement("newEle")定义新的元素，并设置对应的样式

判断低于IE9版本的浏览器，添加脚本进行兼容（必须放在head标签中）：

兼容方式

渐进增强

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级

一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容

新元素

画布

内联SVG

<svg>

与canvas的区别

1.SVG 是一种使用 XML 描述 2D 图形的语言；Canvas 通过 JavaScript 来绘制 2D 图形； 2.canvas依赖分辨率，svg则不； 3.canvas不支持事件处理器（因为是对象而不是元素），svg支持； 4.canvas的文本渲染能力较弱，svg适合带有大型渲染区域的应用程序； 5.canvas可以保存成png/jpg格式图片，适合图像密集型游戏；svg复杂度高不适合游戏应用；

多媒体元素

<audio>

定义MP3、Wav、Ogg三种音频文件，需要用<source>标签定义；放置文本内容可在不支持该标签情况下展示；

<video>

定义MP4、WebM、Ogg三种视频文件，需要用<source>标签定义；放置文本内容可在不支持该标签情况下展示；

<embed>

在文档中嵌入外部应用或者互动程序，支持所有MIME_type

<track>

表单元素

定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值

规定用于表单的密钥对生成器字段

定义不同类型的输出，比如脚本的输出，与input标签搭配使用

语义元素

<time>

<wbr>

<rt>

<ruby>

<mark>

存储

sessionStorage

用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

window.sessionStorage

localStorage

用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除

window.localStorage

.setItem(key,value)

.getItem(key)

.removeItem(key)

.clear()

.key(index)：得到某个索引的key

工作方式

当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中

特征

同源页面可共用cookie，不同域名下的cookie是独立的

一个域名下的cookie个数有限制，一般不超过20个

每个cookie存放的内容大小一般不超过4KB

cookie可以设置过期时间，默认会话结束时间到期自动销毁

操作

设置

document.cookie=name + "=" + escape(value) + ";expires=" + date.toUTCString();

可以设置的字段有expires/domain/path/secure等，secure只有在https协议下才能够设置

服务端设置

Set-Cookie: username=cfangxu;path=/;domain=qq.com

获取

var curCookieArr = document.cookie.split(';').map((str) => {return { key: str.split('=')[0], value: str.split('=')[1] }});

删除

document.cookie=name+"=";

设置对应cookie的expires为过去的时间

修改

Web SQL

核心方法

openDatabase

使用现有的数据库或者新建的数据库创建一个数据库对象

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

transaction

控制一个事务，以及基于这种情况执行提交或者回滚，配合executeSql方法使用

db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); });

executeSql

用于执行实际的 SQL 查询

应用程序缓存

cachedemo.appcache

manifest文件扩展名为appcache

manifest文件

CACHE MANIFEST /theme.css /logo.gif /main.js NETWORK * FALLBACK /html/ /offline.html

构成

CACHE MANIFEST

在此标题下列出的文件将在首次下载后进行缓存

NETWORK

在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK

在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

缓存如何失效

用户清空浏览器缓存

manifest文件被修改

由程序来更新应用缓存

Web Worker

是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能

使用注意点

同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

DOM限制：Worker所在线程的全局对象和主线程不一样，无法使用主线程上的document/window/parent这些对象，但是可以使用 navigator和location对象

通信联系：Worker和主线程必须通过消息进行通讯，消息是传值而不是引用

脚本限制：Worker没有window 对象，不能执行alert、confirm方法，但可以使用 XMLHttpRequest 对象发 ajax 请求

文件限制：Worker无法读取本地文件，其脚本必须来自网络

使用方法

主线程

创建 worker w = new Worker("demo_workers.js"); 关闭 worker w.terminate(); w = undefined; 发送信息 w.postMessage('') 接收信息 w.onMessage(event) 错误处理 w.onError(function(event){})

worker

添加监听函数 this.addEventListener('message',function(e){}) 发送消息 this.postMessage('') 接收消息 this.onMessage(event) 加载脚本 importScripts('',‘’）

标签

头部/head元素

title

文档的标题

base

页面链接标签的默认链接地址，所有链接的URL，搭配href=“#tips"使用