用标签把内容「搭」出来。本单元对应教材单元二(8 学时):HTML5 文档格式与标签属性、文字与段落排版、图像与超链接锚点。 核心是理解「标签是语义,不是样式」——样式交给单元四的 CSS。
<h1> 是「大标题便利贴」、<p> 是「正文便利贴」,便利贴只说明「这是什么」,不负责好不好看。<p>…</p>)或自闭合(<img>),浏览器据此决定如何呈现内容。u2/article.html<h1 id="top">古典文学网简介</h1>
<p>这是一个介绍唐诗宋词的页面。</p>
<img src="book.jpg" alt="古籍封面" width="240">
<h2>目录</h2>
<ul>
<li><a href="#tang">唐诗</a></li>
<li><a href="#song">宋词</a></li>
</ul>
<h2 id="tang">唐诗</h2>
<p>唐诗是中国古典诗歌的巅峰……</p>
<h2 id="song">宋词</h2>
<p>宋词句式长短错落……</p>
<p><a href="#top">回到顶部↑</a></p>
<a href="#tang"> 但忘了给目标加 id="tang"——点链接毫无反应。锚点必须「有 href 也有对应 id」,这是新手最高频的坑。recipe.html 菜谱页:含大标题、一张菜图(用网络图片 URL)、用料无序列表、步骤有序列表、一个「跳到步骤」的锚点链接。保存打开验证。做完点「检查本节」看解析与得分;做错可重做。