本章定位上一章我们完成了第一个 HTML 页面已经认识了 HTML 文档的基础结构也接触了标题、段落、换行和水平线这些最基础的内容标签。不过真实网页的内容不会只有标题和段落。一个稍微完整一点的页面通常还会包含一组清单一个可以点击的链接一张图片一个简单表格一个基础表单所以这一章的重点就是带你认识这些最常用的 HTML 内容标签并理解不同类型的内容应该用不同的标签去表达。这件事很重要因为 HTML 不只是“把内容显示出来”而是要让页面结构有意义、可读、可维护。本章学习目标学完这一章后你应该能做到理解有序列表、无序列表、定义列表分别适合什么内容。学会使用a标签创建链接。学会使用img标签插入图片并理解alt的作用。对表格和表单建立基础认识知道它们适合什么场景。能独立写出一个包含列表、链接、图片和基础表单的小页面。养成为不同内容选择合适标签的习惯而不是一律使用普通段落。一、为什么要学习“内容标签”很多初学者刚开始写 HTML 时容易出现一个问题不管页面上是什么内容都想用p或div直接包起来。这样虽然有时也能显示但结构会很乱。比如下面这些内容其实表达方式完全不同一组待办事项一段说明文字一个跳转到新页面的链接一张展示图片一个用户填写信息的输入区域如果你都用同一种标签去写浏览器虽然可能还能显示但页面语义会很差后面维护也会越来越麻烦。所以学习内容标签本质上是在学习一件事让内容以更合适的结构出现在页面中。二、列表标签把一组同类内容组织起来列表是网页里非常常见的结构。比如学习计划商品清单功能菜单文章目录注意事项这些都很适合使用列表来表达。HTML 中最常见的列表有三类无序列表ul有序列表ol定义列表dl1. 无序列表ul无序列表适合表示“多个并列项目”但不强调先后顺序。例如h2我的兴趣爱好/h2ulli看电影/lili听音乐/lili学习前端/li/ul这里ul表示整个无序列表。li表示列表中的每一项。页面上通常会显示成带圆点的一组项目。适合场景兴趣爱好功能特点注意事项导航菜单2. 有序列表ol有序列表适合表示“有明确顺序”的内容。例如h2学习前端的步骤/h2olli学习 HTML/lili学习 CSS/lili学习 JavaScript/li/ol页面上通常会显示成带编号的列表。适合场景操作步骤排名流程说明任务顺序判断是否该用ol可以问自己一个问题如果我打乱顺序内容意思会不会发生变化如果会那通常更适合用有序列表。3. 定义列表dl定义列表适合展示“名词 解释”这种内容。例如h2前端术语解释/h2dldtHTML/dtdd负责网页结构的标记语言。/dddtCSS/dtdd负责网页样式和布局的样式语言。/dd/dl这里dl是定义列表整体。dt是名词或术语。dd是对这个名词的解释说明。适合场景术语解释常见问答商品参数说明概念与定义4. 三种列表怎么区分你可以先这样记ul项目并列不强调顺序ol项目有顺序dl一个词对应一个解释如果你总拿不准优先先看“内容之间是什么关系”不要只看“页面长什么样”。三、链接标签a网页和普通文档的一个重要区别就是网页可以跳转。链接标签a的作用就是让用户点击后跳转到另一个位置。1. 最基础的链接写法ahrefhttps://developer.mozilla.org/访问 MDN/a这里a是链接标签。href表示链接要跳转到哪里。标签中间的文字是页面上可点击的链接文本。2. 跳转到站外页面如果链接目标是别的网站比如文档站、视频站、搜索引擎这就是站外链接。例如ahrefhttps://www.mozilla.org/打开 Mozilla 官网/a这类链接非常常见。3. 在新标签页打开链接有时候我们希望用户点击后不要离开当前页面而是在新标签页打开。可以这样写ahrefhttps://developer.mozilla.org/target_blank在新标签页打开 MDN/a其中target_blank表示在新标签页打开。初学阶段你先知道这个用法就够了。4. 站内链接的概念如果一个网站内部有多个页面也可以通过链接在页面之间跳转。例如ahref./about.html进入关于我页面/a这类链接通常叫站内链接。你现在可以先这样理解站外链接跳到别的网站站内链接跳到当前网站里的其他页面5. 链接文本要清楚写链接时不建议总写点这里点击查看更多更推荐写成有明确含义的文字例如查看 HTML 官方文档打开我的学习笔记进入个人介绍页面这样后面页面内容会更清晰也更利于理解。四、图片标签img网页里经常要展示图片比如头像商品图封面图插图HTML 中插入图片最常用的标签是img。1. 最基础的图片写法imgsrc./images/avatar.jpgalt我的头像/这里src表示图片地址。alt表示图片的替代文本。你可以把src理解成图片文件在哪里把alt理解成如果图片看不到应该告诉用户这张图是什么2. 为什么alt很重要很多新手刚开始会只写src忽略alt。但从一开始就写好alt是个非常值得养成的习惯。alt的作用至少有三个当图片加载失败时页面还能显示文字说明。辅助阅读工具可以把图片含义读给用户听。代码结构更完整内容表达更清楚。例如imgsrc./images/study-desk.jpgalt一张摆着电脑和笔记本的学习桌照片/这个alt就比单纯写“图片”更有意义。3. 图片地址从哪里来图片地址常见有两种本地图片imgsrc./images/avatar.jpgalt我的头像/表示图片文件在当前项目目录下。网络图片imgsrchttps://example.com/avatar.jpgalt头像示例/表示图片来自网络地址。初学阶段更建议先练习本地图片因为更容易理解文件结构。4. 图片不显示时先检查什么如果图片没有显示优先检查文件路径是否正确。文件名是否写错。文件后缀是否一致比如.jpg、.png、.webp。图片文件是否真的存在。很多时候问题不是代码本身而是路径拼错了。五、表格标签先建立基础认识表格适合展示规整的二维数据。比如课程安排成绩表商品参数对比时间表HTML 中最基础的表格写法如下tabletrth姓名/thth年龄/thth城市/th/trtrtd小明/tdtd18/tdtd北京/td/trtrtd小红/tdtd19/tdtd上海/td/tr/table这里table表示整个表格。tr表示一行。th表示表头单元格。td表示普通单元格。1. 什么时候适合用表格表格适合“行列结构明确”的数据。例如第一列是姓名第二列是年龄第三列是城市如果内容不是这种规整数据就不一定适合用表格。2. 不要把表格当布局工具早期网页开发里有人会用表格去排整个页面布局。但现代开发中这种做法并不推荐。你现在只需要记住表格用来展示数据页面布局后面主要用 CSS 来做六、表单标签先建立基础认识表单是网页中非常重要的一类内容因为用户输入信息通常都要通过表单完成。比如登录注册搜索留言报名最基础的表单结构如下formlabel姓名/labelinputtypetext/label邮箱/labelinputtypeemail/buttontypesubmit提交/button/form这里先认识几个最常见的标签form表示整个表单区域label输入项说明文字input输入框button按钮1. 表单的作用表单的本质是收集用户输入的信息。例如用户名密码电话邮箱留言内容2. 先不用急着学很深表单后面会单独展开讲很多内容这一章你只需要先建立认识页面不只是展示内容页面也可以收集用户输入能有这个意识就已经很好了。七、把列表、链接、图片、表格、表单放进同一个页面下面我们写一个稍微丰富一点的小页面把本章学到的内容串起来。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title我的兴趣清单/title/headbodyh1我的兴趣清单/h1h2我最近在学什么/h2olliHTML/liliCSS/liliJavaScript/li/olh2我的兴趣爱好/h2ulli看电影/lili读书/lili写学习笔记/li/ulh2前端术语解释/h2dldtHTML/dtdd负责网页结构。/dddtCSS/dtdd负责网页样式。/dd/dlh2我常访问的学习网站/h2pahrefhttps://developer.mozilla.org/target_blank打开 MDN 文档/a/ph2我喜欢的一张图片/h2imgsrc./images/study.jpgalt一张安静的学习桌照片/h2本周学习安排/h2tabletrth星期/thth学习内容/th/trtrtd周一/tdtdHTML 基础/td/trtrtd周三/tdtd列表与链接/td/tr/tableh2给未来的自己留言/h2formlabel留言内容/labelinputtypetext/buttontypesubmit提交/button/form/body/html这个页面虽然还没有 CSS 样式但你已经能明显感受到页面内容开始变丰富了。HTML 标签的作用开始变得更具体了。不同类型的内容确实应该用不同结构表达。八、新手最容易踩的坑1. 列表项直接写文字不写li错误示例ul学习 HTML 学习 CSS/ul推荐写法ulli学习 HTML/lili学习 CSS/li/ulul和ol的子项应该使用li。2. 链接没有写href例如a打开文档/a这样虽然可能显示成文字但它不是一个完整可跳转的链接。推荐写法ahrefhttps://developer.mozilla.org/打开文档/a3. 图片只有src没有alt不推荐imgsrc./images/avatar.jpg/更推荐imgsrc./images/avatar.jpgalt我的头像/从这一章开始就把alt写上后面会越来越自然。4. 用表格做整个页面布局这一点你现在只要先有意识表格适合展示数据页面布局不要靠表格硬撑后面学 CSS 布局时你会更清楚为什么。5. 表单里的说明文字和输入框完全分不开即使现在还没学复杂表单也要先注意内容组织清楚。例如label邮箱/labelinputtypeemail/这种写法就比一长串内容堆在一起更容易读懂。九、如何判断该用什么标签这是这一章最关键的能力。如果你后面忘了具体标签名也不用太慌。你可以先问自己下面几个问题1. 这是一组并列内容吗如果是考虑无序列表ul有序列表ol2. 这是一个术语和解释吗如果是考虑定义列表dl3. 这是一个可以点击跳转的位置吗如果是考虑链接a4. 这是一个需要展示的图片吗如果是考虑图片img5. 这是规整的行列数据吗如果是考虑表格table6. 这是需要用户填写的信息吗如果是考虑表单form所以真正重要的不是死记标签而是先判断内容类型再选择合适标签。十、本章实践练习这一章建议你一定要动手做因为这些标签只有自己写一遍印象才会稳。练习 1做一个“我的兴趣清单”页面页面至少包含一个主标题一个有序列表一个无序列表一个定义列表建议主题我的兴趣爱好我的学习安排我最近想完成的目标练习 2为页面添加链接在页面里添加一个站外链接一个站内链接占位示例例如ahrefhttps://developer.mozilla.org/target_blank查看 MDN/aahref./about.html进入关于我页面/a练习时注意链接文本是否足够清楚。练习 3插入一张图片并补充alt请自己准备一张本地图片然后写入页面imgsrc./images/my-photo.jpgalt我的学习照片/然后故意把图片路径写错一次看看页面会发生什么再改回来。这样你会更容易记住src决定图片路径alt决定图片说明练习 4做一个简单课程表用表格写一个最基础的课程安排例如星期学习内容学习时长哪怕只有两三行也没关系关键是先把table、tr、th、td的关系写顺。练习 5写一个最小留言表单页面中至少包含一个输入框一个按钮一段说明文字例如formlabel留言/labelinputtypetext/buttontypesubmit提交/button/form你现在不用关心它是否真的能提交成功先把结构写对就很好。十一、学习重点提示这一章最重要的不是把所有标签都背成清单而是建立“内容和标签要匹配”的意识。请重点记住一组同类内容通常更适合用列表标签。链接要写清楚href链接文本也要尽量有意义。图片标签除了src还要从一开始就写alt。表格适合展示规整数据不适合拿来做页面整体布局。表单的本质是收集用户输入。如果你只记一句话可以记住先判断内容是什么再决定应该用哪个 HTML 标签。十二、本章小结这一章我们认识了很多真实网页中常见的内容标签。你已经学习了无序列表、有序列表、定义列表链接标签a图片标签img表格标签table表单标签form更重要的是你开始建立一种前端思维不是“能显示就行”而是“要用合适的结构表达内容”。这会直接影响你后面写出来的页面是否清晰、是否好维护、是否容易继续扩展。十三、课后思考题请你思考下面几个问题如果一组内容本身没有先后顺序为什么更适合用ul而不是ol为什么图片标签里的alt不能随便写成“图片”两个字表格和列表都能展示多条内容它们的适用场景有什么区别为什么“点击这里”通常不是一个特别好的链接文本你可以先用自己的话回答不必追求标准表达。只要你能说清楚理由就说明你已经开始真正理解这些标签了。十四、下一章预告下一章我们会继续学习从零开始学前端 | 第四章语义化 HTML 与页面结构到那时你会开始理解为什么“标签不只是长得不一样”还会学会把一个网页拆成更有结构感的区域。