标签: html5

什么是完整性和crossorigin属性?

Bootstrapcdn最近改变了他们的链接.它现在看起来像这样:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" 
rel="stylesheet" 
integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
crossorigin="anonymous">
Run Code Online (Sandbox Code Playgroud)

这些integrity和crossorigin属性是什么意思?它们如何影响样式表的加载?

html html5 cross-domain cors subresource-integrity

334
推荐指数
2
解决办法
10万
查看次数

如何限制HTML5"数字"元素中的可能输入?

对于<input type="number">元素,maxlength不起作用.如何限制该maxlength数字元素?

html html5 numbers input max

330
推荐指数
19
解决办法
62万
查看次数

使用css3的SVG投影

是否可以使用css3为svg元素设置投影,例如

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
Run Code Online (Sandbox Code Playgroud)

我看到了一些关于使用滤镜效果创建阴影的评论.有一个单独使用css的例子.下面是一个工作代码,其中正确应用了cusor样式,但没有阴影效果.请帮我用最少的代码获得阴影效果.

svg .shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}	
Run Code Online (Sandbox Code Playgroud)

css html5 svg css3 svg-filters

327
推荐指数
4
解决办法
35万
查看次数

文件输入'accept'属性 - 它有用吗?

在html下实现文件上传非常简单,但我注意到有一个'accept'属性可以添加到<input type="file" ...>标记中.

此属性是否可用作限制文件上传到图像等的方法?使用它的最佳方法是什么?

或者,有没有办法限制文件类型,最好是在文件对话框中,为html文件输入标签?

html html5 cross-browser filter mime-types

324
推荐指数
7
解决办法
31万
查看次数

Flexbox没有给予元素相同的宽度

尝试最多包含5个项目且少至3个的flexbox导航,但它并未在所有元素之间平均分配宽度.

小提琴

我正在建模的教程是http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

上海社会科学院

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
} …
Run Code Online (Sandbox Code Playgroud)

html css html5 css3 flexbox

321
推荐指数
4
解决办法
21万
查看次数

如何在ASP.NET MVC中的HTML-5 data-*属性中使用破折号

我试图在我的ASP.NET MVC 1项目中使用HTML5数据属性.(我是C#和ASP.NET MVC的新手.)

 <%= Html.ActionLink("« Previous", "Search",
     new { keyword = Model.Keyword, page = Model.currPage - 1},
     new { @class = "prev", data-details = "Some Details"   })%>
Run Code Online (Sandbox Code Playgroud)

上面的htmlAttributes中的"data-details"给出以下错误:

 CS0746: Invalid anonymous type member declarator. Anonymous type members 
  must be declared with a member assignment, simple name or member access.
Run Code Online (Sandbox Code Playgroud)

它在我使用data_details时有效,但我想它需要按照规范以"data-"开头.

我的问题:

  • 有没有办法让这个工作,并使用HTML5数据属性与Html.ActionLink或类似的Html助手?
  • 是否有其他替代机制将自定义数据附加到元素?此数据稍后将由JS处理.

asp.net-mvc html5 custom-data-attribute

318
推荐指数
4
解决办法
14万
查看次数

HTML5本地存储中的项何时到期?

数据存储在localStorage中(作为HTML5中DOM存储的一部分)可用多长时间?我可以为我放入localStorage的数据设置一个到期时间吗?

javascript html5 local-storage

316
推荐指数
13
解决办法
25万
查看次数

JavaScript/HTML5中的音效

我正在使用HTML5来编写游戏; 我现在遇到的障碍是如何播放声音效果.

具体要求很少:

  • 播放和混合多种声音,
  • 多次播放相同的样本,可能重叠播放,
  • 在任何点中断播放样本,
  • 最好播放包含(低质量)原始PCM的WAV文件,但我当然可以转换它们.

我的第一种方法是使用HTML5 <audio>元素并在我的页面中定义所有声音效果.Firefox播放WAV文件只是很好,但#play多次调用并不能真正多次播放样本.根据我对HTML5规范的理解,该<audio>元素还可以跟踪播放状态,因此可以解释原因.

我的直接想法是克隆音频元素,所以我创建了以下微小的JavaScript库来为我做(取决于jQuery):

var Snd = {
  init: function() {
    $("audio").each(function() {
      var src = this.getAttribute('src');
      if (src.substring(0, 4) !== "snd/") { return; }
      // Cut out the basename (strip directory and extension)
      var name = src.substring(4, src.length - 4);
      // Create the helper function, which clones the audio object and plays it
      var Constructor = function() {};
      Constructor.prototype = this;
      Snd[name] = function() {
        var clone = …
Run Code Online (Sandbox Code Playgroud)

javascript html5

314
推荐指数
5
解决办法
27万
查看次数

调整HTML5画布中的图像大小

我正在尝试使用javascript和canvas元素在客户端创建缩略图图像,但是当我缩小图像时,它看起来很糟糕.它看起来好像在photoshop中缩小了,重新采样设置为"最近邻"而不是Bicubic.我知道可以让它看起来正确,因为这个网站也可以使用画布做得很好.我尝试使用他们所做的相同代码,如"[Source]"链接所示,但它仍然看起来很糟糕.有什么我缺少的东西,一些需要设置的设置或什么?

编辑:

我正在尝试调整jpg的大小.我已经尝试在链接网站和photoshop中调整相同的jpg,并且在缩小尺寸时看起来很好.

这是相关代码:

reader.onloadend = function(e)
{
    var img = new Image();
    var ctx = canvas.getContext("2d");
    var canvasCopy = document.createElement("canvas");
    var copyContext = canvasCopy.getContext("2d");

    img.onload = function()
    {
        var ratio = 1;

        if(img.width > maxWidth)
            ratio = maxWidth / img.width;
        else if(img.height > maxHeight)
            ratio = maxHeight / img.height;

        canvasCopy.width = img.width;
        canvasCopy.height = img.height;
        copyContext.drawImage(img, 0, 0);

        canvas.width = img.width * ratio;
        canvas.height = img.height * ratio;
        ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height); …
Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas image-resizing

310
推荐指数
9
解决办法
27万
查看次数

使用HTML5/Javascript生成并保存文件

我最近一直在摆弄WebGL,并且让Collada读者工作了.问题是它很慢(Collada是一种非常冗长的格式),所以我将开始将文件转换为更易于使用的格式(可能是JSON).事实是,我已经有了用Javascript解析文件的代码,所以我也可以将它用作我的导出器!问题在于节省.

现在,我知道我可以解析文件,将结果发送到服务器,并让浏览器从服务器请求文件作为下载.但实际上服务器与这个特定的进程没有任何关系,为什么要让它参与其中呢?我已经在内存中拥有所需文件的内容.有什么方法可以使用纯javascript向用户提供下载吗?(我怀疑它,但不妨问......)

并且要明确:我没有在用户不知情的情况下尝试访问文件系统!用户将提供一个文件(可能通过拖放),脚本将转换内存中的文件,并提示用户下载结果.就浏览器而言,所有这些都应该是"安全"的活动.

[编辑]:我没有提及它,所以回答"Flash"的海报是有效的,但我正在做的部分是尝试强调纯HTML5可以做什么...所以Flash是在我的情况下.(虽然对于任何正在使用"真实"网络应用程序的人来说,这是一个非常有效的答案.)在这种情况下,除非我想要涉及服务器,否则看起来我运气不好.不管怎么说,还是要谢谢你!

javascript html5 download

305
推荐指数
12
解决办法
36万
查看次数