首页只用HTML的表格实现照片墙完整代码，不用不用css和js

只用HTML的表格实现照片墙完整代码，不用不用css和js

时间: 2024-09-28 09:11:15 浏览: 72

创建一个基本的HTML照片墙，不使用CSS和JS，你可以使用纯HTML来展示图片，但样式和交互功能会非常有限。下面是一个简单的例子，假设你有一系列图片，每张图片都有一个共同的class，比如"photo"： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> </head> <body>  <table border="1" style="width: 100%; max-width: 960px;"> <tr>  <template id="photo-template"> <td class="photo" onclick="this.style.display = this.style.display === 'none' ? '' : 'none';">  <img src="path_to_your_image.jpg" alt="Image description"> </td> </template>  <script> // 假设图片数组如下 const images = [ "image1.jpg", "image2.jpg", "image3.jpg", ... // 更多图片 ]; for (let i = 0; i < images.length; i++) { const imgElement = document.importNode(document.getElementById("photo-template").content, true); imgElement.querySelector("img").src = images[i]; document.body.appendChild(imgElement); } </script> </tr> </table> </body> </html> ``` 这个代码将图片作为表格单元格（td）添加到页面上，并设置了点击事件来切换图片的可见性。然而，这只是一个基础示例，实际的布局和美观效果将会受限于默认的表格样式，没有CSS的话，图片排列、间距等样式控制将很困难。

阅读全文