<div> 是 "division"（分区）的缩写，可以理解为网页中的"容器"或"盒子"。

"),a(" 的情况：")],-1)),i("div",B,[i("div",b,[i("span",E,[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[4]||(s[4]=a("index.html",-1))])]),s[5]||(s[5]=e(`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦</title>
</head>
<body>
<div class="header">
  <h1>我的网站</h1>
  <p>欢迎来到我的个人网站！</p>
</div>
<div class="content">
  <img src="photo.jpg" alt="我的照片">
  <p>这是我的个人介绍...</p>
</div>
<div class="footer">
  <button>联系我</button>
</div>
</body>
</html>

`,1))]),s[43]||(s[43]=e('

这样我就可以分别控制每个部分的样式啦！

这个时候又有聪明的小朋友问了：这个class是什么呀？难道说？！是起的名字！！

太好了，恭喜你答对了，那么我们为什么要用class呢？

Class

Class 可以理解为给 HTML 元素起的"组名"或"类别名"，让 CSS 能够精确地找到并美化特定的元素。

想象一个学校：

HTML 元素 = 学生
Class = 学生的身份（如"三年级一班"、"篮球队员"）
CSS = 老师，根据身份给学生安排不同的任务和服装

class基本用法此处就不举例了，详情参照上面的代码。

如果没有class的情况：

',9)),i("div",C,[i("div",F,[i("span",f,[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[6]||(s[6]=a("index.html",-1))])]),s[7]||(s[7]=e(`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仲夏夜之梦</title>
</head>
<body>
<h1>我的网站</h1>
<p>普通段落</p>
<p>个人介绍</p>
<p>重要提示</p>
<button>普通按钮</button>
<button>重要按钮</button>
</body>
</html>

`,1))]),s[44]||(s[44]=i("p",null,'如果我们想给"重要提示"和"重要按钮"设置特殊样式，很难精确选择！像之前我教的一样css直接用p或者h1来选择的话就无法区分具体每一段的区别了。',-1)),s[45]||(s[45]=i("p",null,"这时候就可以用class了！",-1)),l(p,{id:"128",data:[{id:"index.html"},{id:"style.css"}]},{title0:h(({value:t,isActive:n})=>[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[8]||(s[8]=i("span",null,"index.html",-1))]),title1:h(({value:t,isActive:n})=>[l(k,{provider:"iconify",name:"vscode-icons:file-type-css"}),s[9]||(s[9]=i("span",null,"style.css",-1))]),tab0:h(({value:t,isActive:n})=>[...s[10]||(s[10]=[i("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"}},[i("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[i("code",{class:"language-html"},[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"html"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"head"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"meta"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," charset"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"utf-8"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"title"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"仲夏夜之梦"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"body"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h1"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"我的网站"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"p"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," class"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"normal"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"普通段落"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"p"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," class"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"intro"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"个人介绍"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"p"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," class"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"warning"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"重要提示"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"button"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," class"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"normal-btn"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"普通按钮"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"button"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," class"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"important-btn"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"重要按钮"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")])])]),i("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"})])],-1)])]),tab1:h(({value:t,isActive:n})=>[...s[11]||(s[11]=[i("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"}},[i("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[i("code",{class:"language-css"},[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"warning"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," color"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," red"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," font-weight"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," bold"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"}")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"important-btn"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," background-color"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," red"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," color"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," white"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"}")])])]),i("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"})])],-1)])]),_:1}),s[46]||(s[46]=i("p",null,[i("strong",null,"现在自己动手尝试一下")],-1)),s[47]||(s[47]=i("h2",{id:"动手练习-小作业",tabindex:"-1"},[i("a",{class:"header-anchor",href:"#动手练习-小作业"},[i("span",null,"动手练习：小作业")])],-1)),s[48]||(s[48]=i("p",null,"运用所学的 HTML 和 CSS 知识，创建一个美观的个人名片页面。不确定的时候翻翻文档",-1)),i("div",q,[i("div",x,[i("span",w,[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[12]||(s[12]=a("index.html",-1))])]),s[13]||(s[13]=e(`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 在这里添加字符编码和标题 -->
</head>
<body>
    <!-- 创建一个名片容器 div，class 为 "card" -->
    
        <!-- 在卡片内部分为三个区域： -->
        
        <!-- 1. 头部区域：包含姓名和职位 -->
        <div class="card-header">
            <!-- 添加 h1 标题显示你的姓名 -->
            <!-- 添加 p 段落显示你的职位或专业 -->
        </div>
        
        <!-- 2. 主体区域：包含联系信息 -->
        <div class="card-body">
            <!-- 添加至少3个联系信息，使用 p 标签 -->
            <!-- 例如：电话、邮箱、地址等 -->
        </div>
        
        <!-- 3. 底部区域：包含个人简介 -->
        <div class="card-footer">
            <!-- 添加一个个人简介段落 -->
        </div>
    
</body>
</html>

`,1))]),s[49]||(s[49]=i("p",null,"css样式自定，发挥自己的创作力，创建一个独特的个人名片页面。",-1)),s[50]||(s[50]=i("p",null,[i("strong",null,"段落与换行"),a("：")],-1)),i("div",T,[i("div",S,[i("span",L,[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[14]||(s[14]=a("index.html",-1))])]),s[15]||(s[15]=e(`

<p>这是一个段落，里面可以有<strong>加粗</strong>和<em>强调</em>。</p>
<p>这是另一个段落。<br>需要换行时用 <code>&lt;br&gt;</code>。</p>
<hr> <!-- 水平分割线 -->

`,1))]),s[51]||(s[51]=e("

行内 vs 块级：

<div> 是块级元素（换行占整行），用于分区布局；
<span> 是行内元素（不换行），用于强调局部文字。

使用建议与解释：

语义优先：<strong> 表示“语义上的重点”，<b> 仅表示“加粗外观”；<em> 表示“语气强调”，<i> 仅表示“斜体外观”。优先使用语义标签，样式交给 CSS。
标题层级：通常一个页面只有一个 <h1>，下面按层级组织为 <h2>/<h3>...。不要为求大小随意跳级或用标题替代普通文本。
段落与换行：换行请优先使用分段（<p>），只有在同段内需要视觉换行时使用 <br>。<hr> 适合用于内容分隔或主题切换。

小案例：文本与标题

",5)),l(p,{id:"191",data:[{id:"index.html"},{id:"style.css"}]},{title0:h(({value:t,isActive:n})=>[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[16]||(s[16]=i("span",null,"index.html",-1))]),title1:h(({value:t,isActive:n})=>[l(k,{provider:"iconify",name:"vscode-icons:file-type-css"}),s[17]||(s[17]=i("span",null,"style.css",-1))]),tab0:h(({value:t,isActive:n})=>[...s[18]||(s[18]=[i("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"}},[i("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[i("code",{class:"language-html"},[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"html"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," lang"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"zh-CN"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"head"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"meta"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," charset"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"utf-8"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"title"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"文本与标题案例"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"link"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," rel"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"stylesheet"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," href"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"style.css"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"body"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h1"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"我的网站"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h2"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"关于我"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"p"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"我是一名"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"strong"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"前端开发者"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},""),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"，喜欢"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"em"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"简洁的设计"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},""),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"与清晰的结构。"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"hr"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h3"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"联系方式"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"p"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"Email: hello@example.com"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")])])]),i("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"})])],-1)])]),tab1:h(({value:t,isActive:n})=>[...s[19]||(s[19]=[i("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"}},[i("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[i("code",{class:"language-css"},[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"body"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," font-family"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," system-ui"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," margin"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 2"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h1"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," font-size"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 2"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," margin-bottom"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," .5"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h2"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," margin-top"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 1.5"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"p"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," margin"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," .5"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 0"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")])])]),i("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"})])],-1)])]),_:1}),s[52]||(s[52]=i("p",null,[i("strong",null,"小作业：写一段个人简介")],-1)),l(p,{id:"202",data:[{id:"index.html"},{id:"style.css"}]},{title0:h(({value:t,isActive:n})=>[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[20]||(s[20]=i("span",null,"index.html",-1))]),title1:h(({value:t,isActive:n})=>[l(k,{provider:"iconify",name:"vscode-icons:file-type-css"}),s[21]||(s[21]=i("span",null,"style.css",-1))]),tab0:h(({value:t,isActive:n})=>[...s[22]||(s[22]=[i("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"}},[i("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[i("code",{class:"language-html"},[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"html"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," lang"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"zh-CN"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"head"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"meta"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," charset"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"utf-8"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"title"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"个人简介"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"link"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," rel"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"stylesheet"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," href"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"style.css"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"body"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h1"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"你的名字"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h2"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"一句话介绍"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"p"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"用两段文字，分别写你现在在做什么、你感兴趣的方向。"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"p"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"使用 "),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"strong"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"strong"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},""),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}}," 与 "),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"em"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"em"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},""),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}}," 做重点强调。"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")])])]),i("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"})])],-1)])]),tab1:h(({value:t,isActive:n})=>[...s[23]||(s[23]=[i("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"}},[i("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[i("code",{class:"language-css"},[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"body"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," font-family"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," system-ui"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," margin"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 2"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," line-height"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 1.8"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"p"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," max-width"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 60"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"ch"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")])])]),i("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[i("div",{class:"line-number"}),i("div",{class:"line-number"})])],-1)])]),_:1}),s[53]||(s[53]=e('

三、链接与图片（A/IMG）

什么是 `<img>` 标签

<img> 标签用于在网页中插入图片，它是自闭合标签（不需要结束标签）。

`<img>` 标签的基本属性

src：指定图片的路径（必填）
alt：指定图片的替代文本（必填，用于图片加载失败时显示）
width：指定图片的宽度（可选）
height：指定图片的高度（可选）

基本语法：

',6)),i("div",H,[i("div",M,[i("span",P,[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[24]||(s[24]=a("index.html",-1))])]),s[25]||(s[25]=e('

<img src="photo.jpg" alt="我的照片" width="200" height="300">

',1))]),s[54]||(s[54]=e('

HTML 超链接

HTML 链接（Anchor）是网页之间跳转的核心部分。

HTML 使用链接与网络上的另一个文档相连。

HTML中的链接是一种用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。

链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。

HTML 链接通过 <a> 标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

`<a>` 标签的基本属性

href：指定链接的目标 URL（必填）
target：指定链接在何处打开（可选）
- _blank：在新窗口或标签页中打开链接
- _self：在当前窗口或标签页中打开链接（默认）
- _parent：在父框架中打开链接
- _top：在顶部框架中打开链接

基本语法：

',12)),i("div",N,[i("div",O,[i("span",z,[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[26]||(s[26]=a("index.html",-1))])]),s[27]||(s[27]=e('

<a href="https://www.example.com">链接文本</a>

',1))]),s[55]||(s[55]=e("

<a> 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。
href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。

这里还有一个target 属性：

_blank：在新窗口或标签页中打开链接
_self：在当前窗口或标签页中打开链接（默认）
_parent：在父框架中打开链接
_top：在顶部框架中打开链接

",3)),i("div",Y,[i("div",j,[i("span",V,[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[28]||(s[28]=a("index.html",-1))])]),s[29]||(s[29]=e(`

<!DOCTYPE html>
<html>
<head>
    <title>target属性示例</title>
</head>
<body>
    <h2>target属性示例</h2>
    
    <!-- 在当前窗口打开（默认） -->
    <a href="https://www.baidu.com" target="_self">当前窗口打开</a>
    
    <!-- 在新窗口打开 -->
    <a href="https://www.baidu.com" target="_blank">新窗口打开</a>
    
    <!-- 在父窗口打开 -->
    <a href="https://www.baidu.com" target="_parent">父窗口打开</a>
    
    <!-- 建议：新窗口打开外部链接 -->
    <a href="https://www.example.com" target="_blank" rel="noopener">
        外部网站（安全的新窗口）
    </a>
</body>
</html>

`,1))]),s[56]||(s[56]=e("

复制代码到自己的html文件中，尝试一下不同的target属性值。

常用属性：

href：目标地址；
target="_blank"：新窗口打开；
rel="noopener"：安全与性能（避免旧窗口被新页面控制）。

补充说明：

链接安全：外链新窗口打开时同时设置 rel="noopener" 或 rel="noreferrer"，避免安全与性能问题。
图片可使用 loading="lazy" 懒加载，减少首屏资源压力；alt 请写出图片用途或内容摘要。
设定 width/height 可以预留占位，减少页面布局抖动（CLS）。复杂场景可考虑 <picture> + <source> 做响应式图片。
与图片相关的配套标签：<figure> + <figcaption> 用于图片与说明文字的组合。

小案例：链接与图片

",6)),l(p,{id:"405",data:[{id:"index.html"},{id:"style.css"}]},{title0:h(({value:t,isActive:n})=>[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[30]||(s[30]=i("span",null,"index.html",-1))]),title1:h(({value:t,isActive:n})=>[l(k,{provider:"iconify",name:"vscode-icons:file-type-css"}),s[31]||(s[31]=i("span",null,"style.css",-1))]),tab0:h(({value:t,isActive:n})=>[...s[32]||(s[32]=[i("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"}},[i("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[i("code",{class:"language-html"},[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"html"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," lang"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"zh-CN"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"head"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"meta"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," charset"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"utf-8"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"title"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"链接与图片案例"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"link"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," rel"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"stylesheet"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," href"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"style.css"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"body"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"nav"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"a"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," href"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"/"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," >"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"首页"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"a"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," href"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"https://developer.mozilla.org/"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," target"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"_blank"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," rel"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"noopener"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"MDN"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"img"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," src"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"avatar.jpg"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," alt"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"我的头像"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," width"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"160"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," height"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"160"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")])])]),i("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"})])],-1)])]),tab1:h(({value:t,isActive:n})=>[...s[33]||(s[33]=[i("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"}},[i("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[i("code",{class:"language-css"},[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"nav"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," display"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," flex"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," gap"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 1"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," margin-bottom"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 1"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"nav"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," a"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," color"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," #"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}},"06c"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," text-decoration"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," none"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"nav"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," a"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"hover"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," text-decoration"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," underline"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"img"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," border-radius"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 8"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"px"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," box-shadow"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 0"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 2"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"px"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 8"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"px"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," rgba"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}},"0"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},","),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}},"0"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},","),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}},"0"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},","),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}},".1"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},");"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")])])]),i("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"})])],-1)])]),_:1}),s[57]||(s[57]=i("p",null,[i("strong",null,"小作业：做一个“友链”与头像区块")],-1)),l(p,{id:"416",data:[{id:"index.html"},{id:"style.css"}]},{title0:h(({value:t,isActive:n})=>[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[34]||(s[34]=i("span",null,"index.html",-1))]),title1:h(({value:t,isActive:n})=>[l(k,{provider:"iconify",name:"vscode-icons:file-type-css"}),s[35]||(s[35]=i("span",null,"style.css",-1))]),tab0:h(({value:t,isActive:n})=>[...s[36]||(s[36]=[i("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"}},[i("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[i("code",{class:"language-html"},[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"html"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," lang"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"zh-CN"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"head"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"meta"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," charset"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"utf-8"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"title"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"友链与头像"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"link"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," rel"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"stylesheet"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," href"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"style.css"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"body"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"section"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h2"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"友情链接"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"p"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"a"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," href"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"https://notes.simengweb.com"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," target"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"_blank"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," rel"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"noopener"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"祀梦笔记"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}}," ·")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"a"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," href"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"https://vuejs.org/"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," target"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"_blank"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," rel"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"noopener"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"Vue.js"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"section"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h2"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),i("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"头像"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"img"),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," src"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"avatar.jpg"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," alt"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"你的头像"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," width"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"160"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," height"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"160"),i("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")])])]),i("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"}),i("div",{class:"line-number"})])],-1)])]),tab1:h(({value:t,isActive:n})=>[...s[37]||(s[37]=[i("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"}},[i("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[i("code",{class:"language-css"},[i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"section"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," margin-bottom"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 1"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),a(` `),i("span",{class:"line"},[i("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"img"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," border"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 2"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"px"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," solid"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," #"),i("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}},"eee"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," border-radius"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),i("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 50"),i("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"%"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";"),i("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")])])]),i("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[i("div",{class:"line-number"}),i("div",{class:"line-number"})])],-1)])]),_:1})])}const Z=r(D,[["render",R]]),J=JSON.parse('{"path":"/programming/web/basic-syntax/html-tags-attributes/","title":"HTML 常用标签与属性","lang":"zh-CN","frontmatter":{"title":"HTML 常用标签与属性","createTime":"2025/11/2 19:30:00","permalink":"/programming/web/basic-syntax/html-tags-attributes/","description":"文本与标题（H/P/Span/Strong/Em/Div）标题：从重要到不重要，

~

。认识div标签什么是
？
是 \\"division\\"（分区）的缩写，可以理解为网页中的\\"容器\\"或\\"盒子\\"。想象一下搬家时的纸箱：网页 = 整个房间
= 一个个纸箱箱子里 = 可以放各种物品（文字、图片、按钮...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"HTML 常用标签与属性\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-11-02T12:43:42.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://notes.simengweb.com/programming/web/basic-syntax/html-tags-attributes/"}],["meta",{"property":"og:site_name","content":"仲夏夜之梦"}],["meta",{"property":"og:title","content":"HTML 常用标签与属性"}],["meta",{"property":"og:description","content":"文本与标题（H/P/Span/Strong/Em/Div）标题：从重要到不重要，
~
。认识div标签什么是
？
是 \\"division\\"（分区）的缩写，可以理解为网页中的\\"容器\\"或\\"盒子\\"。想象一下搬家时的纸箱：网页 = 整个房间
= 一个个纸箱箱子里 = 可以放各种物品（文字、图片、按钮..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-11-02T12:43:42.000Z"}],["meta",{"property":"article:modified_time","content":"2025-11-02T12:43:42.000Z"}]]},"readingTime":{"minutes":8.68,"words":2603},"git":{"createdTime":1762083884000,"updatedTime":1762087422000,"contributors":[{"name":"祀梦","username":"","email":"3501646051@qq.com","commits":2,"avatar":"https://gravatar.com/avatar/6406a81eeddc359cf3d3ce018797689fc6d014ff06215c27d0210b42e8f5a8ab?d=retro"},{"name":"Kawaxxxsaki","username":"","email":"1111@123.com","commits":2,"avatar":"https://gravatar.com/avatar/b3cd57e776cc1b92ffa9800b35152c0ce7692893d12a14450061083fcacd34ce?d=retro"}]},"autoDesc":true,"filePathRelative":"notes/programming/web/basic-syntax/html-tags-attributes.md","headers":[]}');export{Z as comp,J as data};

"),a(" ~ "),i("code",null,"

"),a("。")],-1)),i("div",c,[i("div",o,[i("span",A,[l(k,{provider:"iconify",name:"vscode-icons:file-type-html"}),s[0]||(s[0]=a("index.html",-1))])]),s[1]||(s[1]=e(`
`<h1>我的网站</h1> <h2>关于我</h2> <h3>联系方式</h3>`
`,1))]),s[40]||(s[40]=e('

认识div标签

`<div>` 的基本特点

为什么要使用 `<div>`？