前几节学习了 HTML 的基本结构，今天我们详细学习一下 HTML 中的标签。HTML 提供的标签有很多，比如 div、span、em、a、img、p 等等。显示文字时，可以使用 div、p、span 等任意一个标签来实现，可为什么还会需要这么多标签呢？
HTML 其实最初是为了展示文档而发明的，而标签的出现是为了满足文档的需求。比如一个文档包含标题、段落、强调等，而这一切于 HTML 中的标签一一对应，比如标题对应于 H1-H6，段落对应于 p，而这些标签是具有「语义」的，也就是说它们带有一定的感情色彩。小学的时候，老师常教我们要「有感情地朗读原文」，我想「感情」就是HTML 中的「语义」吧。带有语义的标签能够更好地被「别人」理解，比如屏幕阅读器会更容易读懂文档的内容。
div 和 span 是没有「语义」的标签，适合于任何没有语义的场景。下面是关于标签的语法。
HTML 比较简单，而关键的内容是 CSS 的学习，我为今天的课程准备了一个 demo，其中包含了 CSS 的知识和基本的标签使用。demo 效果如下：
你需要掌握这些 CSS 的使用。可能，有些人会告诉你 CSS 非常简单，用的时候查一下就行。如果你听了这个建议，那么后续开发中你会遇到很多问题，也许一个需求一行CSS搞定，你却写了10行。切记要系统学一遍：
// day5.css.code-bg { border-left: 3px solid #2a7ae2; background-color: #eef; border-radius: 3px; padding: 10px;}hr { height: 0.5px;}.name { color: #2a7ae2;}.title { text-align: center;}h3 { border-left: 3px solid #2a7ae2; background-color: #eef; border-radius: 3px; padding: 10px;}<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML结构</title> <link rel="stylesheet" href="./day5.css"></head><!-- <br> -->
<body> <h1 class="title">《前端小课》</h1> <h2>一本帮你入门与进阶的前端书 <hr> </h2> <div class="code-bg"> <code> const p = document.querySelector('p'); p.onclick = function() { alert('噢，噢，噢，别点我了。'); } </code> </div> <p>欢迎来到<a href="https://weibo.com/5953150140/profile/" title="微博"> Lefe </a>的前端小课，与 200 位好友共同进步，每天一课，坚持 20 天，掌握前端开发。</p> <h3>课程大纲</h3> <ol> <li>第一阶段开课啦</li> <li>HTML 5天课程</li> <li>CSS 15 天课程</li> <li>最后实践，交作业</li> </ol> <h3>关键字</h3> <ul> <li>前端小课</li> <li>图解数据结构与算法</li> <li>超越技术</li> <li>iOS知识小集</li> </ul> <h3>参与方式</h3> <p>关注素燕公众号，添加 wsy9871 微信，加入微信群。</p> <h3>合作伙伴</h3> <div><a href="https://lefex.github.io/" title="图解数据结构和算法">超越技术官网</a></div> <div><a href="https://awesome-tips.github.io/" title="iOS进价">知识小集官网</a></div></body>
</html>你会发现整个 demo 非常简单，只简单用了 CSS 和 HTML 中的一些标签。甚至你不设置某些标签的样式，也可以正常使用，这一切归功于标签自带的默认样式。
总结
本节通过一个 demo 演示了如何使用 HTML 标签和CSS，以及介绍了 HTML 中的语义。这 5 天我们学习了 HTML 的结构和浏览器调试技巧。接下来，我们会学习 CSS，非常重要的一个阶段。今天打卡指令「总结一下这5天你学到了什么或者说出你共打卡几天」。大家加油。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
