Tag: html5

页面底部的JavaScript？

我读过最好把所有的JavaScript文件放在网页的底部。 HTML5 Boilerplate模板似乎同意： http ://html5boilerplate.com/ 似乎被广泛使用。 我的问题是：第一，这是否有真正的基础？ 我已经做了Firebug的testing，似乎有一些小的影响，但它是微不足道的？ 图像和其他来源似乎并没有开始加载，直到CSS文件和脚本文件已经加载，但坚持他们在底部似乎没有太大的差异。

Google bot通过HTML5模式路线在AngularJS网站上爬行

我们有一个使用HTML5路线的AngularJS网站。 我只是做了一些testing“抓取谷歌”运行。 结果有点混乱： 在抓取选项卡上，我看到我们的网站，因为它看起来在视图源，所有的前端绑定{{}}，而不是所有的HTML呈现 在渲染选项卡上，我们的网站看起来非常好，没有{{}}variables，看起来像谷歌机器人抓取和渲染的网站，这也许是符合这个http://googlewebmastercentral.blogspot.ae/2014/ 05 /渲染页面与提取作为google.html 。 不过，我们已经准备好让Google无法抓取我们的网站，所以我们已经添加了，所以Google bot会以“？_escaped_fragment_ =”重新访问我们的网页，我们遵循https://developers.google.com / webmasters / ajax-crawling / docs / getting-started （“3.处理没有哈希碎片的页面”）在我们的Nginxconfiguration中，我们有这样的内容： if ($args ~ "_escaped_fragment_=") { serve the static HTML snapshots } ，如果我们自己传递_escaped_fragment_ =，它确实可以正常工作。 但是，Google机器人从未尝试使用此参数来抓取我们的网站，因此它从不抓取快照。 我们错过了什么吗？ 我们是否也应该在我们的Nginx conf上添加Google bot的代理检测？ 像这样的东西？ if ($http_user_agent ~* "googlebot|yahoo|bingbot|baiduspider|yandex|yeti|yodaobot|gigabot|ia_archiver|facebookexternalhit|twitterbot|developers\.google\.com") { server from snapshots } 如果我们能更好地理解这一点，那将是非常好的，非常感谢你！ 更新： 我只是读了这个， http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag#caveats 。 所以，在使用手动工具（Google抓取）的时候，我们也应该把自己放在＃！ 或？_escaped_fragment_ […]

取得进度指标？

我正在努力寻找使用fetch实现上传进度指示器的文档或示例。 这是迄今为止我发现的唯一参考 ，其中指出： 进度事件是一个高级function，现在不会到达提取。 您可以通过查看Content-Length标题并使用传递stream来监视接收到的字节来创build自己的。 这意味着你可以明确地处理没有Content-Length回应。 当然，即使Content-Length在那里，也可能是一个谎言。 随着stream你可以处理这些谎言，但是你想要的。 我将如何写“传递stream来监控字节”发送？ 如果它有什么不同，我试图做到这一点，从浏览器的图像上传到Cloudinary 。 注意 ：我对Cloudinary JS库 不感兴趣，因为它依赖于jQuery，我的应用程序不支持。 我只对使用原生javascript和Github的fetch polyfill进行处理所需的stream处理感兴趣。 https://fetch.spec.whatwg.org/#fetch-api

HTML5 localStorage安全性

将localStorage用于敏感数据（假定当前的HTML5实现）是好的还是坏主意？ 我可以使用哪些方法来保护数据，使其无法在客户端计算机上访问？

如何在Android上自动播放HTML5的MP4video？

我通过asp.net开发了一个移动页面来播放mp4video。 我知道iOS已禁用自动播放function，以最大限度地减less用户带宽，所以我怎么能自动播放Android上的HTML5 MP4video？ 我已经把自动播放的HTML5代码，但它不起作用。 以下是我的代码： <video autoplay controls id='video1' width='100%' poster='images/top_icon.png' webkitEnterFullscreen poster preload='true'> <source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2' > </video> 此外，我已经解决了用户点击图像叠加可以播放video的问题。 谢谢Karthi 这里是代码： <script type="text/javascript"> $(document).ready(function() { $("#video1").bind("click", function() { var vid = $(this).get(0); if (vid.paused) { vid.play(); } else { vid.pause(); } }); }); </script> 谢谢 乔

HTML5垂直间距问题与<img>

我试图创build一个布局，divs之间的垂直间距是像素完美的。 到目前为止，我已经排除了几乎所有的大网格系统（960.gs，Blueprint），因为它们在垂直间距方面根本没有解决scheme。 有了它们，设置div之间的垂直间距的唯一方法是使用body {line-height}属性并使用它来操作div间距。 我不会说这是一个解决scheme，因为它毁了你的模板，依赖于font-family，并且不允许你为不同的div使用不同的间距。 我发现的唯一一个对垂直间距有适当支持的网格系统是Golden Grid ，它不使用body {line-height}，但是它有自己的.clear {height：5px}用于垂直间距。 我的问题是，不pipe我怎么尝试，我都无法在HTML5中进行间距工作。 我说的是垂直排列的图像，它们之间没有空隙。 在XHTML过渡模式下，一切正常，图像完美alignment，但在HTML5模式下，它们之间有一个垂直的差距。 Chrome浏览器的差距是2px，Firefox浏览器的差距是2-3px，两行之间交替。 我认为在HTML5模式下，每个网格系统都是这种情况。 我不知道用简单的HTML5编写这个代码的最好方法是什么，所以我只是尝试了网格系统。 纵向差距也出现在960.gs，蓝图中。 我find的解决scheme可能是设置body {line-height：0}并在每个印刷标签中定义行高。 但是我不明白，为什么这样一个简单的案例需要这样的黑客攻击：垂直排列的图像。 为什么HTML5模式的浏览器与XHTML Transitional模式不同？ 在这里，我有相同的页面，没有什么改变，只是文档types。 XHTML在每个浏览器都是像素完美的，HTML5有一个差距，并且不同于浏览器。 使HTML5例子像XHTML过渡类一样工作的最好方法是什么？ 更新 ：三十多岁的回答了这个问题，如果我包括img {display：block; } HTML5版本的行为与XHTML Transitional完全相同。 谢谢三十！ 但在closures这个线程之前，有人可以向我解释为什么： 为什么所有的浏览器在HTML5模式下行为都不一样，当没有指定为display：block时，所有的浏览器在img元素之间都有不同的垂直间距。 浏览器比较浏览器上面的html5链接，浏览器和浏览器会有所不同。 他们之间有2至4像素的差距。 为什么XHTML Transitional不需要这个黑客 为什么XHTML Strict也会产生一个垂直的差距 使用img {display：block; 在一个reset.css表？

等到HTML5video加载

我有一个video标签，我dynamic地改变它的来源，因为我让用户从数据库中select一些video。 问题是，当我改变src属性时，即使我告诉它，video也不会加载。 这是我的代码： $("#video").attr('src', 'my_video_'+value+'.ogg'); $("#video").load(); while($("#video").readyState !== 4) { console.log("Video is not ready"); }; 代码仍然停留在无限循环中。 任何帮助？ 编辑 ： 致伊恩·德夫林： //add an listener on loaded metadata v.addEventListener('loadeddata', function() { console.log("Loaded the video's data!"); console.log("Video Source: "+ $('#video').attr('src')); console.log("Video Duration: "+ $('#video').duration); }, false); 好的，这是我现在的代码。 源打印很好，但我仍然无法获得持续时间：/

inputtypesDateTime – 值的格式？

我应该使用哪种格式的date和时间，用于使用DateTimetypes的HTML5input元素？ 我努力了： 1338575502 01/06/2012 19:31 01/06/2012 19:21:00 2012-06-01 2012-06-01 19:31 2012-06-01 19:31:00 他们似乎没有任何工作。

为什么types为“number”的htmlinput允许在字段中input字母“e”？

我有以下html5input元素： <input type="number"> 为什么此input允许在input字段中input字符“e”？ 没有其他字母字符可以input（如预期） 使用chrome v。44.0.2403.107 看看我的意思： http : //www.w3schools.com/html/tryit.asp ?filename= tryhtml_input_number

居中alignment容器并左alignment子元素

我有X个图像（全部相同的高度和宽度），我想在网页上显示它们。 但是，当浏览器resize时，我希望使页面自动显示连续的图像的最大数量（不调整图像大小），并且显示图像相距固定的距离。 另外，图像应该在页面的中间一起分组，并且一个接一个地显示。 例如，当浏览器窗口的宽度足以在一行上显示3个图像时，它们应显示如下。 每行3个图像分组在一起，固定的距离，在页面的中心，一个接一个。 而且，如果浏览器变得更宽，所以可以在一行上显示4个图像，他们应该像这样显示。 每行4个图像（不调整图像大小），在页面的中间一个接一个地分组固定在一起。 到目前为止，我写了下面的代码： HTML <div class="outer-div"> <div class="inner-div"> <div class="image-div"><img src="images/1.png"></div> <div class="image-div"><img src="images/2.png"></div> <div class="image-div"><img src="images/3.png"></div> <div class="image-div"><img src="images/4.png"></div> <div class="image-div"><img src="images/5.png"></div> </div> </div> CSS img { height: 200px; width: 200px; padding: 10px; } .image-div { display: inline; } .outer-div { text-align: center; width: 100%; } .inner-div { text-align: […]