码上问学问代码之理,学编程之道

单元二 · HTML5 语言基础

用标签把内容「搭」出来。本单元对应教材单元二(8 学时):HTML5 文档格式与标签属性、文字与段落排版、图像与超链接锚点。 核心是理解「标签是语义,不是样式」——样式交给单元四的 CSS。

本单元目标:能用 h1~h6、p、img、a 等标签完成文字段落、图片与超链接;理解全局属性(id/class/title);会做锚点跳转到页内位置。

一、知识准备:标签的「四层」讲法

每个标签按「四层」学:是什么 → 长什么样 → 怎么用 → 注意什么① 是什么(语义)这个标签代表什么内容,如 <a> 是链接② 长什么样(默认样式)浏览器给它的默认外观,如 <strong> 加粗③ 怎么用(语法 + 属性)<img src="" alt=""> —— src 必写、alt 必写④ 注意什么(易错点)img 是自闭合;a 默认行内;p 里别嵌 div按这四层学,学一个标签就成一个标签——不用死记,考试和实战都够用
  • 英文全称:HTML = HyperText Markup Language(超文本标记语言)。
  • 由来:上世纪 90 年代为 physicists 共享文档而设计,靠「标签」标记内容语义。
  • 生活类比:标签像给物品贴的「名称便利贴」——<h1> 是「大标题便利贴」、<p> 是「正文便利贴」,便利贴只说明「这是什么」,不负责好不好看。
  • 严谨定义:标签是一对尖括号包裹的关键字,成对(<p>…</p>)或自闭合(<img>),浏览器据此决定如何呈现内容。
  • <h1>~<h6> 标题<p> 段落<br> 换行 <hr> 分隔线<ul><ol><li> 列表<img> 图片 <a> 链接id / class / title 全局属性

    二、实战演练:图文 + 锚点页

    演示(含故意写错)
    文件: u2/article.html
    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>
    效果预览运行结果
    要点: · alt 在图片加载失败时显示,也利于无障碍与 SEO · href="#tang" 锚点跳到 id="tang" 的位置 · 图片是「自闭合标签」,没有 </img>
    故意写错:写成 <a href="#tang"> 但忘了给目标加 id="tang"——点链接毫无反应。锚点必须「有 href 也有对应 id」,这是新手最高频的坑。

    三、强化训练

    1img 标签为什么不需要闭合?它的两个必填属性是什么(src / alt)?
    2要让「点文字跳到页面底部」,目标元素需要什么属性?链接的 href 怎么写?
    3h1 和 h2 只是大小不同吗?为什么语义化标题对 SEO 重要?

    四、课后实训

    作业:做一个 recipe.html 菜谱页:含大标题、一张菜图(用网络图片 URL)、用料无序列表、步骤有序列表、一个「跳到步骤」的锚点链接。保存打开验证。

    本单元小结

    ← 上一单元单元一 · Web 基础

    📝 本节自测

    做完点「检查本节」看解析与得分;做错可重做。