浏览器按代码在文件中的顺序解析HTML

古城微笑少年丶 2022-01-07 01:11 201阅读 0赞

今天试了一下MDN web docs上讲Web入门的一个例子。

HTML代码：

<!doctype html>
    <html>
    
    <head>
      <meta charset="uft-8">
      <title>测试页面</title>
      
      <link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">
      <style>
        html {
          /* px 表示 “像素（pixels）”: 基础字号为 10 像素 */
          font-size: 10px;
          /* Google fonts 输出的 CSS */
          font-family: 'Open Sans', sans-serif;
          background-color: #00539F;
        }
    
        h1 {
          margin: 0;
          padding: 20px 0;
          color: #00539F;
          text-shadow: 3px 3px 1px black;
        }
    
        p,
        li {
          font-size: 16px;
          line-height: 2;
          letter-spacing: 1px;
        }
    
        body {
          width: 600px;
          margin: 0 auto;
          background-color: #ff9500;
          padding: 0 20px 20px 20px;
          border: 5px solid black;
        }
    
        img {
          display: block;
          margin: 0 auto;
        }
      </style>
      <script src="scripts/main.js"></script>
    </head>
    
    <body>
      <h1>Mozilla 酷毙了！</h1>
      <img src="images/firefox-icon.png" alt="Firefox 标志：一只盘旋在地球上的火狐">
      <p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的</p>
      <ul>
        <li>技术人员</li>
        <li>思考者</li>
        <li>建造者</li>
      </ul>
      <p>我们致力于让 Internet 保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p>
      <p>为了达成我们共同的理想，我们遵循一系列的价值观和理念，请参阅 <a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>。</p>
    </body>
    
    </html>

脚本代码：

原因是我将script元素放到了head中，这样，执行js代码时，img元素还没有加载，导致myImage为null。

如果想摆脱浏览器按顺序解析的限制，要这么写： <script src="scripts/main.js" async></script>，即必须指明 async。