目录
HTML盒子标签
div标签
span标签
字符实体
HTML注释
HTML 废弃标签介绍
关注作者微信公众号，开启探索更多 HTML 知识的精彩之旅。在这里，你将收获丰富的 HTML 专业内容，深入了解这一网页开发语言的奥秘，不断拓展你的知识边界，提升技能水平。快来关注吧！
HTML盒子标签
div标签
在HTML 中，div 和 span 扮演着极为重要的角色，堪称关键的 “盒子” 标签。
div 在浏览器中，默认情况下不会带来任何明显的视觉效果变化，然而其语义却发生了重大转变。div 所涵盖的所有元素共同构成了一个独立的小区域。
div 标签作为容器级标签，在网页布局中占据着核心地位。正因为如此，我们常常亲切地将这种布局模式称为 “div+css”。在这种模式中，div 标签主要负责网页的布局、结构搭建以及分块划分，而 css 则专职负责赋予网页各种样式，二者相辅相成，共同打造出美观且功能强大的网页。
示例代码如下：
<body>
<div>
<h3>中国一线城市</h3>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</div>
<div>
<h3>中国名山</h3>
<ol>
<li>山东泰山</li>
<li>安徽黄山</li>
<li>四川峨眉山</li>
</ol>
</div>
</body> 运行结果：
span标签
span 则是一个文本级的标签。在 span 内部，通常只能放置文字、图片以及表单元素等。需要特别注意的是，span 里面不能放置诸如 p（段落标签）、h（标题标签）、ul（无序列表标签）、dl（定义列表标签）、ol（有序列表标签）、div 等标签。
span 主要用于放置一些相对较小的元素，而 div 则更适合放置规模较大的内容。这种区分使得网页在构建过程中能够更加合理地组织和呈现各种元素，从而提升网页的可读性和用户体验。
示例代码如下：
<body>
<h3>前端开发书籍</h3>
<ul>
<li>
<h4>html零基础教程</h4>
<p>
<span>价格：￥55.55</span>
<span><a href="javascript:;">购买</a></span>
</p>
</li>
<li>
<h4>css从入门到精通</h4>
<p>
<span>价格：￥66.66</span>
<span><a href="javascript:;">购买</a></span>
</p>
</li>
<li>
<h4>JavaScript经典教程</h4>
<p>
<span>价格：￥55.66</span>
<span><a href="javascript:;">购买</a></span>
</p>
</li>
</ul>
</body> 运行结果：
字符实体
在 HTML 中，存在一些特定的字符实体，它们有着独特的用途。这些字符实体在网页编写中起到了重要的作用，能够确保特殊字符的正确显示和语义表达。如：
| 符号 | 描述 |
| < | 表示< |
| > | 表示> |
| © | 表示© |
|
| 表示空格 |
示例代码如下：
<body>
<p><p>段落标签</p>
<p>©版权所有</p>
<p>段 落</p>
</body> 运行结果：
| <p>段落标签 ©版权所有 段 落 |
HTML注释
在 HTML 中，注释用于在代码中添加说明性文本，这些文本不会在浏览器中显示，仅用于帮助开发人员理解代码的功能和结构。
HTML 注释的语法
<!-- 这是一个注释 --> HTML 注释的作用
解释代码：为复杂的代码段提供解释，帮助其他开发人员理解你的代码意图。
调试代码：可以临时注释掉一部分代码，以测试不同的情况或排除错误。
文档化代码：提供关于页面结构、功能和用途的信息，便于日后维护和修改。
HTML 废弃标签介绍
在 HTML 的发展历程中，有一些标签由于其浓厚的样式作用，对 CSS（层叠样式表）的功能产生了干扰，因此被 HTML 所抛弃。
示例代码如下：
<body>
<font size="9" color="red">字体</font>
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<del>删除线</del>
<em>强调</em>
<strong>强调</strong>
换行：<br/>
水平线：<hr/>
</body> 运行结果：
总结：<font>标签，曾经用于设置文本的字体大小和颜色，但现在应该使用 CSS 来进行样式控制。<b>、<u>、<i>、<del> 等标签也因同样的原因被弃用，现在更推荐使用 CSS 的属性来实现这些效果。<em>、<strong>标签虽然有一定的语义含义，但在样式控制方面也应尽量避免直接使用标签来实现强调效果，而是结合 CSS 进行更灵活的处理。
另外，<hr /> 标签用于绘制水平线，<br/>标签用于换行，这些标签在现代网页开发中也应谨慎使用，更多地通过 CSS 布局和样式设置来实现相应的效果。
在标准的 “div+css” 页面中，所使用的标签种类相对较少，主要有 “div” 用于划分页面区域、“h1” 到 “h6” 用于标题层级、“p” 用于段落文本、“span” 用于内联元素的样式控制、“a” 用于超链接、“img” 用于插入图片、“ul” 和 “ol” 用于列表、“dl” 用于定义列表、“input” 用于表单输入等。
以下是一些参考网站：
2002韩日世界杯_竞技风暴_新浪网
2004雅典奥运会_新浪奥运站_新浪网
2006德国世界杯_竞技风暴_新浪网
奥运站_2008北京奥运会_新浪网
2010南非世界杯_新浪网
2012年伦敦奥运会_新浪奥运_新浪网
2014巴西世界杯_新浪世界杯站_新浪体育_新浪网
2016年里约奥运会_新浪奥运_新浪网
2018俄罗斯世界杯_新浪体育_新浪网
2020年东京奥运会_新浪奥运_新浪网
2022卡塔尔世界杯_新浪体育_新浪网
这些网站可以作为学习和参考的资源，帮助我们更好地理解现代网页开发的标准和规范。
