当前位置：首页 > news >正文

Web前端面试题

news 2025/9/14 5:56:40

Web前端面试题(附答案及解析)（2025.9月最新版）-CSDN博客

1.布局标签（语义化标签）

2.块元素、行内元素、行内块元素

3.HTML4、HTML5、XML 和 XHTML 之间的区别

4.DOCTYPE(⽂档类型) 的作用

5.localStorage、sessionStorage、cookie

6.网站TDK三大标签以及SEO优化

7.img标签的title属性与alt属性

alt与title的关键区别

8.src 和 href 的区别

src属性的加载行为

href属性的加载行为

9.title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别

常见误区

10.iframe的基本介绍与使用

iframe的主要用途

iframe基本属性

1.布局标签（语义化标签）

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5语义化标签讲解</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;line-height: 1.6;color: #333;max-width: 1200px;margin: 0 auto;padding: 20px;}header,nav,article,section,aside,footer {padding: 20px;margin-bottom: 20px;border-radius: 5px;border: 1px solid #ddd;}header {background-color: #ffcccb;/* 浅红色 */text-align: center;border: 2px solid #ff6b6b;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}nav {background-color: #c5e1a5;/* 浅绿色 */border: 2px solid #8bc34a;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}nav ul {display: flex;list-style: none;justify-content: space-around;}nav a {text-decoration: none;color: #33691e;font-weight: bold;padding: 5px 10px;border-radius: 3px;transition: background-color 0.3s;}nav a:hover {background-color: #8bc34a;color: white;}.main-content {display: flex;}article {flex: 2;background-color: #bbdefb;/* 浅蓝色 */margin-right: 20px;border: 2px solid #64b5f6;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}section {background-color: #e3f2fd;/* 更浅的蓝色 */margin-bottom: 15px;border: 1px solid #90caf9;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}aside {flex: 1;background-color: #ffe0b2;/* 浅橙色 */border: 2px solid #ffb74d;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}footer {background-color: #d1c4e9;/* 浅紫色 */text-align: center;border: 2px solid #b39ddb;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}.tag-name {color: #e63946;font-weight: bold;background-color: #f8f8f8;padding: 2px 6px;border-radius: 4px;border: 1px dashed #999;}.tag-description {margin-bottom: 10px;padding: 5px;background-color: rgba(255, 255, 255, 0.5);border-radius: 4px;}h3 {border-bottom: 2px solid rgba(0, 0, 0, 0.1);padding-bottom: 5px;margin-bottom: 10px;}</style>
</head><body><header><p>header</p><h1>HTML5语义化标签讲解</h1><p>了解HTML5中新增的布局标签及其用途</p></header><nav><p>nav</p><ul><li><a href="#header">Header</a></li><li><a href="#nav">Nav</a></li><li><a href="#article">Article</a></li><li><a href="#section">Section</a></li><li><a href="#aside">Aside</a></li><li><a href="#footer">Footer</a></li></ul></nav><div class="main-content"><article><p>article</p><h2>HTML5语义化标签详解</h2><section id="header"><p>section</p><h3><span class="tag-name">&lt;header&gt;</span> - 头部标签</h3><p class="tag-description">用于定义文档或节的页眉，通常包含网站标志、主导航、标题等。</p><p>示例：本页面顶部的标题区域就是使用 &lt;header&gt; 标签创建的。</p></section><section id="nav"><p>section</p><h3><span class="tag-name">&lt;nav&gt;</span> - 导航标签</h3><p class="tag-description">用于定义导航链接的部分，如菜单、目录和索引等。</p><p>示例：本页面的导航菜单使用 &lt;nav&gt; 标签创建。</p></section><section id="article"><p>section</p><h3><span class="tag-name">&lt;article&gt;</span> - 内容标签</h3><p class="tag-description">表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。</p><p>示例：博客文章、新闻故事、用户评论或交互式组件等都适合使用 &lt;article&gt; 标签。</p></section><section id="section"><p>section</p><h3><span class="tag-name">&lt;section&gt;</span> - 区域标签</h3><p class="tag-description">表示文档中的一个区域（或节），比如章节、页眉、页脚或文档中的其他部分。</p><p>示例：本页面中每个标签的讲解部分都使用 &lt;section&gt; 标签创建。</p></section></article><aside><p>aside</p><h3 id="aside"><span class="tag-name">&lt;aside&gt;</span> - 侧边栏标签</h3><p class="tag-description">用于表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分。</p><p>示例：侧边栏、广告、导航条，或者页面主内容之外的其他内容。</p></aside></div><footer id="footer"><p>footer</p><h3><span class="tag-name">&lt;footer&gt;</span> - 底部标签</h3><p class="tag-description">定义文档或节的页脚，通常包含作者信息、版权信息、联系信息等。</p><p>示例：本页面底部的版权信息区域使用 &lt;footer&gt; 标签创建。</p><p style="margin-top: 15px;">© 2025 HTML5语义化标签学习 | 创建于 2025/9/12</p></footer><script>// 简单的交互脚本，当点击导航链接时平滑滚动到对应部分document.querySelectorAll('nav a').forEach(anchor => {anchor.addEventListener('click', function (e) {e.preventDefault();const targetId = this.getAttribute('href');document.querySelector(targetId).scrollIntoView({behavior: 'smooth'});});});</script>
</body></html>