{"id":41866,"date":"2025-06-05T15:47:32","date_gmt":"2025-06-05T07:47:32","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/41866.html"},"modified":"2025-06-05T15:47:32","modified_gmt":"2025-06-05T07:47:32","slug":"htmlcss-%e5%ad%a6%e4%b9%a0%e6%80%bb%e7%bb%93","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/41866.html","title":{"rendered":"HTML&CSS \u5b66\u4e60\u603b\u7ed3"},"content":{"rendered":"

\u76ee\u5f55<\/p>\n

\u200b\u200b\u200b\u4e00\u3001HTML\u6838\u5fc3\u6982\u5ff5\u200b\u200b<\/p>\n

\u200b\u200b\u4e09\u5927\u524d\u7aef\u6280\u672f\u4f5c\u7528\u200b\u200b<\/p>\n

\u200b\u200bHTML\u57fa\u7840\u7ed3\u6784\u200b\u200b<\/p>\n

\u5f00\u53d1\u5de5\u5177：VS Code \u4e13\u4e1a\u914d\u7f6e\u200b\u200b\u200b\u200b\u5b89\u88c5\u6b65\u9aa4\u200b\u200b：<\/p>\n

\u200b\u200b\u4e8c\u3001HTML\u6807\u7b7e\u5927\u5168（\u542b\u8868\u683c）\u200b\u200b<\/p>\n

\u200b\u200b\u4e09\u3001CSS\u6838\u5fc3\u6280\u672f\u200b\u200b<\/p>\n

1. \u4e09\u79cd\u5f15\u5165\u65b9\u5f0f\u5bf9\u6bd4<\/p>\n

2. \u6838\u5fc3\u9009\u62e9\u5668<\/p>\n

3. \u5e03\u5c40\u4e09\u5927\u795e\u5668<\/p>\n

4. \u76d2\u5b50\u6a21\u578b\u8be6\u89e3<\/p>\n

\u200b\u200b\u5b9e\u6218\u6848\u4f8b：\u6ce8\u518c\u8868\u5355\u200b\u200b<\/p>\n

\u200b\u200b\u603b\u7ed3\u8981\u70b9\u200b\u200b<\/p>\n

\n

\u200b\u200b\u200b\u4e00\u3001HTML\u6838\u5fc3\u6982\u5ff5\u200b\u200b<\/h3>\n
  • \n

    \u200b\u200b\u4e09\u5927\u524d\u7aef\u6280\u672f\u4f5c\u7528\u200b\u200b<\/h4>\n
      \n
    • \u200b\u200bHTML\u200b\u200b：\u7f51\u9875\u7ed3\u6784\u9aa8\u67b6（\u6807\u9898\/\u6bb5\u843d\/\u8868\u5355\u7b49）<\/li>\n
    • \u200b\u200bCSS\u200b\u200b：\u89c6\u89c9\u6837\u5f0f\u7f8e\u5316（\u989c\u8272\/\u5e03\u5c40\/\u52a8\u753b）<\/li>\n
    • \u200b\u200bJavaScript\u200b\u200b：\u52a8\u6001\u4ea4\u4e92\u903b\u8f91（\u8868\u5355\u9a8c\u8bc1\/\u4e8b\u4ef6\u54cd\u5e94）<\/li>\n<\/ul>\n<\/li>\n
    • \n

      \u200b\u200bHTML\u57fa\u7840\u7ed3\u6784\u200b\u200b<\/h4>\n

      <!DOCTYPE html> <!– \u5fc5\u987b\u9996\u884c\u58f0\u660e –>
      \n<html lang="zh-CN"> <!– \u6839\u6807\u7b7e，lang\u5b9a\u4e49\u8bed\u8a00 –>
      \n<head>
      \n <meta charset="UTF-8"> <!– \u5b57\u7b26\u7f16\u7801 –>
      \n <title>\u7f51\u9875\u6807\u9898<\/title> <!– \u6d4f\u89c8\u5668\u6807\u7b7e\u9875\u663e\u793a –>
      \n <link rel="stylesheet" href="style.css"> <!– \u5f15\u5165CSS –>
      \n<\/head>
      \n<body>
      \n <!– \u53ef\u89c1\u5185\u5bb9\u533a\u57df –>
      \n <h1>\u6b22\u8fce\u5b66\u4e60HTML<\/h1>
      \n <p>\u8fd9\u662f\u6211\u7684\u7b2c\u4e00\u4e2a\u7f51\u9875<\/p>
      \n<\/body>
      \n<\/html> <\/li>\n

    • \n

      \u5f00\u53d1\u5de5\u5177：VS Code \u4e13\u4e1a\u914d\u7f6e\u200b\u200b \u200b\u200b\u5b89\u88c5\u6b65\u9aa4\u200b\u200b：<\/h4>\n
    • \u8bbf\u95ee\u5b98\u7f51\u4e0b\u8f7d：Visual Studio Code – Code Editing. Redefined<\/li>\n
    • \u5b89\u88c5\u65f6\u6ce8\u610f：\n
        \n
      • \u8def\u5f84\u907f\u514d\u4e2d\u6587\/\u7a7a\u683c（\u5982 D:\\\\DevTools\\\\VSCode）<\/li>\n
      • \u52fe\u9009"\u6dfb\u52a0\u5230PATH"（\u547d\u4ee4\u884c\u5feb\u901f\u542f\u52a8）<\/li>\n<\/ul>\n<\/li>\n

        \u200b\u200b\u5fc5\u88c5\u63d2\u4ef6\u6e05\u5355\u200b\u200b：<\/p>\n\n\u200b\u200b\u63d2\u4ef6\u540d\u200b\u200b\u200b\u200b\u4f5c\u7528\u200b\u200b\u200b\u200b\u4f7f\u7528\u573a\u666f\u200b\u200b<\/tr>\n\n\n\n\n\n\n\n\n
        Auto Rename Tag<\/td>\n\u81ea\u52a8\u4fee\u6539\u914d\u5bf9\u7684HTML\u6807\u7b7e<\/td>\n\u7f16\u8f91\u6807\u7b7e\u65f6\u81ea\u52a8\u540c\u6b65\u95ed\u5408\u6807\u7b7e<\/td>\n<\/tr>\n
        Live Server<\/td>\n\u5b9e\u65f6\u9884\u89c8\u9875\u9762\u5e76\u70ed\u66f4\u65b0<\/td>\n\u4fdd\u5b58\u4ee3\u7801\u540e\u81ea\u52a8\u5237\u65b0\u6d4f\u89c8\u5668<\/td>\n<\/tr>\n
        Prettier<\/td>\n\u4ee3\u7801\u81ea\u52a8\u683c\u5f0f\u5316<\/td>\n\u7edf\u4e00\u56e2\u961f\u4ee3\u7801\u98ce\u683c<\/td>\n<\/tr>\n
        HTML CSS Support<\/td>\nCSS\u7c7b\u540d\u667a\u80fd\u63d0\u793a<\/td>\n\u7f16\u5199class\u65f6\u81ea\u52a8\u63d0\u793a\u6837\u5f0f<\/td>\n<\/tr>\n
        vscode-icons<\/td>\n\u6587\u4ef6\u56fe\u6807\u4e3b\u9898<\/td>\n\u76f4\u89c2\u533a\u5206\u6587\u4ef6\u7c7b\u578b<\/td>\n<\/tr>\n
        IntelliJ IDEA Keybindings<\/td>\n\u590d\u7528IDEA\u5feb\u6377\u952e<\/td>\n\u63d0\u5347Java\u5f00\u53d1\u8005\u6548\u7387<\/td>\n<\/tr>\n
        Chinese Language Pack<\/td>\n\u4e2d\u6587\u754c\u9762<\/td>\n\u82f1\u8bed\u57fa\u7840\u8584\u5f31\u5f00\u53d1\u8005<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        \u200b\u200b\u4f18\u5316\u8bbe\u7f6e\u200b\u200b（\u8bbe\u7f6e > \u641c\u7d22）：<\/p>\n

          \n
        • \u5b57\u4f53\u5927\u5c0f：Editor: Font Size \u2192 16<\/li>\n
        • \u81ea\u52a8\u4fdd\u5b58：Auto Save \u2192 afterDelay<\/li>\n
        • \u5173\u95ed\u6298\u53e0：Explorer: Compact Folders \u2192 \u53d6\u6d88\u52fe\u9009<\/li>\n
        • \u7f29\u8fdb\u8c03\u6574：Tree: Indent \u2192 20px<\/li>\n<\/ul>\n<\/li>\n
          \n

          \u200b\u200b\u4e8c\u3001HTML\u6807\u7b7e\u5927\u5168（\u542b\u8868\u683c）\u200b\u200b<\/h3>\n\n\u200b\u200b\u5206\u7c7b\u200b\u200b\u200b\u200b\u6807\u7b7e\u200b\u200b\u200b\u200b\u6838\u5fc3\u5c5e\u6027\u200b\u200b\u200b\u200b\u793a\u4f8b\u4ee3\u7801\u200b\u200b\u200b\u200b\u8bf4\u660e\u200b\u200b<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
          \u200b\u200b\u6587\u672c\u7ed3\u6784\u200b\u200b<\/td>\n<h1>-<h6><\/td>\n–<\/td>\n<h2>\u4e8c\u7ea7\u6807\u9898<\/h2><\/td>\n\u6807\u9898\u6807\u7b7e，h1\u6700\u91cd\u8981<\/td>\n<\/tr>\n
          <\/td>\n<p><\/td>\n–<\/td>\n<p>\u8fd9\u662f\u4e00\u4e2a\u6bb5\u843d<\/p><\/td>\n\u6bb5\u843d\u5206\u9694<\/td>\n<\/tr>\n
          <\/td>\n<br><\/td>\n–<\/td>\n\u7b2c\u4e00\u884c<br>\u7b2c\u4e8c\u884c<\/td>\n\u5f3a\u5236\u6362\u884c（\u5355\u6807\u7b7e）<\/td>\n<\/tr>\n
          \u200b\u200b\u5217\u8868\u200b\u200b<\/td>\n<ul><\/td>\n–<\/td>\n<ul><li>\u82f9\u679c<\/li><\/ul><\/td>\n\u65e0\u5e8f\u5217\u8868<\/td>\n<\/tr>\n
          <\/td>\n<ol><\/td>\nstart="3"<\/td>\n<ol start="3"><li>\u7b2c\u4e09\u6b65<\/li><\/ol><\/td>\n\u6709\u5e8f\u5217\u8868（\u4ece3\u5f00\u59cb）<\/td>\n<\/tr>\n
          \u200b\u200b\u591a\u5a92\u4f53\u200b\u200b<\/td>\n``<\/td>\nsrc, alt, width<\/td>\n``<\/td>\n\u66ff\u4ee3\u6587\u672c\u5fc5\u586b<\/td>\n<\/tr>\n
          <\/td>\n<audio><\/td>\ncontrols, loop<\/td>\n<audio src="bgm.mp3" controls loop><\/td>\n\u663e\u793a\u63a7\u5236\u9762\u677f+\u5faa\u73af\u64ad\u653e<\/td>\n<\/tr>\n
          <\/td>\n<video><\/td>\nwidth, autoplay<\/td>\n<video src="intro.mp4" width="500" autoplay><\/td>\n\u81ea\u52a8\u64ad\u653e（\u9700\u9759\u97f3）<\/td>\n<\/tr>\n
          \u200b\u200b\u8868\u683c\u200b\u200b<\/td>\n<table><\/td>\nborder="1"<\/td>\n<table border="1">…<\/table><\/td>\n\u663e\u793a\u8fb9\u6846<\/td>\n<\/tr>\n
          <\/td>\n<tr><\/td>\n–<\/td>\n<tr><td>A1<\/td><td>A2<\/td><\/tr><\/td>\n\u8868\u683c\u884c<\/td>\n<\/tr>\n
          <\/td>\n<td><\/td>\nrowspan, colspan<\/td>\n<td colspan="2">\u8de8\u4e24\u5217<\/td><\/td>\n\u200b\u200b\u91cd\u70b9\u200b\u200b：\u5408\u5e76\u5355\u5143\u683c<\/td>\n<\/tr>\n
          <\/td>\n<th><\/td>\n–<\/td>\n<th>\u59d3\u540d<\/th><\/td>\n\u8868\u5934\u5355\u5143\u683c（\u52a0\u7c97\u5c45\u4e2d）<\/td>\n<\/tr>\n
          \u200b\u200b\u8868\u5355\u200b\u200b<\/td>\n<form><\/td>\naction="\/submit", method="POST"<\/td>\n<form action="\/login" method="POST"><\/td>\n\u6570\u636e\u63d0\u4ea4\u5bb9\u5668<\/td>\n<\/tr>\n
          <\/td>\n<input><\/td>\ntype, name, placeholder<\/td>\n<input type="text" name="user" placeholder="\u7528\u6237\u540d"><\/td>\n\u200b\u200b\u91cd\u70b9\u200b\u200b：\u6587\u672c\u8f93\u5165<\/td>\n<\/tr>\n
          <\/td>\n<\/td>\ntype="password"<\/td>\n<input type="password" name="pwd"><\/td>\n\u5bc6\u7801\u63a9\u7801\u8f93\u5165<\/td>\n<\/tr>\n
          <\/td>\n<\/td>\ntype="radio", checked<\/td>\n<input type="radio" name="gender" checked><\/td>\n\u5355\u9009\u6309\u94ae（\u540cname\u5206\u7ec4）<\/td>\n<\/tr>\n
          <\/td>\n<\/td>\ntype="checkbox"<\/td>\n<input type="checkbox" name="hobby"><\/td>\n\u591a\u9009\u6309\u94ae<\/td>\n<\/tr>\n
          <\/td>\n<select><\/td>\n–<\/td>\n<select name="city"><option>\u5317\u4eac<\/option><\/select><\/td>\n\u4e0b\u62c9\u9009\u62e9\u6846<\/td>\n<\/tr>\n
          <\/td>\n<textarea><\/td>\nrows, cols<\/td>\n<textarea rows="5" cols="30">\u7559\u8a00<\/textarea><\/td>\n\u591a\u884c\u6587\u672c\u8f93\u5165<\/td>\n<\/tr>\n
          <\/td>\n<button><\/td>\ntype="submit"<\/td>\n<button type="submit">\u63d0\u4ea4<\/button><\/td>\n\u8868\u5355\u63d0\u4ea4\u6309\u94ae<\/td>\n<\/tr>\n
          \u200b\u200b\u5e03\u5c40\u200b\u200b<\/td>\n<div><\/td>\nid, class<\/td>\n<div id="header">\u9876\u90e8\u533a\u57df<\/div><\/td>\n\u5757\u7ea7\u5bb9\u5668（\u72ec\u5360\u4e00\u884c）<\/td>\n<\/tr>\n
          <\/td>\n<span><\/td>\nstyle<\/td>\n<span style="color:red">\u7ea2\u8272\u6587\u672c<\/span><\/td>\n\u884c\u5185\u5bb9\u5668（\u540c\u6392\u663e\u793a）<\/td>\n<\/tr>\n
          \u200b\u200b\u7279\u6b8a\u5b57\u7b26\u200b\u200b<\/td>\n&nbsp;<\/td>\n–<\/td>\n\u7a7a\u683c\u5360\u4f4d\u7b26<\/td>\n\u4e0d\u95f4\u65ad\u7a7a\u683c<\/td>\n<\/tr>\n
          <\/td>\n&lt; &gt;<\/td>\n–<\/td>\n&lt;div&gt; \u2192 \u663e\u793a\u4e3a<div><\/td>\n\u907f\u514d\u88ab\u89e3\u6790\u4e3a\u6807\u7b7e<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

          \u200b\u200b\u8868\u683c\u4f7f\u7528\u6280\u5de7\u200b\u200b：<\/p>\n

            \n
          • \u590d\u6742\u8868\u5934：\u7528 <th colspan="3">\u5b63\u5ea6\u9500\u91cf<\/th> \u5408\u5e76\u591a\u5217\u8868\u5934<\/li>\n
          • \u6570\u636e\u5206\u7ec4：<thead>, <tbody>, <tfoot> \u5212\u5206\u8868\u683c\u533a\u57df<\/li>\n<\/ul>\n
            \n

            \u200b\u200b\u4e09\u3001CSS\u6838\u5fc3\u6280\u672f\u200b\u200b<\/h3>\n

            1. \u4e09\u79cd\u5f15\u5165\u65b9\u5f0f\u5bf9\u6bd4<\/h6>\n\n\u200b\u200b\u65b9\u5f0f\u200b\u200b\u200b\u200b\u4ee3\u7801\u793a\u4f8b\u200b\u200b\u200b\u200b\u4f18\u5148\u7ea7\u200b\u200b\u200b\u200b\u9002\u7528\u573a\u666f\u200b\u200b<\/tr>\n\n\n\n\n
            \u884c\u5185\u5f0f<\/td>\n<p style="color:red;">\u6587\u672c<\/p><\/td>\n\u6700\u9ad8<\/td>\n\u5feb\u901f\u8c03\u8bd5\/\u5c11\u91cf\u6837\u5f0f<\/td>\n<\/tr>\n
            \u5185\u5d4c\u5f0f<\/td>\n<style> body { background: #f5f5f5; } <\/style><\/td>\n\u4e2d<\/td>\n\u5355\u9875\u9762\u4e13\u7528\u6837\u5f0f<\/td>\n<\/tr>\n
            \u5916\u90e8\u5f0f<\/td>\n<link rel="stylesheet" href="global.css"><\/td>\n\u6700\u4f4e<\/td>\n\u200b\u200b\u63a8\u8350\u200b\u200b：\u591a\u9875\u9762\u590d\u7528<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            2. \u6838\u5fc3\u9009\u62e9\u5668<\/h6>\n\n\u200b\u200b\u7c7b\u578b\u200b\u200b\u200b\u200b\u793a\u4f8b\u200b\u200b\u200b\u200b\u6743\u91cd\u200b\u200b\u200b\u200b\u8bf4\u660e\u200b\u200b<\/tr>\n\n\n\n\n\n
            \u5143\u7d20\u9009\u62e9\u5668<\/td>\np { }<\/td>\n1<\/td>\n\u9009\u4e2d\u6240\u6709<p>\u6807\u7b7e<\/td>\n<\/tr>\n
            \u7c7b\u9009\u62e9\u5668<\/td>\n.btn { }<\/td>\n10<\/td>\n\u200b\u200b\u6700\u5e38\u7528\u200b\u200b：\u590d\u7528\u6837\u5f0f<\/td>\n<\/tr>\n
            ID\u9009\u62e9\u5668<\/td>\n#header { }<\/td>\n100<\/td>\n\u552f\u4e00\u5143\u7d20<\/td>\n<\/tr>\n
            \u5c5e\u6027\u9009\u62e9\u5668<\/td>\ninput[type="text"]<\/td>\n10<\/td>\n\u7cbe\u51c6\u5b9a\u4f4d\u7279\u5b9a\u5143\u7d20<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            3. \u5e03\u5c40\u4e09\u5927\u795e\u5668<\/h6>\n\n\u200b\u200b\u6280\u672f\u200b\u200b\u200b\u200b\u6838\u5fc3\u5c5e\u6027\u200b\u200b\u200b\u200b\u4ee3\u7801\u793a\u4f8b\u200b\u200b\u200b\u200b\u5e94\u7528\u573a\u666f\u200b\u200b<\/tr>\n\n\n\n\n
            \u200b\u200b\u6d6e\u52a8\u5e03\u5c40\u200b\u200b<\/td>\nfloat: left\/right;<\/td>\nimg { float: left; }<\/td>\n\u56fe\u6587\u6df7\u6392\/\u5bfc\u822a\u680f<\/td>\n<\/tr>\n
            \u200b\u200b\u5b9a\u4f4d\u5e03\u5c40\u200b\u200b<\/td>\nposition: relative\/absolute\/fixed;<\/td>\n.popup { position: fixed; top: 0; }<\/td>\n\u5f39\u7a97\/\u56fa\u5b9a\u5bfc\u822a<\/td>\n<\/tr>\n
            \u200b\u200b\u76d2\u5b50\u6a21\u578b\u200b\u200b<\/td>\nmargin\/padding\/border<\/td>\ndiv { padding: 20px; border: 1px solid #ddd; }<\/td>\n\u63a7\u5236\u5143\u7d20\u95f4\u8ddd<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
            4. \u76d2\u5b50\u6a21\u578b\u8be6\u89e3<\/h6>\n

            .box {
            \n width: 300px; \/* \u5185\u5bb9\u5bbd\u5ea6 *\/
            \n height: 200px; \/* \u5185\u5bb9\u9ad8\u5ea6 *\/
            \n padding: 20px; \/* \u5185\u8fb9\u8ddd（\u5185\u5bb9\u4e0e\u8fb9\u6846\u95f4\u8ddd） *\/
            \n border: 2px solid red;\/* \u8fb9\u6846（\u7c97\u7ec6+\u6837\u5f0f+\u989c\u8272） *\/
            \n margin: 30px auto; \/* \u5916\u8fb9\u8ddd（\u5143\u7d20\u95f4\u8ddd\u79bb，auto\u6c34\u5e73\u5c45\u4e2d） *\/
            \n} <\/p>\n

            \u200b\u200b\u5e03\u5c40\u516c\u5f0f\u200b\u200b： \u5143\u7d20\u5b9e\u9645\u5bbd\u5ea6 = width + \u5de6\u53f3padding + \u5de6\u53f3border \u5143\u7d20\u5360\u636e\u7a7a\u95f4 = \u5b9e\u9645\u5bbd\u5ea6 + \u5de6\u53f3margin<\/p>\n<\/p>\n

            \n

            \u200b\u200b\u5b9e\u6218\u6848\u4f8b：\u6ce8\u518c\u8868\u5355\u200b\u200b<\/h4>\n

            <!DOCTYPE html>
            \n<html>
            \n<head>
            \n <title>\u7528\u6237\u6ce8\u518c<\/title>
            \n <style>
            \n .form-container {
            \n width: 400px;
            \n margin: 50px auto;
            \n padding: 20px;
            \n border: 1px solid #ccc;
            \n border-radius: 5px;
            \n }
            \n .input-group {
            \n margin-bottom: 15px;
            \n }
            \n label {
            \n display: inline-block;
            \n width: 100px;
            \n }
            \n input[type="text"], input[type="password"] {
            \n width: 250px;
            \n padding: 8px;
            \n }
            \n .submit-btn {
            \n background: #4CAF50;
            \n color: white;
            \n padding: 10px 20px;
            \n border: none;
            \n border-radius: 4px;
            \n cursor: pointer;
            \n }
            \n <\/style>
            \n<\/head>
            \n<body>
            \n <div class="form-container">
            \n <h2>\u7528\u6237\u6ce8\u518c<\/h2>
            \n <form>
            \n <div class="input-group">
            \n <label>\u7528\u6237\u540d：<\/label>
            \n <input type="text" name="username" required>
            \n <\/div>
            \n <div class="input-group">
            \n <label>\u5bc6\u7801：<\/label>
            \n <input type="password" name="password" required>
            \n <\/div>
            \n <button type="submit" class="submit-btn">\u6ce8\u518c<\/button>
            \n <\/form>
            \n <\/div>
            \n<\/body>
            \n<\/html> <\/p>\n

            \n

            \u200b\u200b\u603b\u7ed3\u8981\u70b9\u200b\u200b<\/h4>\n
          • \u200b\u200bHTML\u6838\u5fc3\u200b\u200b：\n
              \n
            • \u638c\u63e1\u8868\u683c\u8de8\u884c\u8de8\u5217（rowspan\/colspan）<\/li>\n
            • \u8868\u5355\u5143\u7d20\u5fc5\u987b\u8bbe\u7f6e name \u5c5e\u6027\u7528\u4e8e\u6570\u636e\u63d0\u4ea4<\/li>\n<\/ul>\n<\/li>\n
            • \u200b\u200bCSS\u7cbe\u9ad3\u200b\u200b：\n
                \n
              • \u4f18\u5148\u4f7f\u7528 \u200b\u200b\u7c7b\u9009\u62e9\u5668\u200b\u200b \u5b9e\u73b0\u6837\u5f0f\u590d\u7528<\/li>\n
              • \u200b\u200b\u6d6e\u52a8\u5e03\u5c40\u200b\u200b\u9700\u6e05\u9664\u6d6e\u52a8（\u7236\u5143\u7d20\u52a0 overflow:hidden）<\/li>\n<\/ul>\n<\/li>\n
              • \u200b\u200b\u5f00\u53d1\u6548\u7387\u200b\u200b：\n
                  \n
                • VS Code + Live Server \u5b9e\u65f6\u9884\u89c8<\/li>\n
                • Prettier \u81ea\u52a8\u683c\u5f0f\u5316\u4fdd\u6301\u4ee3\u7801\u6574\u6d01<\/li>\n<\/ul>\n<\/li>\n
                • \u200b\u200b\u5b66\u4e60\u8d44\u6e90\u200b\u200b：\n
                    \n
                  • W3School\u53c2\u8003：w3school \u5728\u7ebf\u6559\u7a0b<\/li>\n
                  • \u514d\u8d39\u7ec3\u4e60\u5e73\u53f0：https:\/\/codepen.io\/<\/li>\n<\/ul>\n<\/li>\n","protected":false},"excerpt":{"rendered":"

                    \u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb854\u6b21\uff0c\u70b9\u8d5e30\u6b21\uff0c\u6536\u85cf17\u6b21\u3002HTML\u4e0eCSS\u5f00\u53d1\u6307\u5357\uff1a\u6838\u5fc3\u6982\u5ff5\u4e0e\u5b9e\u7528\u6280\u5de7\u6458\u8981\uff1a\u672c\u6587\u7cfb\u7edf\u4ecb\u7ecd\u4e86\u524d\u7aef\u5f00\u53d1\u7684\u6838\u5fc3\u6280\u672f\u3002HTML\u90e8\u5206\u8be6\u89e3\u4e86\u57fa\u7840\u7ed3\u6784\u3001\u5e38\u7528\u6807\u7b7e\uff08\u6587\u672c\u3001\u5217\u8868\u3001\u8868\u683c\u3001\u8868\u5355\u7b49\uff09\u53ca\u5f00\u53d1\u5de5\u5177\u914d\u7f6e\uff08VSCode\u63d2\u4ef6\u63a8\u8350\uff09\uff1bCSS\u90e8\u5206\u91cd\u70b9\u8bb2\u89e3\u4e09\u79cd\u5f15\u5165\u65b9\u5f0f\u3001\u9009\u62e9\u5668\u6743\u91cd\u3001\u76d2\u5b50\u6a21\u578b\u53ca\u4e09\u5927\u5e03\u5c40\u6280\u672f\uff08\u6d6e\u52a8\u3001\u5b9a\u4f4d\u3001\u5f39\u6027\uff09\u3002\u7279\u522b\u5f3a\u8c03\u8868\u5355\u5143\u7d20\u7684name\u5c5e\u6027\u8bbe\u7f6e\u3001\u8868\u683c\u8de8\u884c\u8de8\u5217\u6280\u5de7\uff0c\u4ee5\u53ca\u7c7b\u9009\u62e9\u5668\u7684\u590d\u7528\u4f18\u52bf\u3002\u6587\u672b\u63d0\u4f9b\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684\u6ce8\u518c\u8868\u5355\u5b9e\u6218\u6848\u4f8b\uff0c\u5e76\u63a8\u8350W3School\u7b49\u5b66\u4e60\u8d44\u6e90\u3002<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[573,567,3858,87,371,305],"topic":[],"class_list":["post-41866","post","type-post","status-publish","format-standard","hentry","category-server","tag-css","tag-html","tag-javaweb","tag-87","tag-371","tag-305"],"yoast_head":"\nHTML&CSS \u5b66\u4e60\u603b\u7ed3 - \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\/41866.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML&CSS \u5b66\u4e60\u603b\u7ed3 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb854\u6b21\uff0c\u70b9\u8d5e30\u6b21\uff0c\u6536\u85cf17\u6b21\u3002HTML\u4e0eCSS\u5f00\u53d1\u6307\u5357\uff1a\u6838\u5fc3\u6982\u5ff5\u4e0e\u5b9e\u7528\u6280\u5de7\u6458\u8981\uff1a\u672c\u6587\u7cfb\u7edf\u4ecb\u7ecd\u4e86\u524d\u7aef\u5f00\u53d1\u7684\u6838\u5fc3\u6280\u672f\u3002HTML\u90e8\u5206\u8be6\u89e3\u4e86\u57fa\u7840\u7ed3\u6784\u3001\u5e38\u7528\u6807\u7b7e\uff08\u6587\u672c\u3001\u5217\u8868\u3001\u8868\u683c\u3001\u8868\u5355\u7b49\uff09\u53ca\u5f00\u53d1\u5de5\u5177\u914d\u7f6e\uff08VSCode\u63d2\u4ef6\u63a8\u8350\uff09\uff1bCSS\u90e8\u5206\u91cd\u70b9\u8bb2\u89e3\u4e09\u79cd\u5f15\u5165\u65b9\u5f0f\u3001\u9009\u62e9\u5668\u6743\u91cd\u3001\u76d2\u5b50\u6a21\u578b\u53ca\u4e09\u5927\u5e03\u5c40\u6280\u672f\uff08\u6d6e\u52a8\u3001\u5b9a\u4f4d\u3001\u5f39\u6027\uff09\u3002\u7279\u522b\u5f3a\u8c03\u8868\u5355\u5143\u7d20\u7684name\u5c5e\u6027\u8bbe\u7f6e\u3001\u8868\u683c\u8de8\u884c\u8de8\u5217\u6280\u5de7\uff0c\u4ee5\u53ca\u7c7b\u9009\u62e9\u5668\u7684\u590d\u7528\u4f18\u52bf\u3002\u6587\u672b\u63d0\u4f9b\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684\u6ce8\u518c\u8868\u5355\u5b9e\u6218\u6848\u4f8b\uff0c\u5e76\u63a8\u8350W3School\u7b49\u5b66\u4e60\u8d44\u6e90\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/41866.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-05T07:47:32+00:00\" \/>\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=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/41866.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/41866.html\",\"name\":\"HTML&CSS \u5b66\u4e60\u603b\u7ed3 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2025-06-05T07:47:32+00:00\",\"dateModified\":\"2025-06-05T07:47:32+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/41866.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/41866.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/41866.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML&CSS \u5b66\u4e60\u603b\u7ed3\"}]},{\"@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":"HTML&CSS \u5b66\u4e60\u603b\u7ed3 - \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\/41866.html","og_locale":"zh_CN","og_type":"article","og_title":"HTML&CSS \u5b66\u4e60\u603b\u7ed3 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb854\u6b21\uff0c\u70b9\u8d5e30\u6b21\uff0c\u6536\u85cf17\u6b21\u3002HTML\u4e0eCSS\u5f00\u53d1\u6307\u5357\uff1a\u6838\u5fc3\u6982\u5ff5\u4e0e\u5b9e\u7528\u6280\u5de7\u6458\u8981\uff1a\u672c\u6587\u7cfb\u7edf\u4ecb\u7ecd\u4e86\u524d\u7aef\u5f00\u53d1\u7684\u6838\u5fc3\u6280\u672f\u3002HTML\u90e8\u5206\u8be6\u89e3\u4e86\u57fa\u7840\u7ed3\u6784\u3001\u5e38\u7528\u6807\u7b7e\uff08\u6587\u672c\u3001\u5217\u8868\u3001\u8868\u683c\u3001\u8868\u5355\u7b49\uff09\u53ca\u5f00\u53d1\u5de5\u5177\u914d\u7f6e\uff08VSCode\u63d2\u4ef6\u63a8\u8350\uff09\uff1bCSS\u90e8\u5206\u91cd\u70b9\u8bb2\u89e3\u4e09\u79cd\u5f15\u5165\u65b9\u5f0f\u3001\u9009\u62e9\u5668\u6743\u91cd\u3001\u76d2\u5b50\u6a21\u578b\u53ca\u4e09\u5927\u5e03\u5c40\u6280\u672f\uff08\u6d6e\u52a8\u3001\u5b9a\u4f4d\u3001\u5f39\u6027\uff09\u3002\u7279\u522b\u5f3a\u8c03\u8868\u5355\u5143\u7d20\u7684name\u5c5e\u6027\u8bbe\u7f6e\u3001\u8868\u683c\u8de8\u884c\u8de8\u5217\u6280\u5de7\uff0c\u4ee5\u53ca\u7c7b\u9009\u62e9\u5668\u7684\u590d\u7528\u4f18\u52bf\u3002\u6587\u672b\u63d0\u4f9b\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684\u6ce8\u518c\u8868\u5355\u5b9e\u6218\u6848\u4f8b\uff0c\u5e76\u63a8\u8350W3School\u7b49\u5b66\u4e60\u8d44\u6e90\u3002","og_url":"https:\/\/www.wsisp.com\/helps\/41866.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2025-06-05T07:47:32+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/41866.html","url":"https:\/\/www.wsisp.com\/helps\/41866.html","name":"HTML&CSS \u5b66\u4e60\u603b\u7ed3 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2025-06-05T07:47:32+00:00","dateModified":"2025-06-05T07:47:32+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/41866.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/41866.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/41866.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"HTML&CSS \u5b66\u4e60\u603b\u7ed3"}]},{"@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\/41866","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=41866"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/41866\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=41866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=41866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=41866"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=41866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}