\u5148\u770b\u4e00\u5f20\u4f1a\u8ba9\u4eba"\u586b\u5230\u4e00\u534a\u53d1\u5446"\u7684\u8868\u5355<\/p>\n<\/li>\n
\u53ef\u7591\u70b9\u4e00:placeholder \u4e0d\u662f\u7528\u6765\u5f53 label \u7684<\/p>\n<\/li>\n
\u53ef\u7591\u70b9\u4e8c:\u8f93\u5165\u6846\u6ca1\u544a\u8bc9\u4f60"\u6211\u6b63\u5728\u88ab\u586b"<\/p>\n<\/li>\n
\u53ef\u7591\u70b9\u4e09:\u6821\u9a8c\u7ea2\u5f97\u592a\u65e9,\u50cf\u5728\u88ab\u9a82<\/p>\n<\/li>\n
\u9010\u4e2a\u4fee\u6389:\u4e09\u4ef6\u5957\u8865\u9f50<\/p>\n<\/li>\n
\u4e3e\u4e00\u53cd\u4e09:\u6296\u52a8\u53ea\u7ed9\u771f\u9519\u8bef<\/p>\n<\/li>\n
\u56de\u5934\u770b:\u8868\u5355\u52a8\u6548\u7684\u4e09\u6761\u8fb9\u754c<\/p>\n<\/li>\n
\u624b\u719f\u9760\u8fd9\u4e09\u4e0b<\/p>\n<\/li>\n<\/ul>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103348-6aa2878c5dbe2.png\")
<\/p>\n
\u5148\u770b\u4e00\u5f20\u4f1a\u8ba9\u4eba"\u586b\u5230\u4e00\u534a\u53d1\u5446"\u7684\u8868\u5355<\/h3>\n
\u8bca\u65ad\u5f0f\u6587\u7ae0,\u89c4\u77e9\u662f\u628a\u5d29\u6389\u7684\u73b0\u573a\u5148\u7529\u4f60\u8138\u4e0a\u3002\u4e0b\u9762\u8fd9\u5f20\u56fe,\u662f\u5f88\u591a\u4eba\u771f\u5b9e\u4e0a\u7ebf\u7684\u767b\u5f55\u6846:\u7528\u6237\u540d\u6846\u91cc\u7070\u7070\u5730\u5199\u7740"\u8bf7\u8f93\u5165\u7528\u6237\u540d",\u770b\u8d77\u6765\u633a\u597d\u3002\u53ef\u4f60\u4e00\u65e6\u5f00\u59cb\u6253\u5b57,\u90a3\u884c\u7070\u5b57"\u556a"\u5c31\u6ca1\u4e86\u2014\u2014\u586b\u5230\u4e00\u534a\u4f60\u62ac\u5934,\u6846\u91cc\u53ea\u5269\u4f60\u6572\u7684\u5b57,\u90a3\u4e2a"\u5230\u5e95\u8be5\u586b\u7528\u6237\u540d\u8fd8\u662f\u624b\u673a\u53f7"\u7684\u63d0\u793a\u65e9\u5c31\u6d88\u5931\u4e86\u3002\u4e0a\u4e00\u5929 Day 23 \u6211\u4eec\u521a\u7ed9\u6309\u94ae\u914d\u9f50\u60ac\u505c\u3001\u6309\u4e0b\u3001\u952e\u76d8\u7126\u70b9\u90a3\u56db\u6001,\u4eca\u5929\u628a\u8fd9\u5957\u8bb2\u7a76\u642c\u8fdb\u8868\u5355,\u7ffb\u8f66\u5374\u66f4\u9690\u853d\u2014\u2014\u4e0d\u62a5\u9519,\u5c31\u662f\u8ba9\u4f60\u586b\u5230\u4e00\u534a\u53d1\u8d77\u5446\u6765,\u633a\u522b\u626d\u5462\u3002\u6211\u81ea\u5df1\u6709\u6b21\u505a\u767b\u5f55\u9875,\u56fe\u7701\u4e8b\u628a\u5b57\u6bb5\u540d\u5168\u585e\u8fdb placeholder,\u4e0a\u7ebf\u6ca1\u51e0\u5929\u5c31\u88ab\u7528\u6237\u8ffd\u7740\u95ee"\u8fd9\u6846\u5230\u5e95\u586b\u5565",\u8fd9\u624d\u8001\u8001\u5b9e\u5b9e\u628a label \u7acb\u8d77\u6765\u3002<\/p>\n
<!– \u300a30\u5929\u7cbe\u901aCSS\u300bDay 24 \u00b7 \u5e73\u5934\u54e5 \u00b7 \u6280\u672f\u6539\u53d8\u4e16\u754c,\u52e4\u594b\u6539\u53d8\u4eba\u751f –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>placeholder \u5f53 label \u7684\u4e8b\u6545\u73b0\u573a<\/title>
\n<style>
\n * { box-sizing: border-box; }
\n body { max-width: 460px; margin: 40px auto; padding: 0 16px;
\n font-family: "Microsoft YaHei", sans-serif; background: #f6f4ee; color: #24292f; }
\n .bar { background: #fde8e8; border: 1px solid #f3b6b6; border-radius: 6px;
\n padding: 8px 14px; font-size: 14px; color: #8a2828; margin-bottom: 22px; }
\n \/* \u9519: \u6ca1\u6709 label, \u628a"\u8be5\u586b\u4ec0\u4e48"\u8fd9\u4ef6\u4e8b\u5168\u62bc\u5728 placeholder \u4e0a *\/
\n .field input { width: 100%; padding: 14px 16px; border: 1px solid #d8d3c7;
\n border-radius: 10px; font-size: 15px; background: #fff; }
\n \/* placeholder \u4e00\u6709\u5185\u5bb9\u5c31\u6d88\u5931, \u7528\u6237\u56de\u5934\u5c31\u5fd8\u4e86\u5b57\u6bb5\u542b\u4e49; \u800c\u4e14\u7070\u5b57\u5bf9\u6bd4\u5ea6\u5e38\u5e38\u4e0d\u591f *\/
\n .field input::placeholder { color: #c9c4b8; }
\n .field { margin-bottom: 16px; }
\n<\/style>
\n<\/head>
\n<body>
\n <div class="bar">\u8f93\u5165\u4e00\u534a,\u63d0\u793a\u5c31\u6ca1\u4e86 \u2014\u2014 \u4e0b\u9762\u7b2c\u4e8c\u4e2a\u6846\u6211\u5df2\u7ecf\u6253\u4e86\u5b57,"\u5bc6\u7801"\u8fd9\u4e2a\u542b\u4e49\u5f7b\u5e95\u6d88\u5931<\/div>
\n <div class="field"><input type="text" placeholder="\u8bf7\u8f93\u5165\u7528\u6237\u540d"><\/div>
\n <div class="field"><input type="password" placeholder="\u8bf7\u8f93\u5165\u5bc6\u7801" value="123456"><\/div>
\n<\/body>
\n<\/html><\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103349-6aa2878d2ad1b.png\")
<\/p>\n
\u73b0\u8c61\u5f88\u660e\u786e:\u7b2c\u4e8c\u4e2a\u6846\u6709\u5185\u5bb9\u4e86,\u53ef\u4f60\u5b8c\u5168\u770b\u4e0d\u51fa\u5b83\u662f\u5bc6\u7801\u6846\u3002\u8fd9\u4e0d\u662f transition \u7684\u95ee\u9898,\u662f\u8bed\u4e49\u653e\u9519\u4e86\u5730\u65b9\u3002\u6211\u4eec\u628a\u4e09\u4e2a\u53ef\u7591\u70b9\u9010\u4e2a\u62c6\u5f00\u3002<\/p>\n
\u53ef\u7591\u70b9\u4e00:placeholder \u4e0d\u662f\u7528\u6765\u5f53 label \u7684<\/h3>\n
\u5148\u7ed9\u7ed3\u8bba:placeholder \u662f"\u63d0\u793a",\u4e0d\u662f"\u540d\u5b57"\u3002\u5b83\u7684\u5bbf\u547d\u5c31\u662f\u4e00\u8f93\u5165\u5c31\u6d88\u5931,\u6240\u4ee5\u5b83\u5929\u751f\u4e0d\u80fd\u627f\u8f7d"\u8fd9\u4e2a\u5b57\u6bb5\u662f\u4ec0\u4e48"\u8fd9\u79cd\u5fc5\u987b\u957f\u671f\u53ef\u89c1\u7684\u4fe1\u606f\u3002\u8fd9\u4e2a\u4fe1\u606f\u662f label \u7684\u6d3b\u3002<\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103349-6aa2878d50a1f.png\")
<\/p>\n
placeholder \u7684\u53ef\u8bbf\u95ee\u6027\u8fb9\u754c<\/h4>\n
\u8fd8\u6709\u4e24\u4e2a\u5bb9\u6613\u88ab\u5ffd\u7565\u7684\u8fb9\u754c:placeholder \u9ed8\u8ba4\u662f\u6d45\u7070,\u5bf9\u6bd4\u5ea6\u7ecf\u5e38\u4e0d\u8fbe\u6807(\u6ce8\u610f WCAG \u5bf9\u6587\u672c\u5bf9\u6bd4\u5ea6\u6709\u786c\u6027\u8981\u6c42);\u800c\u4e14\u5b83\u5728\u7a84\u6846\u91cc\u4f1a\u88ab\u622a\u65ad\u3002\u6240\u4ee5"\u683c\u5f0f\u793a\u4f8b"\u53ef\u4ee5\u4ea4\u7ed9 placeholder,\u201c\u5fc5\u586b \/ \u5b57\u6bb5\u540d \/ \u6821\u9a8c\u89c4\u5219"\u8fd9\u4e09\u6837\u5fc5\u987b\u4ea4\u7ed9 label \u6216\u65c1\u8fb9\u7684\u8bf4\u660e\u6587\u5b57,\u4e0d\u80fd\u53ea\u5199\u5728 placeholder \u91cc\u3002\u8fd9\u662f\u9002\u7528\u8fb9\u754c,\u4e0d\u662f"placeholder \u4e0d\u80fd\u7528\u201d,\u800c\u662f"\u4e0d\u80fd\u53ea\u9760\u5b83"\u3002<\/p>\n
\u628a\u8fd9\u6761\u8fb9\u754c\u843d\u6210\u4ee3\u7801,\u5c31\u662f\u4e0b\u9762\u8fd9\u7248"\u6700\u5c0f\u6b63\u786e\u8868\u5355":label \u627f\u8f7d\u5b57\u6bb5\u540d\u548c\u5fc5\u586b\u661f\u53f7,\u65c1\u8fb9\u4e00\u884c\u8bf4\u660e\u627f\u8f7d\u89c4\u5219,placeholder \u53ea\u7559\u4e00\u4e2a\u683c\u5f0f\u793a\u4f8b\u3002\u8fd9\u4efd\u4ee3\u7801\u53cc\u51fb\u5c31\u80fd\u9a8c\u8bc1:\u8f93\u5165\u8fdb\u53bb\u540e,\u5b57\u6bb5\u540d\u548c\u89c4\u5219\u90fd\u8fd8\u5728\u3002<\/p>\n
<!– \u300a30\u5929\u7cbe\u901aCSS\u300bDay 24 \u00b7 \u5e73\u5934\u54e5 \u00b7 \u6280\u672f\u6539\u53d8\u4e16\u754c,\u52e4\u594b\u6539\u53d8\u4eba\u751f –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>label \u4e0e placeholder \u5404\u53f8\u5176\u804c<\/title>
\n<style>
\n * { box-sizing: border-box; }
\n body { max-width: 420px; margin: 40px auto; padding: 0 16px;
\n font-family: "Microsoft YaHei", sans-serif; background: #f6f4ee; color: #24292f; }
\n \/* \u5b57\u6bb5\u540d\u4ea4\u7ed9 label, \u5fc5\u586b\u7528\u661f\u53f7 + aria-label \u8bed\u4e49; placeholder \u53ea\u653e\u793a\u4f8b *\/
\n label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 4px; }
\n .req { color: #c21818; }
\n .hint { font-size: 12px; color: #6b6b66; margin: 4px 0 0; }
\n .field { margin-bottom: 18px; }
\n input { width: 100%; padding: 12px 14px; font-size: 15px; border: 1.5px solid #d8d3c7; border-radius: 9px; }
\n \/* \u63d0\u5347 placeholder \u5bf9\u6bd4\u5ea6, \u522b\u7528\u592a\u6d45\u7684\u7070 *\/
\n input::placeholder { color: #8a8a86; }
\n<\/style>
\n<\/head>
\n<body>
\n <div class="field">
\n <label for="phone">\u624b\u673a\u53f7 <span class="req">*<\/span><\/label>
\n <input id="phone" type="tel" placeholder="13800001234">
\n <p class="hint">11 \u4f4d\u6570\u5b57, \u7528\u4e8e\u767b\u5f55\u548c\u627e\u56de<\/p>
\n <\/div>
\n<\/body>
\n<\/html><\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103349-6aa2878dbbb79.png\")
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103349-6aa2878dece96.png\")
<\/p>\n
\u8fd9\u7248\u548c\u5f00\u5934\u90a3\u5f20\u5d29\u6389\u7684\u56fe\u7684\u5dee\u522b\u5c31\u4e00\u53e5\u8bdd:\u540d\u5b57(label)\u4e00\u76f4\u5728,\u793a\u4f8b(placeholder)\u53ea\u662f\u9526\u4e0a\u6dfb\u82b1\u3002<\/p>\n
\u53ef\u7591\u70b9\u4e8c:\u8f93\u5165\u6846\u6ca1\u544a\u8bc9\u4f60"\u6211\u6b63\u5728\u88ab\u586b"<\/h3>\n
\u805a\u7126\u6001(:focus)\u662f\u6709\u7684,\u4f46\u5b83\u53ea\u4f5c\u7528\u5728 <input> \u90a3\u4e00\u884c\u3002\u5982\u679c\u4f60\u60f3\u8ba9"\u6574\u4e2a\u8f93\u5165\u7ec4"(label + input + \u56fe\u6807)\u4e00\u8d77\u4eae\u8d77\u6765,\u5355\u4e2a :focus \u529b\u4e0d\u4ece\u5fc3\u3002:focus-within \u89e3\u51b3\u7684\u5c31\u662f\u8fd9\u4e2a:\u53ea\u8981\u4e00\u4e2a\u5bb9\u5668\u5185\u90e8\u4efb\u4f55\u540e\u4ee3\u62ff\u5230\u7126\u70b9,\u5bb9\u5668\u81ea\u5df1\u5c31\u547d\u4e2d\u3002\u673a\u5236\u4e0a,:focus-within \u4f1a\u628a\u7126\u70b9\u72b6\u6001"\u5192\u6ce1"\u5230\u7956\u5148,\u8fd9\u6b63\u662f\u6574\u5757\u9ad8\u4eae\u7684\u5173\u952e\u3002\u6ca1\u6709\u5b83\u7684\u65f6\u5019,\u7126\u70b9\u5b64\u96f6\u96f6\u5f85\u5728 input \u90a3\u4e00\u884c,\u5916\u9762\u7684 label \u548c\u56fe\u6807\u7eb9\u4e1d\u4e0d\u52a8,\u50cf\u5361\u4f4f\u4e86\u534a\u62cd,\u4f60\u8bf4\u618b\u5c48\u4e0d\u618b\u5c48\u5440\u3002\u54ce,\u8fd9\u5c31\u662f\u5355\u4e2a :focus \u529b\u4e0d\u4ece\u5fc3\u7684\u5730\u65b9\u3002<\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103350-6aa2878e47c0f.png\")
<\/p>\n
\u4fee\u590d\u7684\u7b2c\u4e00\u6b65,\u7ed9\u6bcf\u4e2a\u8f93\u5165\u7ec4\u4e00\u4e2a\u80fd\u6574\u5757\u54cd\u5e94\u805a\u7126\u7684\u5bb9\u5668,\u5e76\u628a label \u7acb\u8d77\u6765\u3002\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u4f60\u53ef\u4ee5\u76f4\u63a5\u53cc\u51fb\u6253\u5f00:\u70b9\u8fdb\u8f93\u5165\u6846,\u6574\u4e2a\u767d\u6846\u4f1a\u4e00\u8d77\u63cf\u84dd\u3001\u9634\u5f71\u6d6e\u8d77\u3002<\/p>\n
<!– \u300a30\u5929\u7cbe\u901aCSS\u300bDay 24 \u00b7 \u5e73\u5934\u54e5 \u00b7 \u6280\u672f\u6539\u53d8\u4e16\u754c,\u52e4\u594b\u6539\u53d8\u4eba\u751f –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>label + focus-within \u6574\u5757\u9ad8\u4eae<\/title>
\n<style>
\n * { box-sizing: border-box; }
\n body { max-width: 460px; margin: 40px auto; padding: 0 16px;
\n font-family: "Microsoft YaHei", sans-serif; background: #f6f4ee; color: #24292f; }
\n h3 { font-size: 18px; }
\n \/* label \u5355\u72ec\u5360\u4e00\u884c, \u6c38\u8fdc\u53ef\u89c1; placeholder \u53ea\u653e\u683c\u5f0f\u793a\u4f8b *\/
\n .field label { display: block; font-size: 13px; color: #6b6b66; margin: 0 0 6px 4px; }
\n .field { margin-bottom: 18px; }
\n .field .box { display: flex; align-items: center; background: #fff;
\n border: 1.5px solid #d8d3c7; border-radius: 10px; padding: 0 12px;
\n transition: border-color .18s ease-out, box-shadow .18s ease-out; }
\n .field input { flex: 1; border: 0; outline: none; padding: 13px 6px; font-size: 15px; background: transparent; }
\n .field input::placeholder { color: #b9b4a7; }
\n \/* \u5173\u952e: \u5185\u90e8\u4efb\u4e00\u5143\u7d20\u805a\u7126, \u6574\u5757 .box \u63cf\u84dd + \u6d6e\u8d77\u9634\u5f71 *\/
\n .field .box:focus-within { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
\n .field .ico { color: #9a958a; font-size: 15px; }
\n<\/style>
\n<\/head>
\n<body>
\n <h3>\u767b\u5f55<\/h3>
\n <div class="field">
\n <label for="u">\u7528\u6237\u540d<\/label>
\n <div class="box"><span class="ico">@<\/span><input id="u" type="text" placeholder="\u624b\u673a \/ \u90ae\u7bb1"><\/div>
\n <\/div>
\n <div class="field">
\n <label for="p">\u5bc6\u7801<\/label>
\n <div class="box"><span class="ico">🔒<\/span><input id="p" type="password" placeholder="8-20 \u4f4d"><\/div>
\n <\/div>
\n<\/body>
\n<\/html><\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103350-6aa2878ebaa0f.png\")
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103350-6aa2878edc0ac.png\")
<\/p>\n
\u53ef\u7591\u70b9\u4e09:\u6821\u9a8c\u7ea2\u5f97\u592a\u65e9,\u50cf\u5728\u88ab\u9a82<\/h3>\n
\u8868\u5355\u62a5\u9519\u8981\u5373\u65f6,\u4f46\u4e0d\u80fd"\u6253\u5b57\u6253\u5230\u4e00\u534a\u5c31\u7ea2"\u3002\u5f88\u591a\u4eba\u7528 input:invalid \u505a\u6821\u9a8c\u6837\u5f0f,\u7ed3\u679c\u7528\u6237\u521a\u6572\u7b2c\u4e00\u4e2a\u5b57\u7b26,\u6846\u5c31\u7ea2\u4e86\u2014\u2014\u56e0\u4e3a\u4e00\u4e2a\u7a7a\u7684 required \u6216\u683c\u5f0f\u6ca1\u586b\u5b8c\u7684 email \u5728\u6d4f\u89c8\u5668\u773c\u91cc\u5f53\u573a\u5c31\u662f invalid \u72b6\u6001\u3002\u8fd9\u79cd"\u8fb9\u586b\u8fb9\u9a82"\u7684\u4f53\u9a8c\u5f88\u5dee\u3002\u771f\u6b63\u7684\u5751\u5728\u8fd9::invalid \u53cd\u6620\u7684\u662f"\u6b64\u523b\u5408\u4e0d\u5408\u6cd5",\u800c\u4e0d\u662f"\u7528\u6237\u586b\u5b8c\u6ca1\u6709"\u3002\u8fd9\u5c31\u597d\u6bd4\u4f60\u8bdd\u8fd8\u6ca1\u8bf4\u5b8c,\u5bf9\u9762"\u53ee"\u4e00\u4e0b\u5c31\u628a\u7ea2\u7ebf\u7529\u8fc7\u6765,\u6025\u4eba\u4e86\u561b\u3002<\/p>\n
<!– \u300a30\u5929\u7cbe\u901aCSS\u300bDay 24 \u00b7 \u5e73\u5934\u54e5 \u00b7 \u6280\u672f\u6539\u53d8\u4e16\u754c,\u52e4\u594b\u6539\u53d8\u4eba\u751f –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>:invalid \u6253\u5b57\u5373\u62a5\u9519<\/title>
\n<style>
\n * { box-sizing: border-box; }
\n body { max-width: 460px; margin: 40px auto; padding: 0 16px;
\n font-family: "Microsoft YaHei", sans-serif; background: #f6f4ee; color: #24292f; }
\n .bar { background: #fde8e8; border: 1px solid #f3b6b6; border-radius: 6px;
\n padding: 8px 14px; font-size: 14px; color: #8a2828; margin-bottom: 22px; }
\n .field { margin-bottom: 16px; }
\n .field label { display: block; font-size: 13px; color: #6b6b66; margin-bottom: 6px; }
\n .field input { width: 100%; padding: 14px 16px; border: 1.5px solid #d8d3c7;
\n border-radius: 10px; font-size: 15px; }
\n \/* \u9519: \u53ea\u8981\u4e0d\u5408\u6cd5\u5c31\u7ea2, \u7528\u6237\u8fd8\u5728\u6253\u7b2c\u4e00\u4e2a\u90ae\u7bb1\u5b57\u7b26\u5c31\u5df2\u7ecf\u88ab\u6807\u7ea2 *\/
\n .field input:invalid { border-color: #c21818; background: #fff5f5; }
\n .field input:valid { border-color: #2f8f4e; }
\n<\/style>
\n<\/head>
\n<body>
\n <div class="bar">\u90ae\u7bb1\u6846: \u6211\u8fd8\u5728\u6253 "z", \u5b83\u5df2\u7ecf\u7ea2\u7740\u9a82\u6211\u4e86 \u2014\u2014 \u56e0\u4e3a :invalid \u53ea\u770b"\u5f53\u4e0b\u5408\u4e0d\u5408\u6cd5"<\/div>
\n <div class="field"><label>\u90ae\u7bb1<\/label><input type="email" required value="z"><\/div>
\n <div class="field"><label>\u624b\u673a\u53f7<\/label><input type="tel" required pattern="1[0-9]{10}" value="13"><\/div>
\n<\/body>
\n<\/html><\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103351-6aa2878f43eb1.png\")
<\/p>\n
z \u4e0d\u662f\u5408\u6cd5\u90ae\u7bb1,:invalid \u7acb\u523b\u547d\u4e2d,\u6846\u5f53\u573a\u53d8\u7ea2\u3002\u6ce8\u610f\u8fd9\u91cc\u7684\u524d\u63d0:\u5b57\u6bb5\u5e26\u4e86 required \u4e14\u683c\u5f0f\u5c1a\u672a\u586b\u5b8c\u3002\u4fee\u590d\u52a8\u4f5c\u5f88\u7b80\u6d01:\u628a\u6821\u9a8c\u53cd\u9988\u4ece :invalid \u6362\u6210 :user-invalid(\u5b83\u53ea\u5728\u7528\u6237"\u7f16\u8f91\u8fc7\u5e76\u79bb\u5f00"\u4e4b\u540e\u624d\u547d\u4e2d)\u3002<\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103351-6aa2878f69af7.png\")
<\/p>\n
\u9010\u4e2a\u4fee\u6389:\u4e09\u4ef6\u5957\u8865\u9f50<\/h3>\n
\u628a\u4e09\u4e2a\u53ef\u7591\u70b9\u7684\u4fee\u590d\u5408\u6210\u4e00\u4efd\u5b9a\u7a3f\u3002\u5148\u770b\u591a\u72b6\u6001\u5e76\u6392\u7684\u8fd0\u884c\u7ed3\u679c\u2014\u2014\u6211\u8ba9\u811a\u672c\u7ed9\u6574\u4e2a\u8868\u5355\u5bb9\u5668\u5206\u522b\u5f3a\u5236\u52a0\u4e0a\u805a\u7126\u6001\u548c\u62a5\u9519\u6001(\u7b49\u4ef7 class,\u4e0e\u771f\u5b9e\u4f2a\u7c7b\u547d\u4e2d\u8def\u5f84\u4e00\u81f4),\u8fd9\u6837"\u9ed8\u8ba4 \/ \u805a\u7126 \/ \u62a5\u9519"\u4e09\u6001\u80fd\u540c\u6846\u5bf9\u6bd4,\u4f60\u53ef\u4ee5\u9010\u683c\u9a8c\u8bc1\u989c\u8272\u3001\u8fb9\u6846\u3001\u9519\u8bef\u6587\u6848\u662f\u4e0d\u662f\u5404\u81ea\u6b63\u786e\u3002<\/p>\n
# @target .form
\n# @states \u9ed8\u8ba4 | \u805a\u7126:focus | \u62a5\u9519:invalid
\n<!– \u300a30\u5929\u7cbe\u901aCSS\u300bDay 24 \u00b7 \u5e73\u5934\u54e5 \u00b7 \u6280\u672f\u6539\u53d8\u4e16\u754c,\u52e4\u594b\u6539\u53d8\u4eba\u751f –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>\u8868\u5355 \u9ed8\u8ba4\/\u805a\u7126\/\u62a5\u9519 \u4e09\u6001<\/title>
\n<style>
\n * { box-sizing: border-box; }
\n body { margin: 0; padding: 26px; background: #f6f4ee;
\n font-family: "Microsoft YaHei", sans-serif; color: #24292f; }
\n .form { max-width: 340px; background: #fff; border-radius: 14px; padding: 20px;
\n box-shadow: 0 6px 20px rgba(31,45,61,.10); }
\n \/* \u9ed8\u8ba4\u6001: \u4e2d\u6027\u8fb9\u6846, \u65e0\u591a\u4f59\u88c5\u9970 *\/
\n .title { font-size: 16px; margin: 0 0 14px; }
\n .fld { margin-bottom: 12px; }
\n .fld label { display: block; font-size: 12px; color: #6b6b66; margin-bottom: 5px; }
\n .fld input { width: 100%; padding: 11px 12px; border: 1.5px solid #d8d3c7;
\n border-radius: 9px; font-size: 14px; transition: border-color .18s, box-shadow .18s; }
\n .err { display: none; font-size: 12px; color: #c21818; margin-top: 4px; }
\n \/* \u805a\u7126\u6001: \u5f53\u524d\u5b57\u6bb5\u63cf\u84dd + \u7126\u70b9\u73af, \u5361\u7247\u5916\u5708\u4e5f\u8f7b\u5fae\u53d8\u4eae *\/
\n .st-focus .fld.on input { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
\n .st-focus .form, .form { outline: none; }
\n .st-focus .form { box-shadow: 0 10px 26px rgba(37,99,235,.16); }
\n \/* \u62a5\u9519\u6001: \u5b57\u6bb5\u53d8\u7ea2 + \u9732\u51fa\u9519\u8bef\u6587\u6848, \u5361\u7247\u63cf\u7ea2 *\/
\n .st-invalid .fld.on input { border-color: #c21818; background: #fff5f5; }
\n .st-invalid .form { box-shadow: 0 6px 20px rgba(194,24,24,.16); }
\n .st-invalid .err { display: block; }
\n<\/style>
\n<\/head>
\n<body>
\n <div class="form">
\n <p class="title">\u767b\u5f55<\/p>
\n <div class="fld on"><label>\u90ae\u7bb1<\/label><input type="text" value="zhang@bad"><\/div>
\n <div class="fld"><label>\u5bc6\u7801<\/label><input type="password" placeholder="8-20 \u4f4d"><\/div>
\n <p class="err">\u90ae\u7bb1\u683c\u5f0f\u4e0d\u6b63\u786e,\u8bf7\u68c0\u67e5<\/p>
\n <\/div>
\n<\/body>
\n<\/html><\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103351-6aa2878fd2033.png\")
<\/p>\n
\u5bf9\u6bd4\u6570\u636e\u5f88\u6e05\u695a:\u9ed8\u8ba4\u4e09\u4ef6\u5957\u90fd\u662f\u7070\u8fb9\u6846;\u805a\u7126\u683c\u7b2c\u4e00\u4e2a\u5b57\u6bb5\u63cf\u84dd\u3001\u5361\u7247\u6295\u51fa\u84dd\u9634\u5f71;\u62a5\u9519\u683c\u7b2c\u4e00\u4e2a\u5b57\u6bb5\u53d8\u7ea2\u3001\u5e95\u4e0b"\u683c\u5f0f\u4e0d\u6b63\u786e"\u6587\u6848\u51fa\u73b0\u3002\u4e09\u6001\u786e\u5b9e\u5404\u4e0d\u76f8\u540c\u3002<\/p>\n
\u628a\u4e09\u6001\u6446\u5728\u4e00\u8d77\u770b\u8fd8\u6709\u4e00\u5c42\u597d\u5904:\u4f60\u80fd\u4e00\u773c\u9a8c\u8bc1\u201c\u805a\u7126\u201d\u548c\u201c\u62a5\u9519\u201d\u662f\u4e24\u79cd\u5b8c\u5168\u4e0d\u540c\u7684\u4fe1\u53f7\u2014\u2014\u805a\u7126\u662f\u51b7\u9759\u7684\u84dd,\u8868\u8fbe\u201c\u6211\u5728\u7b49\u4f60\u586b\u201d;\u62a5\u9519\u662f\u523a\u773c\u7684\u7ea2,\u8868\u8fbe\u201c\u4f60\u586b\u9519\u4e86\u201d\u3002\u8fd9\u4e24\u79cd\u989c\u8272\u5343\u4e07\u522b\u6df7\u7528,\u5426\u5219\u7528\u6237\u5206\u4e0d\u6e05\u662f\u8be5\u7ee7\u7eed\u8fd8\u662f\u8be5\u6539\u3002\u8fd9\u91cc\u7684\u8bbe\u8ba1\u524d\u7f6e\u6761\u4ef6\u662f:\u5b57\u6bb5\u9ed8\u8ba4\u6001\u5fc5\u987b\u662f\u201c\u5b89\u9759\u201d\u7684\u4e2d\u6027\u7070,\u628a\u989c\u8272\u548c\u4f4d\u79fb\u90fd\u7559\u7ed9\u72b6\u6001\u53bb\u8868\u8fbe,\u5e73\u65f6\u4e0d\u55a7\u5bbe\u593a\u4e3b\u3002<\/p>\n
\u518d\u628a"\u9519\u8bef\u6296\u52a8"\u5b9a\u683c\u6210\u80f6\u7247\u3002\u6296\u52a8\u662f\u4e00\u6b21\u6027\u7684 translateX \u5f80\u590d,\u6211\u7528\u4e00\u4e2a\u7b49\u4ef7\u7684\u65f6\u95f4\u8f74\u52a8\u753b\u628a\u5b83\u7684\u8fc7\u7a0b\u5207\u6210\u56db\u683c,\u65b9\u4fbf\u4f60\u770b\u5b83\u600e\u4e48\u4ece"\u4e2d\u6027"\u6296\u5230"\u6807\u7ea2\u9759\u6b62"\u3002\u771f\u5b9e\u9879\u76ee\u91cc\u8fd9\u6bb5\u53ea\u8dd1\u4e00\u6b21(animation-iteration-count: 1),\u8fd9\u91cc\u7528 animation-fill-mode: both \u8ba9\u5b9a\u683c\u811a\u672c\u80fd\u7a33\u5b9a\u53d6\u5230 0 \/ 33 \/ 67 \/ \u6ee1 \u56db\u4e2a\u8fdb\u5ea6\u70b9\u3002<\/p>\n
# @frames 4
\n<!– \u300a30\u5929\u7cbe\u901aCSS\u300bDay 24 \u00b7 \u5e73\u5934\u54e5 \u00b7 \u6280\u672f\u6539\u53d8\u4e16\u754c,\u52e4\u594b\u6539\u53d8\u4eba\u751f –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>\u9519\u8bef\u6296\u52a8\u5b9a\u683c<\/title>
\n<style><\/p>\n
* { box-sizing: border-box; }
\n body { margin: 0; padding: 30px; background: #f6f4ee;
\n font-family: "Microsoft YaHei", sans-serif; color: #24292f; }
\n .form { max-width: 320px; }
\n .err-lab { font-size: 12px; color: #c21818; margin: 0 0 6px; }
\n \/* \u6296\u52a8: \u6c34\u5e73\u5f80\u590d, \u540c\u65f6\u628a\u8fb9\u6846\u4ece\u7070\u8fc7\u6e21\u5230\u7ea2; both \u8ba9\u5b9a\u683c\u80fd\u7a33\u5b9a\u53d6\u5230\u9996\u5c3e\u8fdb\u5ea6 *\/
\n .fld { animation: shake 1.6s ease-in-out both; }
\n .fld input { width: 100%; padding: 12px 14px; font-size: 15px;
\n border: 2px solid #d8d3c7; border-radius: 10px; }
\n \/* \u9519\u8bef\u6587\u6848\u968f\u8fdb\u5ea6\u6de1\u5165, \u8ba9\u9996\u5c3e\u4e24\u5e27\u4e5f\u660e\u663e\u4e0d\u540c *\/
\n .err { animation: fadein 1.6s linear both; color: #c21818; font-size: 13px; margin-top: 6px; }
\n @keyframes shake {
\n 0% { transform: translateX(0); }
\n 20% { transform: translateX(-8px); }
\n 40% { transform: translateX(8px); }
\n 60% { transform: translateX(-5px); }
\n 80% { transform: translateX(4px); }
\n 100% { transform: translateX(0); }
\n }
\n @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } }
\n<\/style>
\n<\/head>
\n<body>
\n <div class="form">
\n <p class="err-lab">\u90ae\u7bb1\u683c\u5f0f\u4e0d\u6b63\u786e<\/p>
\n <div class="fld"><input type="text" value="zhang@bad"><\/div>
\n <p class="err">\u8bf7\u68c0\u67e5\u540e\u91cd\u65b0\u8f93\u5165<\/p>
\n <\/div>
\n<\/body>
\n<\/html><\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103352-6aa2879011da5.png\")
<\/p>\n
\u56db\u683c\u91cc\u8f93\u5165\u6846\u7684\u6c34\u5e73\u504f\u79fb\u548c"\u8bf7\u68c0\u67e5\u540e\u91cd\u65b0\u8f93\u5165"\u8fd9\u884c\u7684\u6df1\u6d45\u90fd\u5728\u53d8,\u5408\u8d77\u6765\u5c31\u662f\u6296\u52a8 + \u6807\u7ea2\u7684\u5b8c\u6574\u8fc7\u7a0b\u3002\u8981\u6284\u7684\u53c2\u6570:shake \u4f4d\u79fb\u5cf0\u503c \u00b18px\u3001\u603b\u65f6\u957f .4s\u3001ease-in-out\u3001\u53ea\u64ad\u4e00\u6b21\u3002<\/p>\n
\u4e3e\u4e00\u53cd\u4e09:\u6296\u52a8\u53ea\u7ed9\u771f\u9519\u8bef<\/h3>\n
\u6296\u52a8\u80fd\u5438\u5f15\u6ce8\u610f,\u4f46\u5b83\u662f"\u9ad8\u97f3"\u3002\u5982\u679c\u4f60\u7ed9\u6bcf\u4e00\u4e2a\u7a7a\u5fc5\u586b\u6846\u90fd\u6296\u52a8,\u9875\u9762\u4e00\u63d0\u4ea4\u5c31\u5168\u4f53\u4e71\u6643,\u53cd\u800c\u8ba9\u4eba\u627e\u4e0d\u5230\u91cd\u70b9\u3002\u6211\u6539\u5b8c\u7b2c\u4e00\u7248\u65f6\u5c31\u624b\u6ed1\u7ed9\u6bcf\u4e2a\u7a7a\u6846\u90fd\u6302\u4e86\u6296\u52a8,\u4e00\u63d0\u4ea4\u6ee1\u5c4f\u4e71\u98a4,\u6d3b\u50cf\u5730\u9707,\u8d76\u7d27\u5220\u5230\u53ea\u7559\u771f\u9519\u8bef\u90a3\u4e00\u6761\u5427\u3002\u539f\u5219\u5f88\u7b80\u5355:\u4e00\u6b21\u4ea4\u4e92\u91cc\u6700\u591a\u6296\u4e00\u4e2a\u5143\u7d20,\u4e14\u53ea\u5bf9"\u7528\u6237\u786e\u5b9e\u586b\u9519"\u7684\u5b57\u6bb5\u6296\u3002\u670d\u52a1\u7aef\u8fd4\u56de\u7684\u3001\u63d0\u4ea4\u540e\u624d\u786e\u8ba4\u7684\u9519\u8bef,\u914d :invalid \u8db3\u591f,\u4e0d\u5fc5\u6296\u3002<\/p>\n
\u4fee\u590d\u540e\u7684\u5b9a\u7a3f\u628a\u65f6\u673a\u5206\u5c42::user-invalid \u7ba1\u5373\u65f6\u53cd\u9988,:focus-within \u7ba1\u805a\u7126\u9ad8\u4eae,\u6296\u52a8\u53ea\u5728\u63d0\u4ea4\u90a3\u4e00\u523b\u7531\u4e00\u4e2a class \u89e6\u53d1\u4e00\u6b21\u3002<\/p>\n
<!– \u300a30\u5929\u7cbe\u901aCSS\u300bDay 24 \u00b7 \u5e73\u5934\u54e5 \u00b7 \u6280\u672f\u6539\u53d8\u4e16\u754c,\u52e4\u594b\u6539\u53d8\u4eba\u751f –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>\u8868\u5355\u52a8\u6548\u5b9a\u7a3f<\/title>
\n<style>
\n * { box-sizing: border-box; }
\n body { max-width: 400px; margin: 36px auto; padding: 0 16px;
\n font-family: "Microsoft YaHei", sans-serif; background: #f6f4ee; color: #24292f; }
\n .form { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 6px 20px rgba(31,45,61,.10); }
\n h3 { margin: 0 0 14px; font-size: 17px; }
\n .fld { margin-bottom: 14px; }
\n .fld label { display: block; font-size: 12px; color: #6b6b66; margin-bottom: 5px; }
\n .fld input { width: 100%; padding: 12px 14px; font-size: 15px; border: 1.5px solid #d8d3c7;
\n border-radius: 9px; transition: border-color .18s, box-shadow .18s; }
\n \/* \u805a\u7126\u9ad8\u4eae: \u7528 focus-within \u8ba9\u6574\u5757\u8868\u6001 *\/
\n .fld:focus-within input { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
\n \/* \u6821\u9a8c\u65f6\u673a: \u7528 user-invalid \u907f\u514d\u6253\u5b57\u4e2d\u9014\u5c31\u9a82\u4eba; \u8001\u6d4f\u89c8\u5668\u7528 :invalid \u515c\u5e95 *\/
\n .fld input:user-invalid { border-color: #c21818; background: #fff5f5; }
\n @supports not selector(:user-invalid) { .fld input:invalid { border-color: #c21818; } }
\n .fld input:user-valid { border-color: #2f8f4e; }
\n \/* \u63d0\u4ea4\u65f6\u624d\u6296: \u4e00\u4e2a class, \u53ea\u64ad\u4e00\u6b21 *\/
\n .form.wrong .fld.on { animation: shake .4s ease-in-out 1; }
\n @keyframes shake { 0%,100% { transform: translateX(0);} 25% { transform: translateX(-8px);} 75% { transform: translateX(8px);} }
\n .btn { width: 100%; padding: 12px; border: 0; border-radius: 9px; background: #2563eb;
\n color: #fff; font-size: 15px; cursor: pointer; transition: transform .18s, background .18s; }
\n .btn:hover { background: #1d4ed8; transform: translateY(-2px); }
\n .btn:active { transform: translateY(1px) scale(.98); transition-duration: .06s; }
\n<\/style>
\n<\/head>
\n<body>
\n <form class="form wrong" onsubmit="return false">
\n <h3>\u767b\u5f55<\/h3>
\n <div class="fld on"><label for="e">\u90ae\u7bb1<\/label><input id="e" type="email" required value="zhang@bad"><\/div>
\n <div class="fld"><label for="p">\u5bc6\u7801<\/label><input id="p" type="password" required placeholder="8-20 \u4f4d"><\/div>
\n <button class="btn">\u767b\u5f55<\/button>
\n <\/form>
\n<\/body>
\n<\/html><\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103352-6aa287905226f.png\")
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103352-6aa2879094213.png\")
<\/p>\n
\u8fd0\u884c\u7ed3\u679c\u91cc,\u7b2c\u4e00\u4e2a\u90ae\u7bb1\u6846\u56e0\u4e3a\u5e26\u4e0a\u4e86 wrong \u4e14\u81ea\u8eab on,\u8fdb\u6765\u5c31\u6296\u4e00\u6b21\u6807\u7ea2;\u7b2c\u4e8c\u4e2a\u8fd8\u6ca1\u586b\u7684\u6846\u53ea\u7b49 :user-invalid\u2014\u2014\u4e0d\u4f1a\u5728\u4f60\u6253\u5b57\u4e2d\u9014\u4e71\u7ea2\u3002<\/p>\n
\u8868\u5355\u91cc\u7684\u6309\u94ae\u672c\u8eab\u4e5f\u522b\u5fd8\u4e86\u6628\u5929\u90a3\u5957\u56db\u6001:\u63d0\u4ea4\u6309\u94ae\u540c\u6837\u8981\u6709 :hover \/ :active \/ :focus-visible,\u5426\u5219\u952e\u76d8\u7528\u6237\u8d70\u5230"\u767b\u5f55"\u4e0a\u53c8\u662f\u4e00\u7247\u9ed1\u3002\u4e3e\u4e00\u53cd\u4e09\u7684\u610f\u601d\u5c31\u662f\u2014\u2014\u540c\u4e00\u5957\u72b6\u6001\u89c4\u5219,\u8868\u5355\u91cc\u7684\u6bcf\u4e2a\u53ef\u4ea4\u4e92\u5143\u7d20\u90fd\u9002\u7528\u3002<\/p>\n
<!– \u300a30\u5929\u7cbe\u901aCSS\u300bDay 24 \u00b7 \u5e73\u5934\u54e5 \u00b7 \u6280\u672f\u6539\u53d8\u4e16\u754c,\u52e4\u594b\u6539\u53d8\u4eba\u751f –>
\n<!DOCTYPE html>
\n<html lang="zh-CN">
\n<head>
\n<meta charset="UTF-8">
\n<title>\u63d0\u4ea4\u6309\u94ae:\u8868\u5355\u91cc\u4e5f\u8981\u56db\u6001\u9f50\u5168<\/title>
\n<style>
\n * { box-sizing: border-box; }
\n body { max-width: 380px; margin: 40px auto; padding: 0 16px; text-align: center;
\n font-family: "Microsoft YaHei", sans-serif; background: #f6f4ee; color: #24292f; }
\n \/* \u63d0\u4ea4\u6309\u94ae\u590d\u7528 Day 23 \u7684\u65f6\u957f\u68af\u5ea6: \u60ac\u505c\u6162, \u6309\u4e0b\u5feb *\/
\n .btn { width: 100%; padding: 13px; border: 0; border-radius: 10px; background: #2563eb;
\n color: #fff; font-size: 15px; cursor: pointer; box-shadow: 0 4px 12px rgba(37,99,235,.3);
\n transition: transform .18s ease-out, box-shadow .18s ease-out, background .18s; }
\n .btn:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,99,235,.42); }
\n .btn:active { transform: translateY(1px) scale(.98); transition-duration: .06s; }
\n \/* \u952e\u76d8\u5230\u8fbe: \u7528 outline \u753b\u73af, \u4e0d\u6491\u5927\u6309\u94ae\u4e5f\u4e0d\u6324\u5e03\u5c40 *\/
\n .btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
\n .tip { font-size: 13px; color: #8a8a86; margin-top: 16px; text-align: left; }
\n<\/style>
\n<\/head>
\n<body>
\n <button class="btn">\u767b\u5f55<\/button>
\n <p class="tip">\u70b9\u5b83\u662f\u6d6e\u8d77, \u6309\u4f4f\u5b83\u56de\u843d, \u7528 Tab \u8d70\u5230\u5b83\u8eab\u4e0a\u4f1a\u4eae\u84dd\u73af \u2014\u2014 \u8868\u5355\u91cc\u7684\u53ef\u4ea4\u4e92\u5143\u7d20, \u4e00\u4e2a\u90fd\u4e0d\u80fd\u5c11\u3002<\/p>
\n<\/body>
\n<\/html><\/p>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103353-6aa287911a7be.png\")
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103353-6aa287914d522.png\")
<\/p>\n
\u56de\u5934\u770b:\u8868\u5355\u52a8\u6548\u7684\u4e09\u6761\u8fb9\u754c<\/h3>\n\u6296\u52a8\u53c2\u6570\u600e\u4e48\u5b9a,\u6296\u7ed9\u8c01\u770b<\/h4>\n
\u6296\u52a8\u4e0d\u662f\u7279\u6548,\u662f\u4e00\u53e5\u201c\u770b\u8fd9\u91cc\u201d\u3002\u53c2\u6570\u4e0a\u6211\u4e00\u822c\u5b9a\u5728\u4f4d\u79fb\u5cf0\u503c \u00b18px\u3001\u603b\u65f6\u957f .4s\u3001ease-in-out\u3001\u53ea\u64ad\u4e00\u6b21;\u4f4d\u79fb\u518d\u5927\u5c31\u663e\u5f97\u5938\u5f20,\u65f6\u957f\u518d\u957f\u5c31\u62d6\u6c93\u3002\u65f6\u673a\u4e0a,\u53ea\u7ed9\u201c\u7528\u6237\u786e\u5b9e\u586b\u9519\u201d\u7684\u5b57\u6bb5\u6296,\u800c\u4e14\u4e00\u6b21\u4ea4\u4e92\u91cc\u6700\u591a\u6296\u4e00\u4e2a\u2014\u2014\u5426\u5219\u6574\u5c4f\u4e71\u6643\u53cd\u800c\u627e\u4e0d\u5230\u91cd\u70b9\u3002\u81f3\u4e8e\u90a3\u4e9b\u8fd8\u6ca1\u78b0\u8fc7\u7684\u7a7a required \u5b57\u6bb5,\u8001\u5b9e\u8bf4\u4e0d\u8be5\u62a5\u7ea2:\u4e00\u4e2a\u7a7a\u7684\u624b\u673a\u53f7\u6846\u5728\u4f60\u8fd8\u6ca1\u8f93\u5165\u65f6\u5e76\u4e0d\u662f\u201c\u975e\u6cd5\u201d,\u7528 :user-invalid \u800c\u4e0d\u662f :invalid \u6b63\u662f\u4e3a\u4e86\u628a\u8fd9\u6761\u8fb9\u754c\u5212\u6e05\u3002user-invalid \u662f\u65b0\u4e00\u4ee3\u9009\u62e9\u5668\u5bf9\u201c\u8fb9\u6253\u8fb9\u9a82\u201d\u8fd9\u79cd\u8bef\u7528\u7684\u66ff\u4ee3\u65b9\u6848,\u65e7\u7684\u5373\u65f6\u6821\u9a8c\u5199\u6cd5\u53ef\u4ee5\u9010\u6b65\u5e9f\u5f03;\u800c :focus-within \u628a\u7126\u70b9\u5192\u6ce1\u5230\u5bb9\u5668\u8fd9\u4e2a\u673a\u5236\u662f\u7ecf\u5178\u9009\u62e9\u5668\u80fd\u529b,\u5df2\u7ecf\u7a33\u5b9a\u591a\u5e74,\u5c5e\u4e8e\u5b66\u4e00\u6b21\u957f\u671f\u6709\u6548\u7684\u4e1c\u897f\u3002 \u8bf4\u5230\u5e95,\u8868\u5355\u52a8\u6548\u7684\u76ee\u6807\u53ea\u6709\u4e00\u53e5\u8bdd:\u8ba9\u7528\u6237\u5728\u4efb\u4f55\u4e00\u523b\u90fd\u77e5\u9053\u300c\u73b0\u5728\u8fd9\u4e2a\u6846\u5904\u4e8e\u4ec0\u4e48\u72b6\u6001\u3001\u7cfb\u7edf\u5bf9\u6211\u505a\u4e86\u4ec0\u4e48\u5224\u65ad\u300d\u3002\u52a8\u6548\u8d8a\u514b\u5236,\u4fe1\u606f\u8d8a\u6e05\u6670\u2014\u2014\u597d\u7684\u8868\u5355\u53cd\u9988\u662f\u300c\u8bfb\u300d\u51fa\u6765\u7684,\u4e0d\u662f\u300c\u770b\u70ed\u95f9\u300d\u770b\u51fa\u6765\u7684\u554a\u3002\u8fd9\u4e5f\u662f\u4e3a\u4ec0\u4e48\u4eca\u5929\u5168\u7bc7\u90fd\u5728\u8bb2\u65f6\u673a\u548c\u8fb9\u754c,\u800c\u4e0d\u662f\u5806\u52a8\u753b\u6548\u679c\u3002<\/p>\n
\u628a\u4eca\u5929\u8bca\u65ad\u51fa\u7684\u4e09\u6761\u6536\u53e3,\u8fd9\u5c31\u662f\u8868\u5355\u52a8\u6548\u7684\u8fb9\u754c\u6e05\u5355:<\/p>\n
label \u4e0e placeholder \u5206\u5de5:\u540d\u5b57\u3001\u5fc5\u586b\u3001\u89c4\u5219\u4ea4\u7ed9 label;\u683c\u5f0f\u793a\u4f8b\u624d\u4ea4\u7ed9 placeholder\u3002\u6ce8\u610f placeholder \u7684\u5bf9\u6bd4\u5ea6\u8fb9\u754c,\u522b\u8ba9\u5b83\u627f\u8f7d\u957f\u671f\u4fe1\u606f\u3002<\/p>\n<\/li>\n
\u805a\u7126\u53cd\u9988\u7528 ****:focus-within:\u6574\u5757\u9ad8\u4eae\u624d\u770b\u5f97\u89c1"\u6211\u843d\u5230\u54ea\u4e2a\u5b57\u6bb5\u7ec4\u4e86",\u5355\u9760 :focus \u53ea\u4eae\u4e00\u6839\u7ebf\u3002<\/p>\n<\/li>\n
\u6821\u9a8c\u65f6\u673a\u5206\u5c42::user-invalid \u7ba1\u5373\u65f6\u3001:invalid \u515c\u5e95\u8001\u6d4f\u89c8\u5668\u3001\u6296\u52a8\u53ea\u7ed9\u63d0\u4ea4\u540e\u7684\u771f\u9519\u8bef\u3001\u4e14\u4e00\u6b21\u53ea\u6296\u4e00\u4e2a\u3002<\/p>\n<\/li>\n
![\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103353-6aa287919a6ed.png\")
<\/p>\n
\u8fd9\u5957"\u805a\u7126\u5192\u6ce1 + \u6821\u9a8c\u65f6\u673a"\u7684\u9009\u62e9\u5668\u673a\u5236\u662f\u8868\u5355\u53ef\u8bbf\u95ee\u6027\u7684\u5730\u57fa,\u503c\u5f97\u957f\u671f\u6cbf\u7528\u3002<\/p>\n
\u624b\u719f\u9760\u8fd9\u4e09\u4e0b<\/h3>\n
\u8868\u5355\u8fd9\u5757\u5149\u770b\u6ca1\u7528,\u52a8\u624b\u4e09\u4e0b\u624d\u7b97\u6570:\u4e00,\u628a\u5b9a\u7a3f\u91cc .form.wrong \u90a3\u4e2a on \u53bb\u6389,\u770b\u7b2c\u4e8c\u4e2a\u8fd8\u6ca1\u586b\u7684\u6846\u4f1a\u4e0d\u4f1a\u8ddf\u7740\u4e71\u6296\u2014\u2014\u7b54\u6848\u662f\u4e0d\u8be5\u6296,\u4f60\u4eb2\u773c\u9a8c\u4e00\u904d;\u4e8c,\u628a :user-invalid \u6362\u56de :invalid,\u76ef\u7740\u81ea\u5df1\u6253\u5b57\u4e2d\u9014\u90a3\u4e2a\u63d0\u524d\u53d8\u7ea2\u7684\u523a\u773c\u611f,\u518d\u628a\u65f6\u673a\u627e\u56de\u6765;\u4e09,\u628a placeholder \u91cc\u585e\u7684\u5b57\u6bb5\u540d\u62bd\u51fa\u6765\u505a\u6210\u771f label,\u586b\u5230\u4e00\u534a\u56de\u5934\u770b,\u540d\u5b57\u8fd8\u5728\u4e0d\u5728\u3002\u8fd9\u4e09\u4e0b\u6539\u987a\u4e86,\u767b\u5f55\u6846\u90a3\u4efd"\u8be5\u7ea2\u5c31\u7ea2\u3001\u8be5\u5b89\u9759\u5c31\u5b89\u9759"\u7684\u514b\u5236\u52b2\u513f\u5c31\u51fa\u6765\u4e86\u3002<\/p>\n
\u53c2\u8003\u8d44\u6599<\/p>\n
- \n
- \n
MDN: :focus-within<\/p>\n<\/li>\n
- \n
MDN: :user-invalid<\/p>\n<\/li>\n
- \n
W3C: Selectors Level 4<\/p>\n<\/li>\n<\/ul>\n
\n","protected":false},"excerpt":{"rendered":"Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48 \u672c\u6587\u662f\u300a30\u5929\u7cbe\u901aCSS\u300b\u4e13\u680f\u7b2c 24 \u7bc7,\u8ba2\u9605\u4e13\u680f\u4e0d\u8ff7\u8def\u3002 \u6458\u8981:\u672c\u6587\u57fa\u4e8e Selectors Level 4 \u4e0e CSS Scrolling\/Forms \u73b0\u884c\u89c4\u8303,\u7528\u8bca\u65ad\u5f0f\u7684\u65b9\u6cd5\u6392\u67e5\u8868\u5355\u52a8\u6548\u91cc\u6700\u5e38\u89c1\u7684\u4e09\u4e2a\u5751:placeholder \u88ab\u8bef\u5f53 label \u5bfc\u81f4\u4e00\u8f93\u5165\u5c31\\”\u5931\u5fc6\\”\u3001\u8f93\u5165\u6846\u7f3a\u5c11\\”\u6b63\u5728\u88ab\u586b\\”\u7684\u805a\u7126\u4fe1\u53f7\u3001\u6821\u9a8c\u53cd\u9988\u6765\u5f97\u592a\u65e9\u3002\u9010\u4e2a\u6392\u9664\u540e\u7ed9\u51fa\u4fee\u590d\u65b9\u6848::focus-within \u8ba9\u6574\u5757\u9ad8<\/p>\n","protected":false},"author":2,"featured_media":103472,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[11794,573,1175,87],"topic":[],"class_list":["post-103489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-11794","tag-css","tag-css3","tag-87"],"yoast_head":"\n
Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/103489.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48 \u672c\u6587\u662f\u300a30\u5929\u7cbe\u901aCSS\u300b\u4e13\u680f\u7b2c 24 \u7bc7,\u8ba2\u9605\u4e13\u680f\u4e0d\u8ff7\u8def\u3002 \u6458\u8981:\u672c\u6587\u57fa\u4e8e Selectors Level 4 \u4e0e CSS Scrolling\/Forms \u73b0\u884c\u89c4\u8303,\u7528\u8bca\u65ad\u5f0f\u7684\u65b9\u6cd5\u6392\u67e5\u8868\u5355\u52a8\u6548\u91cc\u6700\u5e38\u89c1\u7684\u4e09\u4e2a\u5751:placeholder \u88ab\u8bef\u5f53 label \u5bfc\u81f4\u4e00\u8f93\u5165\u5c31"\u5931\u5fc6"\u3001\u8f93\u5165\u6846\u7f3a\u5c11"\u6b63\u5728\u88ab\u586b"\u7684\u805a\u7126\u4fe1\u53f7\u3001\u6821\u9a8c\u53cd\u9988\u6765\u5f97\u592a\u65e9\u3002\u9010\u4e2a\u6392\u9664\u540e\u7ed9\u51fa\u4fee\u590d\u65b9\u6848::focus-within \u8ba9\u6574\u5757\u9ad8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/103489.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-10T10:33:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103348-6aa2878c5dbe2.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/103489.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/103489.html\",\"name\":\"Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-09-10T10:33:55+00:00\",\"dateModified\":\"2026-09-10T10:33:55+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/103489.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/103489.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/103489.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/103489.html","og_locale":"zh_CN","og_type":"article","og_title":"Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48 \u672c\u6587\u662f\u300a30\u5929\u7cbe\u901aCSS\u300b\u4e13\u680f\u7b2c 24 \u7bc7,\u8ba2\u9605\u4e13\u680f\u4e0d\u8ff7\u8def\u3002 \u6458\u8981:\u672c\u6587\u57fa\u4e8e Selectors Level 4 \u4e0e CSS Scrolling\/Forms \u73b0\u884c\u89c4\u8303,\u7528\u8bca\u65ad\u5f0f\u7684\u65b9\u6cd5\u6392\u67e5\u8868\u5355\u52a8\u6548\u91cc\u6700\u5e38\u89c1\u7684\u4e09\u4e2a\u5751:placeholder \u88ab\u8bef\u5f53 label \u5bfc\u81f4\u4e00\u8f93\u5165\u5c31\"\u5931\u5fc6\"\u3001\u8f93\u5165\u6846\u7f3a\u5c11\"\u6b63\u5728\u88ab\u586b\"\u7684\u805a\u7126\u4fe1\u53f7\u3001\u6821\u9a8c\u53cd\u9988\u6765\u5f97\u592a\u65e9\u3002\u9010\u4e2a\u6392\u9664\u540e\u7ed9\u51fa\u4fee\u590d\u65b9\u6848::focus-within \u8ba9\u6574\u5757\u9ad8","og_url":"https:\/\/www.wsisp.com\/helps\/103489.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-09-10T10:33:55+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260910103348-6aa2878c5dbe2.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"9 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/103489.html","url":"https:\/\/www.wsisp.com\/helps\/103489.html","name":"Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-09-10T10:33:55+00:00","dateModified":"2026-09-10T10:33:55+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/103489.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/103489.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/103489.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"Day 24 | \u7528 placeholder \u5f53 label,\u7528\u6237\u4e00\u8f93\u5165\u5c31\u4e0d\u77e5\u9053\u5728\u586b\u4ec0\u4e48"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/103489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=103489"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/103489\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/103472"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=103489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=103489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=103489"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=103489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}