javascript - HTML:如何设置带有外部文件引用的网页头部和主体

标签 javascript html css document-body html-head

我是 HTML 和编程的新手,希望有人能帮助我。

我已经为我的网站的第一页编写了代码,现在准备将它们上传到服务器进行测试。

因此,我想知道我的文档的基本结构是否正确,并希望就以下内容提出一些意见:

  1. 我应该添加或更改有关我的文档头部的任何内容吗?
  2. 我包含外部样式表的方式是否正确? 正确的位置 + 在此处以 "/" 开始 href 是否正确?
    (我读到 CSS 应该在 JS 之前包含,因为 更好的表现。)
  3. 我是否以正确的方式包含外部 JS 和 jQuery 引用并且 在正确的位置?
    (我读到 JS 应该包含在主体的末尾以获得更好的性能。)

注意事项: 我网站的所有 PHP/HTML 页面都作为单独的文件保存在同一文件夹中。 此文件夹还包含一个子文件夹 "includes",其中保存了我的样式表和函数文件。

我的 HTML 结构:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="author" content="John Doe" />
        <meta name="description" content="Created: 2015-06" />

        <base href="http://www.myURL.com/" target="_self" />

        <!-- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>

        <!-- CSS -->        
        <link rel="stylesheet" type="text/css" href="includes/styles.css" />
        <!-- CSS - Font Awesome -->
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

        <title>My Page</title>
    </head>

    <body>
        <!-- ... -->
        <footer class="footer">         
            <!-- ... -->
        </footer>

        <!-- JavaScript -->
        <script src="includes/functions.js" type="text/javascript"></script>
    </body>
</html>

非常感谢, 迈克

最佳答案

  1. 看起来不错。只是一些小事:

    • 您应该添加 <meta http-equiv="X-UA-Compatible" content="IE=edge">以确保您不会遇到任何 MSIE 兼容模式问题。

    • 您可以在头部添加网站图标定义。

  2. 是的,样式表属于头部。 href 取决于您存储 css 文件的位置。

    • 如果您想将样式表包含在与 HTML 文件相同的文件夹中,请使用 href="styles.css"
    • 如果您想在另一个文件夹中包含样式表,例如[css] 文件夹,使用 href="css/styles.css"
    • 如果您在不同的文件夹中有 HTML 文件并且您不想一直为每个 HTML 文件重写 href,您可以 href 以斜线开头以指示搜索应该从服务器的“根”开始,例如href="/css/styles.css"
  3. 将您的 JS(包括 jQuery)ALL 移动到页面底部,就在结束 body 标记之前。除非有非常充分的理由说明您需要在页面开始显示之前运行 JS,否则您不应该在头部使用 JS。

有很多东西要学,但它会非常有趣和有益。希望您有一个愉快的编程体验。 :)

关于javascript - HTML:如何设置带有外部文件引用的网页头部和主体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30818830/

相关文章:

html - 在 Outlook 中错误显示 html 电子邮件

html - 如何摆脱外部表格边框

javascript - 如果我调用一个参数比定义接受的参数多的函数,会发生什么情况?

javascript - 为没有 flash 的网络商店设计拖放式网络图像配置器

javascript - 默认为文件夹中的任何 html 文件

html - 对齐 block 中的元素

html - 背景图片在 IE10 和 IE11 中不显示

javascript - 从 javascript 数组内的对象中删除字符?

javascript - 切换 boolean 变量(应用)

javascript - 环境变量 ReferenceError Postman