{"id":1685,"date":"2026-02-02T18:19:17","date_gmt":"2026-02-02T10:19:17","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=1685"},"modified":"2026-02-02T18:19:17","modified_gmt":"2026-02-02T10:19:17","slug":"html-css","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2026\/02\/02\/html-css\/","title":{"rendered":"html css"},"content":{"rendered":"\n<p>\u597d\uff0c<strong>HTML + CSS<\/strong> \u6211\u7ed9\u4f60\u6765\u4e00\u4efd<strong>\u4eba\u8bdd\u7248 + \u901f\u6210\u7248<\/strong>\u7684 \ud83d\udc47<br>\u4e0d\u7ed5\u7406\u8bba\uff0c\u76f4\u63a5\u8ba9\u4f60\u77e5\u9053\u300c\u5b83\u4eec\u662f\u5e72\u561b\u7684\u3001\u600e\u4e48\u7528\u3001\u5b66\u5230\u54ea\u4e00\u6b65\u7b97\u5165\u95e8\u300d\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e00\u53e5\u8bdd\u7406\u89e3<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML<\/strong>\uff1a\u7f51\u9875\u7684\u300c\u9aa8\u67b6\u300d\uff08\u653e\u4ec0\u4e48\u5185\u5bb9\uff09<\/li>\n\n\n\n<li><strong>CSS<\/strong>\uff1a\u7f51\u9875\u7684\u300c\u5916\u89c2\u548c\u989c\u503c\u300d\uff08\u957f\u4ec0\u4e48\u6837\uff09<\/li>\n<\/ul>\n\n\n\n<p>\ud83d\udc49 <strong>HTML \u51b3\u5b9a\u7ed3\u6784\uff0cCSS \u51b3\u5b9a\u6837\u5f0f<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e00\u3001HTML \u662f\u4ec0\u4e48\uff1f\uff08\u7ed3\u6784\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u6700\u57fa\u7840\u7684 HTML \u9875\u9762<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html lang=&quot;zh-CN&quot;&gt;\n&amp;lt;head&gt;\n  &amp;lt;meta charset=&quot;UTF-8&quot;&gt;\n  &amp;lt;title&gt;\u6211\u7684\u7b2c\u4e00\u4e2a\u7f51\u9875&amp;lt;\/title&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n  &amp;lt;h1&gt;\u4f60\u597d\uff0c\u4e16\u754c&amp;lt;\/h1&gt;\n  &amp;lt;p&gt;\u8fd9\u662f\u4e00\u4e2a\u6bb5\u843d&amp;lt;\/p&gt;\n  &amp;lt;a href=&quot;https:\/\/example.com&quot;&gt;\u70b9\u6211&amp;lt;\/a&gt;\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u5e38\u7528 HTML \u6807\u7b7e\uff08\u5fc5\u4f1a\uff09<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u6807\u7b7e<\/th><th>\u7528\u9014<\/th><\/tr><\/thead><tbody><tr><td><code>&lt;h1&gt;~&lt;h6&gt;<\/code><\/td><td>\u6807\u9898<\/td><\/tr><tr><td><code>&lt;p&gt;<\/code><\/td><td>\u6bb5\u843d<\/td><\/tr><tr><td><code>&lt;a&gt;<\/code><\/td><td>\u94fe\u63a5<\/td><\/tr><tr><td><code>&lt;img&gt;<\/code><\/td><td>\u56fe\u7247<\/td><\/tr><tr><td><code>&lt;div&gt;<\/code><\/td><td>\u533a\u5757<\/td><\/tr><tr><td><code>&lt;span&gt;<\/code><\/td><td>\u884c\u5185\u6587\u672c<\/td><\/tr><tr><td><code>&lt;ul&gt;&lt;li&gt;<\/code><\/td><td>\u5217\u8868<\/td><\/tr><tr><td><code>&lt;input&gt;<\/code><\/td><td>\u8f93\u5165\u6846<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e8c\u3001CSS \u662f\u4ec0\u4e48\uff1f\uff08\u6837\u5f0f\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u6700\u7b80\u5355\u7684 CSS<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nh1 {\n  color: red;\n  font-size: 32px;\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u628a CSS \u7528\u5230 HTML \u91cc\uff08\u63a8\u8350\u65b9\u5f0f\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;style&gt;\n  p {\n    color: #333;\n    line-height: 1.6;\n  }\n&amp;lt;\/style&gt;\n\n<\/pre><\/div>\n\n\n<p>\u6216\u5916\u90e8\u6587\u4ef6\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e09\u3001CSS \u6700\u91cd\u8981\u7684 5 \u4e2a\u6838\u5fc3\u70b9\uff08\u65b0\u624b\u91cd\u70b9\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1\ufe0f\u20e3 \u9009\u62e9\u5668\uff08\u9009\u8c01\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\np {}          \/* \u6807\u7b7e *\/\n.box {}       \/* class *\/\n#main {}      \/* id *\/\ndiv p {}      \/* \u540e\u4ee3 *\/\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2\ufe0f\u20e3 \u76d2\u6a21\u578b\uff08\u9762\u8bd5\u5fc5\u95ee\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.box {\n  width: 200px;\n  padding: 10px;\n  border: 1px solid #000;\n  margin: 20px;\n}\n\n<\/pre><\/div>\n\n\n<p>\ud83d\udc49 <strong>\u5185\u5bb9 + \u5185\u8fb9\u8ddd + \u8fb9\u6846 + \u5916\u8fb9\u8ddd<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3\ufe0f\u20e3 \u5e03\u5c40\uff08\u91cd\u70b9\u4e2d\u7684\u91cd\u70b9\uff09<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Flex\uff08\u5f3a\u70c8\u63a8\u8350\u5148\u5b66\uff09<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">Grid\uff08\u8fdb\u9636\uff09<\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.container {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">4\ufe0f\u20e3 \u5b57\u4f53 &amp; \u989c\u8272<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nbody {\n  font-family: Arial, sans-serif;\n  color: #333;\n  background: #f5f5f5;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">5\ufe0f\u20e3 \u54cd\u5e94\u5f0f\uff08\u624b\u673a\u5fc5\u5907\uff09<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n@media (max-width: 768px) {\n  body {\n    font-size: 14px;\n  }\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u56db\u3001\u4e00\u4e2a\u5b8c\u6574\u5c0f\u4f8b\u5b50\uff08\u80fd\u76f4\u63a5\u8dd1\uff09<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;!DOCTYPE html&gt;\n&amp;lt;html&gt;\n&amp;lt;head&gt;\n  &amp;lt;style&gt;\n    body {\n      font-family: Arial;\n      background: #f0f0f0;\n    }\n    .card {\n      width: 300px;\n      padding: 20px;\n      background: white;\n      border-radius: 8px;\n    }\n  &amp;lt;\/style&gt;\n&amp;lt;\/head&gt;\n&amp;lt;body&gt;\n  &amp;lt;div class=&quot;card&quot;&gt;\n    &amp;lt;h2&gt;HTML + CSS&amp;lt;\/h2&gt;\n    &amp;lt;p&gt;\u8fd9\u662f\u4e00\u4e2a\u7b80\u5355\u5361\u7247&amp;lt;\/p&gt;\n  &amp;lt;\/div&gt;\n&amp;lt;\/body&gt;\n&amp;lt;\/html&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e94\u3001\u5b66\u5230\u4ec0\u4e48\u7a0b\u5ea6\u7b97\u300c\u4f1a\u4e86\u300d\uff1f<\/h2>\n\n\n\n<p>\u2705 \u80fd\u72ec\u7acb\u5199\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9759\u6001\u7f51\u9875<\/li>\n\n\n\n<li>\u7b80\u5355\u4e2a\u4eba\u4e3b\u9875<\/li>\n\n\n\n<li>\u4ea7\u54c1\u4ecb\u7ecd\u9875<\/li>\n\n\n\n<li>B \u7ad9 \/ \u535a\u5ba2\u524d\u7aef\u9875\u9762<\/li>\n<\/ul>\n\n\n\n<p>\u274c \u4e0d\u5305\u62ec\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u52a8\u753b\u5f88\u590d\u6742<\/li>\n\n\n\n<li>\u4ea4\u4e92\uff08\u90a3\u662f JS\uff09<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u516d\u3001\u5b66\u4e60\u8def\u7ebf\uff08\u4e0d\u8ff7\u8def\uff09<\/h2>\n\n\n\n<p>1\ufe0f\u20e3 HTML \u57fa\u7840\u6807\u7b7e<br>2\ufe0f\u20e3 CSS \u57fa\u7840 + \u76d2\u6a21\u578b<br>3\ufe0f\u20e3 Flex \u5e03\u5c40<br>4\ufe0f\u20e3 \u54cd\u5e94\u5f0f<br>5\ufe0f\u20e3 \u5c0f\u9879\u76ee\uff08\u6a21\u4eff\u4e00\u4e2a\u7f51\u9875\uff09<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e00\u53e5\u8bdd\u603b\u7ed3<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>HTML \u51b3\u5b9a\u7f51\u9875\u6709\u4ec0\u4e48\uff0cCSS \u51b3\u5b9a\u7f51\u9875\u597d\u4e0d\u597d\u770b\u3002<\/strong><\/p>\n<\/blockquote>\n\n\n\n<p>\u5982\u679c\u4f60\u613f\u610f\u544a\u8bc9\u6211\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udc49 \u4f60\u662f <strong>\u96f6\u57fa\u7840 \/ \u5b66\u8fc7\u4e00\u70b9<\/strong><\/li>\n\n\n\n<li>\ud83d\udc49 \u7528\u9014\u662f <strong>\u505a\u7f51\u7ad9 \/ \u5b66\u524d\u7aef \/ \u9879\u76ee \/ \u4f5c\u4e1a<\/strong><\/li>\n\n\n\n<li>\ud83d\udc49 \u60f3\u505a <strong>PC \u8fd8\u662f\u624b\u673a\u9875\u9762<\/strong><\/li>\n<\/ul>\n\n\n\n<p>\u6211\u53ef\u4ee5\u76f4\u63a5\u7ed9\u4f60\u4e00\u4efd <strong>\u300c\u6700\u77ed\u4e0d\u7ed5\u5f2f\u5b66\u4e60\u65b9\u6848\u300d<\/strong> \ud83d\udcbb\u2728<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u597d\uff0cHTML + CSS \u6211\u7ed9\u4f60\u6765\u4e00\u4efd\u4eba\u8bdd\u7248 + \u901f\u6210\u7248\u7684 \ud83d\udc47\u4e0d\u7ed5\u7406\u8bba\uff0c\u76f4\u63a5\u8ba9\u4f60&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2026\/02\/02\/html-css\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-1685","post","type-post","status-publish","format-standard","hentry","category-40"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=1685"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1685\/revisions"}],"predecessor-version":[{"id":1686,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/1685\/revisions\/1686"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=1685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=1685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=1685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}