263 lines
220 KiB
HTML
263 lines
220 KiB
HTML
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><meta name="generator" content="VuePress 2.0.0-rc.24" /><meta name="theme" content="VuePress Theme Plume 1.0.0-rc.164" /><script id="check-mac-os">document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))</script><script id="check-dark-mode">;(function () {const um= localStorage.getItem('vuepress-theme-appearance') || 'auto';const sm = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = um === 'dark' || (um !== 'light' && sm);document.documentElement.dataset.theme = isDark ? 'dark' : 'light';})();</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"html 列表与语义布局","image":[""],"dateModified":"2025-12-01T07:21:37.000Z","author":[]}</script><meta property="og:url" content="https://notes.simengweb.com/programming/web/basic-syntax/html-lists-and-semantic-layout/"><meta property="og:site_name" content="仲夏夜之梦"><meta property="og:title" content="html 列表与语义布局"><meta property="og:description" content="四、列表（UL/OL/LI） 无序列表（圆点）： 有序列表（数字）： 小案例：展示清单与步骤 小作业：做一个“今日任务清单” 五、语义化布局（Header/Nav/Main/Section/Article/Aside/Footer） 语义化标签让结构更清晰，搜索引擎更友好： 语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被..."><meta property="og:type" content="article"><meta property="og:locale" content="zh-CN"><meta property="og:updated_time" content="2025-12-01T07:21:37.000Z"><meta property="article:modified_time" content="2025-12-01T07:21:37.000Z"><link rel="icon" type="image/png" href="https://theme-plume.vuejs.press/favicon-32x32.png"><title>html 列表与语义布局 | 仲夏夜之梦</title><meta name="description" content="四、列表（UL/OL/LI） 无序列表（圆点）： 有序列表（数字）： 小案例：展示清单与步骤 小作业：做一个“今日任务清单” 五、语义化布局（Header/Nav/Main/Section/Article/Aside/Footer） 语义化标签让结构更清晰，搜索引擎更友好： 语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被..."><link rel="preload" href="/assets/style-PWY98LJg.css" as="style"><link rel="stylesheet" href="/assets/style-PWY98LJg.css"><link rel="modulepreload" href="/assets/app-COnnofor.js"><link rel="modulepreload" href="/assets/index.html-BdXmDxao.js"></head><body><div id="app"><!--[--><!--[--><div class="theme-plume vp-layout" vp-container data-v-f73ca3da><!--[--><!--[--><!--]--><!--[--><span tabindex="-1" data-v-17e3d305></span><a href="#VPContent" class="vp-skip-link visually-hidden" data-v-17e3d305> Skip to content </a><!--]--><!----><header class="vp-nav" data-v-f73ca3da data-v-e98a6132><div class="vp-navbar" vp-navbar data-v-e98a6132 data-v-2c31ea5e><div class="wrapper" data-v-2c31ea5e><div class="container" data-v-2c31ea5e><div class="title" data-v-2c31ea5e><div class="vp-navbar-title has-sidebar" data-v-2c31ea5e data-v-1a4f50af><a class="vp-link link no-icon title" href="/" data-v-1a4f50af><!--[--><!--[--><!--]--><!--[--><!--[--><!--[--><img class="vp-image dark logo" style="" src="/plume.svg" alt data-v-480e858a><!--]--><!--[--><img class="vp-image light logo" style="" src="/plume.svg" alt data-v-480e858a><!--]--><!--]--><!--]--><span data-v-1a4f50af>仲夏夜之梦</span><!--[--><!--]--><!--]--><!----></a></div></div><div class="content" data-v-2c31ea5e><div class="content-body" data-v-2c31ea5e><!--[--><!--]--><div class="vp-navbar-search search" data-v-2c31ea5e><div class="search-wrapper" data-v-97535d1e><!----><div id="local-search" data-v-97535d1e><button type="button" class="mini-search mini-search-button" aria-label="搜索文档" data-v-97535d1e><span class="mini-search-button-container"><span class="mini-search-search-icon vpi-mini-search" aria-label="search icon"></span><span class="mini-search-button-placeholder">搜索文档</span></span><span class="mini-search-button-keys"><kbd class="mini-search-button-key"></kbd><kbd class="mini-search-button-key">K</kbd></span></button></div></div></div><!--[--><!--]--><nav aria-labelledby="main-nav-aria-label" class="vp-navbar-menu menu" data-v-2c31ea5e data-v-d43c1732><span id="main-nav-aria-label" class="visually-hidden" data-v-d43c1732>Main Navigation</span><!--[--><!--[--><a class="vp-link link navbar-menu-link" href="/" tabindex="0" data-v-d43c1732 data-v-d4acf911><!--[--><!----><span data-v-d4acf911>首页</span><!----><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/blog/" tabindex="0" data-v-d43c1732 data-v-d4acf911><!--[--><!----><span data-v-d4acf911>博客</span><!----><!--]--><!----></a><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-d43c1732 data-v-86530b6c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-86530b6c><span class="text" data-v-86530b6c><!----><!----><span data-v-86530b6c>学科知识</span><!----><span class="vpi-chevron-down text-icon" data-v-86530b6c></span></span></button><div class="menu" data-v-86530b6c><div class="vp-menu" data-v-86530b6c data-v-709dc2b1><div class="items" data-v-709dc2b1><!--[--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/subject/english/" data-v-1ff1855f><!--[--><!----> 英语学习笔记 <!----><!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-d43c1732 data-v-86530b6c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-86530b6c><span class="text" data-v-86530b6c><!----><!----><span data-v-86530b6c>编程笔记</span><!----><span class="vpi-chevron-down text-icon" data-v-86530b6c></span></span></button><div class="menu" data-v-86530b6c><div class="vp-menu" data-v-86530b6c data-v-709dc2b1><div class="items" data-v-709dc2b1><!--[--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/programming/leetcode/" data-v-1ff1855f><!--[--><!----> LeetCode <!----><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/programming/cplusplus/" data-v-1ff1855f><!--[--><!----> C++ <!----><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/programming/solidity/" data-v-1ff1855f><!--[--><!----> Solidity <!----><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/programming/web/" data-v-1ff1855f><!--[--><!----> Web 开发 <!----><!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-d43c1732 data-v-86530b6c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-86530b6c><span class="text" data-v-86530b6c><!----><!----><span data-v-86530b6c>技术理论</span><!----><span class="vpi-chevron-down text-icon" data-v-86530b6c></span></span></button><div class="menu" data-v-86530b6c><div class="vp-menu" data-v-86530b6c data-v-709dc2b1><div class="items" data-v-709dc2b1><!--[--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/theory/cryptography/" data-v-1ff1855f><!--[--><!----> 密码学基础 <!----><!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-d43c1732 data-v-86530b6c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-86530b6c><span class="text" data-v-86530b6c><!----><!----><span data-v-86530b6c>运维</span><!----><span class="vpi-chevron-down text-icon" data-v-86530b6c></span></span></button><div class="menu" data-v-86530b6c><div class="vp-menu" data-v-86530b6c data-v-709dc2b1><div class="items" data-v-709dc2b1><!--[--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/ops/blockchain/" data-v-1ff1855f><!--[--><!----> 区块链运维 <!----><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/ops/linux/" data-v-1ff1855f><!--[--><!----> Linux 运维 <!----><!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/tools/" tabindex="0" data-v-d43c1732 data-v-d4acf911><!--[--><!----><span data-v-d4acf911>工具</span><!----><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/about/" tabindex="0" data-v-d43c1732 data-v-d4acf911><!--[--><!----><span data-v-d4acf911>关于</span><!----><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/friends/" tabindex="0" data-v-d43c1732 data-v-d4acf911><!--[--><!----><span data-v-d4acf911>友情链接</span><!----><!--]--><!----></a><!--]--><!--]--></nav><!--[--><!--]--><!----><div class="vp-navbar-appearance appearance" data-v-2c31ea5e data-v-a295abf6><button class="vp-switch vp-switch-appearance" type="button" role="switch" title aria-checked="false" data-v-a295abf6 data-v-596c25a9 data-v-7eb32327><span class="check" data-v-7eb32327><span class="icon" data-v-7eb32327><!--[--><span class="vpi-sun sun" data-v-596c25a9></span><span class="vpi-moon moon" data-v-596c25a9></span><!--]--></span></span></button></div><div class="vp-social-links vp-navbar-social-links social-links" data-v-2c31ea5e data-v-ad52545c data-v-40bac536><!--[--><a class="vp-social-link no-icon" href="/" aria-label="github" target="_blank" rel="noopener" data-v-40bac536 data-v-67b21932><span class="vpi-social-github" /></a><!--]--></div><div class="vp-flyout vp-navbar-extra extra" data-v-2c31ea5e data-v-652282fd data-v-86530b6c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-86530b6c><span class="vpi-more-horizontal icon" data-v-86530b6c></span></button><div class="menu" data-v-86530b6c><div class="vp-menu" data-v-86530b6c data-v-709dc2b1><!----><!--[--><!--[--><!----><div class="group" data-v-652282fd><div class="item appearance" data-v-652282fd><p class="label" data-v-652282fd>外观</p><div class="appearance-action" data-v-652282fd><button class="vp-switch vp-switch-appearance" type="button" role="switch" title aria-checked="false" data-v-652282fd data-v-596c25a9 data-v-7eb32327><span class="check" data-v-7eb32327><span class="icon" data-v-7eb32327><!--[--><span class="vpi-sun sun" data-v-596c25a9></span><span class="vpi-moon moon" data-v-596c25a9></span><!--]--></span></span></button></div></div></div><div class="group" data-v-652282fd><div class="item social-links" data-v-652282fd><div class="vp-social-links social-links-list" data-v-652282fd data-v-40bac536><!--[--><a class="vp-social-link no-icon" href="/" aria-label="github" target="_blank" rel="noopener" data-v-40bac536 data-v-67b21932><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="vp-navbar-hamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="nav-screen" data-v-2c31ea5e data-v-2b50024d><span class="container" data-v-2b50024d><span class="top" data-v-2b50024d></span><span class="middle" data-v-2b50024d></span><span class="bottom" data-v-2b50024d></span></span></button></div></div></div></div><div class="divider" data-v-2c31ea5e><div class="divider-line" data-v-2c31ea5e></div></div></div><!----></header><div class="vp-local-nav reached-top" data-v-f73ca3da data-v-3944d8e8><button class="menu" aria-expanded="false" aria-controls="SidebarNav" data-v-3944d8e8><span class="vpi-align-left menu-icon" data-v-3944d8e8></span><span class="menu-text" data-v-3944d8e8>Menu</span></button><div class="vp-local-nav-outline-dropdown" style="--vp-vh:0px;" data-v-3944d8e8 data-v-4114a62c><button data-v-4114a62c>返回顶部</button><!----></div></div><aside class="vp-sidebar" vp-sidebar data-v-f73ca3da data-v-95211354><div class="curtain" data-v-95211354></div><nav id="SidebarNav" class="nav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-95211354><span id="sidebar-aria-label" class="visually-hidden" data-v-95211354> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-473fd05b><section class="vp-sidebar-item sidebar-item level-0" data-v-473fd05b data-v-12048f0f><!----><div data-v-12048f0f data-v-12048f0f><div class="items" data-v-12048f0f><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-12048f0f data-v-12048f0f><div class="item" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><a class="vp-link link link" href="/programming/web/" data-v-12048f0f><!--[--><p class="text" data-v-12048f0f><span data-v-12048f0f>Web 开发学习笔记</span><!----></p><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><div class="no-transition group" data-v-473fd05b><section class="vp-sidebar-item sidebar-item level-0 has-active" data-v-473fd05b data-v-12048f0f><div class="item" role="button" tabindex="0" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><h2 class="text" data-v-12048f0f><span data-v-12048f0f>基础知识</span><!----></h2><!----></div><div data-v-12048f0f data-v-12048f0f><div class="items" data-v-12048f0f><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-12048f0f data-v-12048f0f><div class="item" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><a class="vp-link link link" href="/programming/web/basic-syntax/html-css-js/" data-v-12048f0f><!--[--><p class="text" data-v-12048f0f><span data-v-12048f0f>Web 前端基础讲解</span><!----></p><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-12048f0f data-v-12048f0f><div class="item" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><a class="vp-link link link" href="/programming/web/basic-syntax/html-tags-attributes/" data-v-12048f0f><!--[--><p class="text" data-v-12048f0f><span data-v-12048f0f>HTML 常用标签与属性</span><!----></p><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-12048f0f data-v-12048f0f><div class="item" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><a class="vp-link link link" href="/programming/web/basic-syntax/html-lists-and-semantic-layout/" data-v-12048f0f><!--[--><p class="text" data-v-12048f0f><span data-v-12048f0f>HTML 列表与语义布局</span><!----></p><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-12048f0f data-v-12048f0f><div class="item" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><a class="vp-link link link" href="/programming/web/basic-syntax/javascript-basics/" data-v-12048f0f><!--[--><p class="text" data-v-12048f0f><span data-v-12048f0f>JavaScript 基础知识</span><!----></p><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><!--]--><!--[--><!--]--></nav></aside><!--[--><div id="VPContent" vp-content class="vp-content has-sidebar" data-v-f73ca3da data-v-b2beaca7><div class="vp-doc-container has-sidebar has-aside" data-v-b2beaca7 data-v-23f6ad98><!--[--><!--]--><div class="container" data-v-23f6ad98><div class="aside" vp-outline data-v-23f6ad98><div class="aside-curtain" data-v-23f6ad98></div><div class="aside-container" data-v-23f6ad98><div class="aside-content" data-v-23f6ad98><div class="vp-doc-aside" data-v-23f6ad98 data-v-5976474c><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="vp-doc-aside-outline" role="navigation" data-v-5976474c data-v-aa56eba0><div class="content" data-v-aa56eba0><div class="outline-marker" data-v-aa56eba0></div><div id="doc-outline-aria-label" aria-level="2" class="outline-title" role="heading" data-v-aa56eba0><span data-v-aa56eba0>此页内容</span><span class="vpi-print icon" data-v-aa56eba0></span></div><ul class="root" data-v-aa56eba0 data-v-3e6b023c><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-5976474c></div><!--[--><!--]--></div></div></div></div><div class="content" data-v-23f6ad98><div class="content-container" data-v-23f6ad98><!--[--><!--]--><main class="main" data-v-23f6ad98><nav class="vp-breadcrumb" data-v-23f6ad98 data-v-1ae4ad7a><ol vocab="https://schema.org/" typeof="BreadcrumbList" data-v-1ae4ad7a><!--[--><li property="itemListElement" typeof="ListItem" data-v-1ae4ad7a><a class="vp-link link breadcrumb" href="/" property="item" typeof="WebPage" data-v-1ae4ad7a><!--[-->首页<!--]--><!----></a><span class="vpi-chevron-right" data-v-1ae4ad7a></span><meta property="name" content="首页" data-v-1ae4ad7a><meta property="position" content="1" data-v-1ae4ad7a></li><li property="itemListElement" typeof="ListItem" data-v-1ae4ad7a><span class="vp-link breadcrumb" property="item" typeof="WebPage" data-v-1ae4ad7a><!--[-->基础知识<!--]--><!----></span><span class="vpi-chevron-right" data-v-1ae4ad7a></span><meta property="name" content="基础知识" data-v-1ae4ad7a><meta property="position" content="2" data-v-1ae4ad7a></li><li property="itemListElement" typeof="ListItem" data-v-1ae4ad7a><a class="vp-link link breadcrumb current" href="/programming/web/basic-syntax/html-lists-and-semantic-layout/" property="item" typeof="WebPage" data-v-1ae4ad7a><!--[-->html 列表与语义布局<!--]--><!----></a><!----><meta property="name" content="html 列表与语义布局" data-v-1ae4ad7a><meta property="position" content="3" data-v-1ae4ad7a></li><!--]--></ol></nav><!--[--><!--]--><!--[--><h1 class="vp-doc-title page-title" data-v-ba8d1a1e><!----> html 列表与语义布局 <!----></h1><div class="vp-doc-meta" data-v-ba8d1a1e><!--[--><!--]--><p class="reading-time" data-v-ba8d1a1e><span class="vpi-books icon" data-v-ba8d1a1e></span><span data-v-ba8d1a1e>约 2083 字</span><span data-v-ba8d1a1e>大约 7 分钟</span></p><!----><!--[--><!--]--><p class="create-time" data-v-ba8d1a1e><span class="vpi-clock icon" data-v-ba8d1a1e></span><span data-v-ba8d1a1e>2025-11-02</span></p></div><!--]--><!--[--><!--]--><div class="_programming_web_basic-syntax_html-lists-and-semantic-layout_ external-link-icon-enabled vp-doc plume-content" vp-content data-v-23f6ad98><!--[--><!--]--><div data-v-23f6ad98><h2 id="四、列表-ul-ol-li" tabindex="-1"><a class="header-anchor" href="#四、列表-ul-ol-li"><span>四、列表（UL/OL/LI）</span></a></h2><p>无序列表（圆点）：</p><div class="code-block-title" data-title="index.html"><div class="code-block-title-bar"><span class="title"><!---->index.html</span></div><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">学习笔记</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">工具推荐</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">友情链接</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><p>有序列表（数字）：</p><div class="code-block-title" data-title="index.html"><div class="code-block-title-bar"><span class="title"><!---->index.html</span></div><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ol</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">需求与原型</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">API 设计</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">联调与验收</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ol</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><p><strong>小案例：展示清单与步骤</strong></p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-14-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-14-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-14-2" aria-selected="false"><!--[--><!----><span>app.js</span><!--]--></button><!--]--></div><!--[--><div id="codetab-14-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">列表案例</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defer</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">app.js</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">我的清单</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">学习笔记</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">工具推荐</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">友情链接</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">项目步骤</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ol</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">需求与原型</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">API 设计</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">联调与验收</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ol</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-14-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> ol</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> margin</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding-left</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1.5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> margin</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .25</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-14-2" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>app.js</span><!--]--></div><!--[--><div class="language-js line-numbers-mode" data-highlighter="shiki" data-ext="js" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-js"><span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">querySelectorAll</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">li</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">).</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">forEach</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">addEventListener</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">click</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">classList</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">toggle</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">done</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)));</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p><strong>小作业：做一个“今日任务清单”</strong></p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-28-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-28-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><!--]--></div><!--[--><div id="codetab-28-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">今日任务清单</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">今天要做的事</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">阅读 30 分钟</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">练习 1 个算法题</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">整理房间</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ul</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-28-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> font-family</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> system-ui</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> margin</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">li</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> cursor</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> pointer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">done</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text-decoration</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> line-through</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> color</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">888</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h2 id="五、语义化布局-header-nav-main-section-article-aside-footer" tabindex="-1"><a class="header-anchor" href="#五、语义化布局-header-nav-main-section-article-aside-footer"><span>五、语义化布局（Header/Nav/Main/Section/Article/Aside/Footer）</span></a></h2><p>语义化标签让结构更清晰，搜索引擎更友好：</p><div class="code-block-title" data-title="index.html"><div class="code-block-title-bar"><span class="title"><!---->index.html</span></div><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">header</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">我的网站</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">nav</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">/blog/</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">博客</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">/notes/</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">笔记</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">nav</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- 注意：更复杂的导航通常配合 CSS/JS 做响应式菜单 --></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- 小提示：块级容器的外层仍可使用 <div> 来做网格或栅格布局 --></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- 例如 <div class="container"> 包裹全站 --></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- 只是这些语义标签会让搜索引擎更理解结构 --></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- 语义标签与 <div> 并不冲突，可以配合使用 --></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- 选择语义标签能让你的 HTML 更“有含义”而非只是分区 --></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- 如果仅用于布局、无明确语义，用 <div> 即可 --></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- 这段说明旨在帮助你建立语义化与布局之间的直觉 --></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- 逐步养成好的结构化写法 --></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- 让内容更可维护，更易被机器理解 --></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> <!-- （继续往下看，还会介绍 Article/Section 等） --></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><blockquote><p>语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被搜索引擎和读屏工具理解。</p></blockquote><p><strong>小案例：语义化布局入门</strong></p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-51-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-51-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-51-2" aria-selected="false"><!--[--><!----><span>app.js</span><!--]--></button><!--]--></div><!--[--><div id="codetab-51-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">语义化布局案例</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defer</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">app.js</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">header</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">我的网站</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">nav</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#home</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">首页</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#blog</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">博客</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">nav</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">header</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">main</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">section</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">最新文章</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">article</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">用语义标签改造你的页面</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">示例段落：用 header/nav/main/section/article/aside/footer 组织结构。</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">article</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">section</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">aside</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">侧栏</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">这里可以放导航、标签云或广告位。</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">aside</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">main</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">footer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">© 2025 祀梦</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">footer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-51-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> font-family</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> system-ui</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> margin</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">header</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> footer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">f7f7f7</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">nav</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> display</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> flex</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> gap</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">main</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> display</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> grid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> grid-template-columns</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">fr</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 240</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> gap</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">article</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">fff</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">eee</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 8</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">aside</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">fff</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">eee</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 8</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-51-2" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>app.js</span><!--]--></div><!--[--><div class="language-js line-numbers-mode" data-highlighter="shiki" data-ext="js" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-js"><span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">querySelectorAll</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">nav a</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">).</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">forEach</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">addEventListener</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">click</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">querySelectorAll</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">nav a</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">).</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">forEach</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">x</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> x</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">classList</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">remove</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">active</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">));</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">classList</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">add</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">active</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}));</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p><strong>小作业：用语义标签搭一个博客首页</strong></p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-65-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-65-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><!--]--></div><!--[--><div id="codetab-65-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">博客首页</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">header</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">博客名称</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">nav</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">首页</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">归档</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">关于</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">nav</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">header</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">main</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">section</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">article</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">第一篇文章标题</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">摘要内容……</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">article</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">article</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">第二篇文章标题</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">摘要内容……</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">article</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">section</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">aside</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">侧栏</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">分类、标签或个人简介。</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">aside</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">main</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">footer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">© 2025 你的名字</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">footer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-65-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">/* 与案例类似的栅格布局样式 */</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">main</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> display</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> grid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> grid-template-columns</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">fr</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 240</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> gap</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">article</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">fff</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">eee</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 8</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">aside</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">fff</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">eee</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 8</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h2 id="六、表格-table-tr-th-td" tabindex="-1"><a class="header-anchor" href="#六、表格-table-tr-th-td"><span>六、表格（Table/TR/TH/TD）</span></a></h2><div class="code-block-title" data-title="index.html"><div class="code-block-title-bar"><span class="title"><!---->index.html</span></div><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">table</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">thead</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">姓名</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">职业</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">thead</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tbody</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">祀梦</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">开发者</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tbody</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">table</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><p>小提示：表格样式通常用 CSS 来美化（边框、间距、对齐等）。</p><p><strong>小案例：信息表格</strong></p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-83-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-83-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-83-2" aria-selected="false"><!--[--><!----><span>app.js</span><!--]--></button><!--]--></div><!--[--><div id="codetab-83-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">信息表格案例</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defer</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">app.js</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">table</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">thead</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">姓名</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">职业</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">城市</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">thead</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tbody</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">祀梦</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">开发者</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">上海</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">小李</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">产品经理</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">杭州</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">小王</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">设计师</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">北京</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tbody</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">table</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-83-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">table</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-collapse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> collapse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> width</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 100</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">%</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">ddd</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .75</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text-align</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> left</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">thead</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">f7f7f7</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tbody</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">nth-child</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">odd</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">fafafa</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-83-2" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>app.js</span><!--]--></div><!--[--><div class="language-js line-numbers-mode" data-highlighter="shiki" data-ext="js" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-js"><span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">querySelectorAll</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">tbody tr</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">).</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">forEach</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">addEventListener</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">click</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">classList</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">toggle</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">highlight</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)));</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p><strong>小作业：制作“课程表”</strong></p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-97-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-97-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><!--]--></div><!--[--><div id="codetab-97-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">课程表</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">table</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">thead</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">时间</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">课程</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">教室</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">thead</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tbody</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">周一 9:00</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">数学</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">A101</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">周三 14:00</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">英语</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">B302</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">周五 10:00</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">计算机</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">C210</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tr</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">tbody</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">table</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-97-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">table</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-collapse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> collapse</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> width</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 100</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">%</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> td</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">ddd</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .75</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">thead</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> th</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">f0f0f0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h2 id="七、媒体-audio-video-source" tabindex="-1"><a class="header-anchor" href="#七、媒体-audio-video-source"><span>七、媒体（Audio/Video/Source）</span></a></h2><div class="code-block-title" data-title="index.html"><div class="code-block-title-bar"><span class="title"><!---->index.html</span></div><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">audio</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">bgm.mp3</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> controls</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> loop</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">audio</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">video</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">intro.mp4</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> controls</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> width</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">480</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> poster</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">cover.jpg</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> muted</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">video</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"><!-- 常用属性：controls / autoplay / loop / muted / poster（封面） --></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><p>补充说明：</p><ul><li><code>controls</code> 提供播放控制；一般不建议隐藏，保证可用性。</li><li><code>autoplay</code> 可能被浏览器限制；若需自动播放，通常需同时设置 <code>muted</code>。</li><li><code>preload</code> 控制预加载策略（<code>none</code>/<code>metadata</code>/<code>auto</code>），根据页面性能需求选择。</li><li><code>poster</code> 为视频未播放时的封面图；音频没有封面属性。</li><li>使用 <code><source></code> 指定多种格式与 MIME 类型，提升兼容性：<code><source src="xxx.mp4" type="video/mp4"></code>。</li></ul><p><strong>小案例：嵌入音视频</strong></p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-142-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-142-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><!--]--></div><!--[--><div id="codetab-142-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">媒体案例</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">背景音乐</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">audio</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">bgm.mp3</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> controls</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> loop</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">audio</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">介绍视频</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">video</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">intro.mp4</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> controls</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> width</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">480</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> poster</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">cover.jpg</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> muted</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">video</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-142-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">video</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> display</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> block</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> margin-top</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p><strong>小作业：添加一段你喜欢的音乐与视频</strong></p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-153-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-153-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><!--]--></div><!--[--><div id="codetab-153-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">我的媒体</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">audio</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">music.mp3</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> controls</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">audio</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">video</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">movie.mp4</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> controls</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> width</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">480</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> poster</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">cover.jpg</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">video</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-153-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">audio</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> video</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> display</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> block</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> margin</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h2 id="八、全局常用属性-任何标签几乎都能用" tabindex="-1"><a class="header-anchor" href="#八、全局常用属性-任何标签几乎都能用"><span>八、全局常用属性（任何标签几乎都能用）</span></a></h2><ul><li><code>id</code>：唯一标识，用于 JS/CSS 精确选择。</li><li><code>class</code>：分组与样式选择（上一课已讲）。</li><li><code>style</code>：内联样式（不推荐大量使用，建议写到 CSS 文件）。</li><li><code>title</code>：悬停提示文字。</li><li><code>data-*</code>：自定义数据属性（如 <code>data-user-id="42"</code>）。</li><li><code>aria-*</code>：无障碍相关属性，帮助读屏工具理解（如 <code>aria-label</code>）。</li></ul><p><strong>小案例：使用 id/class/data/title/aria</strong></p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-199-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-199-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-199-2" aria-selected="false"><!--[--><!----><span>app.js</span><!--]--></button><!--]--></div><!--[--><div id="codetab-199-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">全局属性案例</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defer</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">app.js</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">likeBtn</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">btn</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">点赞一下</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> data-count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">0</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> aria-label</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">点赞</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">👍 喜欢</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">msg</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">note</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> aria-live</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">polite</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">点击按钮试试。</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-199-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">btn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .75</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">ccc</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 6</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">fff</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">note</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> color</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">555</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-199-2" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>app.js</span><!--]--></div><!--[--><div class="language-js line-numbers-mode" data-highlighter="shiki" data-ext="js" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-js"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> btn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">likeBtn</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> msg</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">msg</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">btn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">addEventListener</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">click</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> Number</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">btn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">dataset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">count</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> ||</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> btn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">dataset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> String</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> msg</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">textContent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> `</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">已点赞 </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">count</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 次</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">});</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><p><strong>小作业：做一个带计数的按钮</strong></p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-213-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-213-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-213-2" aria-selected="false"><!--[--><!----><span>app.js</span><!--]--></button><!--]--></div><!--[--><div id="codetab-213-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">计数按钮</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defer</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">app.js</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">counter</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">btn</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">点击增加</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> data-count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">0</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">点击我</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">status</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">note</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">当前计数：0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-213-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><div class="language-css line-numbers-mode" data-highlighter="shiki" data-ext="css" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">btn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .75</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">ccc</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 6</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">fff</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">note</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> margin-top</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> .5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-213-2" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>app.js</span><!--]--></div><!--[--><div class="language-js line-numbers-mode" data-highlighter="shiki" data-ext="js" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-js"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> counter</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">counter</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> statusEl</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">status</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">counter</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">addEventListener</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">click</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> Number</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">counter</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">dataset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">count</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> ||</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> counter</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">dataset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> String</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> statusEl</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">textContent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> `</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">当前计数：</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">count</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">});</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h2 id="结尾-先结构清晰-再上样式与交互" tabindex="-1"><a class="header-anchor" href="#结尾-先结构清晰-再上样式与交互"><span>结尾：先结构清晰，再上样式与交互</span></a></h2><p>写网页像搭房子：先把房间（结构标签）安排好，再选家具颜色（CSS），最后加智能设备（JS）。</p><p>建议你先用这些常用标签做一个“个人名片页”，含标题、段落、头像图片、导航链接和一个简单表单。练熟后再加样式与交互。</p><p><strong>延伸阅读</strong>：</p><ul><li>HTML 规范与参考（MDN）：https://developer.mozilla.org/en-US/docs/Web/HTML</li><li>无障碍与语义化：https://developer.mozilla.org/en-US/docs/Glossary/Semantics</li></ul></div><!----><!----><!----></div></main><footer class="vp-doc-footer" data-v-23f6ad98 data-v-7138e2cb><!--[--><!--]--><!----><div class="contributors" aria-label="Contributors" data-v-7138e2cb><span class="contributors-label" data-v-7138e2cb>贡献者: </span><span class="contributors-info" data-v-7138e2cb><!--[--><!--[--><span class="contributor" data-v-7138e2cb>Kawaxxxsaki</span><!----><!--]--><!--]--></span></div><nav class="prev-next" data-v-7138e2cb><div class="pager" data-v-7138e2cb><a class="vp-link link pager-link prev" href="/programming/web/basic-syntax/html-tags-attributes/" data-v-7138e2cb><!--[--><span class="desc" data-v-7138e2cb>上一页</span><span class="title" data-v-7138e2cb>HTML 常用标签与属性</span><!--]--><!----></a></div><div class="pager" data-v-7138e2cb><a class="vp-link link pager-link next" href="/programming/web/basic-syntax/javascript-basics/" data-v-7138e2cb><!--[--><span class="desc" data-v-7138e2cb>下一页</span><span class="title" data-v-7138e2cb>JavaScript 基础知识</span><!--]--><!----></a></div></nav></footer><div id="comment" class="waline-wrapper vp-comment" vp-comment darkmode="false" style="display:block;" data-v-23f6ad98><!----></div><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!--]--><button style="display:none;" type="button" class="vp-back-to-top" aria-label="back to top" data-v-f73ca3da data-v-bcf8d9a6><span class="percent" data-allow-mismatch data-v-bcf8d9a6>0%</span><span class="show icon vpi-back-to-top" data-v-bcf8d9a6></span><svg aria-hidden="true" data-v-bcf8d9a6><circle cx="50%" cy="50%" data-allow-mismatch style="stroke-dasharray:calc(0% - 12.566370614359172px) calc(314.1592653589793% - 12.566370614359172px);" data-v-bcf8d9a6></circle></svg></button><svg style="display:none;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-label="sign down" class="vp-sign-down" aria-hidden="true" data-v-f73ca3da data-v-900978de><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" data-v-900978de><path d="m19 11l-7 6l-7-6" data-v-900978de></path><path d="m19 5l-7 6l-7-6" opacity="0.6" data-v-900978de></path></g></svg><footer class="vp-footer has-sidebar" vp-footer data-v-f73ca3da data-v-400675cf><!--[--><div class="container" data-v-400675cf><p class="message" data-v-400675cf>Powered by <a target="_blank" href="https://v2.vuepress.vuejs.org/">VuePress</a> & <a target="_blank" href="https://theme-plume.vuejs.press">vuepress-theme-plume</a></p><!----></div><!--]--></footer><!--[--><!--]--><!--]--></div><!----><!--]--><!--[--><!--]--><!--]--></div><script type="module" src="/assets/app-COnnofor.js" defer></script></body></html> |