{"id":1907,"date":"2025-02-22T13:23:07","date_gmt":"2025-02-22T05:23:07","guid":{"rendered":"https:\/\/www.laixuexila.com\/?p=1907"},"modified":"2025-02-22T13:24:48","modified_gmt":"2025-02-22T05:24:48","slug":"html-%e9%a2%9c%e8%89%b2","status":"publish","type":"post","link":"https:\/\/www.laixuexila.com\/index.php\/2025\/02\/22\/html-%e9%a2%9c%e8%89%b2\/","title":{"rendered":"HTML \u989c\u8272"},"content":{"rendered":"\n

\u5728 HTML \u4e2d\uff0c\u989c\u8272\u7528\u4e8e\u8bbe\u7f6e\u6587\u672c\u3001\u80cc\u666f\u3001\u8fb9\u6846\u3001\u6309\u94ae\u7b49\u5143\u7d20\u7684\u989c\u8272\u3002\u989c\u8272\u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u5728 HTML \u4e2d\u8868\u793a\uff0c\u5305\u62ec\u4f7f\u7528 \u989c\u8272\u540d\u79f0<\/strong>\u3001\u5341\u516d\u8fdb\u5236\u503c<\/strong>\u3001RGB \u503c<\/strong>\u3001HSL \u503c<\/strong> \u548c \u900f\u660e\u5ea6<\/strong>\uff08\u901a\u8fc7 RGBA \u548c HSLA\uff09\u3002<\/p>\n\n\n\n

1. \u989c\u8272\u540d\u79f0<\/strong><\/h4>\n\n\n\n

HTML \u652f\u6301 140 \u79cd\u9884\u5b9a\u4e49\u7684\u989c\u8272\u540d\u79f0\uff0c\u4f8b\u5982 red<\/code>\u3001blue<\/code>\u3001green<\/code> \u7b49\u3002<\/p>\n\n\n\n

\u793a\u4f8b\uff1a<\/strong><\/p>\n\n\n\n

<p style=\"color: red;\">\u8fd9\u6bb5\u6587\u5b57\u662f\u7ea2\u8272\u7684\u3002<\/p>\n<p style=\"color: blue;\">\u8fd9\u6bb5\u6587\u5b57\u662f\u84dd\u8272\u7684\u3002<\/p><\/code><\/pre>\n\n\n\n
2. \u5341\u516d\u8fdb\u5236\u989c\u8272\u503c<\/strong><\/h4>\n\n\n\n
\u5341\u516d\u8fdb\u5236\u989c\u8272\u662f\u7531 #<\/code> \u540e\u9762\u8ddf\u7740 6 \u4e2a\u5b57\u7b26\u7ec4\u6210\u7684\u4ee3\u7801\uff0c\u8868\u793a\u989c\u8272\u7684 RGB \u503c\u3002\u6bcf\u4e24\u4e2a\u5b57\u7b26\u8868\u793a\u7ea2\u8272\u3001\u7eff\u8272\u548c\u84dd\u8272\u7684\u6d53\u5ea6\u3002<\/p>\n\n\n\n
    \n
  • #RRGGBB<\/code><\/li>\n\n\n\n
  • RR<\/code> \u8868\u793a\u7ea2\u8272\u7684\u503c<\/li>\n\n\n\n
  • GG<\/code> \u8868\u793a\u7eff\u8272\u7684\u503c<\/li>\n\n\n\n
  • BB<\/code> \u8868\u793a\u84dd\u8272\u7684\u503c<\/li>\n<\/ul>\n\n\n\n
    \u6bcf\u4e2a\u989c\u8272\u503c\u7684\u8303\u56f4\u662f 00 \u5230 FF\uff08\u5341\u516d\u8fdb\u5236\uff09\u3002<\/p>\n\n\n\n
    \u793a\u4f8b\uff1a<\/strong><\/p>\n\n\n\n
    <p style=\"color: #ff5733;\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6a59\u7ea2\u8272\u7684\u3002<\/p>\n<p style=\"color: #0066cc;\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6df1\u84dd\u8272\u7684\u3002<\/p><\/code><\/pre>\n\n\n\n
    3. RGB \u989c\u8272\u503c<\/strong><\/h4>\n\n\n\n
    RGB \u989c\u8272\u6a21\u578b\u4f7f\u7528\u7ea2\u8272\u3001\u7eff\u8272\u548c\u84dd\u8272\u7684\u5f3a\u5ea6\u503c\u6765\u5b9a\u4e49\u989c\u8272\u3002\u6bcf\u4e2a\u503c\u7684\u8303\u56f4\u4ece 0 \u5230 255\u3002<\/p>\n\n\n\n
      \n
    • rgb(red, green, blue)<\/code><\/li>\n\n\n\n
    • red<\/code>\u3001green<\/code>\u3001blue<\/code> \u7684\u503c\u4ece 0 \u5230 255\uff0c\u8868\u793a\u7ea2\u3001\u7eff\u3001\u84dd\u7684\u5f3a\u5ea6\u3002<\/li>\n<\/ul>\n\n\n\n
      \u793a\u4f8b\uff1a<\/strong><\/p>\n\n\n\n
      <p style=\"color: rgb(255, 87, 51);\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6a59\u7ea2\u8272\u7684\u3002<\/p>\n<p style=\"color: rgb(0, 102, 204);\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6df1\u84dd\u8272\u7684\u3002<\/p><\/code><\/pre>\n\n\n\n
      4. RGBA \u989c\u8272\u503c<\/strong><\/h4>\n\n\n\n
      RGBA \u989c\u8272\u662f RGB \u989c\u8272\u6a21\u578b\u7684\u6269\u5c55\uff0c\u589e\u52a0\u4e86\u4e00\u4e2a Alpha \u901a\u9053\u6765\u63a7\u5236\u900f\u660e\u5ea6\u3002Alpha \u7684\u503c\u8303\u56f4\u662f 0\uff08\u5b8c\u5168\u900f\u660e\uff09\u5230 1\uff08\u5b8c\u5168\u4e0d\u900f\u660e\uff09\u3002<\/p>\n\n\n\n
        \n
      • rgba(red, green, blue, alpha)<\/code><\/li>\n\n\n\n
      • alpha<\/code>\uff1a\u900f\u660e\u5ea6\u503c\uff0c0 \u5230 1 \u4e4b\u95f4\u3002<\/li>\n<\/ul>\n\n\n\n
        \u793a\u4f8b\uff1a<\/strong><\/p>\n\n\n\n
        <p style=\"color: rgba(255, 87, 51, 0.5);\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6a59\u7ea2\u8272\u7684\uff0c\u900f\u660e\u5ea6\u4e3a 50%\u3002<\/p>\n<p style=\"color: rgba(0, 102, 204, 0.8);\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6df1\u84dd\u8272\u7684\uff0c\u900f\u660e\u5ea6\u4e3a 80%\u3002<\/p><\/code><\/pre>\n\n\n\n
        5. HSL \u989c\u8272\u503c<\/strong><\/h4>\n\n\n\n
        HSL \u4ee3\u8868\u8272\u8c03 (Hue)\u3001\u9971\u548c\u5ea6 (Saturation) \u548c\u4eae\u5ea6 (Lightness)\u3002HSL \u53ef\u4ee5\u66f4\u76f4\u89c2\u5730\u5b9a\u4e49\u989c\u8272\u3002<\/p>\n\n\n\n
          \n
        • hsl(hue, saturation%, lightness%)<\/code><\/li>\n\n\n\n
        • hue<\/code>\uff1a\u8272\u76f8\uff0c0 \u5230 360\uff0c\u8868\u793a\u989c\u8272\u7684\u7c7b\u578b\u3002<\/li>\n\n\n\n
        • saturation<\/code>\uff1a\u9971\u548c\u5ea6\uff0c0% \u5230 100%\u3002<\/li>\n\n\n\n
        • lightness<\/code>\uff1a\u4eae\u5ea6\uff0c0% \u5230 100%\u3002<\/li>\n<\/ul>\n\n\n\n
          \u793a\u4f8b\uff1a<\/strong><\/p>\n\n\n\n
          <p style=\"color: hsl(9, 100%, 60%);\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6a59\u7ea2\u8272\u7684\u3002<\/p>\n<p style=\"color: hsl(210, 100%, 40%);\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6df1\u84dd\u8272\u7684\u3002<\/p><\/code><\/pre>\n\n\n\n
          6. HSLA \u989c\u8272\u503c<\/strong><\/h4>\n\n\n\n
          HSLA \u989c\u8272\u662f HSL \u989c\u8272\u7684\u6269\u5c55\uff0c\u589e\u52a0\u4e86\u4e00\u4e2a Alpha \u901a\u9053\u6765\u63a7\u5236\u900f\u660e\u5ea6\u3002<\/p>\n\n\n\n
            \n
          • hsla(hue, saturation%, lightness%, alpha)<\/code><\/li>\n\n\n\n
          • alpha<\/code>\uff1a\u900f\u660e\u5ea6\u503c\uff0c0 \u5230 1 \u4e4b\u95f4\u3002<\/li>\n<\/ul>\n\n\n\n
            \u793a\u4f8b\uff1a<\/strong><\/p>\n\n\n\n
            <p style=\"color: hsla(9, 100%, 60%, 0.5);\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6a59\u7ea2\u8272\u7684\uff0c\u900f\u660e\u5ea6\u4e3a 50%\u3002<\/p>\n<p style=\"color: hsla(210, 100%, 40%, 0.8);\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6df1\u84dd\u8272\u7684\uff0c\u900f\u660e\u5ea6\u4e3a 80%\u3002<\/p><\/code><\/pre>\n\n\n\n
            7. \u900f\u660e\u989c\u8272<\/strong><\/h4>\n\n\n\n
            \u900f\u660e\u989c\u8272\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528 RGBA \u6216 HSLA \u6765\u5b9e\u73b0\u3002\u900f\u660e\u7684\u5143\u7d20\u53ef\u4ee5\u4e3a\u9875\u9762\u5e26\u6765\u66f4\u52a0\u590d\u6742\u7684\u5c42\u6b21\u611f\u3002<\/p>\n\n\n\n
            \u793a\u4f8b\uff1a<\/strong><\/p>\n\n\n\n
            <p style=\"background-color: rgba(0, 0, 0, 0.2);\">\u8fd9\u4e2a\u6bb5\u843d\u7684\u80cc\u666f\u989c\u8272\u662f\u9ed1\u8272\uff0c\u900f\u660e\u5ea6\u4e3a 20%\u3002<\/p>\n<p style=\"background-color: hsla(0, 0%, 100%, 0.1);\">\u8fd9\u4e2a\u6bb5\u843d\u7684\u80cc\u666f\u989c\u8272\u662f\u767d\u8272\uff0c\u900f\u660e\u5ea6\u4e3a 10%\u3002<\/p><\/code><\/pre>\n\n\n\n
            \u603b\u7ed3<\/h3>\n\n\n\n
            HTML \u63d0\u4f9b\u4e86\u591a\u79cd\u65b9\u6cd5\u6765\u5b9a\u4e49\u989c\u8272\uff0c\u5305\u62ec\u989c\u8272\u540d\u79f0\u3001\u5341\u516d\u8fdb\u5236\u3001RGB\u3001RGBA\u3001HSL \u548c HSLA\u3002\u6839\u636e\u5177\u4f53\u9700\u6c42\uff0c\u53ef\u4ee5\u9009\u62e9\u5408\u9002\u7684\u65b9\u5f0f\u6765\u5b9a\u4e49\u989c\u8272\uff0c\u4e30\u5bcc\u9875\u9762\u7684\u89c6\u89c9\u6548\u679c\u3002\u5728\u5f00\u53d1\u4e2d\uff0c\u901a\u5e38\u6839\u636e\u989c\u8272\u7684\u7528\u9014\uff08\u5982\u80cc\u666f\u8272\u3001\u6587\u672c\u8272\u3001\u8fb9\u6846\u8272\u7b49\uff09\u9009\u62e9\u4e0d\u540c\u7684\u8868\u793a\u65b9\u5f0f\u3002<\/p>\n\n\n\n
            \n\n\n\n
            \u9644\u5f55\uff1aHTML \u989c\u8272\u540d<\/h3>\n\n\n\n
            HTML \u652f\u6301 140 \u79cd\u9884\u5b9a\u4e49\u7684\u989c\u8272\u540d\u79f0\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u8fd9\u4e9b\u989c\u8272\u540d\u79f0\u6765\u8bbe\u7f6e\u5143\u7d20\u7684\u989c\u8272\uff0c\u800c\u65e0\u9700\u8bb0\u4f4f\u5341\u516d\u8fdb\u5236\u503c\u6216 RGB \u503c\u3002\u8fd9\u4e9b\u989c\u8272\u540d\u79f0\u662f\u6839\u636e\u6807\u51c6\u8272\u5f69\u6a21\u578b\u5b9a\u4e49\u7684\uff0c\u5e76\u4e14\u53ef\u4ee5\u5728\u4efb\u4f55 HTML \u5143\u7d20\u4e2d\u4f7f\u7528\u3002<\/p>\n\n\n\n
            \u5e38\u89c1\u7684 HTML \u989c\u8272\u540d\uff1a<\/h4>\n\n\n\n
              \n
            • \u9ed1\u8272<\/strong>: black<\/code><\/li>\n\n\n\n
            • \u767d\u8272<\/strong>: white<\/code><\/li>\n\n\n\n
            • \u7ea2\u8272<\/strong>: red<\/code><\/li>\n\n\n\n
            • \u7eff\u8272<\/strong>: green<\/code><\/li>\n\n\n\n
            • \u84dd\u8272<\/strong>: blue<\/code><\/li>\n\n\n\n
            • \u9ec4\u8272<\/strong>: yellow<\/code><\/li>\n\n\n\n
            • \u7d2b\u8272<\/strong>: purple<\/code><\/li>\n\n\n\n
            • \u6a59\u8272<\/strong>: orange<\/code><\/li>\n\n\n\n
            • \u7070\u8272<\/strong>: gray<\/code><\/li>\n\n\n\n
            • \u68d5\u8272<\/strong>: brown<\/code><\/li>\n\n\n\n
            • \u7c89\u7ea2\u8272<\/strong>: pink<\/code><\/li>\n\n\n\n
            • \u91d1\u8272<\/strong>: gold<\/code><\/li>\n\n\n\n
            • \u9752\u8272<\/strong>: cyan<\/code><\/li>\n\n\n\n
            • \u6df1\u7070\u8272<\/strong>: darkgray<\/code><\/li>\n\n\n\n
            • \u6d77\u84dd\u8272<\/strong>: deepskyblue<\/code><\/li>\n\n\n\n
            • \u73ab\u7470\u7ea2<\/strong>: deeppink<\/code><\/li>\n\n\n\n
            • \u6de1\u84dd\u8272<\/strong>: lightblue<\/code><\/li>\n\n\n\n
            • \u706b\u7816\u8272<\/strong>: firebrick<\/code><\/li>\n<\/ul>\n\n\n\n
              \u793a\u4f8b\uff1a\u4f7f\u7528\u989c\u8272\u540d<\/h4>\n\n\n\n
              <p style=\"color: red;\">\u8fd9\u6bb5\u6587\u5b57\u662f\u7ea2\u8272\u7684\u3002<\/p>\n<p style=\"color: green;\">\u8fd9\u6bb5\u6587\u5b57\u662f\u7eff\u8272\u7684\u3002<\/p>\n<p style=\"color: blue;\">\u8fd9\u6bb5\u6587\u5b57\u662f\u84dd\u8272\u7684\u3002<\/p>\n<p style=\"color: yellow;\">\u8fd9\u6bb5\u6587\u5b57\u662f\u9ec4\u8272\u7684\u3002<\/p>\n<p style=\"color: orange;\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6a59\u8272\u7684\u3002<\/p><\/code><\/pre>\n\n\n\n
              \u5176\u4ed6\u5e38\u89c1\u7684\u989c\u8272\u540d\uff08\u4ec5\u5217\u51fa\u90e8\u5206\uff09\uff1a<\/h4>\n\n\n\n
                \n
              • aliceblue<\/code><\/li>\n\n\n\n
              • antiquewhite<\/code><\/li>\n\n\n\n
              • darkblue<\/code><\/li>\n\n\n\n
              • darkgreen<\/code><\/li>\n\n\n\n
              • goldenrod<\/code><\/li>\n\n\n\n
              • lightgreen<\/code><\/li>\n\n\n\n
              • midnightblue<\/code><\/li>\n\n\n\n
              • pink<\/code><\/li>\n\n\n\n
              • plum<\/code><\/li>\n\n\n\n
              • seashell<\/code><\/li>\n\n\n\n
              • snow<\/code><\/li>\n<\/ul>\n\n\n\n
                HTML \u989c\u8272\u540d\u63d0\u4f9b\u4e86\u4e00\u79cd\u7b80\u5355\u4e14\u6613\u4e8e\u4f7f\u7528\u7684\u65b9\u5f0f\u6765\u4e3a\u7f51\u9875\u5143\u7d20\u8bbe\u7f6e\u989c\u8272\u3002\u5b83\u9002\u7528\u4e8e\u5feb\u901f\u5f00\u53d1\u548c\u7b80\u5355\u7684\u6837\u5f0f\u5b9a\u4e49\u3002\u4e0d\u8fc7\uff0c\u5728\u9700\u8981\u66f4\u52a0\u7cbe\u786e\u548c\u81ea\u5b9a\u4e49\u7684\u989c\u8272\u65f6\uff0c\u4f7f\u7528\u5341\u516d\u8fdb\u5236\u6216 RGB \u989c\u8272\u503c\u53ef\u80fd\u4f1a\u66f4\u5408\u9002\u3002<\/p>\n\n\n\n
                <\/p>\n","protected":false},"excerpt":{"rendered":"
                \u5728 HTML \u4e2d\uff0c\u989c\u8272\u7528\u4e8e\u8bbe\u7f6e\u6587\u672c\u3001\u80cc\u666f\u3001\u8fb9\u6846\u3001\u6309\u94ae\u7b49\u5143\u7d20\u7684\u989c\u8272\u3002\u989c\u8272\u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u5728 HTML \u4e2d\u8868\u793a\uff0c\u5305 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[],"class_list":["post-1907","post","type-post","status-publish","format-standard","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/1907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/comments?post=1907"}],"version-history":[{"count":2,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/1907\/revisions"}],"predecessor-version":[{"id":1910,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/1907\/revisions\/1910"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=1907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=1907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=1907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}