frenchleave

前端面试-HTML

2021/5/10 InterviewHTML

# HTML5新增内容

  1. 新增API

    • document.querySelector()和document.querySelectorAll()。

    • document.getElementsByClassName()（没想到这个竟然是，IE8以下不支持。原生的方法：getElementById()和getElementsByTagName()）。

    • classList属性，document.getElementById("myDIV").classList.add("mystyle");。

      • add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加。
      • contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
      • remove(value)：从列表中删除给定的字符串。
      • toggle(value)：如果列表中已经存在给定的值，则删除；如果列表中没有给定的值，则添加。

    • 自定义数据属性(dataset)，只要以data-开头，element.dataset。

    • insertAdjacentHtml()，insertAdjacentText()，insertAdjacentElement()。

      • insertAdjacentHTML(position, text)方法将指定的文本解析为Element元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。

        • beforebegin：元素自身的前面。
        • afterbegin：插入元素内部的第一个子节点之前。
        • beforeend：插入元素内部的最后一个子节点之后。
        • afterend：元素自身的后面。
        <!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
        1
        2
        3
        4
        5
        6
        7

      • insertAdjacentText(position, text)方法将一个给定的文本节点插入在相对于被调用的元素给定的位置。

      • insertAdjacentElement(position, element)方法将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置。

    • FullScreen API。

    • 页面可见性（Page Visibility）。

    • 预加载（prefetch）。

    • 内容可编辑（contenteditable）。

    • 本地存储（sessionStorage、localStorage和indexedDB）。

    • 离线web应用（window.applicationCache）。

    • 地理定位（Geolocation API: window.navigator.geolocation）。

  2. 新增标签

    • 页眉信息header。
    • 导航nav。
    • 独立的内容article。
    • 页尾footer。
    • 区块section。
    • 其他的内容aside。
    • 选项列表datalist。
    • 音频标签audio。
    • 视频标签video。
    • 插入媒体标签embed。
    • 黄色高亮显示选择文本mark。
    • 菜单menu。
    • 命令按钮command（只有当command元素位于menu元素内时）。
    • 状态标签progress。
    • 细节details。
    • 画布canvas。
    • 弹窗dialog。
    • 表示一个范围内的值meter。

  3. 删除标签

    删除basefont，big，center，font，s，strike，tt，u这些纯表现的元素，HTML5中提倡把画面展示性功能放在css中统一编辑。不再用frame，noframes和frameset，这些标签对可用性产生负面影响。HTML5中不支持frame框架，只支持iframe框架。

  4. 新增input属性

    • type新增：date、datetime、time、month、week、search、range（slider进度条）、url、email、number、color。
    • list。
    • placeholder。
    • multiple。
    • required。
    • autocomplete。
    • autofocus。
    • pattern。

# SVG和Canvas的区别

一句话总结：都是2D做图，SVG是矢量图，Canvas是位图。Canvas是逐像素进行渲染的，适合游戏。

  • SVG

    • SVG是一种使用XML描述2D图形的语言。可伸缩矢量图形(Scalable Vector Graphics)
    • SVG基于XML，这意味着SVG DOM中的每个元素都是可用的。您可以为某个元素附加JavaScript事件处理器。
    • 在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。

  • Canvas

    • Canvas通过JavaScript来绘制2D图形。
    • Canvas是逐像素进行渲染的。
    • 在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

SVG与Canvas的比较

  • SVG

    • 不依赖分辨率。
    • 支持事件处理器。
    • 最适合带有大型渲染区域的应用程序（比如谷歌地图）。
    • 复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快）。
    • 不适合游戏应用。

  • Canvas

    • 依赖分辨率。
    • 不支持事件处理器。
    • 弱的文本渲染能力。
    • 能够以.png或.jpg格式保存结果图像。
    • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘。

# 用一个div模拟textarea的实现

<!DOCTYPE html>

<head>
  <title>div模拟textarea</title>
  <style>
    .editdiv {
      border: 1px solid #a0b3d6;
      width: 500px;
      min-height: 200px;
      font-size: 14px;
      padding: 4px;
      color: #333;
      outline: 0;
      /* 解决聚焦边框 */
    }

    /* 添加placeholder属性 */
    .editdiv:empty::before {
      content: attr(placeholder);
      color: #999;
    }
  </style>
</head>

<body>
  <div class="editdiv" contenteditable="true" placeholder="请输入内容..."></div>
</body>

</html>
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

# 如何处理HTML5新标签的浏览器兼容问题

  1. document方法产生标签

    IE6/IE7/IE8支持通过document方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签

    <script>
  /*手动创建标签:默认的标签的类型都是行级元素，当设置标签样式时，
  首先需要将行级元素转换为块级元素，即设置display：block*/
  document.createElement("header");
  document.createElement("nav");
  document.createElement("main");
  document.createElement("article");
  document.createElement("aside");
  document.createElement("footer");
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

  2. 使用html5shim

    在<head>中调用以下代码

    <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- html5shiv 和 html5shim 是一个东西 只是改了个名字 -->
<!-- <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> -->
    1
    2
    3
    4
    5
    6

  3. 使用kill IE6

    在</body>之前调用以下代码（IE6 must die）

    <!--if lte IE 6]>
  <script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
<![endif]-->
    1
    2
    3

# 获取DOM当前位置属性

  1. Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置（即滚动会影响）。返回值为一个DOMRect对象，里面属性如下：

    • left：DOM左边界距离浏览器左边界的距离。
    • top：DOM上边界距离浏览器上边界的距离。
    • x：DOM左边界距离浏览器左边界的距离。
    • y：DOM上边界距离浏览器上边界的距离。
    • right：DOM右边界距离浏览器左边界的距离。
    • bottom：DOM下边界距离浏览器上边界的距离。
    • width：DOM的宽，根据盒子类型计算。
    • height：DOM的高，根据盒子类型计算。

  2. Element.getClientRects()方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。返回值为一个或多个DOMRect对象的数组，属性和Element.getBoundingClientRect()一样

    • 如果是块级元素，则返回该元素的DOMRect，即这个块的大小和位置。
    • 如果是行内元素，则会返回其中每个元素的DOMRect。

兼容问题

  • ie9以上支持width、height属性，其余属性ie5以上都能支持。
  • 在ie7及以下left和top会多出两个像素。

兼容ie6~ie8的width、height的写法：

const objWidth = rectObject.right - rectObject.left;
const objHeight = rectObject.bottom - rectObject.top;
1
2

# DOCTYPE作用,严格模式与混杂模式如何区分

DOCTYPE声明于文档最前面，告诉浏览器以什么样（html或xhtml）的文档类型定义（DTD）来解析文档。HTML4.01中有三种DOCTYPE声明方式，HTML5中只有一种（<!DOCTYPE html>）。

  • 声明DOCTYPE：严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
  • 未声明DOCTYPE：混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

# 禁止浏览器自动填充输入框

  1. 使用autocomplete

    <input type="text" autocomplete="off">
<input type="password" autocomplete="new-password">
    1
    2

    如果你定义了一个用户管理页面，其中用户可以为其他人指定新的密码，因此你想阻止密码字段的自动填充，你可以使用autocomplete="new-password"。这只是一个提示，浏览器不一定要遵守。但现代浏览器都已停止在设置了autocomplete="new-password"的<input>元素上使用自动填充。

    P.S.：个人猜测与实践发现，文本框填充是因为密码框填充引起的，所以只在密码框上面设置autocomplete="new-password"就可以了。

  2. 增加一个不显示的输入框

    <input type="text">
<input type="text" style="position: fixed;top: -9999px;">
<input type="password" style="position: fixed;top: -9999px;">
<input type="password">
    1
    2
    3
    4

    注意：排列的顺序还必须是上面这种排列方式，尝试了其他所有的排列方式都不能同时取消掉两个输入框的填充。

  3. 依旧使用text

    @font-face {
font-family: 'password';
src: url(./password.ttf);
}
input {
font-family: 'password';
}
    1
    2
    3
    4
    5
    6
    7

    "password.ttf"可以网上找一下，Creating a Password Field (opens new window)

# 实现暗黑主题

html {
  filter: invert(1) hue-rotate(180deg);
  transition: color 300ms, background-color 300ms;
}
1
2
3
4

# 前端开发中的无障碍

  1. 良好的对比度和清晰的字体不仅对视力障碍者有帮助，对于在强光下使用手机的用户也同样重要。
  2. 遵循WAI-ARIA准则Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)是一套技术规范，旨在使网络应用程序更加无障碍。作为前端开发者，我们应当学习并应用这些准则，例如，通过role和aria-*属性来增强HTML元素的语义，使屏幕阅读器能够更好地解读页面内容。
  3. 使用语义化的HTML正确使用HTML标签对于无障碍至关重要。例如，使用<button>而不是<div>来创建按钮，可以让键盘用户和屏幕阅读器用户更容易地操作。此外，确保使用合适的标题级别（h1-h6）来组织内容，使得用户能够通过屏幕阅读器理解页面的结构。
  4. 确保键盘导航许多用户依赖键盘来导航网页，特别是那些不能使用传统鼠标的用户。因此，重要的是确保所有的交互元素都可以通过键盘（如Tab键）访问，并且在键盘焦点时有明显的视觉反馈。
  5. 提供足够的对比度颜色对比度不足会影响到色盲用户和视力不佳的用户。使用足够对比度的颜色组合，以确保文本和背景之间的差异可以清晰地被大多数人识别。有许多在线工具可以帮助检查颜色对比度是否符合无障碍标准。
  6. 为多媒体内容提供文字说明对于视频和音频内容，提供字幕、文本描述和手语翻译是必要的。这不仅帮助听力障碍者，也对那些在嘈杂环境中或需要静音浏览的用户有所帮助。
最近更新: 2025年03月06日 15:35:02

前端面试-CSS