HTML（超文本标记语言）是用于构造网页和格式化内容的标准标记语言。 HTML在语义上描述了网站的结构以及用于表示的提示，使其成为标记语言，而不是编程语言。 HTML主要与CSS和JavaScript结合使用，为页面添加样式和行为。 HTML规范的最新修订版是HTML5.2。
我对 LangChain 非常陌生，我正在处理本地磁盘上大约 100-150 个 HTML 文件，我需要将这些文件上传到服务器以进行 NLP 模型训练。但是，我必须将我的信息分为...
我是一名网络技术（尤其是 Angular）的学习开发人员，目前正在我们计算机科学俱乐部的网站上工作。 我们计划发布一些文章、备忘单等，并且我们...
W3C 标记验证要求我删除页面上的尾部斜杠。 它是否正确？我的页面在所有浏览器中仍然兼容吗？ W3C 标记验证 要求我删除页面上的尾部斜杠。 这是正确的吗？我的页面在所有浏览器中仍然兼容吗？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta http-equiv="content-style-type" content="text/css" **/**> 这是正确的。对于 HTML 4.01，您不应该为 meta 元素添加尾部斜杠（自闭合标签），如果我没记错的话，我相信 <link> 元素。 xhtml 但需要尾部斜杠。 XHTML 是带有 HTML 语法的 XML。在 XML 中，所有标签都必须闭合。某些 HTML 标签没有结束标签，因此在 XHTML 中它们需要自闭合。这是通过在 / 前面放置 > 来实现的。 因此，必须更改带有 /> 的任何标签，以删除正斜杠以符合 HTML。 这些并不是两种规格之间的唯一区别。 问题的答案是肯定的，你应该去掉多余的固相线。 （如果您愿意，也可以称为尾部斜杠）。 HTML5 也是如此。 HTML 不需要在结束 > 字符之前使用斜杠（又名“自闭合”标签，也是用词不当），例如 <link />、<meta />、<br />、<hr /> 等，以及由于多种原因，不鼓励这种使用，如所提供的超链接的目标中所讨论的。注意：最好始终参考官方 W3C 或 WHATWG 资源中的 HTML 规范。 （例如 https://html.spec.whatwg.org/multipage/#toc-semantics ） 有关历史的更多信息，请参见： https://www.cnet.com/culture/forming-pains-afflict-html5-standardization/ 尾部斜杠是为了促进 XHTML 中的 XML“兼容性”，并且通常仅在使用 XHTML 严格文档类型时用户代理才会考虑。 （例如 Transitional 只是将其解析为 HTML） 该语法仍然广泛使用错误（例如，据称 WordPress 是 2023 年网络上最流行的内容管理系统。查看大多数 WP 网站的源代码，您会发现它在 HTML 中使用了不正确的语法。但是，值得注意的是，代码格式化应用程序 Prettier 至少有部分责任） 这里有一个用例。 <meta> 标签不得有尾部斜杠。 我有 5 个不同的网站，想将它们从搜索引擎结果中删除。 我设置了元标签 <meta name="robots" content="noindex"> 结果，其中 4 个从 Bing 和 Google 搜索结果中完全消失了。但是，仍然只出现一页。 我终于找到原因了。 唯一仍然出现的页面在元标记中有尾部斜杠，其他 4 个页面没有。
我目前正在为我的网站开发一个wavesurfer播放器，这就是我到目前为止所得到的 波形播放器 <p>我目前正在为我的网站开发一个 Wavesurfer 播放器，这就是我到目前为止所得到的</p> <pre><code><html> <head> <title>Waveform Player</title> <script src="wavesurfer.js"></script> <script> function hide_player() { var x = document.getElementById("player"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> <style> html { height: 1500px; } </style> </head> <body> <iframe src="http://example.org" height="100%" width="100%"></iframe> <div style="position: fixed; bottom: 0; right: 0; z-index: 999; display: block; width: 123px; float: right;"> <button onclick="hide_player()">Hide/Show Player</button> </div> <div style="position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; background-color: grey;" id="player"> <div id="waveform"></div> <table border="0" align="center"> <tr> <td><button onclick="wavesurfer.skipBackward()"><<</button></td> <td><button onclick="wavesurfer.playPause()">Play / Pause</button></td> <td><button onclick="wavesurfer.skipForward()">>></button></td> <td>Volume:</td> <td> <input id="volumeSlider" type="range" name="volume-slider" min="0" max="100" value="50"/> </td> <td> Time: <span id="currentTime">00:00:00</span> <span>/</span> <span id="totalDuration">00:00:00</span> </td> </tr> </table> </div> </body> <script> //Timecode const currentTime = document.querySelector("#currentTime") const totalDuration = document.querySelector("#totalDuration") //Volume Control const volumeSlider = document.querySelector("#volumeSlider") //Load Wavesurfer and options var wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'violet', progressColor: 'blue', backgroundColor: 'green', responsive: 'true' }); //Volume Control const handleVolumeChange = e => { // Set volume as input value divided by 100 // NB: Wavesurfer only excepts volume value between 0 - 1 const volume = e.target.value / 100 wavesurfer.setVolume(volume) // Save the value to local storage so it persists between page reloads localStorage.setItem("audio-player-volume", volume) } const setVolumeFromLocalStorage = () => { // Retrieves the volume from local storage, or falls back to default value of 50 const volume = localStorage.getItem("audio-player-volume") * 100 || 50 volumeSlider.value = volume } //Load Track wavesurfer.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3'); //Volume Control window.addEventListener("load", setVolumeFromLocalStorage) volumeSlider.addEventListener("input", handleVolumeChange) //Timecode const formatTimecode = seconds => { return new Date(seconds * 1000).toISOString().substr(11, 8) } wavesurfer.on("ready", () => { // Set wavesurfer volume wavesurfer.setVolume(volumeSlider.value / 100) // Timecode const duration = wavesurfer.getDuration() totalDuration.innerHTML = formatTimecode(duration) }) wavesurfer.on("audioprocess", () => { const time = wavesurfer.getCurrentTime() currentTime.innerHTML = formatTimecode(time) }) //Spacebar starts player document.body.onkeyup = function(e){ if(e.keyCode == 32){ wavesurfer.playPause() } } window.addEventListener('keydown', function(e) { if(e.keyCode == 32 && e.target == document.body) { e.preventDefault(); } }); </script> </html> </code></pre> <p>我尝试了几个小时来实现光标插件：</p> <pre><code>https://wavesurfer-js.org/example/cursor/index.html https://wavesurfer-js.org/api/class/src/plugin/cursor/index.js~CursorPlugin.html </code></pre> <p>但是我失败了，我现在不知道该怎么办了。 有人可以帮我编辑上面的代码吗？我真的很感激。</p> <p>我还希望有一个“活动”播放/暂停按钮，这样它会在音频播放时显示播放，如果不播放则暂停。 现在它是静态的，我不知道如何改变它。</p> </question> <answer tick="false" vote="0"> <p>实现这个插件并不难。您在文档中有<a href="https://wavesurfer-js.org/example/cursor/index.html" rel="nofollow noreferrer">一个示例</a>。</p> <p>首先加载<em>wavesurfer</em>光标插件：</p> <pre><code><script src="wavesurfer.cursor.js"></script> </code></pre> <p>然后需要在<em>wavesurfer</em>实例中添加插件：</p> <pre><code>//Load Wavesurfer and options var wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'violet', progressColor: 'blue', backgroundColor: 'green', responsive: 'true', plugins: [ WaveSurfer.cursor.create({ // <-- here showTime: true, opacity: 1, customShowTimeStyle: { 'background-color': '#000', color: '#fff', padding: '2px', 'font-size': '10px' } }) ] }); </code></pre> <p>如果您想监听 <pre><code>play</code></pre> 和 <pre><code>pause</code></pre> 事件，您可以使用 <em>wavesurfer</em> 事件监听器，如<a href="https://wavesurfer-js.org/docs/events.html" rel="nofollow noreferrer">here</a>所述。</p> <pre><code>wavesurfer.on('pause', function () { /* do stuff when wavesurfer is paused */ }); </code></pre> <p>我让您根据需要更改按钮的外观。</p> </answer> <answer tick="false" vote="0"> <p>Cursor 插件现已被 Hover 插件取代 =)</p> <p><a href="https://wavesurfer.xyz/examples/?hover.js" rel="nofollow noreferrer">悬停插件</a></p> </answer> </body></html>
将数据从 html JS webview 传递到 MAUI 中的 C#
我目前正在制作一个自定义传单地图，我使用 xaml 中的 web 视图加载该地图，用户可以在其中执行多个操作，例如添加和删除现有标记。我的问题是
我的表单有脚本代码，但我不确定如何更改跨度的字体颜色和字体系列（表单的标签） <p>我的表单有一个脚本代码，但我不确定如何更改跨度的字体颜色和字体系列（表单的标签）</p> <pre><code><script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script> <script> hbspt.forms.create({ region: "na1", portalId: "40139212", formId: "758ff855-f664-4297-81d7-ea647222454a" }); </script> </code></pre> <p>我对 javascript 没有任何先验知识，这只是给我的复制粘贴代码。</p> </question> <answer tick="false" vote="0"> <p>我并不完全熟悉你的问题，但每个表单都会在 DOM 中创建一个表单标签。那么，为什么需要使用 CSS 来设置这个标签的样式呢？</p> <p>示例：</p> <pre><code>#your_form_id{ span{ font-color: xxx; font-family: xxx; } } </code></pre> </answer> </body></html>
如何在 Bootstrap 轮播中启用每 10 秒自动滑动 2 个图像和一个视频？
我正在尝试创建一个图像和视频组合的滑块。 我尝试使用引导程序来实现，但是我失败了。 这是下面的代码 我正在尝试创建一个图像和视频组合的滑块。 我尝试使用引导程序来实现，但是我没有这样做。 下面是代码 <div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel-slider" data-slide-to="0" class="active"></li> <li data-target="#carousel-slider" data-slide-to="1"></li> <li data-target="#carousel-slider" data-slide-to="2"></li> </ol> <!--Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div> <!--/First slide--> <!--Second slide--> <div class="carousel-item"> <video src="./video/video1.mp4" autoplay poster="./images/boardwalk.jpg"></video> </div> <!--/Second slide--> <!--Third slide--> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div> <!--/Third slide--> </div> </div> 我需要三张幻灯片，其中两张是图像幻灯片，一张是视频幻灯片，每 15 秒更改一次。 有没有办法使用jquery添加自定义幻灯片 只需将 data-interval 属性添加到引导轮播中，即可每隔 x 秒自动滚动到下一张幻灯片。请注意，data-interval在milliseconds中计算您的值，因此如果您想每10秒后更改轮播幻灯片，则需要添加data-interval=10000。 检查并运行以下代码片段，获取有关如何使用 data-interval 属性自动滑动轮播的实际示例： /* CSS */ html, body {margin: 0px; padding: 0px; width: 100%; height: 100%;} .wrapper { margin: 0 auto; width: 100%; } .carousel-item img {width: 100%; height: 200px;} .carousel-item video {width: 100%; height: 200px;} <!-- HTML --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="wrapper"> <div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2000"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel-slider" data-slide-to="0" class="active"></li> <li data-target="#carousel-slider" data-slide-to="1"></li> <li data-target="#carousel-slider" data-slide-to="2"></li> </ol> <!--Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div> <!--/First slide--> <!--Second slide--> <div class="carousel-item"> <video controls> <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> </video> </div> <!--/Second slide--> <!--Third slide--> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div> <!--/Third slide--> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 我真的很喜欢 http://kenwheeler.github.io/slick/ 的 jquery 滑块。我认为这会对你有很大帮助。 我在下面为您制作了一个示例： //Initialize your slider in your script file $("#carousel-slider").slick({ arrows: false, infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1500, mobileFirst: true }); <!-- HTML --> <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" /> </head> <div id="carousel-slider"> <div> <img style="width:100%; height:100%;" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div> <div> <video style="width:100%; height:100%;" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" autoplay></video> </div> <div> <img style="width:100%; height:100%;" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div> </div> <!-- Calling jQuery --> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <!-- Calling Slick Library --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> 您可以将“autoplaySpeed”更改为您想要更改的任何间隔。 将 data-bs-ride="carousel" 放在包含 id="carousel-slider" 的 div 中，将 data-bs-interval="10000" 放在包含 class="carousel-item 的 div 中“
这可能吗？我谷歌的一切都引导我将 Markdown 转换为 PDF。但我想在 Markdown 文件中显示 PDF 图像。这是我的例子：  如果我用普通的
据我所知，这些显示选择器似乎是相同的。 来自 Mozilla CSS 文档： inline-table：inline-table 值在 HTML 中没有直接映射。它的行为...
我希望在 React 中使用 Material UI 制作多个滚动列。我有一种方法可以在 bootstrap 中使用 Flex 来完成此操作，但我无法将其翻译过来。我已经整理了一个黑客演示......
我正在构建一个 chrome 扩展。我想要两个并排的相同视频（类似于画中画），就像这样。我想在单独的 iframe/video 元素中复制视频。 ...
CSS 文件在浏览器中显示为空且未链接到 HTML 文件的问题
我创建了一个custom.css 文件并将其添加到css 文件夹中。之后，我进入该网站。这是行不通的。该文件显示为空。我将附上浏览器中的代码和图片。 .缩略图.
使用内容范围标头将音频流式传输到浏览器中的音频播放器无法按预期工作
我有一个应用程序，用户可以请求收听一些音频。其中一些音频可能会很长，例如有时 16 小时，所以我想将音频流式传输到 html5 播放器，否则...
我想使用 Electron 创建一个个人应用程序来管理我设备上的其他应用程序。问题是我尝试以不同的方式创建一个打开我自己的 .exe 应用程序的链接，但这还不是全部......
这是我的问题的最小示例： 这是我的问题的最小示例： <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> .container { display: flex; height: 500px; /* should not be there */ } .dependent__height { aspect-ratio: 16 / 9; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } 我想要实现的是.container不会设置高度，高度的唯一来源是.source__height。它会在运行时发生变化，一切都应该正常工作。我没有附加到弹性盒或其他东西，我只是想得到想要的行为（宽度将根据长宽比和.source__height的高度计算） 我尝试了很多跳跃，还有 JavaScript。如果使用 MutationObserver 和同步高度，JavaScript 可能会工作，但非常笨拙，对于我的用例来说，编写和维护会非常痛苦。 如果 .container 设置了高度，则可以正常工作： 但如果 height 属性被删除则不然： 注意：在现实场景中，我使用 <img> ，问题大致相同，可以通过该问题的解决方案来解决。如果你想要更多真实世界的例子，我也可以添加。 这是一种通过网格实现您想要的效果的方法： .container { display: grid; grid-template-columns: 100% max-content; } .dependent__height { aspect-ratio: 16 / 9; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> 但是，如果宽度不够，则 16/9 的依赖高度将无法在该纵横比下增长到所需的完整高度。一种解决方案是将高度设置为 100%，但这会导致其溢出容器（添加轮廓以说明这一点）： .container { display: grid; grid-template-columns: 100% max-content; outline: 4px solid skyblue; } .dependent__height { aspect-ratio: 16 / 9; height: 100%; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> 希望这足以让您玩并获得您想要的东西，如果这不能完全回答所有问题，请通过编辑为您的问题添加详细信息，我可以更新我的答案
iOS 15 使用 HTML 字符串初始化 NSAttributedString 时崩溃
我有一个扩展可以将 HTML 字符串转换为 NSAttributedString。 iOS 15 发布后，我看到了很多用户的崩溃情况。所有这些崩溃都发生在 iOS 15 上并发生在主线程上。 他...
JavaScript - document.getElementByID 与 onClick
我正在尝试在 HTML 文档中编写一个简单的游戏，只是为了好玩。其中有一个图像，单击后会添加到您的分数中。 我在分数添加函数中创建了一个简单的 if 语句 w...
我在 React 中有一个组件，它是一个仅有时会弹出的模式。我无法发布所有代码，因为它太多了，但我会简化并发布我能发布的代码。 问题： 模态应该是
我刚刚开始使用 HTML，但遇到了问题。当我们想要添加多个图像时，每个图像都需要特定的标签，还是有什么方法可以仅使用一两个标签添加多个图像？ 我想...
我正在开发一个显示聊天对话的 html 页面，我希望它能够支持打印机，以便可以轻松导出为 PDF。我的问题是长图像可以跨越多个...