HTML 高频面试题

TIP

HTML 作为基础,在小公司中很少被问到,或者只问到一点点,此集合收集了小公司经常问到的问题

说说对 HTML 语义化的理解

速记: 语义化是指根据内容选择合适的标签有利于 seo,结构清晰,无 css 时结构任然清晰,有利于无障碍设备

HTML 标签的语义化，简单来说，就是用正确的标签做正确的事情，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。

语义化的优点如下：

对搜索引擎友好，有利于 SEO
对开发者友好，增强了可读性，结构更加清晰，便于团队的开发与维护
方便其他设备（如屏幕阅读器、盲人阅读器、移动设备）更好的解析页面
无 css 的时候可以呈现一个清晰的结构

src 和 href 的区别

速记:相同点都是引入外部资源 src 加载完毕在执行其他操作,href 异步并行执行,不影响其他操作

功能

src：全称 source，它通常用于 img、video、audio、script 元素，通过 src 指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求 src 资源时，它会将资源下载并应用到文档内，比如说：js 脚本、img 图片、frame 等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将 js 脚本放在底部而不是头部的原因。

href：全称 hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于 a、link 元素。

区别

当浏览器遇到 href 会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
当浏览器解析到 src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是为什么 script 标签放在底部而不是头部)

常见的布局方式有哪些？

flex 布局（也称弹性布局）：主要用来作移动页面适配不同的屏幕大小，让浏览自动划分区域

grid 布局: 类似 flex 布局，但是 grid 是利用行和列将一个盒子划分成一个二维的区域，也有点类似与栅格系统，利用 grid 可以实现 flex 能够实现的一切

流式布局（也称百分比布局）：利用百分比和浮动划分区域大小和布局展示，超出的部分自动换行显示

响应式布局：利用 html5 的媒体查询功能，更具屏幕不同的宽度来指定不同的样式，从而到达一个网站多个设备完美显示

多栏布局（栅格系统）：利用百分比+浮动的方式进行页面划分，通常一些 ui 组件库都会提供栅格系统

三栏布局，双飞翼布局，圣杯布局，左+中+右的布局方式，左边右边固定宽度中间自适应

H5 都有什么新特性

记住一部分即可,常用的记全+一些特殊新特性挑选记忆

本地存储：HTML5 引入了本地存储 API，允许开发者在客户端存储数据，以便在离线状态下访问，或者减少与服务器的交互，提高网站的性能。
地理位置定位：HTML5 引入了 Geolocation API，允许网站获取用户的地理位置信息，以便提供更加个性化的服务。
表单增强：HTML5 引入了许多新的表单元素和属性，例如<input type="date">、<input type="email">、<input type="range">等，使得表单的处理更加方便和灵活。
Web 存储：HTML5 引入了 Web 存储 API，包括 LocalStorage 和 SessionStorage，使得开发者可以在客户端存储和读取键值对形式的数据，以便在不同页面之间共享数据。
WebAssembly：提供了一种比 JavaScript 更高效的方式来运行代码，并且可以使用其他编程语言编写 Web 应用程序。
WebGL：HTML5 支持 WebGL，允许开发者使用 JavaScript 在浏览器中创建 3D 图形和游戏。
Web Workers：HTML5 支持 Web Workers，使得 JavaScript 可以在后台线程中运行，不会阻塞主线程，从而提高网站的响应速度和用户体验。
WebRTC：HTML5 支持 WebRTC，使得网页可以实现点对点的实时音视频通信，从而实现各种基于实时通信的应用程序，例如视频会议、远程协作等。
拖放：HTML5 支持原生的拖放功能，使得开发者可以实现各种拖放操作，例如拖拽文件上传、拖拽元素排序等。
响应式设计：HTML5 支持响应式设计，使得网页可以根据不同的设备和屏幕尺寸自适应地调整布局和样式。
Web Components：允许开发者创建自定义的 HTML 元素和组件，以便在不同的页面和项目中共享和重用。
语音识别：HTML5 支持原生的语音识别功能，使得网页可以实现语音输入和控制，从而提高用户的便利性和体验。
全屏 API：HTML5 引入了全屏 API，允许网页在全屏状态下运行，从而提供更加沉浸式的用户体验。
无障碍支持：HTML5 支持无障碍标准，使得网页可以更好地满足残障用户的需求，提高网站的可访问性和可用性。
WebVR：HTML5 支持 WebVR，允许网页在虚拟现实环境中运行，从而提供更加沉浸式的用户体验。
Web Animations API：HTML5 引入了 Web Animations API，允许开发者使用 JavaScript 来控制和创建动画效果，从而提高网站的交互性和视觉效果。
语义化标签：HTML5 引入了许多新的语义化标签，例如<header>、<footer>、<nav>、<article>、<section>等，使得网页的结构更加清晰明了，便于开发者和搜索引擎理解和处理。
视频和音频支持：HTML5 支持原生的视频和音频播放，使得开发者不再需要使用第三方插件（如 Flash）来实现视频和音频播放功能。
Canvas 绘图：HTML5 引入了 Canvas 元素，开发者可以使用 JavaScript 在 Canvas 上进行绘图、动画等操作，实现各种复杂的效果。

H5 和 HTML5 区别

个人理解 H5 是包含了最新的 HTML5、CSS3、ES6 等新技术的统称 HTML5 是一个技术名词，指的就是第五代 HTML

说一下 iframe,有哪些优点和缺点?

速记: iframe 是用来在网页中嵌入另一个网页的标签

优点

提供了浏览器原生的硬隔离方案，不论是样式隔离、JS 隔离这类问题统统都能被完美解决。
方便开发，减少代码的重复率,和老旧项目复用问题
使用起来很方便

缺点

iframe 会阻塞主页面的 Onload 事件
无法被一些搜索引擎索引到
页面会增加服务器的 http 请求
不利于 SEO 优化

需要注意哪些 SEO 优化？

速记: 合理的 TDK,HTML 语义化,每页只使用一个 H1,突然重点,非装饰性图片必须加 alt 属性,官网类,有 SEO 需求较大的,可以使用 ssr,ssg 技术,spa 对 seo 不友好

合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过两次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可
语义化的 HTML 代码，符合 W3C 规范；语义化就是用正确的标签做正确的事情
重要的内容 HTML 代码放在最前，如果需要先加载此内容，在加载 CSS，那么可以使用<script>标签的 defer 属性
重要的 CSS 放在最前，如果 CSS 放在底部，在某些网络慢或者 JS 加载阻塞的情况下，页面会长时间空白，不利于用户体验
尽量少用 iframe，搜索引擎不会抓取 iframe 中的内容
非特殊情况下，慎用 display:none，搜索引擎可能不会抓取到
图片 alt 和 title 属性，尤其是 alt 尽量详细描述，title 鼠标悬停时显示

说一下 HTML5 的拖拽

HTML5 新增了一套拖拽 api,用来实现拖拽功能

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强:先针对低版本浏览器写兼容，最后写标准写法

css

.box{ /*渐进增强写法*/

  -webkit-transition: all .5s;

  -moz-transition: all .5s;

   -o-transition: all .5s;

  transition: all .5s;

}

优雅降级先写标准写法，然后再针对各浏览器写兼容

css

.box {
  /*优雅降级写法*/

  transition: all 0.5s;

  -o-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -webkit-transition: all 0.5s;
}

HTML 中的 mate 标签是什么,有什么作用?

meta 标签用于提供关于 HTML 文档的元数据信息，这些信息通常不会直接显示在页面上，而是提供给浏览器和搜索引擎等客户端使用

它提供了丰富的元数据信息，可以帮助开发者提高网页的可用性、可访问性和搜索引擎优化等方面

HTML 高频面试题 ​

说说对 HTML 语义化的理解 ​

src 和 href 的区别 ​

功能 ​

区别 ​

常见的布局方式有哪些 ？ ​

H5 都有什么新特性 ​

H5 和 HTML5 区别 ​

说一下 iframe,有哪些优点和缺点? ​

优点 ​

缺点 ​

需要注意哪些 SEO 优化？ ​

说一下 HTML5 的拖拽 ​

你能描述一下渐进增强和优雅降级之间的不同吗? ​

渐进增强:先针对低版本浏览器写兼容，最后写标准写法 ​

优雅降级 先写标准写法，然后再针对各浏览器写兼容 ​

HTML 中的 mate 标签是什么,有什么作用? ​