前端基础问题 2209

一些网上收集到的前端开发面试题总结…

1. HTML5 的新特性

• 新增选择器 document.querySelector、document.querySelectorAll
• 拖拽释放(Drag and drop) API
• 媒体播放的 video 和 audio
• 本地存储 localStorage 和 sessionStorage
• 离线应用 manifest
• 桌面通知 Notifications
• 语意化标签 article、footer、header、nav、section
• 增强表单控件 calendar、date、time、email、url、search
• 地理位置 Geolocation
• 多任务 webworker
• 全双工通信协议 websocket
• 历史管理 history
• 跨域资源共享(CORS) Access-Control-Allow-Origin
• 页面可见性改变事件 visibilitychange
• 跨窗口通信 PostMessage
• Form Data 对象
• 绘画 canvas

H5移除的元素：

• 纯表现的元素：basefont、big、center、font、s、strike、tt、u
• 对可用性产生负面影响的元素：frame、frameset、noframes

2. 什么是伪类和伪元素

• 伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。

  例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般 css 相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。

  标准伪类：

  • :active
  • :any-link 实验性
  • :blank 实验性
  • :checked
  • :current (en-US) 实验性
  • :default
  • :defined
  • :dir() 实验性
  • :disabled
  • :drop 实验性
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :fullscreen 实验性
  • :future (en-US) 实验性
  • :focus
  • :focus-visible 实验性
  • :focus-within
  • :has() 实验性
  • :host
  • :host()
  • :host-context() 实验性
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :is() 实验性
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link (en-US) 实验性
  • :not()
  • :nth-child()
  • :nth-col() (en-US) 实验性
  • :nth-last-child()
  • :nth-last-col() (en-US) 实验性
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past (en-US) 实验性
  • :placeholder-shown 实验性
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within (en-US) 实验性
  • :user-invalid (en-US) 实验性
  • :valid
  • :visited
  • :where() 实验性

• 伪元素：用于创建一些不在DOM树中的元素，一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

  例如，我们可以通过::before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见 这些文本，但是它实际上并不在DOM文档中。

  标准伪元素：

  • ::after (:after)
  • ::backdrop 实验性
  • ::before (:before)
  • ::cue (:cue)
  • ::first-letter (:first-letter)
  • ::first-line (:first-line)
  • ::grammar-error 实验性
  • ::marker 实验性
  • ::placeholder 实验性
  • ::selection
  • ::slotted()
  • ::spelling-error 实验性

3. 语义化标签

语义元素对浏览器和开发者都清楚地描述了其含义。

非语义元素的例子。<div>和<span>–对其内容一无所知。

语义元素的例子。<form>, <table>, and <article> - 清楚地定义了其内容。

语义化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<title>      <!--：页面主体内容。-->
<hn>         <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
<ul>         <!--：无序列表。-->
<li>         <!--：有序列表。-->
<header>     <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>        <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>       <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
<article>    <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>    <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>      <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
<footer>     <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->
<small>      <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
<strong>     <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>         <!--：将其中的文本表示为强调的内容，表现为斜体。-->
<mark>       <!--：使用黄色突出显示部分文本。-->
<figure>     <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
<figcaption> <!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<cite>       <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
<blockquoto> <!--：定义块引用，块引用拥有它们自己的空间。-->
<q>          <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
<time>       <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
<abbr>       <!--：简称或缩写。-->
<dfn>        <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
<address>    <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
<del>        <!--：移除的内容。-->
<ins>        <!--：添加的内容。-->
<code>       <!--：标记代码。-->
<meter>      <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
<progress>   <!--：定义运行中的进度（进程）。-->

语义化优点

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

4. HTML5 媒体

<audio>

*HTML <audio> *元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源， 这些音频资源可以使用 src 属性或者source元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

<audio>的属性：

• autoplay 布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。

• controls 如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

• crossorigin 枚举属性 展示音频资源是否可以通过 CORS 加载。支持 CORS 的资源可以被 canvas 元素复用而不污染。

• currentTime 读取 currentTime 属性将返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问——这意味着你无法的知道媒体的开始或持续时间。

  这时，currentTime 相对应的，能够被用于改变重播的时间。否则，设置 currentTime 将设置当前的播放位置，并且会自动搜寻到媒体的那个位置，如果媒体目前已经被加载的话。如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区（buffer），user agent 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 currentTime 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 currentTime 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。getStartDate() 方法能够用于确定媒体时间轴的开始位置。

• disableRemotePlayback 实验性。这是一个布尔值，用来禁用在远程设备上进行进度控制的能力

  这些设备通过有线（比如 HDMI, DVI）或无线技术（比如 Miracast, Chromecast, DLNA, AirPlay,）来与 web 连接。请参考 this proposed specification 来获取更多信息。

  备注： 在 Safari 中，你能使用 x-webkit-airplay="deny" 作为兜底方案。

• duration 只读这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。

  如果元素上没有媒体，或者媒体是不可用的，那么会返回 NaN。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 WebRTC 连接的流），那么这个值将返回 +Infinity。

• loop 布尔属性；如果声明该属性，将循环播放音频。

• muted 表示是否静音的布尔值。默认值为 false，表示有声音。

• preload 枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：

  • none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；

  • metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。

  • auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。

  • 空字符串 : 等效于auto属性。不同浏览器会有自己的默认值，规范建议的默认值为 metadata。

  备注： autoplay 属性的优先级高于 preload。如果 autoplay 被指定，浏览器将显式地开始下载媒体以供播放。

• src 嵌入的音频的 URL。

  该 URL 应遵从 HTTP access controls (en-US). 这是一个可选属性；你可以在 audio 元素中使用 source 元素来替代该属性指定嵌入的音频。

常用<audio>的事件：

• loadstart客户端开始请求数据
• progress客户端正在请求数据（或者说正在缓冲）
• playplay()和autoplay播放时
• pausepause()方法促发时
• ended当前播放结束
• timeupdate当前播放时间发生改变的时候。播放中常用的时间处理哦
• canplaythrough歌曲已经载入完全完成
• canplay缓冲至目前可播放状态。

<video>

HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 audio 元素可能在用户体验上更合适。

<video>的属性：

• autoplay 布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。

• autopictureinpicture 实验性。一个布尔属性，如果为 true，那么当用户在当前页面和另一个页面或应用程序之间来回切换时，会自动切换画中画（picture-in-picture）模式。

• controls 加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。

• controlslist 实验性。当浏览器显示视频底部的播放控制面板（例如，指定了 controls 属性）时，controlslist 属性会帮助浏览器选择在控制面板上显示哪些控件。允许接受的值有 nodownload, nofullscreen 和 noremoteplayback。如果要禁用画中画模式（和控件），请使用 disablePictureInPicture 属性。

• crossorigin 该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 canvas 元素中被重用，而不会被污染。允许的值如下：

• disablepictureinpicture 实验性。防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。该属性可以禁用 video 元素的画中画特性，右键菜单中的“画中画”选项会被禁用

• disableRemotePlayback 实验性。布尔属性，用于在使用有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。在 Safari 中，您可以使用 x-webkit-airplay="deny" 作为兜底方案。

• height 视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

• loop 布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。

• muted 布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。

• playsinline 布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。

• poster 海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。

• preload 该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：

  • none: 表示不应该预加载视频。

  • metadata: 表示仅预先获取视频的元数据（例如长度）。

  • auto: 表示可以下载整个视频文件，即使用户不希望使用它。

  • 空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。

  备注： autoplay 属性的优先级比 preload 高。如果制定了 autopaly属性，浏览器显然需要开始下载视频以便回放。规范没有强制浏览器去遵循该属性的值，这仅仅只是个提示。

• src 要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 `` 元素来指定需要嵌到页面的视频。

• width 视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。