前端面试题 => 【HTML】

HTML面试题总结

1. 对 HTML 语义化的理解

  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构;
  • 代码结构清晰,方便团队的管理和维护,并且语义化更具有可读性,减少差异化;
  • 提升用户体验;
    • 例如:title、alt用于解释名词或者图片信息、label标签的活用
  • 有利于SEO优化,提升搜索引擎排名;
    • 和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息;
    • 爬虫依赖于标签来确上下文和关键字的权重;
  • 方便其他设备的解析(屏幕阅读器、盲人阅读器、移动设备等等);

2. H5新增特性

  • 语义化更好的标签
    • header、nav、aside、article、section、footer
  • 音视频标签
    • audio、video
    • 如果浏览器不支持自动播放怎么办?
      • 在属性中添加autoplay(谷歌浏览器不支持音频自动播放,但是视频支持静音自动播放);
  • data- 开头的自定义属性
  • 本地存储
    • localStorage、sessionStorage
  • 表单控件
    • type 属性设置值;
    • url、search、file、email、date、number、month、color、tel
  • 画布
    • Canvas
  • 拖拽释放
    • drag、drop
  • 新技术
    • 浏览器多线程:webWorker
    • 前后台持久化通信技术:webSocket

3. HTML5常用的结构标签有哪些,它替换了之前的哪些标签?

  • header、nav、main、article、aside、footer、section
  • <div class="header">、<div class="nav">、<div class="main">...

4. HTML文档采用 UTF-8编码集 的优势是什么?

  • utf-8
    • 使用3个字节表示一个符号,基本上可以覆盖世界上所有的语言;
  • 与传统的gb2312、gbk相比,可识别的字符集更多,也是行业界推荐的;

5. 标签钟常用的属性有哪些?

  • id、class、title、style

6. 标签中的 title属性 和 alt属性 的区别是什么?

  • title
    • 是标签的描述,当鼠标移入时,稍等一会儿就会出现这个描述信息;
  • alt :
    • 用在可置换元素上,当外部资源无法正确加载时,这个信息就会显示在占位符上;

7. 什么是置换元素 和 非置换元素,每种类型至少举出三个例子

  • 置换元素
    • 置换元素的内容来自外部,该元素仅是外部资源的占位符;
    • <img>、<video>、<audio>...
  • 非置换元素
    • 非置换元素内容来自当前文档,必须使用双标签;
    • <p>、<h1> ~ <h6>、<ul>...

8. 标签中的 href属性 和 src属性 有什么区别?

  • 二者都是对外部资源的饿引用;
  • href
    • 用于超文本或样式,用在 <link>标签 和 <a>标签上;
  • src
    • 用在外部资源占位符上,如<img>、<iframe>、<script>、<video>...

9. iframe标签的主要功能是什么,有什么优缺点?

  • 优点:
    • 当前页面,直接加载其他页面,而不必发生跳转;
  • 缺点:
    • 框架中的内容不会被搜索引擎读取,且会增加过多的HTTP请求,影响页面载入速度;

10. 表单中的按钮有几种,常用的标签有哪几个?

  • 按钮有三种:
    • 普通按钮、提交按钮、重置按钮;
  • 常用标签:
    • <input type="button">、<input type="submit">、<input type="rest">、<button>

11. 表单数据的提交方式有几种,分析使用场景?

  • POST:
    • 表单数据通过请求体发送;
  • GET:
    • 表单数据通过URL地址栏发送;

12. 什么是 重绘 和 重排?

  • 重绘
    • 当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘;
  • 重排
    • 和重绘相反,当改变布局的时候,就会引起重排;
  • 重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置);
相关推荐
YongGit1 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士38 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子2 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试