堆棧內存溢出
  簡體   English   中英

為什么 HTML 和 Body 標簽在我的編輯器中標記為紅色？

[英]Why are the HTML and Body tags marked in red in my editor?

 原文  2021-09-27 16:28:58  3   1    html

問題描述

我嘗試在我的代碼中尋找錯誤，但沒有找到任何錯誤，然而，HTML 和 Body 標簽在我的編輯器中突出顯示。 知道為什么嗎？ 很短的一段代碼，但也許我的眼睛看不到什么。 如果有人想幫我檢查一下，我會在下面發布我的代碼。 謝謝！ https://pastebin.com/bmdhSd2b

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link
      rel="icon"
      href="Link"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
 
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Encode+Sans&display=swap");
        body, html {
            height: 100%;
            margin: 0;
        }
 
        body {
          font-family: "Encode Sans";
          color: #ffffff;
          font-size: 18px;
          padding: 1em;
          line-height: 1.4;
          text-align: center;
          margin-top: 5vw;
          background-color: #25272a;
          margin: 0;
        }
 
        a {
          color: #0a0a23;
          text-decoration: underline;
        }
 
        a:hover {
          color: #f5f6f7;
          background-color: #1b1b32;
          cursor: pointer;
          text-decoration: none;
        }
 
        a:active {
          box-shadow: none;
          top: 5px;
        }
 
      h1 {
        text-align: center;
      }
      .photos {
        width: 50%;
        margin: 0 auto;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center;
      }
 
      figcaption {
        text-align: center;
      }
 
      footer {
        font-size: 0.75em;
        margin-top: 20px;
      }
 
      @media (max-width: 650px) {
        .photos {
          flex-direction: column;
        }
      }
      .logot {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 80px;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: 2px 2px #000000
      }
      .main-title {
       font-size: 60px;
       color: white;
       text-shadow: 1px 1px 1px black
       position: fixed;
       top: 90%;
       left: 50%;
      }
      .bgbl {
          background-color: #4d4d4d;
          border-radius:25px;
          color: #b3cccc;
      }
      .typewrite {
          color: #b3cccc;
      }
      ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #2f3236;
  border-radius: 15px;
  z-index: 10000;
  position: fixed;
  top: 5px;
  width: 100%;
 
}
 
li {
  float: left;
}
 
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
li a:hover:not(.active) {
  background-color: #111;
}
 
.active {
  background-color: #3eaf7c;
}
      .buttono {
  background-color: #3eaf7c;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
 
.buttono1 {
  background-color: #25272a;
  color: white; 
  border: 2px solid #3eaf7c;
  border-radius: 15px;
}
 
.buttono1:hover {
  background-color: #3eaf7c;
  color: white;
}
      .bg {
  background-image: url("Link");
  height:40%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 25px;
}
    </style>
 
  </head>
 
  <body>
  <ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  </ul>
   <div class="bg"></div>
   <h1 class="main-title">Title</h1>
   <a href="Link" class="buttono buttono1">Join</a>
  </body>
</html>

1 個解決方案

解決方案1
 0  2021-09-27 16:39:30

也許您的編輯不喜歡您將結尾/>換行？ 或者，您的編輯器很老，不喜歡<tag/>形式。 另一個原因可能是您在 CSS 語句之一后忘記了分號。 試試這個整理過的代碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <link rel="icon" href="Link"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

  <style>
    @import url("https://fonts.googleapis.com/css2?family=Encode+Sans&display=swap");
    body,
    html {
      height: 100%;
      margin: 0;
    }
    
    body {
      font-family: "Encode Sans";
      color: #ffffff;
      font-size: 18px;
      padding: 1em;
      line-height: 1.4;
      text-align: center;
      margin-top: 5vw;
      background-color: #25272a;
      margin: 0;
    }
    
    a {
      color: #0a0a23;
      text-decoration: underline;
    }
    
    a:hover {
      color: #f5f6f7;
      background-color: #1b1b32;
      cursor: pointer;
      text-decoration: none;
    }
    
    a:active {
      box-shadow: none;
      top: 5px;
    }
    
    h1 {
      text-align: center;
    }
    
    .photos {
      width: 50%;
      margin: 0 auto;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    figcaption {
      text-align: center;
    }
    
    footer {
      font-size: 0.75em;
      margin-top: 20px;
    }
    
    @media (max-width: 650px) {
      .photos {
        flex-direction: column;
      }
    }
    
    .logot {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 80px;
      transform: translate(-50%, -50%);
      color: white;
      text-shadow: 2px 2px #000000
    }
    
    .main-title {
      font-size: 60px;
      color: white;
      text-shadow: 1px 1px 1px black;
      position: fixed;
      top: 90%;
      left: 50%;
    }
    
    .bgbl {
      background-color: #4d4d4d;
      border-radius: 25px;
      color: #b3cccc;
    }
    
    .typewrite {
      color: #b3cccc;
    }
    
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #2f3236;
      border-radius: 15px;
      z-index: 10000;
      position: fixed;
      top: 5px;
      width: 100%;
    }
    
    li {
      float: left;
    }
    
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    li a:hover:not(.active) {
      background-color: #111;
    }
    
    .active {
      background-color: #3eaf7c;
    }
    
    .buttono {
      background-color: #3eaf7c;
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      transition-duration: 0.4s;
      cursor: pointer;
    }
    
    .buttono1 {
      background-color: #25272a;
      color: white;
      border: 2px solid #3eaf7c;
      border-radius: 15px;
    }
    
    .buttono1:hover {
      background-color: #3eaf7c;
      color: white;
    }
    
    .bg {
      background-image: url("Link");
      height: 40%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      border-radius: 25px;
    }
  </style>

</head>

<body>
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
  <div class="bg"></div>
  <h1 class="main-title">Title</h1>
  <a href="Link" class="buttono buttono1">Join</a>
</body>

</html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 為什么頁面上的結束正文和html標簽在方括號中顯示為紅色？ 為什么html標簽文本是紅色的？ Ace Editor 刪除我的 HTML 標簽 TINYMCE編輯器中的html，head，body標簽-SEO問題 HTML正文中的樣式和腳本標簽......為什么不呢？ wp_editor中的TinyMCE編輯器正在刪除我的html標簽 CSS：HTML和正文標簽的寬度設置為100％-為什么需要這樣做？ 在HTML源頁面（Firefox）中，“＆”號實體標記為紅色 為什么HTML標簽在我的java程序中不起作用？ 為什么我的XSLT在這里剝離HTML標記
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM