前端高频考题（html）

一、行内元素、块元素、空元素

• 行内元素：span、img、input...
• 块级元素：div、footer、header、h...
• 空元素：br、hr...

元素之间的转换问题：

• display：inline 把元素转换成行内元素 =》不独占一行，不可以设置宽高
• display：inline-block 把元素转换成行内块元素 =》 不独占一行，可以设置宽高
• display：block 把元素转换成块元素 =》 独占一行，可以设置宽高

二、link和@import有什么区别

• 用法：link是html标签，@import是css规则
• 兼容性：link先有，后有@impot（兼容性link比@import兼容）
• 加载顺序：浏览器先加载标签link，后加载@import

三、title与h1，b与strong，i与em

• 定义

  • title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
  • h1：文章主题内容，告诉蜘蛛我们的网站最主要的内容是什么

• 区别

  • title 是显示在网页标题上的，h1是显示在网页内容上的
  • title 比 h1 添加的重要 =》SEO（搜索引擎优化 周期长成本低），h1一般用作网页logo标题

• 定义

  • b：实体标签，用来给文字加粗的
  • strong：逻辑标签，用来加强字符语气的

• 区别

  • b 标签只有加粗的样式，没有实际含义
  • strong 表示标签内字符比较重要，在一些无障碍阅读功能中有语气加强的功能

• 题外：为了符合css3的规范，b尽量少用改用strong就行了

• 定义

  • i：实体标签，用来做文字倾斜的
  • em：逻辑标签，用来强调字符语气

• 区别

  • i 只是一个倾斜标签，没有实际含义
  • em 表示标签内字符重要，用以强调

• 场景：i多用在字体图标，em多用在术语上（医药，生物）

四、img标签title和alt的区别

• 区别1
  • title：鼠标移入图片显示的值
  • alt：图片无法加载时显示的值
• 区别2
  • 在SEO层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图片是什么内容或关键词

五、png、jpg、gif这些图片格式解释一下，分别什么时候使用？

• png：无损压缩，尺寸体积要比jpg/jpeg大，适合做小图标
• jpg：采用压缩算法，有一点失真，比png体积要小，适合做中大图片
• webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积，但兼容性不太好
• gif：一般做动图使用

六、h5的新特性

• 语义化标签：footer、header、aside、nav ...
• video视频，audio音频，track字幕(.vtt)
• canvas画布
• 表单控件：calemdar、data、time、email ... 表单属性：palceholder ...
• localStorage和sessionStorage

七、严格模式和混杂模式

• 严格模式：是以浏览器支持的最高标准运行
• 混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

八、link是同步加载还是异步加载

在 HTML 中，<link>标签的加载方式取决于其rel属性的值和具体用途，主要分为同步加载 和异步加载两种情况：

• 核心 CSS（rel="stylesheet"）：同步加载，阻塞 HTML 解析和渲染。
• 非核心资源（preload/preconnect/prefetch等）：异步加载，不阻塞主线程。

九、什么是 HTML 语义化？语义化标签有哪些优势？

• 定义 ：语义化指使用 "有明确含义" 的标签（如 <nav> 表示导航栏，<article> 表示文章主体），而非仅用 <div>（无语义，仅作容器）来组织页面结构。

• 核心优势：

  1. 可读性与维护性 ：开发者能快速理解文档结构（如看到 <footer> 就知道是页脚），团队协作更高效；
  2. SEO 优化 ：搜索引擎（如百度、谷歌）能通过语义标签识别页面核心内容（如 <main> 中的内容权重更高），提升搜索排名；
  3. accessibility（无障碍）：屏幕阅读器（给视障用户使用）能通过语义标签判断内容类型，提升用户体验（如读 "导航栏" 而非 "div 区域"）；
  4. 减少 CSS 依赖 ：部分语义标签自带默认样式（如 <h1> 加粗放大、<address> 斜体），简化样式开发。