qidao123.com技术社区-IT企服评测·应用市场

标题: HTML 口试全攻略 [打印本页]

作者: 温锦文欧普厨电及净水器总代理 时间: 6 天前
标题: HTML 口试全攻略
HTML 是前端开辟的基石，是每个开辟者必须掌握的焦点技能。本文整理了高频 HTML 口试题，并系统梳理了相关知识点，帮助你在口试中脱颖而出，同时为实际开辟工作打下坚实基础。
一、HTML 基础概念

(一)DOCTYPE 声明

<!DOCTYPE> 声明位于文档最前面，告诉浏览器以何种文档标准解析页面。在 HTML5 中，该声明被简化为：
登录后复制

<!DOCTYPE html>

复制代码

作用：确保浏览器以标准模式渲染页面，避免进入混杂模式导致样式和布局异常。
(二)语义化明白

语义化 HTML 是指使用适当的标签表达内容的寄义。比方：
登录后复制

<div class="header"></div>
<header></header>

复制代码

优势：

SEO 友好：搜索引擎更容易明白页面内容。
可访问性加强：辅助技术(如屏幕阅读器)能更好地解析页面。
代码可读性提拔：便于开辟和维护。

二、元素分类与特性

(一)替换元素 vs 非替换元素

范例特点示例替换元素内容由外部资源决定<img>, <video>非替换元素内容由 CSS 和 HTML 直接控制<div>, <span> 解释：

替换元素：如 <img> 和 <video>，其内容由外部资源决定，CSS 只能控制其位置和尺寸。
非替换元素：如 <div> 和 <span>，其内容完全由 HTML 和 CSS 控制。

(二)行内与块级元素

登录后复制

// 常见行内元素
const inlineElements = ['span', 'a', 'img', 'strong'];
// 常见块级元素
const blockElements = ['div', 'p', 'h1-h6', 'ul'];

复制代码

转换方法：
登录后复制

.inline-to-block {
display: block;
}
.block-to-inline {
display: inline;
}

复制代码

注意事项：

行内元素默认不换行，块级元素默认独占一行。
通过 display 属性可以灵活转换元素的显示范例。

三、HTML5 新特性

(一)紧张新增特性

语义化标签：<header>、<footer>、<article> 等，提拔页面结构化和可读性。
多媒体支持：<audio> 和 <video>，支持原生音频和视频播放。
表单加强：登录后复制
1. <input type="email" required placeholder="请输入邮箱">
复制代码
- 1.
- 新增输入范例(如 email、date)。
- 提供表单验证(如 required、pattern)。
Canvas/WebGL 画图：支持动态图形绘制。
当地存储：localStorage 和 sessionStorage，提供更灵活的存储方案。

(二)兼容性处理

使用 html5shiv 解决 IE9 以下版本兼容问题：
登录后复制

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

复制代码

原理：html5shiv 通过 JavaScript 动态创建 HTML5 元素，使其在旧版浏览器中也能正常显示。
四、实用技巧与优化

(一)图片优化方案

登录后复制

<img src="image.jpg" alt="描述文本"
loading="lazy"
width="300" height="200">

复制代码

优化点：

alt 属性：提供图片描述，提拔 SEO 和可访问性。
loading="lazy"：延迟加载图片，提拔页面加载速度。
width 和 height：提前指定图片尺寸，避免布局抖动。

(二)页面可见性 API

登录后复制

document.addEventListener('visibilitychange', () => {
if (document.hidden) {
console.log('页面隐藏，暂停资源加载');
// 暂停视频/动画
} else {
console.log('页面可见，恢复资源加载');
// 恢复播放
}
});

复制代码

应用场景：

停息自动播放的视频或轮播图，节流带宽和电量。
减少服务器负担，避免在页面隐蔽时进行不必要的数据请求。
提拔用户体验，确保用户返回页面时看到最新的内容。

五、高频口试题精讲

(一)src 与 href 区别

src：嵌入资源，会阻塞解析(如 <script src>)。
href：创建关联，并行加载(如 <link href>)。

口试回答：src 用于嵌入资源，如 <img> 和 <script>，浏览器会立即加载并解析这些资源，大概会阻塞页面渲染。而 href 用于创建关联，如 <link> 和 <a>，浏览器会并行加载这些资源，不会阻塞页面解析。
(二)iframe 优缺点

长处：

隔离样式和脚本，避免辩说。
并行下载子页面，提拔加载速度。

缺点：

SEO 不友好，搜索引擎难以抓取 iframe 内容。
性能开销大，每个 iframe 都是一个独立的文档环境。

(三)表单文件上传

登录后复制

<form enctype="multipart/form-data">
<input type="file" name="file">
</form>

复制代码

注意事项：

必须设置 enctype="multipart/form-data"，否则文件无法上传。
使用 FormData 可以通过 JavaScript 动态构建表单数据并发送。

六、进阶知识点

(一)微格式应用

登录后复制

<div class="h-card">
<span class="p-name">张三</span>
<a rel="nofollow" class="u-email" href="mailto:zhang@example.com">联系我</a>
</div>

复制代码

作用：通过特定的类名(如 h-card、p-name)为内容添加语义注解，便于机器解析和数据互换。
应用场景：

加强个人或组织的接洽信息。
提拔 SEO 和可访问性。

(二)严格模式与混杂模式

严格模式：标准渲染(有 DOCTYPE)。
混杂模式：向后兼容(无 DOCTYPE 或错误 DOCTYPE)。

DOCTYPE 声明决定了浏览器的渲染模式。标准模式(严格模式)严格按照 W3C 标准解析页面，而混杂模式则兼容旧版浏览器的举动。发起始终使用标准模式，以确保页面的兼容性和一致性。
七、实战问题解析

(一)图片点击热区

登录后复制

<img src="map.jpg" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="0,0,100,100" href="#">
</map>

复制代码

解释：<map> 和 <area> 元素用于定义图片的可点击区域，适用于创建复杂的交互式图片。
(二)解决图片下方清闲

登录后复制

img {
vertical-align: middle;
display: block; /* 或 */
}

复制代码

原理：
图片默认是行内元素，会受到行内布局的影响，导致下方出现清闲。通过设置 display: block 或调解 vertical-align，可以消除这种清闲。
结语

掌握这些 HTML 焦点知识点，不仅能帮助你在口试中脱颖而出，更能为实际开辟工作打下坚实基础。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/)