HTML面试题

本文最后更新于：2022年6月1日 下午

HTML5 新特性

移除

  • 纯表现的元素/可以用css实现的元素：basefont，big，center，font, s，strike

  • 对可用性产生负面影响的元素：frame,frameset

  • 语意化更好的标签，比如header,nav,section,article,footer,aside

  • 增强了input类型:color,date,datetime-local,range,tel,search,url

  • 新的表单元素:datalist,progress,meter,output,keygen

  • 表单校验(数据格式，数据范围，占位符，必填等)

  • canvas API和内联 svg

  • audio/video 音视频元素

  • manifestweb应用离线缓存

  • 地理定位geolocation API

  • webworker将JS计算交给后台线程

  • websocket全双工的支持服务端推送的持久化连接协议

  • webStorage：localStorage sessionStorage

  • historyAPI

HTML5 哪些标签可以做 SEO

title、meta、header、footer、nav、article、aside

meta元数据标签

  • charset 字符编码
  • keywords关键词和爬虫
  • viewport scale页面缩放
  • CSP内容安全策略

HTML5 的离线存储

在用户没有联网时，可以正常访问站点或应用；在联网的情况下，更新用户机器上的缓存文件。

  1. 页面头部加入一个 manifest 的属性
  2. 在 cache.manifest 文件的编写离线存储的资源
  3. 在离线状态下，操作 window.applicationCache 进行需求实现

浏览器是如何对 HTML5 的离线存储资源进行管理和加载的

  • 在线的情况下，浏览器发现 HTML 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app，浏览器会根据 manifest 文件的内容下载相应的资源并且进行离线存储。

  • 如果已经访问过 app，并且资源已经离线存储，浏览器会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件，如果文件没有发生改变，就不做任何操作，否则就会重新下载文件中的资源并进行离线存储。

  • 离线的情况下，浏览器直接使用离线存储的资源。

盒模型

HTML 文档中的每个元素都使用一个矩形盒子来描述其占用空间，这个模型称为盒模型。盒模型包含四个区域：margin（外边距），border（边框），padding（内边距），content（内容区域）

outline和box-shadow都会从margin box区域开始计算

标准模型和 IE 模型

  • 标准模型box-sizing:content-box,对其设置宽高只作用于content box区域
  • ie 模型box-sizing:border-box,对其设置宽高会作用于content box,padding box和 border box区域

块级元素

display block

  1. 独占一行

  2. 可以设置 width，height，margin，padding，border 属性

  3. 默认宽度是容器的 100%

article; // h5
div;
header; // h5
section; // h5
address; // h5
ol;
ul;
aside; // h5
footer; // h5
audio; // h5
video; // h5
canvas; // h5
hgroup; // h5
p;
h1 - h6;
table;
form;

行内元素

display inline

  1. 行内排列
  2. 不能设置 width、height,默认高度和宽度就是内容的高度和宽度
  3. 可以设置 margin-left/right，无法设置 margin-top\bottom
  4. border 和 padding 可以设置，但是 border-top 和 padding-top 到页面顶部后就不再增加
img; //可以设置宽高
span;
label;
strong;
a;
input; //可以设置宽高
select; //可以设置宽高
textarea; //可以设置宽高

行内块元素

display line-block

在行内排列的块级元素

// 兼容
div {
    display： inline-block；
    zoom： 1；   //在IE下触发hasLayout
    display：inline；//一旦触发了hasLayout设置display：inline和display：block效果相似。
}

DOM元素的尺寸和位置

  1. HTMLElement.style【只能获取内联样式】

  2. window.getComputedStyle(HTMLElement)【获取包含所有样式属性的对象

  3. HTMLElement.getBoundingClientRect()【描绘元素为相对窗口的矩形盒子】

  4. HTMLElement.offsetWidth/offsetHeight 【content+padding+border+scrollbar】

  5. HTMLElement.clientWidth/clientHeight 【content+padding】

  6. HTMLElement.scrollWidth/scrollHeight // 【包含滚出可是区域部分的clientWidth/clientHeight】

  7. HTMLElement.scrollTop// 【从元素的左上角开始，滚动出元素的上半部分的 width/height】

！滚动到底

ele.scrollHeight - ele.scrollTop === ele.clientHeight

！元素进入可视范围(懒加载)

要加载元素的.offsetTop - 容器.scrollTop <= document.documentElement.clientHeight

要加载元素getBoundingClientRect()后的top <= document.documentElement.clientHeight
！js获取这些属性会触发重排

BFC

（Block Formatting Context） 块级格式化上下文,是一个对块级盒子的布局及浮动相互影响有特殊规则的区域

特性

一句话就是BFC内外不会互相影响。。。

  • BFC内盒子之间会发生外边距合并

  • BFC内浮动元素参与高度计算（高度塌陷）

  • BFC内盒子不会超出BFC边界（浮动覆盖）

    下列方式会创建BFC：

    • 根元素HTML
    • 浮动元素：float 不为 none
    • 绝对定位元素：position 为 absolute 或 fixed
    • overflow 不为 visible
    • display 为 flow-root
    • 行内块元素display 为 inline-block
    • 弹性元素display 为 flex 或 inline-flex 元素的直接子元素
    • 网格元素display 为 grid 或 inline-grid 元素的直接子元素
    • 表格元素display 为 table``table-cell或table-xxx等匿名表格元素

清除浮动

  • 用父元素伪类清除浮动
/* 通用 */
.clearfather:after {
  content: "";
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfather {
  *zoom: 1; /* ie6/7 */
}
  • 空 div 清除浮动
.clearfloat {
  clear: both;
}
  • 父元素 BFC

设置能触发 BFC 的属性均可

超链接伪类顺序

被点击访问过的超链接样式不在具有 hover 和 active 了解决方法是改变 CSS 属性排列顺序: L-V-H-A

a:link {
}
a:visited {
}
a:hover {
}
a:active {
}

优雅降级和渐进增强

_优雅降级_：Web 站点在所有新式浏览器中都能正常工作，如果用户使用的是旧式浏览器，则代码会针对旧版本的 IE 进行降级处理，使之在旧式浏览器上以某种形式降级体验而不至于完全不能使用。

_渐进增强_：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能，向页面增加不影响基础浏览器的额外样式和功能。当浏览器支持时，它们会自定地呈现出来并发挥作用。

常见空 VOID 元素

br、hr、img、input、link、meta

window.onLoad 和 DOMContentLoaded 的区别

  • window.onLoad当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。
  • DOMContentLoaded仅当HTML和内联外联js脚本加载并同步代码都执行完。

visibilityState

通过visibilityState的值检测页面当前是否可见，以及打开页面的时间等
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

外边距重叠

  1. 同层相邻块级元素之间外边距重叠
  2. 子元素与父元素的外边距重叠
  3. 空元素(margin-top直接贴到margin-bottom时)

link 和@import 有什么区别

  • link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS ，rel和图标等；@import 只能加载 CSS。

  • link 支持并行下载；@import 串行下载且需放在样式表顶层。

  • @import 是在 CSS2.1 提出的，低版本的浏览器（IE5 以下）不支持。

  • link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。

#面试 #HTML
HTML面试题
http://yoursite.com/2022/02/24/html面试题/
作者
tatekii
发布于
2022年2月24日
许可协议