HTML面试笔记(更新中...)
HTML5 有哪些更新?
-
语义化标签
- header:定义文档的页眉(头部)
- nav:定义导航链接部分
- footer:定义文档或节的页脚(底部)
- article:定义文章内容
- section:定义文档中节(section、区段)
- aside:定义其所处内容之外的内容(侧边)
-
媒体标签
-
audio:音频
1
<audio src="" controls autoplay loop="true"></audio>
- 属性
- controls 控制面板
- autoplay 自动播放
- loop='true’循环播放
- 属性
-
video:视频
1
<video src="" poster="imgs/aa/jpg" controls></video>
- 属性:
- poster:指定视频还没有完全下载完毕或用户还没有点击播放前显示的封面。默认显示当前视频文件的第一帧画面,poster 也可以自己指定。
- controls 控制面板
- width
- height
- 属性:
-
source 标签:因为浏览器对视频格式支持程度不一样,为了能够兼容不同的浏览器,可以通过 source 来制定视频源。
1
2
3
4<video>
<source src='aa.flv' type='video/flv'></source>
<source src='aa.mp4' type='video/mp4'></source>
</video>
-
-
表单
-
表单类型
- email:能够验证当前输入的邮箱地址是否合法
- url:验证 URL
- number:只能输入数字,其他输入不了,而且自带上下增大减小箭头,max 属性可以设置最大值,min 可以设置最小值,value 为默认值
- search:输入框后面会给提供一个小叉号,可以删除输入的内容,更加人性化
- range:可以提供给一个范围,其中可设置 min 和 max 以及 value,其中 value 属性可以设置为默认值。
- color:颜色拾取器
- time:时分秒
- data:日期选择年月日
- datatime:时间和日期(目前只有 Safari 支持)
- datatime-local:日期时间控件
- week:周控件
- month:月控件
-
表单属性:
- placeholder:提示信息
- autofocus:自动获取焦点
- autocomplete='on’或者 autocomplete='off’使用这个属性需要有两个前提:
- 表单必须提交过
- 必须有 name 属性
- required:要求输入框不能为空,必须有值才能提交
- pattern=""里面写入想要的正则模式
- multiple:可以选择多个文件或多个邮箱
- form=" form 表单的 ID"
-
表单事件:
- oninput:每当 input 里面输入的内容发生改变的时候都会触发这个事件
- oninvalid:当验证不通过时触发该事件
-
进度条、度量器
-
progress 标签:用来表示任务的进度(IE、Safari 不支持),max 用来表示任务的进度,value 表示已完成多少
-
meter 属性:用来显示剩余容量或剩余库存(IE、Safari 不支持)
- high/low:规定被视作高/低的范围
- max/min:规定最大/小值
- value:规定当前度量值
设置规则:min < low < high < max
-
-
-
DOM 查询操作
- document.querySelector()
- document.querySelectorAll()
-
Web 存储:
- localStorage:没有时间限制的数据存储
- sessionStorage:针对一个 session 的数据存储
-
其他
-
拖放:拖放是一种常见的特性,即抓取对象以后拖到另一个位置。设置元素可拖放:
1
<img draggable="true" />
-
画布(canvas ): canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
1
<canvas id="myCanvas" width="200" height="100"></canvas>
-
SVG:SVG 指可伸缩矢量图形,用于定义用于网络的基于矢量的图形,使用 XML 格式定义图形,图像在放大或改变尺寸的情况下其图形质量不会有损失,它是万维网联盟的标准
-
地理定位:Geolocation(地理定位)用于定位用户的位置。
-
-
(1)新增语义化标签:nav、header、footer、aside、section、article (2)音频、视频标签:audio、video (3)数据存储:localStorage、sessionStorage (4)canvas(画布)、Geolocation(地理定位)、websocket(通信协议) (5)input 标签新增属性:placeholder、autocomplete、autofocus、required (6)history API:go、forward、back、pushstate
src 和 href 的区别
src 和 href 都是用来引入外部资源的
- src 表示对资源的引用,它指向的内容会嵌套到标签所在的位置,src 会将其指向的资源下载并应用到文档中,如请求 js 脚本。当浏览器解析到该元素时,会停止对其他资源的下载和处理,直到该资源加载、编译、执行完毕,所以 js 脚本一般会放在页面底部。
- href 表示超文本引用,它指向一些网络资源,建立其和当前元素或文档的链接关系。当浏览器识别到它指向的文件时,就会并行下载资源,不会停止对当前文档的处理,常用在 a、link 等标签上。
对 HTML 语义化的理解
语义化就是根据内容的结构化选择适合的标签,通俗来讲就是用正确的标签做正确的事情,其优点如下:
- 对机器友好,带有语义的文字表现力更加丰富,更适合搜索引擎的爬虫爬取有效信息,有利于 SEO,除此之外,语义类还支持读屏软件,可根据文章自动生成目录。
- 对开发者友好,使用语义类标签增强可读性,结构更加清晰,开发者能清晰地看出网页的结构,便于团队的开发和维护。
- 常见的语义化标签
1 | <header></header> |
DOCTYPE(文档类型)的作用
DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器以什么样的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 甚至 JS 脚本的解析,它必须声明在 HTML 的第一行。
浏览器渲染页面的模式分为两种(可通过 document.compatMode 获取)
- CSS1Compat:标准模式,默认模式,浏览器使用 W3C 的标准解析渲染页面,在标准模式下,浏览器以其支持的最高标准呈现页面。
- BackCompat:**怪异模式,**浏览器使用 自己的怪异模式解析页面。在怪异模式中,页面以一种较为宽松的向后兼容的方式显示。
script 标签中的 defer 和 async
如果没有 defer 和 async 属性,浏览器会立即加载并执行相应的脚本,不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。
注:蓝色代表 js 脚本网络加载时间,红色代表 js 脚本执行时间,绿色代表 html 解析。
defer 和 async 都是异步加载外部 js 文件的,他们都不会阻塞页面的解析,区别如下:
- 执行顺序:多个带有 async 属性的标签,不能保证加载顺序,多个带有 defer 属性的标签,按其在文档中出现的顺序进行加载和执行。
- 脚本是否并行执行:
- async 属性:表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的,即异步执行。
- defer 属性:表示后续文档和 js 脚本加载(不执行)是并行进行的,即异步执行,js 脚本需要等到文档所有元素加载完毕才能执行,DOMContentLoaded 事件触发执行之前。
Web Worker
Web Worker 是在 Web 浏览器中运行后台线程的机制,它允许在主线程之外执行长时间运行的计算和处理复杂任务,以避免阻塞用户界面的情况。Web Worker 能够并行执行任务,独立于主线程。下面是 Web Work 的一些特点:
- 独立于主线程:Web Worker 在后台运行,不会阻塞主进程的操作,这意味着可以在 Web Worker 中进行密集型或耗时的任务,而不会影响用户界面的响应性能。
- 无法访问 DOM:Web Worker 在独立线程中执行,因此无法直接访问或操作页面的 DOM 元素。这样可以确保线程不会与主线程发生冲突或竞争条件。
- 通过消息传递进行通信:主线程和 Web Worker 之间的通信是通过消息传递来实现的。主线程和 Web Worker 可以互相发送信息,并通过事件处理程序接收和处理收到的信息。
- 适用于耗时任务:Web Worker 特别适合于执行那些需要大量计算或涉及大量数据处理的任务,如:图像处理、大数据集操作、复杂算法等。
使用 Web Worker 的基本流程:
-
在主线程中创建一个新的 Web Worker 实例:
1
var worker = new Worker("worker.js");
-
在 Web Worker 脚本文件(worker.js)中编写后台任务的代码:
1
2
3
4
5
6
7
8
9//worker.js
//接收主线程消息的事件处理程序
self.onmessage = function (event) {
var data = event.data;
//执行后台任务
//处理data数据
//发送结果给主线程
self.postMessage(result);
}; -
通过 postMessage()方法将消息发送到 Web Worker,并通过 onmessage 事件处理程序接收来的 Web Worker 的消息。
1
2
3
4
5
6
7
8
9
10
11
12
13//主线程
//发送消息给Web Worker
worker.postMessage(data);
//接收Web Worker的消息
worker.onmessage = function (event) {
var result = event.data;
//处理Web Worker返回的结果
};
//结束Web Worker的运行
worker.terminate();总结:Web Worker 提供了一种在 Web 浏览器中执行后台任务的方法,可以提高用户界面的响应性能,特别适用于执行耗时任务。然而,由于 Web Worker 无法直接访问 dom,因此在使用 Web Worker 时需要注意并发加载和处理数据的方式,以及主线程之间的消息传递。
行内元素有哪些?块级元素有哪些?空元素有哪些?
- 行内元素:a b span img input select strong
- 块级元素:div ul ol dl dt dd h1 h2 h3 h4 h5 h6 p
- 空元素,即没有内容的元素,空元素是在开始标签中关闭的,也就是空元素没有闭合标签:
- 常见的有:
<br>
、<hr>
、<img>
、<input>
、<link>
、<meta>
; - 鲜见的有:
<area>
、<base>
、<col>
、<colgroup>
、<command>
、<embed>
、<keygen>
、<param>
、<source>
、<track>
、<wbr>
。
- 常见的有:
title 和 h1 的区别、b 和 strong 的区别、i 和 em 的区别
- title 没有明确意义只表示是个标题,h1 表示层次明确的标题,对抓取页面信息有很大的影响.
- strong 有语义,是祈祷加重语气的效果,而 b 标签没有,b 标签只是一个简单的加粗标签,b 标签之间的字符都设置为粗体,strong 标签加强字符的语气都是通过粗体来实现的,而搜索引擎更侧重 strong 标签。
- i 内容展示斜体,em 表示强调是一个文本。
iframe 标签
在 HTML 中,标签用于在页面中嵌入另一个 HTML 文档或外部网页。通过使用该标签,可以在当前页面显示其他网页或加载外部资源。
- 优点:
- 用来加载速度较慢的内容(如广告)
- 可以使脚本并行下载
- 可以实现跨子域通信
- 缺点:
- 会阻塞主页面的 onload 事件
- 无法被一些搜索引擎识别
- 会产生很多页面,不容易管理
head 标签有什么作用,其中什么标签必不可少?
head 标签用于定义文档的头部,它是所有头部元素的容器,用于定义页面的相关数据和外部资源,描述了文档的各种属性和信息,包括文档的标题、在 web 中的位置以及其他文档的关系,不会直接在浏览器中展示给用户。
下面标签可用在 head 部分: