时间戳

首页 > 解决方案 > 标签“img”只能作为标签“noscript”的后代出现。您指的是 'amp-img' 吗？

html - 标签“img”只能作为标签“noscript”的后代出现。您指的是 'amp-img' 吗？

问题描述

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Reliant Industrial Supply</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link
      rel="canonical"
      href="https://http://www.reliantindustrialsupply.com/"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Work+Sans:300,600"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Sora:wght@200&display=swap"
    />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": ["logo.jpg"]
      }
    </script>
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >

    <style amp-custom>
      :root {
        --background: rgba(299, 299, 299, 0.95);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        font-family: "Work Sans";
      }

      /* navigation styles start here */

      .header {
        background: var(--background);
        text-align: center;
        position: fixed;
        z-index: 999;
        width: 100%;
      }

      .nav-toggle {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      .nav-toggle:focus ~ .nav-toggle-label {
        outline: 3px solid rgba(lightblue, 0.75);
      }

      .nav-toggle-label {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 1em;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .nav-toggle-label span,
      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        display: block;
        background: black;
        height: 2px;
        width: 2em;
        border-radius: 2px;
        position: relative;
      }

      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        content: "";
        position: absolute;
      }

      .nav-toggle-label span::before {
        bottom: 7px;
      }

      .nav-toggle-label span::after {
        top: 7px;
      }

      nav {
        position: absolute;
        text-align: left;
        top: 100%;
        left: 0;
        background: var(--background);
        width: 100%;
        transform: scale(1, 0);
        transform-origin: top;
        transition: transform 400ms ease-in-out;
      }

      nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      nav li {
        margin-bottom: 1em;
        margin-left: 1em;
      }

      nav a {
        color: black;
        text-decoration: none;
        font-size: 1.2rem;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
      }

      nav a:hover {
        color: #000;
      }

      .nav-toggle:checked ~ nav {
        transform: scale(1, 1);
      }

      .nav-toggle:checked ~ nav a {
        opacity: 1;
        transition: opacity 250ms ease-in-out 250ms;
      }

      amp-carousel {
        padding-top: 20em;
      }

      @media screen and (min-width: 800px) {
        .nav-toggle-label {
          display: none;
        }

        .header {
          display: grid;
          grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
        }

        .logo {
          grid-column: 2 / 3;
        }

        nav {
          position: relative;
          text-align: left;
          transition: none;
          transform: scale(1, 1);
          background: none;
          top: initial;
          left: initial;

          grid-column: 3 / 4;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        nav ul {
          display: flex;
        }

        nav li {
          margin-left: 3em;
          margin-bottom: 0;
        }

        nav a {
          opacity: 1;
          position: relative;
        }

        nav a::before {
          content: "";
          display: block;
          height: 5px;
          background: black;
          position: absolute;
          top: -0.75em;
          left: 0;
          right: 0;
          transform: scale(0, 1);
          transition: transform ease-in-out 250ms;
        }

        nav a:hover::before {
          transform: scale(1, 1);
        }
      }

      amp-carousel {
        top: 0em;
        padding-bottom: 5em;
      }

      .content {
        background-color: dark-grey;
      }
      .Centered {
        text-align: center;
        font-family: "Work Sans";
        font-style: normal;
        font-weight: 300;
        padding-bottom: 2em;
      }

      .left {
        margin: 2rem;
        font-family: 'Sora', sans-serif;
        font-style: normal;
        font-weight: 300;
      }

      .clearfix {
        overflow: auto;
        display: flex;
        padding-bottom: 5em;
      }

      .footer {
          width: 100vw;
          display: block;
          overflow: hidden;
          padding: 20px 0;
          box-sizing: border-box;
          background-color: #18181a;
      }

      .innerFooter {
          display: block;
          margin: 0 auto;
          width: 1100px;
          height: 100%;
      }

      .innerFooter .logoContainer {
        width: 35%;
        float: left;
        height: 100%;
        display: block;
      }

      .innerFooter .footerThird {
        padding-left: 20px;
        width: calc(21.66666667 - 20px);
        margin-right: 10px;
        float: left;
        height: 100%;
      }

      .innerFooter .footerThird:last-child {
        margin-right: 0;

      }

      .innerFooter .footerThird h1{
        font-family: 'Work Sans';
        font-size: 22px;
        color: white;
        display: block;
        width: 100%;
        margin-bottom: 20px;
      }

      .innerFooter span {
        font-family: 'Work Sans';
        font-size: 12px;
        color: white;
      }
    </style>

    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
    ></script>
    <script
      async
      custom-element="amp-video"
      src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
    ></script>
  </head>
  <body>
  <div class="header">
    <amp-img
    src="https://i.imgur.com/vPr7fdQ.png"
    width="175px"
    height="50px"
    ></amp-img>
    <input type="checkbox" id="nav-toggle" class="nav-toggle" />
    <nav>
      <ul>
        <li>
          <a
            href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
            >Home</a
          >
        </li>
        <li><a href="file:///C:/Users/pilot/Documents/GitHub/AMP/Products/products_page.html">Products</a></li>
        <li>
          <a
            href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
            >Contact</a
          >
        </li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </div>


    <amp-carousel
      layout="fixed-height"
      type="slides"
      height="900"
      width="auto"
      controls
      loop
      autoplay
      delay="3000"
      data-next-button-aria-label="Go to next slide"
      data-previous-button-aria-label="Go to previous slide"
    >
      <amp-img
        src="https://i.imgur.com/6H2AFQm.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/6jOfwYY.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/AFq0mSz.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/7tMi95w.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/G020qk3.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-video
        layout="fixed"
        autoplay
        loop
        width="1280"
        height="720"
        poster="https://i.imgur.com/lNFDJb1.png"
      >
        <source src="https://i.imgur.com/3TFahoU.mp4" type="video/mp4" />
        <div fallback>
          <p>This browser does not support this video element.</p>
        </div>
      </amp-video>
    </amp-carousel>

    <div class="content">
      <h1 class="Centered">
        Providing solutions for all your surface treatments
      </h1>

      <div class="clearfix">
        <div>
          <p class="left">
            Reliant Industrial Supply provides solutions for all your surface
            treatments.Our supplier sia Coated Abrasives, the oldest abrasive
            manufacturer in the world, brings one of the best abrasives on the
            market. We supply Flex Trim brushes for all liner and carousel
            sanding needs. We provide AirVantage Sanders and Coilhose
            Pneumatics, for when you want the best quality handsanding tools and
            results. When it comes to machines, we have one of the best and also
            one of the most experienced machinery manufacturers, Timesavers Wide
            Belt Sanders. For cutting and shaping we have a wide variety of
            Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or
            sanding, you can rely on Reliant. We provide solutions for surface
            preparation through complete sanding systems which include coated
            abrasives, pneumatic sanders and machinery.
          </p>
        </div>

        <div>
          <img class="right" src="https://i.imgur.com/u8hDnzX.jpg" layout="responsive" width="800px;" height="300px;"/>
        </div>
      </div>
      <div class="footer">
        <div class="innerFooter">
          <div class="logoContainer">
            <amp-img src="https://i.imgur.com/jlRKmij.jpg" height="109" width="200">
          </div>

          <div class="footerThird">
            <h1>Address: 18061 Kirk Ave, Tustin, CA 92780</h1>
            <h1>Phone Number:  (714) 287-6815 </h1>
          </div>

          <div class="footerThird">
            <span>Copyright 2020 Reliant Industrial Supply<span>
          </div>
      </div>
    </div>
  </body>
</html>

如果您可以在第 469 行看到，那里有一个不是 AMP 的 img。显然，您会将其更改为 amp-img 标签，然后您将被设置。虽然这没有错，但它似乎对我来说不能正常工作。当我在 amp 验证器中将其更改为 amp-img 时，它可以工作。但是当我运行该文件以查看它是如何工作的时，它就消失了，这真的很令人沮丧，因为我试图修复它。相同的修复剪切和粘贴工作，然后我将其剪切并再次粘贴，然后它不起作用。如果有人能弄清楚我为什么会遇到这个问题，将不胜感激！谢谢！

标签： htmlcss

解决方案

推荐阅读