h5 笔试题及答案

h5笔试题及答案H5笔试题及答案一、选择题（30分，15题，每题2分）1.以下哪个HTML5标签用于定义文档的主要内容区域？A.<section>B.<article>C.<main>D.<content>答案：【C】解析：<main>标签是HTML5中专门用于定义文档的主要内容区域的标签，一个文档中应该只有一个<main>元素。<section>用于定义文档中的节，<article>用于定义独立的文章内容，<content>不是HTML5的标准标签。易错警示：许多开发者可能会混淆<section>和<main>的用途，<section>用于划分文档的不同部分，而<main>用于表示整个文档的核心内容。2.在CSS3中，以下哪个属性可以实现元素的圆角效果？A.border-radiusB.corner-radiusC.round-borderD.border-round答案：【A】解析：border-radius是CSS3中用于实现元素圆角效果的属性。它可以接受1-4个值，分别对应左上、右上、右下、左下角的圆角半径。corner-radius、round-border和border-round都不是CSS3的有效属性名。易错警示：初学者可能会混淆border-radius和其他类似名称的属性，记住标准属性名称是border-radius，而不是其他变体。3.以下哪个JavaScript方法可以用于获取DOM元素的尺寸？A.getSize()B.dimensions()C.getBoundingClientRect()D.measure()答案：【C】解析：getBoundingClientRect()是DOMAPI提供的方法，用于获取元素的大小及其相对于视口的位置。它返回一个DOMRect对象，包含left、top、right、bottom、width和height等属性。getSize()、dimensions()和measure()都不是标准的DOM方法。易错警示：开发者可能会误以为jQuery等库提供的方法是原生JavaScript方法，实际上getBoundingClientRect()是原生DOM方法，不需要任何库的支持。4.在HTML5中，以下哪个API可用于在客户端存储大量数据？A.CookiesB.localStorageC.sessionStorageD.WebSQL答案：【B】解析：localStorage是HTML5Web存储API的一部分，用于在客户端存储大量数据（通常为5MB左右），且数据没有过期时间，除非被手动清除。Cookies存储容量小（约4KB），且会随每次HTTP请求发送到服务器。sessionStorage与localStorage类似，但在浏览器关闭后数据会被清除。WebSQL已被废弃，不推荐使用。易错警示：许多开发者可能会混淆localStorage和sessionStorage的用途，localStorage的数据持久化存储，而sessionStorage仅在当前会话中有效。5.以下哪个CSS3属性可以实现元素的渐变背景？A.background-gradientB.gradient()C.linear-gradientD.background-image答案：【C】解析：linear-gradient是CSS3中用于创建线性渐变背景的函数，它可以作为background-image属性的值。background-gradient不是有效的CSS属性，gradient()也不是有效的CSS函数，虽然background-image可以用于设置背景，但它本身不是创建渐变的函数。易错警示：开发者可能会误以为background-gradient是有效的CSS属性，实际上正确的属性是通过background-image使用linear-gradient或radial-gradient函数。6.在HTML5中，以下哪个标签用于定义导航链接的容器？A.<navigation>B.<nav>C.<menu>D.<links>答案：【B】解析：<nav>是HTML5中专门用于定义导航链接的容器的语义化标签。<navigation>、<menu>和<links>都不是HTML5的标准标签。虽然<menu>在HTML4中存在，但在HTML5中已被重新定义用于命令菜单，而非导航链接。易错警示：开发者可能会混淆<nav>和<menu>的用途，<nav>用于页面导航，而<menu>用于命令式菜单，如上下文菜单。7.以下哪个JavaScript方法可以用于数组的遍历？A.loop()B.iterate()C.forEach()D.traverse()答案：【C】解析：forEach()是JavaScript数组原型上的一个方法，用于遍历数组中的每个元素并执行提供的函数。loop()、iterate()和traverse()都不是JavaScript数组的标准方法。易错警示：许多开发者可能会混淆forEach()和其他数组遍历方法如map()、filter()等，forEach()主要用于执行副作用，而不会修改原数组或返回新数组。8.在CSS3中，以下哪个属性可以实现元素的阴影效果？A.shadowB.box-shadowC.element-shadowD.drop-shadow答案：【B】解析：box-shadow是CSS3中用于为元素添加阴影效果的属性。它可以接受多个值，包括水平偏移、垂直偏移、模糊半径、扩展半径和颜色等。shadow、element-shadow和drop-shadow都不是有效的CSS属性名。易错警示：开发者可能会混淆box-shadow和text-shadow属性，box-shadow用于元素块级内容的阴影，而text-shadow专门用于文本阴影。9.以下哪个HTML5标签用于定义页面或区域的页脚？A.<bottom>B.<footer>C.<end>D.<foot>答案：【B】解析：<footer>是HTML5中专门用于定义页面或区域页脚内容的语义化标签。<bottom>、<end>和<foot>都不是HTML5的标准标签。易错警示：开发者可能会误以为<foot>是有效的HTML5标签，实际上正确的标签是<footer>，用于包含页脚信息，如作者信息、版权信息等。10.在JavaScript中，以下哪个关键字用于声明常量？A.constantB.finalC.constD.var答案：【C】解析：const是ES6引入的关键字，用于声明常量，一旦赋值就不能被修改。constant、final不是JavaScript中的关键字，var用于声明变量，可以多次赋值。易错警示：开发者可能会混淆const和let的用法，const声明的常量不能重新赋值，但其引用的对象属性是可以修改的，这一点与真正的常量不同。11.在HTML5中，以下哪个属性用于指定表单输入是否必填？A.mandatoryB.requiredC.necessaryD.must答案：【B】解析：required是HTML5中用于指定表单输入是否必填的布尔属性。如果设置了该属性，则用户必须填写该字段才能提交表单。mandatory、necessary和must都不是HTML表单输入的有效属性。易错警示：开发者可能会误以为required是CSS属性，实际上它是HTML表单元素的属性，用于表单验证。12.在CSS3中，以下哪个属性可以实现元素的过渡效果？A.transitionB.animateC.effectD.change答案：【A】解析：transition是CSS3中用于实现元素过渡效果的属性，它可以让属性值在一定时间内平滑变化。animate、effect和change都不是有效的CSS属性名。易错警示：开发者可能会混淆transition和animation属性，transition用于属性值的平滑过渡，而animation用于创建复杂的动画序列。13.以下哪个JavaScript方法可以用于将字符串转换为数字？A.toNumber()B.parseNumber()C.Number()D.convertToNumber()答案：【C】解析：Number()是JavaScript中用于将字符串转换为数字的全局函数。toNumber()、parseNumber()和convertToNumber()都不是JavaScript的标准函数。易错警示：开发者可能会混淆Number()和parseInt()或parseFloat()的区别，Number()会尝试将整个字符串转换为数字，而parseInt()和parseFloat()分别用于解析整数和浮点数。14.在HTML5中，以下哪个标签用于定义文章中的节？A.<part>B.<section>C.<segment>D.<division>答案：【B】解析：<section>是HTML5中用于定义文章中的节的语义化标签，它表示文档中的一个独立部分。<part>、<segment>和<division>都不是HTML5的标准标签，虽然<div>用于定义文档中的节，但它没有语义含义。易错警示：开发者可能会混淆<section>和<div>的用途，<section>具有语义含义，表示文档中的一个独立部分，而<div>仅用于布局和样式，没有语义。15.在CSS3中，以下哪个选择器用于选择具有特定属性的元素？A.[attr=value]B.attr=valueC..attr=valueD.attr=value答案：【A】解析：[attr=value]是CSS3中的属性选择器，用于选择具有特定属性且属性值等于指定值的元素。attr=value、.attr=value和attr=value都不是有效的CSS选择器语法。易错警示：开发者可能会混淆属性选择器和类选择器或ID选择器，属性选择器使用方括号[]，而类选择器使用点.，ID选择器使用。二、填空题（20分，10题，每题2分）1.HTML5中，用于定义文档标题的标签是______。答案：【<title>】解析：<title>标签用于定义HTML文档的标题，它显示在浏览器的标题栏或标签页上。这个标签位于<head>部分内，对于SEO和用户体验非常重要。易错警示：开发者可能会混淆<title>和<h1>标签，<title>定义整个文档的标题，而<h1>定义页面内容的标题级别。2.CSS3中，用于实现弹性布局的属性是______。答案：【display:flex】解析：display:flex是CSS3中用于创建弹性盒模型的属性，它使容器能够灵活地调整子元素的大小和位置，以适应不同的屏幕尺寸和设备。易错警示：开发者可能会混淆flex布局和grid布局，flex布局主要用于一维布局（行或列），而grid布局用于二维布局（行和列）。3.JavaScript中，用于声明函数的关键字是______。答案：【function】解析：function是JavaScript中用于声明函数的关键字，它可以用来定义命名函数或匿名函数。函数是JavaScript中的一等公民，可以作为值传递、存储在变量中或作为参数传递给其他函数。易错警示：开发者可能会混淆function和箭头函数的语法，箭头函数是ES6引入的函数简写形式，但它有自己的this绑定规则，与普通函数不同。4.HTML5中，用于定义页面主要内容区域的标签是______。答案：【<main>】解析：<main>标签是HTML5中专门用于定义文档的主要内容区域的标签，一个文档中应该只有一个<main>元素。它应该包含与文档中心主题相关的内容，而不是重复的导航、页眉或页脚内容。易错警示：开发者可能会错误地在页面中使用多个<main>标签，根据HTML5规范，一个文档中只能有一个<main>元素。5.CSS3中，用于实现元素变形的属性是______。答案：【transform】解析：transform是CSS3中用于对元素进行2D或3D变换的属性，它可以旋转、缩放、倾斜或平移元素。常见的变换函数包括rotate()、scale()、skew()和translate()。易错警示：开发者可能会混淆transform和transition属性，transform用于改变元素形状，而transition用于实现属性变化的平滑过渡。6.JavaScript中，用于处理异步操作的关键字是______。答案：【async】解析：async是ES7引入的关键字，用于声明异步函数，它使函数返回一个Promise。异步函数可以使用await关键字来等待Promise的解决，从而简化异步代码的编写。易错警示：开发者可能会混淆async/await和Promise的用法，async/await实际上是基于Promise的语法糖，它使异步代码看起来更像同步代码。7.HTML5中，用于定义导航链接的标签是______。答案：【<nav>】解析：<nav>标签是HTML5中专门用于定义导航链接的语义化标签，它通常包含指向其他页面或页面内部部分的链接。导航链接可以是主导航、侧边栏导航或页脚导航等。易错警示：开发者可能会错误地将<nav>用于非导航链接，<nav>应该仅用于包含导航链接的区块，不应包含其他类型的链接。8.CSS3中，用于实现媒体查询的规则是______。答案：【@media】解析：@media是CSS3中用于定义媒体查询的规则，它允许根据设备的特性（如屏幕宽度、高度、方向等）应用不同的样式。媒体查询是实现响应式设计的关键技术。易错警示：开发者可能会混淆@media和@supports规则，@media用于基于设备特性应用样式，而@supports用于检测浏览器是否支持特定的CSS属性。9.JavaScript中，用于定义类声明的关键字是______。答案：【class】解析：class是ES6引入的关键字，用于定义类的声明，它是基于原型的面向对象编程的语法糖。类可以包含构造函数、方法和属性，使代码更加结构化和可维护。易错警示：开发者可能会混淆class和构造函数的继承方式，class使用extends关键字实现继承，而构造函数通常使用prototype属性实现继承。10.HTML5中，用于定义页面或区域的页脚的标签是______。答案：【<footer>】解析：<footer>标签是HTML5中专门用于定义页面或区域页脚内容的语义化标签，它通常包含作者信息、版权信息、联系方式或相关链接等。易错警示：开发者可能会错误地将<footer>放在页面内容区域，<footer>应该作为文档结构的最后一个主要部分，而不是内容的一部分。三、判断题（10分，5题，每题2分）1.HTML5中的<video>标签支持多种视频格式，包括MP4、WebM和OGV。答案：【正确】解析：<video>标签确实支持多种视频格式，包括MP4（H.264编码）、WebM（VP8/VP9编码）和OGV（Theora编码）。不同的浏览器可能支持不同的格式，因此提供多种格式可以提高兼容性。易错警示：开发者可能会误以为<video>标签支持所有视频格式，实际上它主要支持这三种格式，其他格式可能需要转换或使用第三方库。2.CSS3中的transition属性可以实现动画效果。答案：【错误】解析：CSS3中的transition属性主要用于实现属性值的平滑过渡，而不是创建复杂的动画效果。对于动画效果，应该使用animation属性和@keyframes规则。transition需要触发条件（如:hover状态），而animation可以自动播放。易错警示：开发者可能会混淆transition和animation的用途，transition适合简单的状态变化，而animation适合复杂的、多步骤的动画序列。3.JavaScript中的var声明的变量具有函数作用域。答案：【正确】解析：JavaScript中var声明的变量具有函数作用域，意味着它们在声明它们的函数内是可访问的，无论在函数的哪个位置声明。这与let和const声明的变量具有块级作用域不同。易错警示：开发者可能会混淆var、let和const的作用域，var的作用域是函数级别的，而let和const的作用域是块级别的。4.HTML5中的canvas元素不支持透明背景。答案：【错误】解析：HTML5中的canvas元素完全支持透明背景。默认情况下，canvas的背景是透明的，可以通过设置globalAlpha属性或使用rgba()颜色值来实现透明效果。易错警示：开发者可能会误以为canvas默认有不透明背景，实际上canvas默认是透明的，可以放置在其他元素之上，显示底层内容。5.CSS3中的flex布局可以同时控制主轴和交叉轴的方向。答案：【正确】解析：CSS3中的flex布局可以同时控制主轴（由flex-direction属性决定）和交叉轴（垂直于主轴）的方向。通过flex-direction、flex-wrap、justify-content和align-items等属性，可以灵活地控制flex容器中项目的排列方式。易错警示：开发者可能会混淆flex-direction和justify-content的用途，flex-direction决定主轴方向，而justify-content决定主轴上的对齐方式。四、简答题（20分，4题，每题5分）1.简述HTML5中的语义化标签及其优势。答案：【HTML5引入了许多语义化标签，如<header>、<nav>、<main>、<article>、<section>、<aside>和<footer>等。这些标签具有明确的含义，能够清晰地描述内容的结构和用途。语义化标签的优势包括：1）提高可访问性，使屏幕阅读器等辅助技术能够更好地理解页面结构；2）改善SEO，搜索引擎能够更好地理解页面内容，提高排名；3）提高代码可读性和可维护性，使代码结构更加清晰；4）减少对CSS和JavaScript的依赖，通过默认样式提供更好的用户体验。】解析：语义化标签是HTML5的重要特性，它们用更有意义的标签描述内容，而不是使用无语义的<div>标签。语义化标签的定义是基于内容的含义，而不是它的外观。这些标签的优势体现在多个方面：可访问性方面，语义化标签为屏幕阅读器等辅助技术提供了明确的上下文，使残障用户能够更好地理解页面内容；SEO方面，搜索引擎能够更好地解析页面结构，识别重要内容，从而提高网站在搜索结果中的排名；代码可维护性方面，语义化标签使代码结构更加清晰，便于团队协作和后期维护；用户体验方面，语义化标签提供了默认样式，减少了开发者的工作量。易错警示：开发者可能会误以为语义化标签仅用于SEO，实际上它们对可访问性和代码维护同样重要，应该根据内容的含义选择合适的标签，而不是仅考虑样式效果。2.解释CSS3中的弹性盒模型（Flexbox）及其主要属性。答案：【CSS3中的弹性盒模型（Flexbox）是一种一维布局方法，用于在容器中灵活地排列和对齐项目。它主要包含以下属性：1）display:flex-将容器设置为弹性盒子；2）flex-direction-定义主轴方向（row、row-reverse、column、column-reverse）；3）flex-wrap-定义项目是否换行（nowrap、wrap、wrap-reverse）；4）justify-content-定义主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around、space-evenly）；5）align-items-定义交叉轴上的对齐方式（stretch、flex-start、flex-end、center、baseline）；6）align-content-定义多行项目的对齐方式（flex-start、flex-end、center、space-between、space-around、stretch）。Flexbox使布局更加灵活，能够适应不同屏幕尺寸和内容变化。】解析：弹性盒模型（Flexbox）是CSS3中强大的布局工具，它解决了传统布局方法（如float和position）的许多限制。Flexbox的核心概念是容器和项目，容器通过display:flex设置为弹性盒子，项目则是容器内的直接子元素。flex-direction属性决定了主轴的方向，可以是水平（row）或垂直（column）。flex-wrap属性控制项目是否换行，当一行空间不足时，nowrap会导致项目被压缩，而wrap则会换行。justify-content属性控制项目在主轴上的分布方式，align-items属性控制项目在交叉轴上的对齐方式，align-content属性则用于多行项目在交叉轴上的对齐。Flexbox的优势在于它能够轻松实现居中、等高布局、响应式设计等复杂布局需求，而不需要依赖额外的技巧或计算。易错警示：开发者可能会混淆flex-direction和justify-content的用途，flex-direction决定了主轴的方向，而justify-content决定了项目在主轴上的分布方式，两者协同工作才能实现预期的布局效果。3.说明JavaScript中的Promise及其三种状态。答案：【Promise是JavaScript中用于处理异步操作的对象，它代表了一个异步操作的最终完成或失败。Promise有三种状态：1）pending（进行中）-初始状态，表示异步操作尚未完成；2）fulfilled（已成功）-表示异步操作成功完成，并返回了一个值；3）rejected（已失败）-表示异步操作失败，并返回了一个错误原因。一旦Promise的状态从pending变为fulfilled或rejected，它就会保持该状态不变，这个过程被称为"settled"。Promise提供了then()、catch()和finally()方法来处理异步操作的结果，其中then()用于处理成功情况，catch()用于处理失败情况，finally()用于无论成功还是失败都会执行的清理操作。】解析：Promise是ES6引入的重要特性，它解决了传统回调函数的"回调地狱"问题。Promise的核心思想是将异步操作封装成一个对象，通过状态来表示异步操作的不同阶段。pending状态表示异步操作正在进行中，此时可以转换为fulfilled或rejected状态；fulfilled状态表示异步操作成功完成，此时会调用then()方法中注册的回调函数；rejected状态表示异步操作失败，此时会调用catch()方法中注册的回调函数。Promise的不可变性是一个重要特性，一旦状态改变，就不会再次改变。Promise还支持链式调用，可以方便地处理多个异步操作的顺序执行。此外，Promise.all()和Promise.race()方法可以用于处理多个Promise的并行操作。易错警示：开发者可能会混淆Promise和async/await的关系，async/await实际上是基于Promise的语法糖，它使异步代码看起来更像同步代码，但底层仍然是Promise机制。4.描述HTML5中的Web存储（WebStorage）及其与Cookie的区别。答案：【HTML5中的Web存储提供了在客户端存储数据的两种机制：localStorage和sessionStorage。localStorage用于存储长期数据，没有过期时间，除非被手动清除；sessionStorage用于存储会话数据，当浏览器关闭时数据会被清除。Web存储与Cookie的主要区别包括：1）存储容量：Web存储通常为5MB或更大，而Cookie通常为4KB；2）数据传输：Web存储数据不会随HTTP请求发送到服务器，而Cookie会；3）数据类型：Web存储可以存储任何JavaScript对象类型，而Cookie只能存储字符串；4）过期时间：Web存储没有过期时间（localStorage）或仅在会话期间有效（sessionStorage），而Cookie可以设置过期时间；5）访问方式：Web存储通过JavaScriptAPI访问，而Cookie通过document.cookie访问。Web存储更适合客户端数据存储，而Cookie主要用于服务器端需要读取的数据。】解析：Web存储是HTML5引入的重要特性，它解决了Cookie在客户端数据存储方面的局限性。localStorage和sessionStorage都是键值对存储方式，但它们的持久性不同。localStorage的数据会一直保留，直到被明确删除或用户清除浏览器数据；sessionStorage的数据仅在当前会话中有效，当浏览器关闭时数据会被清除。Web存储与Cookie相比有明显的优势：更大的存储容量使它可以存储更多的数据；数据不会随HTTP请求发送到服务器，减少了网络流量；支持存储复杂的数据类型，如对象和数组，而不需要序列化；更灵活的过期时间控制。然而，Web存储也有局限性，如不支持跨域访问、没有内置的过期机制（localStorage）等。易错警示：开发者可能会误以为Web存储数据是安全的，实际上它存储在客户端，可能会被恶意脚本访问，对于敏感数据仍应考虑加密或使用服务器端存储。五、计算题（10分，2题，每题5分）1.计算以下CSS3transform变换后的元素位置和尺寸：```css.box{width:200px;height:100px;transform:translate(50px,30px)scale(1.5,0.8)rotate(45deg);}```答案：【经过变换后，元素的位置将向右移动50px，向下移动30px；元素的宽度变为300px（200px1.5），高度变为80px（100px0.8）；元素将顺时针旋转45度。需要注意的是，旋转是围绕元素的中心点进行的，这会影响元素在页面上的最终位置和显示效果。】解析：CSS3的transform属性可以同时应用多种变换，变换的顺序很重要，因为后面的变换会基于前面的变换结果。在这个例子中，首先应用translate(50px,30px)变换，将元素向右移动50px，向下移动30px；然后应用scale(1.5,0.8)变换，将元素的宽度放大1.5倍（200px1.5=300px），高度缩小到原来的0.8倍（100px0.8=80px）；最后应用rotate(45deg)变换，将元素顺时针旋转45度。旋转是围绕元素的中心点进行的，这意味着旋转后元素的四个角都会移动到新的位置，可能会影响页面布局。计算变换后的位置时，需要考虑所有变换的累积效果。易错警示：开发者可能会忽略变换顺序的重要性，实际上CSS中的变换是从右到左应用的，即rotate(45deg)最先应用，然后是scale(1.5,0.8)，最后是translate(50px,30px)，这与阅读顺序相反。2.计算以下JavaScript代码的执行结果：```javascriptconstnumbers=[1,2,3,4,5];constresult=numbers.map(x=>x2).filter(x=>x>5).reduce((acc,curr)=>acc+curr,0);console.log(result);```答案：【代码的执行结果是24。计算过程如下：1）map(x=>x2)将数组[1,2,3,4,5]转换为[2,4,6,8,10]；2）filter(x=>x>5)筛选出大于5的元素，得到[6,8,10]；3）reduce((acc,curr)=>acc+curr,0)将数组元素求和，初始值为0，计算过程为0+6=6，6+8=14，14+10=24，最终结果为24。】解析：这段代码使用了JavaScript数组的三个高阶函数：map、filter和reduce，它们是函数式编程的重要概念。map函数对数组中的每个元素应用指定的函数，并返回一个新数组，这里将每个元素乘以2；filter函数根据指定的条件过滤数组元素，这里只保留大于5的元素；reduce函数将数组元素逐个处理并累积成一个值，这里将所有元素相加，初始值为0。计算过程可以分为三个步骤：首先，原始数组[1,2,3,4,5]经过map变换后变成[2,4,6,8,10]；然后，经过filter过滤后变成[6,8,10]；最后，经过reduce求和后得到24。易错警示：开发者可能会忽略reduce函数的初始值，如果不提供初始值（即第二个参数），reduce会使用数组的第一个元素作为初始值，这可能导致意外行为，特别是在处理空数组时。六、材料综合题（10分）1.阅读以下HTML、CSS和JavaScript代码，分析其实现的功能，并解释各部分代码的作用：```html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>交互式图片画廊</title><style>{box-sizing:border-box;margin:0;padding:0;}body{font-family:Arial,sans-serif;line-height:1.6;background-color:f4f4f4;padding:20px;}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-bottom:30px;}.gallery-item{position:relative;overflow:hidden;border-radius:8px;box-shadow:04px8pxrgba(0,0,0,0.1);transition:transform0.3sease;}.gallery-item:hover{transform:scale(1.05);}.gallery-itemimg{width:100%;height:200px;object-fit:cover;display:block;}.gallery-item.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);color:white;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;transition:opacity0.3sease;}.gallery-item:hover.overlay{opacity:1;}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.9);z-index:1000;}.modal-content{position:relative;max-width:90%;max-height:90%;margin:auto;top:50%;transform:translateY(-50%);}.modal-contentimg{width:100%;height:auto;display:block;border-radius:8px;}.close{position:absolute;top:20px;right:40px;color:white;font-size:40px;font-weight:bold;cursor:pointer;}.close:hover{color:ccc;}@media(max-width:768px){.gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}.gallery-itemimg{height:150px;}}</style></head><body><h1>交互式图片画廊</h1><divclass="gallery"id="gallery"></div><divclass="modal"id="modal"><spanclass="close">×</span><divclass="modal-content"><imgid="modal-image"src=""alt=""></div></div><script>document.addEventListener('DOMContentLoaded',function(){constgallery=document.getElementById('gallery');constmodal=document.getElementById('modal');constmodalImage=document.getElementById('modal-image');constcloseBtn=document.querySelector('.close');//图片数据constimages=[{src:'https://picsum.photos/seed/img1/400/300.jpg',alt:'风景图片1',title:'美丽的山脉'},{src:'https://picsum.photos/seed/img2/400/300.jpg',alt:'风景图片2',title:'宁静的湖泊'},{src:'https://picsum.photos/seed/img3/400/300.jpg',alt:'风景图片3',title:'繁华的城市'},{src:'https://picsum.photos/seed/img4/400/300.jpg',alt:'风景图片4',title:'金色的沙滩'},{src:'https://picsum.photos/seed/img5/400/300.jpg',alt:'风景图片5',title:'茂密的森林'},{src:'https://picsum.photos/seed/img6/400/300.jpg',alt:'风景图片6',title:'雄伟的建筑'}];//创建画廊项目functioncreateGalleryItem(image){constitem=document.createElement('div');item.className='gallery-item';constimg=document.createElement('img');img.src=image.src;img.alt=image.alt;constoverlay=document.createElement('div');overlay.className='overlay';consttitle=document.createElement('h3');title.textContent=image.title;constdescription=document.createElement('p');description.textContent='点击查看大图';overlay.appendChild(tit