前端开发者必会的HTML面试题TOP 10
嘿，前端小伙伴们！👋 无论你是准备第一次面试还是为下一次重要机会做准备，必须掌握HTML。这里有一份精心整理过的最常见的HTML面试问题，附带实用示例。让我们开始吧！🚀
……
1. 什么是语义化的HTML标签?
语义标签清晰地描述了它们在网页中的用途。它们让代码更易读，从而提升SEO。📝
例子:
<!-- 代码的语义化 -->
<header>
<h1>欢迎来到我的博客</h1>
</header>
<article>
<h2>如何写代码</h2>
<p>可以从基础知识学起...</p>
</article>
<!-- 非语义化的结构 -->
<div class="header">
<h1>欢迎来到我的博客</h1>
</div>
<div class="content">
<h2>如何写代码</h2>
<p>可以从基础知识学起...</p>
</div>
全屏 退出全屏
这很重要的是： 语义标签有助于提高可访问性，还能帮助搜索引擎更好地理解你的内容。
此处省略部分内容
2. id 和 class 特性的区别是什么？
id：唯一的标识符，每页只能用一次。class：可以多次重复使用，用于样式或分组。
例子:
<!-- 使用 id -->
<div id="main-header">欢迎!</div>
<!-- 使用 class -->
<div class="card">卡1</div>
<div class="card">卡2</div>
进入全屏模式，然后退出全屏模式
小提示: 对于像例如头部或尾部这样的唯一元素使用 id 标签，使用 class 标签来定义可复用组件。
此处省略内容
或
此处省略
3. HTML中的空元素指的是什么？
空元素是自闭合的，没有结束标签。
例子：
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="image.jpg" alt="一张美丽的图片">
<input type="text" placeholder="请输入你的名字">
<hr>全屏进入，全屏退出
你知道吗？给自闭合元素加闭合标签是无效的 HTML！
……
4. 如何在网页中加入JavaScript？
这里有三种方法可以引入JavaScript：
内嵌:
<button onclick="alert('嗨！')">点击这里</button>全屏模式 退出全屏
2) 内部:
<script>
console.log('来自内部脚本的问候！');
</script>进入全屏，退出全屏
3) 外部的：，
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="script.js"></script> <!-- 这里加载的是 script.js 文件 -->点击全屏观看 点击退出全屏
小贴士: 最好用外部脚本哦。🛠️ 这样可以让代码更清晰，职责更分明。
5. 图片的alt属性的作用是什么？
alt 属性值为图片提供替代文本，当图片无法显示时，或用于屏幕阅读器。
比如说:
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="logo.png" alt="公司logo">进入全屏，退出全屏
为什么这很重要：这能提升SEO排名并增强可访问性。
6. HTML中内联(inline)元素、块(block)元素和内联块(inline-block)元素之间有什么不同？
- 行内: 不会另起一行，并且仅占用所需的宽度，
- 块: 会另起一行，并且占用全部可用宽度，
- 行内块: 行为类似于行内元素，但可以设置宽度和高度，
例子:
<!-- 内联 -->
<span>这是内联</span>
<span>另一个内联行内</span>
<!-- 块级 -->
<div>这是块级</div>
<div>另一个块级行内</div>
<!-- 内联块 -->
<div style="display: inline-block; width: 100px;">内联块 1</div>
<div style="display: inline-block; width: 100px;">内联块 2</div>
全屏查看，退出全屏
技巧提示: 当你需要并排元素并指定它们的尺寸时，可以使用 inline-block。
7. HTML中的数据属性有哪些？
自定义属性可以用来存储额外数据，而不会让你的 DOM 变得很乱。
例子:
<button data-user-id="123" onclick="handleClick(this)">点击这里</button>
<script>
function handleClick(button) {
alert(`用户ID是：${button.dataset.userId}`);
}
</script>全屏 退出全屏
为什么它们方便：适合将数据传递给JavaScript，而无需手动编码。
8. 如何让你的HTML元素更易于访问？
- 使用恰当的语义标记。
- 添加
aria-*属性来提高屏幕阅读器的兼容性。
例子:
<button aria-label="提交">提交</button>点击全屏, 点击退出全屏
小提示: 用屏幕阅读器测试您的网站，以确保网站真正易用。🌟
9. <link> 和 <a> 标签有什么不同？
<link>：定义文档与外部资源（例如 CSS）之间的链接关系。<a>：创建链接。
例子
<!-- 链接标签 -->
<link rel="stylesheet" href="styles.css">
<a href="https://dev.to">访问DEV社区网站</a>切换到全屏，退出全屏
小贴士: 不要搞混这两个，一个管资源，另一个管导航！
10. 什么是doctype声明？
<!DOCTYPE> 说明了网页文档用的是哪个 HTML 版本。
例子:
<!DOCTYPE html>
<html>
<head>
<title>我的主页</title>
</head>
<body>
<p>你好，世界！</p>
</body>
</html>点击全屏 点击退出全屏
趣味小知识: 即使没有 doctype，现代浏览器也会默认采用 HTML5，但最好还是加上它。
来啦！🎉
来测试一下你的知识吧！在下面的评论区回答哦👍无需在表情符号前加空格，所以最终翻译为：来测试一下你的知识吧！在下面的评论区回答哦💬
定义一个导航菜单你会用什么标签？
- a)
<div>（div容器） - b)
<nav>（导航元素） - c)
<section>（section区块）
- 哪个属性可以唯一标识DOM中的元素？
-
a)
类名(class) -
b)
ID - c)
样式属性(style)
- 对或错：
<img>标签是语义化的 HTML 标签（或语义标签）吗？
留言在下面讨论吧！ 🎲
共同学习，写下你的评论
评论加载中...
作者其他优质文章
