题

如果您使用单个javascript文件来保存所有脚本,那么您在哪里放置仅适用于一个页面的脚本？

背景

这可能是意见问题或"最佳实践",但我对其他人的意见感兴趣:

我正在项目中使用html5 Boilerplate.他们建议您将所有javascript放在一个文件中script.js以提高速度和一致性.似乎合理.

但是,我有一些地理位置脚本只与单个页面相关,而不是其他页面.我是否应该违反惯例并将此脚本放在我依赖的javascript库调用下面的页面上？只需调用相关函数(位于script.js)文件中,在它们所依赖的库的链接下面？

谢谢!

我是一个新手webdeveloper.虽然,我理解html5样板带来了什么,我想知道如何扩展/定制它以在我的所有html文件中使用它？

截至目前,它提供了index.html.

1. 那么,创建新的html文件的约定/方法是什么？
2. 我应该创建一个单独的html文件夹吗？
3. 我如何继承index.html文件的属性？(复制粘贴？)不能像Django那样继承baseurl吗？
4. 虽然,我对处理javascript和css有一些了解,在处理html5样板和跨浏览器兼容性时我应该注意什么？

我需要有关为HTML5 UI开发选择上述框架之一的建议(我对这个世界末日很新).其中一个主要要求是通过重用/修改现有的UI控件来尽可能简化UI开发.

我们需要它在生产环境中具有轻量级和稳定性(与Spring MVC相称).从经验丰富的手中快速总结PRO和Con将非常有用.

PS受到HTML Kickstart(轻量级自然)的一些好评的影响,我有一个快速的外观,它似乎是少数UI控件(源自Font Awesome)的好赌注.我对它在制作环境中的稳定性/灵活性感到担忧.

提前致谢

有一个类似的问题有一个已接受的答案,但它所指的链接不再可用(甚至在回程机器上也没有).H5BP文档本身对这个主题不是很具体(这里),至少不是像我这样的菜鸟.这个类似问题的答案仍然没有给我解释.它有点讨论如何使用plugins.js,但不是非常具体,也没有解释main.js.

不幸的是,这些是我能找到的唯一信息,我仍然不明白这些文件的用途.任何人都可以解释;

如何使用HTML5样板中的main.js和plugins.js？

它们的功能是什么,我将如何使用它们？

我很想使用Paul Irish的HTML5样板,但我遇到了css问题.

我希望标题在页面顶部是齐平但我不能容器div增加一个我无法摆脱的差距.

我认为这与页脚的clearfix有关.我尝试过为页脚和容器div尝试不同的填充大小,但无济于事.

这是html代码:

<header>
  <p> header content </p>
</header>

<div id="main" role="main">

</div>
<footer>
  <p> footer content </p>
</footer>

我的自定义CSS:

#container {
    background-color:orange;
    padding:1px; /* can't be zero */
    margin:0; 
}

footer {
    margin: 1px 0;
}

body {
    width:960px;
    margin:0 auto;
    background:blue;
    padding:0;
}

移动设备上的按钮很慢(由于拖动检测等原因,大多数浏览器至少延迟300毫秒).谷歌写了一些javascript来解决这个问题:http: //code.google.com/mobile/articles/fast_buttons.html

移动HTML5 Boilerplate人员将其集成到他们的软件包中:https: //github.com/h5bp/mobile-boilerplate/blob/master/js/mylibs/helper.js#L86

我想弄清楚如何轻松地将其与骨干一起使用.就像是:

events: {
  "fastbutton button.save": "save"
}

fastbutton用快速按钮代码替换click或mousedown.我希望我需要重写一下MPB.fastbutton代码.有人这样做过吗？

我正在使用html5boilerplate构建脚本并在缩小脚本时(使用Google Closure Compiler)

我收到了这个错误

-js.all.minify:
     [echo] Minifying scripts
     [copy] Copying 3 files to /Users/Username/Desktop/Web/intermediate/js
    [apply] /Users/Juan/Desktop/Web/js/plugins.js:117: ERROR - Parse error. Internet Explorer has a non-standard intepretation of trailing commas. Arrays will have the wrong length and objects will not parse at all.
    [apply]                 }, { duration: 727 })
    [apply] 

             ^

但是,如果运行未编译,代码将在IE 8中运行.

这是代码

anim1.animate({
                    'left': '+=32px',
                    'filter': 'alpha(opacity=100)',
                    '-moz-opacity': '1',
                    '-khtml-opacity': '1',
                    'opacity': '1',
                }, { duration: 727 })

如何让这段代码通过Compulsure Compiler？

谢谢

我正在尝试修改HTML5 Boilerplate标题以使中心图像具有任意一侧的单词,如下所示:

你可以看到我设法做到了,但这只是使用了样板和坏css的一部分,打破了h5bp的实用性.我想现在正确使用h5bp并实现同样的目的.我只是不确定该怎么做.

我目前的尝试看起来像这样:

图像不在单词之间,即使标记中的顺序如下:

<div id="header-container">
    <header class="wrapper clearfix">
        <div class="center">
            <h1 id="title">First</h1> <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> <h1 id="title">Second</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
</div>

相关CSS:

.center { display: table; margin: 0 auto; }

#title
{
padding: 20px;
display: inline;
font-size: 4.5em;
border-top: 4px solid #5dc1c4;
border-bottom: 4px solid #5dc1c4; 
}

如果有人能解释为什么文本不是图像的任何一侧,将非常感激.

谢谢

编辑:

虽然下面的答案是有效的,但我实际上通过将<img>放入<h1>而不是将它们分开来解决了这个问题,如下所示:

<h1 id="title">First <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> Second</h1>

我正在使用HTML5 BoilerPlate.

我想在移动设备上使某个块的字体大小很小.

我试过这个,但它不起作用:

.searchresult {
    font-size: 0.5em;
    line-height: 1.4;
}
@media only screen and (min-width: 480px) {
    .search-result {
        font-size: 1em;
    }
}
@media only screen and (min-width: 768px) {
    .search-result {
        font-size: 1em;
    }
}
@media only screen and (min-width: 1140px) {
    .search-result {
        font-size: 1em;
    }
}

我认为根据@media工作原理制作普通尺寸,但我的Mac和手机上的字体很小.

我很感激任何帮助,谢谢!

我正在尝试打印位于引导程序面板内的Google地图画布,如下所示:

<div class="panel panel-default">
    <div class="panel-body">
        <div id="map">...</div>
    </div>
</div>

我正在尝试以简单的方式打印,只需按下即可CTRL + P.但是在打印可视化框中,地图是空白的.可能会发生什么？

一些图片:

在页面

在打印盒