程序设计 html

2

我正在尝试通过使用Viewbag将表单元素传递到MVC3视图中，并简单地将HTML写入页面... 在控制器中： ViewBag.myData = "<input type=""hidden"" name=""example"" value=""examplevalue"">"; 鉴于（我知道我可以在表格中使用助手）： <form action="http://exampleurl/examplepage" method="post" id="example-form"> @ViewBag.myData <input type="hidden" name="anotherexample" value="anotherexamplevalue" /> </form> 这会将myData呈现为HTML中的文本，即： &lt;type="hidden" name="example" value="examplevalue"&gt; 所以我的问题是我如何让Razor做到与旧版相同： <%= myData %> 而不是替换<> 谢谢保罗

67 html asp.net-mvc asp.net-mvc-3 razor viewbag

7

如何在IE HTML条件中设置“ else”？

如何在HTML中执行此操作？我想做一个“其他” ...

67 javascript html css internet-explorer-9

7

使用javascript / html5即时生成声音

是否可以使用javascript / html5生成恒定的声音流？例如，要生成一个永久的正弦波，我将有一个回调函数，只要输出缓冲区即将变空，就会调用该函数： function getSampleAt(timestep) { return Math.sin(timestep); } （想法是使用它来制作交互式合成器。我事先不知道按键会被按下多久，所以我不能使用固定长度的缓冲区）

67 javascript html audio

5

HTML5文档类型定义在哪里？

“旧的” HTML / XHTML标准为其定义了DTD（文档类型定义）： HTML 4.01 http://www.w3.org/TR/html401/sgml/dtd.html XHTML 1.0 http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict 此DTD指定嵌套元素的规则-“哪些类型的元素可能出现在哪些类型的元素中”。我在这里为XHTML 1.0绘制了一个图表（对不起，我不再拥有该资源）我想用一个新版本来更新该图，其中还包括新的HTML5元素。但是，似乎没有HTML5 DTD。看来嵌套规则是由HTML5中定义的各种内容模型定义的。所以没有DTD，对吗？后续问题： HTML5中没有DTD的原因吗？DTD是为所有不同类型的元素定义嵌套规则的好方法。他们为什么不包括这样的东西？更新：我发现了这一点：我猜这是http://www.w3.org/TR/html5/dom.html#kinds-of-content，这与拥有DTD最为接近。更新： Visual Studio团队为XHTML5创建了XML架构。我猜这回答了我的问题： http : //blogs.msdn.com/b/webdevtools/archive/2009/11/18/html-5-intellisense-and-validation-schema-for-visual-studio-2008-and -visual-web-developer.aspx

67 html dtd sgml

4

Webpack文件加载器输出[对象模块]

我使用与的WebPack HtmlWebpackPlugin，html-loader和file-loader。我有一个简单的项目结构，其中不使用框架，只使用打字稿。因此，我将HTML代码直接写入index.html。我还将这个HTML文件用作的模板HtmlWebpackPlugin。像所有网站一样，我需要在我的资产文件夹中放置一个引用PNG的图像。file-loader应该正确加载文件，然后将新文件名放在src标记中，但事实并非如此。相反，作为srctag 的值，我有[object Module]。我假设file-loader发出了一些对象，并且在其.toString()方法运行时它像这样表示。但是，我可以看到file-loader已经成功处理了文件，并以新名称发送到了输出路径。我没有错误。这是我的webpack配置和index.html。 const projectRoot = path.resolve(__dirname, '..'); { entry: path.resolve(projectRoot, 'src', 'app.ts'), mode: 'production', output: { path: path.resolve(projectRoot, 'dist'), filename: 'app.bundle.js' }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.html$/i, use: 'html-loader' }, { test: /\.(eot|ttf|woff|woff2|svg|png)$/i, use: 'file-loader' }, { test: /\.scss$/i, …

40 javascript html webpack

4

使用CSS不平等地居中DIV

我正在使用flexbox将DIV居中放置在另一个DIV中。想一想需要时会在屏幕中央弹出的对话窗口。它可以正常工作，但是如果对话框上方和下方的空间不完全相等，则剩余空间的40％会位于对话框上方和60％的下方，这样看起来会好得多。之所以变得棘手，是因为对话框的高度随内部文本的数量而变化。因此，例如，如果浏览器高度为1000像素，对话框窗口高度为400像素，我希望剩余的垂直空间（600像素）为对话框上方240像素和对话框下方360像素。我可以用Javascript来做，但是我很好奇CSS是否有一些巧妙的方法。我尝试在#dialogBox DIV中添加底部边距，但是当对话框高度接近浏览器高度时，此方法不起作用。 #dialogBoxPanel { position:absolute; display:flex; align-items:center; justify-content:center; left:0px; top:0px; width:100%; height:100%; } #dialogBox { width:350px; } <div id="dialogBoxPanel"> <div id="dialogBox">Text</div> </div> 运行代码段隐藏结果展开摘要

23 html css flexbox centering

10

如何清除背景色相同的三个div之间的怪异间隙？

我在这个问题上苦苦挣扎了一段时间。在移动设备（Android和iOS）上可以看到此问题，某些设备可能需要放大一点。在PC上，当切换到移动模式时，我还可以在Chrome浏览器上重现此错误。以下是用于重现该错误的代码： <!DOCTYPE html> <html lang="en"> <head> <style> .top { height: 100px; background-color: #553213; } .middle { height: 100px; background-color: #553213; } .bottom { height: 100px; background-color: #553213; } </style> </head> <body> <div style="width:300px; height: 300px"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> </body> </html> 运行代码段隐藏结果展开摘要预期结果将是使用＃553213颜色实现的div。但是，在某些移动设备上，它们在这三个div之间显示其他线条（或间隙）。我的iPhone 在我的PC上，通过移动模式使用Chrome浏览器有人知道这是怎么回事吗？任何关于它如何发生以及如何解决它的想法都将不胜感激。

23 html css

5

如何比较2个iframe并在视觉上获得差异？

案件：我有2个iframe，并且都有很多div和其他控件，所以两个iframe都像HTML网站的中等大小。我想将两者进行比较并找出差异。我在这里想到了不同的选择：解决方案1：拍摄2个iframe的完整屏幕快照，并使用Python的枕头库比较两个屏幕快照，该枕头库在屏幕快照的不匹配区域上绘制网格。但是这里的问题是我在互联网上找不到任何可以获取完整iframe屏幕截图的代码（我的iframe较长且带有滚动条）。我在SO上尝试了几乎所有答案，但是所有答案都适用于正常页面，但不适用于iframe。参考：https : //blog.rinatussenov.com/automating-manual-visual-regression-tests-with-python-and-selenium-be66be950196 解决方案2：以某种方式从两个iframe中获取所有HTML代码并进行比较，但这很难分析结果，因为它将找到一些不同的HTML代码或两个iframe中存在不匹配的HTML代码。我相信这将更像是文字比较，而不是一个好的解决方案。因此，我正在寻找可以使用Python或Javascript拍摄iframe完整屏幕截图的代码，或者是可以比较2个iframe并找出差异的更好的选择。我尝试了谷歌按照以下方法找到的几乎所有答案：这里提供了示例iframe，其中整个html都位于iframe中：https : //grapesjs.com/demo.html，如果某些代码可以获取此iframe的完整屏幕截图，那么对我来说就很容易比较。

21 javascript python html selenium-webdriver iframe

5

如何从JavaScript中的textarea获取选定的文本位置？

我想使用javascript获取选定的文本位置。例如，我有一个简单的文本区域。 #input-text { resize: none; width: 50%; height: 50px; margin: 1rem auto; } <textarea id="input-text">I am a student and I want to become a good person</textarea> 运行代码段隐藏结果展开摘要在我的文本区域中，我有一些文本，例如： "I am a student and I want to become a good person" 从此字符串中，如果我从文本区域中选择“成为一个好人”，那么如何在javascript中获取选定的文本/字符串位置？此处选择的字符串字符从29开始，以49结尾。因此，开始位置是29，结束位置是49

20 javascript html

7

删除先前设置的边框颜色

20 javascript html css

8

如何证明两个HTML页面看起来相同？

例如，我有这个： <pre> sun<br/> &nbsp;&nbsp;&nbsp;&nbsp;mercury <br/> &nbsp;&nbsp;&nbsp;&nbsp;venus <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;earth <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mars <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jupiter <br/> &nbsp;&nbsp;&nbsp;&nbsp;saturn <br/> </pre> 运行代码段隐藏结果展开摘要和这个： <div style="font-family:monospace"> <div style="text-indent: 0">sun</div> <br/> <div style="text-indent: 4ch">mercury</div> <br/> <div style="text-indent: 4ch">venus</div> <br/> <div style="text-indent: 8ch">earth</div> <br/> <div style="text-indent: 8ch">mars</div> <br/> <div style="text-indent: 12ch">jupiter</div> <br/> <div style="text-indent: 4ch">saturn</div> <br/> </div> 运行代码段隐藏结果展开摘要 …

19 html css acid3

5

垂直滚动时不允许水平滚动（反之亦然）

我有一个列表，overflow-x并且overflow-y设置为auto。此外，我已经设置了动量滚动，因此使用可以在移动设备中很好地进行触摸滚动webkit-overflow-scrolling: true。但是，问题在于，我无法弄清楚在垂直滚动时如何禁用水平滚动。这会导致非常糟糕的用户体验，因为向左上方或右上方滑动会导致表格沿对角线滚动。当用户垂直滚动时，我绝对不希望任何水平滚动，直到用户停止垂直滚动为止。我尝试了以下方法： JS： offsetX: number; offsetY: number; isScrollingHorizontally = false; isScrollingVertically = false; //Detect the scrolling events ngOnInit() { this.scrollListener = this.renderer.listen( this.taskRows.nativeElement, 'scroll', evt => { this.didScroll(); } ); fromEvent(this.taskRows.nativeElement, 'scroll') .pipe( debounceTime(100), takeUntil(this.destroy$) ) .subscribe(() => { this.endScroll(); }); } didScroll() { if ((this.taskRows.nativeElement.scrollLeft != this.offsetX) …

17 javascript html css angular ionic-framework

10

使用环绕创建相等大小的div

我正在尝试创建一个菜单系统，上面和下面的图像和文本。数据是动态的。我希望菜单系统出现，以使每个图像彼此之间的距离相等，以便它们在水平和垂直图像网格中对齐。问题是文本。如果文本比图像长，则div会放大。但是，由于图像不再彼此等距分布，因此会产生尴尬的外观间隙。要解决此问题，我认为最好的方法是让其他每个div都采用较大div的大小。但是，我不确定该怎么做。我已经尝试过使用flexbox使用该flex-wrap属性。虽然包装得很好，但我还没有找到一种方法来使每个图像彼此等距对齐。我该如何实现这一目标？我的代码如下： #outer { display: flex; } #main { display: flex; justify-content: space-between; flex-wrap: wrap; border: solid black 25px; border-radius: 25px; width: 450px; height: 500px; padding: 20px; } .section { background-color: #ddd; padding: 15px; } .label, .icon { text-align: center; } <div id="outer"> <div id="main"> <div …

17 html css flexbox

2

如何创建等距虚线圆？

我想用CSS制作一个虚线圆，并通过以下过程创建它。尽管可以通过此过程显示虚线圆，但虚线的末尾与起点之间的间隙变窄，并且间隙不均匀。 .c { width: 500px; height: 500px; border-width: 15px; border-style: dashed; border-radius: 600px; } <div class="c"></div> 运行代码段Hide results展开摘要有没有办法使差距均匀？我们还能控制破折号之间的距离吗？如果单靠CSS无法做到这一点，我们正在考虑使用JavaScript或类似的工具。

16 javascript html css

8

如何使用ctrl选择多个单元格并单击

我有一张桌子，上面有数字。当我单击表格中的一个单元格时，它将切换活动状态。我想选择一个单元格，然后按crtl并选择另一个单元格，因此第一个和第二个之间的单元格将变为活动状态。如何执行呢？ codepen https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> const grid = document.getElementById("grid") grid.onclick = (event) => { event.stopPropagation(); const { className } = event.target; if (className.includes('cell')) { if (className.includes('active')) { event.target.className = 'cell'; } else { event.target.className = 'cell active'; …

16 javascript html css

Questions tagged «html»