HTML: 如何设置带有外部文件引用的网页head和body

Question

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

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

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

我是否应该添加或更改有关我的 文档头部 的任何内容？
我是否以正确的方式并在 外部样式表 正确的位置 + 在此处以 "/" 开始 href 是否正确？
（我读到 CSS should be included before JS for 更好的性能。）
我是否以正确的方式包含 外部 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>

非常感谢，麦克

Answer 1

看起来不错。只是一些小事：
- 您应该添加 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 以确保您不会遇到任何 MSIE 兼容模式问题。
- 您可以在头部添加图标定义。
是的，样式表属于头部。 href 取决于您存储 css 文件的位置。
- 如果要将样式表包含在与 HTML 文件相同的文件夹中，请使用 href="styles.css"
- 如果您想在另一个文件夹中包含样式表，例如[css] 文件夹，使用 href="css/styles.css"
- 如果您在各个文件夹中有 HTML 个文件并且您不想一直为每个 HTML 文件重写您的 href，您可以在 href 开头加上斜杠以指示搜索应该从服务器的 "root" 开始，例如href="/css/styles.css"
将 ALL 您的 JS（包括 jQuery）移动到页面底部，就在结束 body 标记之前。除非有非常充分的理由在页面开始显示之前需要 JS 运行，否则您不应该在头部使用 JS。

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

HTML: 如何设置带有外部文件引用的网页head和body

HTML: How to set up web page head and body with external file references

html

javascript

css

html-head

document-body