html 相关问题

HTML（超文本标记语言）是用于构造网页和格式化内容的标准标记语言。 HTML在语义上描述了网站的结构以及用于表示的提示，使其成为标记语言，而不是编程语言。 HTML主要与CSS和JavaScript结合使用，为页面添加样式和行为。 HTML规范的最新修订版是HTML5.2。

有没有办法在我的网站上添加褶边？

我无法访问 ruffle.js 上的代码，当我尝试使用其他方法时，它说扩展已被阻止，但 ruffle 已在这台计算机上运行，有人帮忙吗？ “我的”代码是：我无法访问 ruffle.js 上的代码，当我尝试使用其他方法时，它说扩展已被阻止，但 ruffle 已在这台计算机上运行，有人帮忙吗？ “我的”代码是： <!DOCTYPE HTML> <html> <head> <meta charset='utf8'> </head> <body> <div id='ruffle'></div> <script> window.RufflePlayer = window.RufflePlayer || {}; window.addEventListener("DOMContentLoaded", () => { let ruffle = window.RufflePlayer.newest(); let player = ruffle.createPlayer(); let container = document.getElementById("container"); container.appendChild(player); player.load("movie.swf"); }); </script> <script src="https://flash-games.penguinbotcoder.repl.co/ruffle/ruffle.js"></script> <object width="600" height="400"> <param name="movie" value="https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf"> <embed src="https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf"> </embed> </object> <script src="path/to/ruffle/ruffle.js"></script> </body> <div class=ruffle> </div> <p>This is a test page for flash content</p> </html> 正如我在上面所说的，它只是不起作用:( 我不太明白到底是什么问题，但这是我从你的代码中注意到的：您正在尝试通过 id container 获取元素，但 HTML 中没有该元素，我认为您尝试使用 id ruffle 的元素。 window.addEventListener("DOMContentLoaded", () => { let ruffle = window.RufflePlayer.newest(); let player = ruffle.createPlayer(); let container = document.getElementById("ruffle"); container.appendChild(player); player.load("movie.swf"); }); 更新：如果仍然无法正常工作，请尝试此示例代码并查看它是否加载 Flash 内容... <!DOCTYPE HTML> <html> <head> <meta charset='utf8'> </head> <body> <script src="https://flash-games.penguinbotcoder.repl.co/ruffle/ruffle.js"></script> <div id='ruffle'></div> <p>This is a test page for Adobe Flash content</p> </body> <script> window.RufflePlayer = window.RufflePlayer || {}; window.addEventListener("DOMContentLoaded", start_Ruffle, false ); function start_Ruffle() { let ruffle = window.RufflePlayer.newest(); let player = ruffle.createPlayer(); let container = document.getElementById("ruffle"); container.appendChild(player); player.load("https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf"); } </script> </html> 确保您的 Ruffle 脚本路径和 Flash 文件可访问，因为我https://flash-games.penguinbotcoder.repl.co/ruffle/ruffle.js和path/to/ruffle/ruffle.js无法访问它们。当前 Ruffle 的屏幕截图，位于 https://flash-games.penguinbotcoder.repl.co/ruffle/ruffle.js 返回 308 永久重定向您可以尝试将 Ruffle 路径更新到位于 https://unpkg.com/@ruffle-rs/ruffle 的 CDN 版本或自行托管。你的代码应该是这样的 <!DOCTYPE HTML> <html> <head> <meta charset='utf8'> </head> <body> <div id='ruffle'></div> <script> window.RufflePlayer = window.RufflePlayer || {}; window.addEventListener("DOMContentLoaded", () => { let ruffle = window.RufflePlayer.newest(); let player = ruffle.createPlayer(); let container = document.getElementById("container"); container.appendChild(player); }); </script> <script src="https://unpkg.com/@ruffle-rs/ruffle"></script> <object width="600" height="400"> <param name="movie" value="https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf"> <embed src="https://flash-games.penguinbotcoder.repl.co/flashgames/thinice.swf" /> </object> <p>This is a test page for flash content</p> </body> </html> 请注意，我无法访问您的 Flash 文件。

html css web flash ruffle

回答 2 投票 0

在 iPhone 上退出 iframe s3 视频时网站返回页面

每当我点击左上角的 X 关闭全屏视频时，网站就会返回一个页面。此行为仅发生在 iPhone 上，而不发生在 Android 或笔记本电脑上的浏览器上（我还没有测试过

javascript html jquery

回答 1 投票 0

如何计算数组子级的深度 - Vue.js

我希望计算深度方法能够正确计算深度，而是反向计算，将第一个元素分配为深度 2，第二个元素分配为深度 1，第三个元素分配为

javascript html vue.js vuejs2

回答 2 投票 0

如何将网格单元的高度设置为等于兄弟的具体高度？

我有一个网格和子网格。这些行包含重复的 [ 包含 []] 对，后跟 []。我想要每个图像容器的高度（class =“frame”... 我有一个网格和子网格。这些行包含重复的 [<div> containing [<img>]] followed by [<p>] 对。我希望每个图像容器（class =“frame”）的高度与其兄弟姐妹<p>高度相匹配，即 img 容器高度 = 同级 p 高度（p 不换行时行高 x1，p 换行时 x2 或更高）。我尝试了div.frame height=100%，但由于某种原因它没有调整图像的大小。我还尝试了另一个线程中发现的技巧：设置 height=0 和 min-height=100%，但这似乎会导致与内容宽度不匹配的列溢出问题。我可以设置一个具体的高度，如 0 或 80px，但如果文本发生变化，它不会缩放。我希望一些框架高度设置可以解决这个问题，但是我不知道。这是我到目前为止所拥有的： HTML * { margin: 0; padding: 0; } body { background-color: tan; color: black; } div.grid { display: grid; grid-template: repeat(2, auto auto) / repeat(4, max-content); } .grid > div.row { grid-column: span 4; display: grid; grid-template-columns: subgrid; background-color: antiquewhite; } .row > div.cell { grid-column: span 2; display: grid; grid-template-columns: subgrid; } .cell > div.frame { max-height: 100%; height: 100%; } .frame > img.icon { max-width: 100%; max-height: 100%; } .cell > p.note { width: min-content; } <div class=grid> <div class="row"> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Matthew Patel</p> </div> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Lucas Lee</p> </div> </div> <div class="row"> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Todd Ingram</p> </div> <div class="cell"> <div class="frame"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> </div> <p class="note">Roxie Richter</p> </div> </div> </div> 我选择了这种布局，因为即使在不同的图像尺寸下，网格似乎也能保持对齐。不管怎样，我就是这样走到这一步的。也许我没理解“100%”？感谢帮助和反馈。我会首先简化你的 HTML 结构，然后更新 CSS，如下所示。 body { background-color: tan; color: black; margin 0; } .grid { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 20px; background-color: antiquewhite; width: fit-content; } .cell { display: grid; grid-template-columns: 1fr 1fr; } img.icon { height: 0; min-height: 100%; } .cell > p.note { width: min-content; } <div class=grid> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Matthew Patel</p> </div> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Lucas Lee</p> </div> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Todd Ingram</p> </div> <div class="cell"> <img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Emoji_u1f0cf.svg"> <p class="note">Roxie Richter</p> </div> </div>

html css css-grid responsive-images subgrid

回答 1 投票 0

在其父元素旋转时保留子元素的 3d

我有一个可以旋转的元素，在它的内部有.pop-out-item。这上面有translateZ(500px)。当旋转元素（.rotator--child）旋转时，.pop-out-item 保持“attached&qu...

html css

回答 1 投票 0

我如何修复我的CSS，以便宽度同时考虑填充和边框？

简单来说，我希望我这里的侧边栏是页面宽度的20%，而文章本身是80%。由于我不同部分的填充，宽度是偏移的，这意味着我必须......

html css width padding sizing

回答 1 投票 0

我无法在 Python 中使用 Selenium 选择特定选项

我正在尝试使用 Selenium 和 Python 选择此标签中的选项“Yazar”。但是，我无法单击此按钮并选择选项“Yazar”。怎么做？我正在尝试使用 Selenium 和 Python 选择此标签中的选项“Yazar”。但是，我无法单击此按钮并选择选项“Yazar”。如何做到这一点？ <div class="col-md-8 col-sm-8 col-xs-8 form-group has-feedback"> <div class="btn-group bootstrap-select form-control required"> <button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown" role="button" data-id="frmAkademiUnvan" title="Lütfen Seçiniz"> <span class="filter-option pull-left">Lütfen Seçiniz</span> <span class="bs-caret"> <span class="caret"> </span> </span> </button> <div class="dropdown-menu open" role="combobox"> <ul class="dropdown-menu inner" role="listbox" aria-expanded="false"> <li data-original-index="1"> <a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"> <span class="text">Yazar</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> <li data-original-index="2"> <a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"> <span class="text">Senior Author</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> <li data-original-index="3"> <a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"> <span class="text">Corresponding Author</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> <li data-original-index="4"> <a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"> <span class="text">Eşit Katkılı Yazar</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> <li data-original-index="5"> <a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"> <span class="text">Lisansüstü Öğrenci</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> <li data-original-index="6"> <a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"> <span class="text">İkinci Danışman Yazar</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> <li data-original-index="7"> <a tabindex="0" class="" style="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"> <span class="text">Tebliği Sunan</span> <span class="glyphicon glyphicon-ok check-mark"> </span> </a> </li> </ul> </div> <select id="frmAkademiUnvan" name="yazarTur" title="Lütfen Seçiniz" data-live-search="false" class="selectpicker form-control required" required="true" tabindex="-98"> <option class="bs-title-option" value="">Lütfen Seçiniz</option> <option value="1">Yazar</option> <option value="2">Senior Author</option> <option value="3">Corresponding Author</option> <option value="4">Eşit Katkılı Yazar</option> <option value="5">Lisansüstü Öğrenci</option> <option value="6">İkinci Danışman Yazar</option> <option value="7">Tebliği Sunan</option> </select> </div> </div> 我正在分享相关的Python代码。我运行此代码来选择特定选项。然而，它并没有选择“Yazar”选项： # 15) Choose author type with WebDriverWait lutfen_seciniz_span = WebDriverWait(driver, 10).until( EC.element_to_be_clickable((By.XPATH, "//span[contains(@class, 'filter-option') and contains(text(), 'Lütfen Seçiniz')]")) ) lutfen_seciniz_span.click() # Click on "Yazar" yazar_option = WebDriverWait(driver, 10).until( EC.element_to_be_clickable((By.XPATH, "//a[@role='option' and .//span[text()='Yazar']]")) ) yazar_option.click() 我没有收到任何错误消息。终端返回空白空间。您需要使用Selenium的Select Class来处理下拉列表/选择列表元素。请参考以下代码： wait = WebDriverWait(driver, 10) select_node = Select(wait.until(EC.element_to_be_clickable((By.ID, "frmAkademiUnvan")))) select_node.select_by_visible_text("Yazar") 进口： from selenium.webdriver.common.by import By from selenium.webdriver.support.wait import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.support.ui import Select

python html selenium-webdriver web-scraping automation

回答 1 投票 0

如何从php中的下拉列表中获取值和id？

我已经创建了带有下拉列表的 html 表单。该下拉列表是从数据库填充的。我已经创建了带有下拉列表的 html 表单。此下拉列表是从数据库填充的。 <select name="classes"> <?php foreach() { ?> <option value="<?php echo $id ?>"><?php echo $name ?></option> <?php } ?> </select> 现在我想同时获取 $id 和 $name 。我该怎么做？我已经尝试过这个 echo $_POST['classes']; 但它只显示所选项目的$id。我想要 $id 和 $name 两个。你不能。一种可能性是将这两个信息放在 value 属性内，然后用 php 将它们再次分隔开（通过使用分隔符）： <option value="<?php echo $id.'|'.$name; ?>"><?php echo $name ?></option> 在 PHP 中： $datas = explode('|',$_POST['classes']); $id = $datas[0]; $name = $datas[1]; 但这并不是系统本来的样子。通常 $name 只会用作用户的“友好”信息，因为该值有时可能只是一个 INT，而用户不会理解该 int 指的是什么，因此我们给他一个文字描述以便选择一个选项：但您实际上只关心该值，您始终可以使用它来再次获取随之而来的描述（例如通过搜索数据库）据我所知，当您提交该表格时，只有价值会被结转。如果没有值，则内部 HTML 将成为值。我要做的是： <select name="classes"> <?php foreach($classes as $id => $name) //i'm guessing here, is this what you meant? { ?> <option value="<?php echo $id.'|'.$name ?>"><?php echo $name ?></option> <?php } ?> </select> 如果您不熟悉，句点是连接运算符。把它想象成一根绳子的胶水。所以我将 $id 粘贴到“管道”的左侧，然后将 $name 粘贴到其末尾。然后在处理程序中，使用 split 或explode 来分隔管道上的两个值。实际上，我会做一些不同的事情，更多地回显，更少地进出 php/html，但我试图尽可能保持代码完整。将名称附加到 Id 并将其作为值传递，并从另一端分解名称您想要的是并命名两者，同时存储选项值，像这样放 <option value="<?php echo $id."_".$name;?>"><?php echo $name?></option> 在发布数据时，只需爆炸您将获得的值和名称发送表单意味着仅发送选择字段的“值”（仅将选项中的“名称”视为标签）。当您在处理表单提交时有“id”时，您可以简单地从数据库中获取“name”。

php html

回答 0 投票 0

html 表格存在跨度问题

我正在尝试创建一个包含 colspan 和 rowspan 的表。桌子 { 字体系列：arial、sans-serif； border-collapse: 折叠...</desc> <question vote="0"> <p>我正在尝试创建一个包含 colspan 和 rowspan 的表。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid black; text-align: left; padding: 8px; } .top { background-color: yellow; } .left { background-color: blue; } .right { background-color: green; } </style> </head> <body> <h2>HTML Table</h2> <table class=""> <tbody> <tr> <td rowspan="2"></td> <td colspan="5"></td> <td colspan="2" rowspan="2"></td> <td colspan="3" rowspan="2"></td> </tr> <tr> <td class="top" colspan="5"></td> </tr> <tr> <td rowspan="5"></td> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="2"></td> <td class="left" ></td> <td class="right" colspan="7"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> </tbody> </table> </body> </html></code></pre> </div> </div> <p></p> <p>我想让最后的蓝色/绿色与前 4 行相同。但是当我将其更改为使用相同的 colspan 值时，结果如下。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid black; text-align: left; padding: 8px; } .top { background-color: yellow; } .left { background-color: blue; } .right { background-color: green; } </style> </head> <body> <h2>HTML Table</h2> <table class=""> <tbody> <tr> <td rowspan="2"></td> <td colspan="5"></td> <td colspan="2" rowspan="2"></td> <td colspan="3" rowspan="2"></td> </tr> <tr> <td class="top" colspan="5"></td> </tr> <tr> <td rowspan="5"></td> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> </tbody> </table> </body> </html></code></pre> </div> </div> <p></p> <p>它重新排列表格的宽度。我想根据 colspan 和 rowspan 保持初始宽度。</p> <p>我猜问题在于添加的 colspan/rowspan 值，但我不知道在哪里。</p> </question> <answer tick="false" vote="0"> <p>添加表格布局：固定；如下所示的表格CSS。</p> <pre><code>table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; table-layout: fixed; } </code></pre> <p>此外，您的第二个代码是正确的。您的表列没有数据。因此，该列的内容较少或没有内容，这意味着宽度主要受 colspan 的影响。如果单元格的 colspan = 5 并且没有太多内容，那么它可能看起来与多个单独的列具有相同的宽度。</p> <p>当我最初设置如下所示的 11 列时，您可以获得更正后的表格。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid black; text-align: left; padding: 8px; } .top { background-color: yellow; } .left { background-color: blue; } .right { background-color: green; } </style> </head> <body> <h2>HTML Table</h2> <table class=""> <tbody> <tr> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> <td colspan="1"></td> </tr> <tr> <td rowspan="2"></td> <td colspan="5"></td> <td colspan="2" rowspan="2"></td> <td colspan="3" rowspan="2"></td> </tr> <tr> <td class="top" colspan="5"></td> </tr> <tr> <td rowspan="5"></td> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td class="left" colspan="1"></td> <td class="left" colspan="1"></td> <td class="right" colspan="8"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> <tr> <td rowspan="1"></td> <td colspan="10"></td> </tr> </tbody> </table> </body> </html></code></pre> </div> </div> <p></p> <p>但是当我们添加内容时，它会自动更改布局。因此，将CSS添加到表格中，并修复表格在添加内容时不改变布局的问题。</p> </answer> </body></html>

html html-table

回答 0 投票 0

如何让文字装饰下划线延伸到页面的最大宽度？

如何让文字装饰下划线延伸到页面的最大宽度？通常它只延伸到单词，但我希望该行填满整个页面。我尝试使用 b...

html css

回答 5 投票 0

如何让字体渲染得更大？

使用 CSS，我使用这一行来设置双语元素的样式：字体系列：persianFont、englishFont； persianFont 和 englishFont 都是用 @font-face 定义的。问题是角色...

html css fonts internationalization font-face

回答 3 投票 0

我不明白如何在本地正确添加我的扩展程序

我想使用绘图工具扩展。在我的 Autodesk Forge Viewer 中。当我下载这样的扩展时，它就可以工作。 https://github.getafreenode.com/autodesk-platform-services/aps-extensions/blob...