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

最新推荐文章于 2024-12-11 10:53:31 发布

LM Wang

最新推荐文章于 2024-12-11 10:53:31 发布

阅读量569

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/liminwang0311/article/details/93589225

JavaScript 专栏收录该内容

80 篇文章

订阅专栏

本文通过MDNwebdocs的Web入门实例，详细解析了HTML、CSS和JavaScript的使用，包括网页布局、样式设置及交互功能实现。重点介绍了如何在HTML中引入外部样式表和脚本文件，以及如何使用JavaScript操作DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

HTML代码：

<!doctype html>
<html>

<head>
  <meta charset="uft-8">
  <title>测试页面</title>
  <!-- <link href="styles/style.css" rel="stylesheet" type="text/css"> -->
  <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>

脚本代码：

let myImage = document.querySelector('img');
              
myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src', 'images/firefox2firefox-icon_2.png');
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}

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

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