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

\u5728 HTML \u4e2d\uff0c\u989c\u8272\u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u8fdb\u884c\u5b9a\u4e49\u3002\u6700\u5e38\u89c1\u7684\u65b9\u5f0f\u662f\u4f7f\u7528 \u5341\u516d\u8fdb\u5236\u989c\u8272\u503c<\/strong>\u3001RGB \u503c<\/strong>\u3001RGBA \u503c<\/strong>\u3001HSL \u503c<\/strong>\u3001HSLA \u503c<\/strong>\u3002\u8fd9\u4e9b\u65b9\u5f0f\u53ef\u4ee5\u7cbe\u786e\u63a7\u5236\u989c\u8272\uff0c\u5e76\u4e14\u5728\u7f51\u9875\u8bbe\u8ba1\u4e2d\u6709\u7740\u5e7f\u6cdb\u7684\u5e94\u7528\u3002<\/p>\n\n\n\n

1. \u5341\u516d\u8fdb\u5236\u989c\u8272\u503c (Hexadecimal)<\/strong><\/h4>\n\n\n\n

\u5341\u516d\u8fdb\u5236\u989c\u8272\u503c\u7531 #<\/code> \u540e\u8ddf 6 \u4e2a\u5b57\u7b26\u7ec4\u6210\uff0c\u8868\u793a\u7ea2\u8272\u3001\u7eff\u8272\u548c\u84dd\u8272\uff08RGB\uff09\u7684\u6d53\u5ea6\u3002\u6bcf\u4e24\u4e2a\u5b57\u7b26\u4ee3\u8868\u4e00\u4e2a\u989c\u8272\u901a\u9053\uff0c\u503c\u4ece 00<\/code> \u5230 FF<\/code>\uff08\u5341\u516d\u8fdb\u5236\uff09\uff0c\u8868\u793a 0 \u5230 255 \u7684\u6574\u6570\u8303\u56f4\u3002<\/p>\n\n\n\n

    \n
  • \u683c\u5f0f\uff1a#RRGGBB<\/code><\/li>\n\n\n\n
  • RR<\/code>\uff1a\u7ea2\u8272\uff08Red\uff09<\/li>\n\n\n\n
  • GG<\/code>\uff1a\u7eff\u8272\uff08Green\uff09<\/li>\n\n\n\n
  • BB<\/code>\uff1a\u84dd\u8272\uff08Blue\uff09<\/li>\n<\/ul>\n\n\n\n

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

    <p style=\"color: #FF5733;\">\u8fd9\u6bb5\u6587\u5b57\u7684\u989c\u8272\u662f\u6a59\u7ea2\u8272\u3002<\/p>\n<p style=\"color: #0066CC;\">\u8fd9\u6bb5\u6587\u5b57\u7684\u989c\u8272\u662f\u6df1\u84dd\u8272\u3002<\/p><\/code><\/pre>\n\n\n\n
    2. RGB \u989c\u8272\u503c<\/strong><\/h4>\n\n\n\n
    RGB \u989c\u8272\u503c\u4f7f\u7528\u7ea2\u8272\uff08R\uff09\u3001\u7eff\u8272\uff08G\uff09\u548c\u84dd\u8272\uff08B\uff09\u4e09\u79cd\u989c\u8272\u7684\u5f3a\u5ea6\u6765\u8868\u793a\u989c\u8272\u3002\u6bcf\u4e2a\u503c\u7684\u8303\u56f4\u662f 0 \u5230 255\u3002<\/p>\n\n\n\n
      \n
    • \u683c\u5f0f\uff1argb(red, green, blue)<\/code><\/li>\n\n\n\n
    • red<\/code>\u3001green<\/code>\u3001blue<\/code>\uff1a\u7ea2\u8272\u3001\u7eff\u8272\u3001\u84dd\u8272\u7684\u503c\uff0c\u8303\u56f4\u4ece 0 \u5230 255\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\u3002<\/p>\n<p style=\"color: rgb(0, 102, 204);\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6df1\u84dd\u8272\u3002<\/p><\/code><\/pre>\n\n\n\n
      3. RGBA \u989c\u8272\u503c<\/strong><\/h4>\n\n\n\n
      RGBA \u662f RGB \u989c\u8272\u7684\u6269\u5c55\uff0c\u52a0\u5165\u4e86 Alpha \u901a\u9053<\/strong>\uff0c\u7528\u4e8e\u5b9a\u4e49\u989c\u8272\u7684\u900f\u660e\u5ea6\u3002alpha<\/code> \u7684\u503c\u8303\u56f4\u4ece 0 \u5230 1\uff0c0 \u8868\u793a\u5b8c\u5168\u900f\u660e\uff0c1 \u8868\u793a\u5b8c\u5168\u4e0d\u900f\u660e\u3002<\/p>\n\n\n\n
        \n
      • \u683c\u5f0f\uff1argba(red, green, blue, alpha)<\/code><\/li>\n\n\n\n
      • alpha<\/code>\uff1a\u900f\u660e\u5ea6\uff0c\u503c\u4ece 0 \u5230 1\uff0c\u8868\u793a\u900f\u660e\u5ea6\u7684\u5f3a\u5f31\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\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\uff0c\u900f\u660e\u5ea6\u4e3a 80%\u3002<\/p><\/code><\/pre>\n\n\n\n
        4. HSL \u989c\u8272\u503c<\/strong><\/h4>\n\n\n\n
        HSL \u4ee3\u8868 \u8272\u76f8 (Hue)<\/strong>\u3001\u9971\u548c\u5ea6 (Saturation)<\/strong> \u548c \u4eae\u5ea6 (Lightness)<\/strong>\u3002HSL \u662f\u4e00\u79cd\u76f4\u89c2\u7684\u989c\u8272\u8868\u793a\u65b9\u5f0f\uff0c\u7279\u522b\u9002\u5408\u8272\u5f69\u7684\u8c03\u6574\u3002<\/p>\n\n\n\n
          \n
        • \u683c\u5f0f\uff1ahsl(hue, saturation%, lightness%)<\/code><\/li>\n\n\n\n
        • hue<\/code>\uff1a\u8272\u76f8\uff0c\u8868\u793a\u989c\u8272\u7684\u79cd\u7c7b\uff0c\u8303\u56f4\u662f 0 \u5230 360\u3002<\/li>\n\n\n\n
        • saturation<\/code>\uff1a\u9971\u548c\u5ea6\uff0c\u8868\u793a\u989c\u8272\u7684\u7eaf\u5ea6\uff0c\u8303\u56f4\u662f 0% \u5230 100%\u3002<\/li>\n\n\n\n
        • lightness<\/code>\uff1a\u4eae\u5ea6\uff0c\u8868\u793a\u989c\u8272\u7684\u660e\u6697\u7a0b\u5ea6\uff0c\u8303\u56f4\u662f 0% \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\u3002<\/p>\n<p style=\"color: hsl(210, 100%, 40%);\">\u8fd9\u6bb5\u6587\u5b57\u662f\u6df1\u84dd\u8272\u3002<\/p><\/code><\/pre>\n\n\n\n
          5. HSLA \u989c\u8272\u503c<\/strong><\/h4>\n\n\n\n
          HSLA \u662f HSL \u7684\u6269\u5c55\uff0c\u589e\u52a0\u4e86\u4e00\u4e2a Alpha \u901a\u9053<\/strong>\uff0c\u7528\u4e8e\u63a7\u5236\u900f\u660e\u5ea6\u3002<\/p>\n\n\n\n
            \n
          • \u683c\u5f0f\uff1ahsla(hue, saturation%, lightness%, alpha)<\/code><\/li>\n\n\n\n
          • alpha<\/code>\uff1a\u900f\u660e\u5ea6\uff0c\u8303\u56f4\u662f 0 \u5230 1\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\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\uff0c\u900f\u660e\u5ea6\u4e3a 80%\u3002<\/p><\/code><\/pre>\n\n\n\n
            6. \u900f\u660e\u989c\u8272\u503c<\/strong><\/h4>\n\n\n\n
            \u900f\u660e\u7684\u989c\u8272\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528 RGBA \u6216 HSLA \u503c\u6765\u5b9e\u73b0\uff0c\u5b83\u5141\u8bb8\u521b\u5efa\u5177\u6709\u4e00\u5b9a\u900f\u660e\u5ea6\u7684\u5143\u7d20\u80cc\u666f\u6216\u6587\u672c\uff0c\u4f7f\u5176\u80fd\u4e0e\u9875\u9762\u4e0a\u7684\u5176\u4ed6\u5143\u7d20\u6df7\u5408\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\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\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 \u652f\u6301\u591a\u79cd\u989c\u8272\u503c\u7684\u8868\u793a\u65b9\u6cd5\uff0c\u5305\u62ec\u5341\u516d\u8fdb\u5236\u989c\u8272\u3001RGB\u3001RGBA\u3001HSL \u548c HSLA\u3002\u6bcf\u79cd\u65b9\u6cd5\u6709\u4e0d\u540c\u7684\u9002\u7528\u573a\u666f\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u6839\u636e\u9700\u8981\u9009\u62e9\u6700\u9002\u5408\u7684\u65b9\u5f0f\u3002\u4f8b\u5982\uff0c\u5341\u516d\u8fdb\u5236\u548c RGB \u66f4\u9002\u5408\u7cbe\u786e\u7684\u989c\u8272\u5b9a\u4e49\uff0c\u800c HSL \u548c HSLA \u63d0\u4f9b\u4e86\u66f4\u76f4\u89c2\u7684\u65b9\u5f0f\u6765\u8c03\u6574\u989c\u8272\u3002\u4f7f\u7528\u900f\u660e\u5ea6\u53ef\u4ee5\u521b\u5efa\u66f4\u590d\u6742\u7684\u89c6\u89c9\u6548\u679c\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
            \u5728 HTML \u4e2d\uff0c\u989c\u8272\u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u8fdb\u884c\u5b9a\u4e49\u3002\u6700\u5e38\u89c1\u7684\u65b9\u5f0f\u662f\u4f7f\u7528 \u5341\u516d\u8fdb\u5236\u989c\u8272\u503c\u3001RGB \u503c\u3001RGBA \u503c\u3001 […]<\/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-1911","post","type-post","status-publish","format-standard","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/1911","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=1911"}],"version-history":[{"count":1,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/1911\/revisions"}],"predecessor-version":[{"id":1912,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/posts\/1911\/revisions\/1912"}],"wp:attachment":[{"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/media?parent=1911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/categories?post=1911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laixuexila.com\/index.php\/wp-json\/wp\/v2\/tags?post=1911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}