本文介绍了静态网页的构成元素，包括文字、图片、超链接、音频和视频，以及HTML中的标题标签（h1-h6）、段落标签（p）、换行标签（br）。同时，提到了文本格式化标签如粗体（strong/b）、斜体（em/i/cite）、上标（sup）、下标（sub）等，并展示了它们的用法。
000、前言
一般来说一个静态网页拥有四种元素：文字、图片、超链接、音频和视频（注意，即使在web网页中植入Javascript语言，也不一定是动态网页，真正的动态网页判断标准：是否和服务器产生交互）
001、标题标签h
- 这个标题指的不是网页标题，是文本标题
- 一般来说html语言有6级标签：h1、h2、h3、h4、h5、h6
- h是header的缩写，对应6种级别的重要性，其中h1是最高的
- 尽管使用简单，但是在搜索引擎优化中有重要的作用，不过这个比较复杂，以后再讲
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是一级标题</h2>
<h3>这是一级标题</h3>
<h4>这是一级标题</h4>
<h5>这是一级标题</h5>
<h6>这是一级标题</h6>
</body>
</html>
002、段落标签p
- 用来显示一段文字
- 会根据网页大小自动进行换行，并且多对段落标签显示的多段段落之间会留有空格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
<h1>这是一级标题</h1>
<p>在这个世界上，一星陨落，黯淡不了星空灿烂，一花凋零，荒芜不了整个春天。</p>
<h2>这是一级标题</h2>
<p>盈盈月光，我掬一杯最清的；落落余辉，我拥一缕最暖的；灼灼红叶，我拾一片最热的；萋萋芳草，我摘一束最灿的；漫漫人生，我要采撷世间最重的——毅力。</p>
<p>花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风景要远观，才能美好；有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。</p>
<h3>这是一级标题</h3>
<h4>这是一级标题</h4>
<h5>这是一级标题</h5>
<h6>这是一级标题</h6>
</body>
</html>
003、换行标签br
- 有的时候我们需要在某一处文字后换行，但是如果在vscode中直接输入enter是不行的
- 想要使得文本换行，就必须需要使用换行标签（或者使用段落标签，但是这样会产生冗余的空格，而换行标签却不会）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
<h1>这是一级标题</h1>
<p>在这个世界上，一星陨落，黯淡不了星空灿烂，一花凋零，荒芜不了整个春天。</p>
<h2>这是一级标题</h2>
<p>盈盈月光，我掬一杯最清的；<br/>落落余辉，我拥一缕最暖的；<br/>灼灼红叶，我拾一片最热的；<br/>萋萋芳草，我摘一束最灿的；<br/>漫漫人生，我要采撷世间最重的——毅力。</p>
<p>花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。<br/>淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；<br/>懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；<br/>懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。<br/>人心，远近相安，时光，浓淡相宜。<br/>有些风景要远观，才能美好；<br/>有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。</p>
<h3>这是一级标题</h3>
<h4>这是一级标题</h4>
<h5>这是一级标题</h5>
<h6>这是一级标题</h6>
</body>
</html>
当然既然直接在编辑器（vscode）里换行对网页并没有影响的话，为了便于查看代码，也可以这么写，效果是一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
<h1>这是一级标题</h1>
<p>在这个世界上，一星陨落，黯淡不了星空灿烂，一花凋零，荒芜不了整个春天。</p>
<h2>这是一级标题</h2>
<p>盈盈月光，我掬一杯最清的；<br/>
落落余辉，我拥一缕最暖的；<br/>
灼灼红叶，我拾一片最热的；<br/>
萋萋芳草，我摘一束最灿的；<br/>
漫漫人生，我要采撷世间最重的——毅力。
</p>
<p>花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。<br/>
淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；<br/>
懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；<br/>
懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。<br/>
人心，远近相安，时光，浓淡相宜。<br/>
有些风景要远观，才能美好；<br/>
有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。
</p>
<h3>这是一级标题</h3>
<h4>这是一级标题</h4>
<h5>这是一级标题</h5>
<h6>这是一级标题</h6>
</body>
</html>
004、文本标签
（1）粗体标签
strong、b（建议使用strong，因为标签意义比较明显）
（2）斜体标签
em、i、cite，是文字变成斜体
（3）上标标签
sup，例如写一个数的幂次24
（4）下标标签
sub，例如写一个水的分子式H2O
（5）中划线标签
s，就是给文字加删除线
（6）下划线标签
u，就是给文字加下划线
（7）大字号标签
big，就是给文字加大
（8）小字号标签
small，就是给文字加小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
<h1>这是一级标题</h1>
<p><strong>在这个世界上，一星陨落</strong>，黯淡不了星空灿烂，<b>一花凋零，荒芜不了整个春天</b>。</p>
<h2>这是一级标题</h2>
<p><em>盈盈月光</em>，我掬一杯最清的；<br/>
<sup>落落余辉</sup>，我拥一缕最暖的；<br/>
<sub>灼灼红叶</sub>，我拾一片最热的；<br/>
<s>萋萋芳草</s>，我摘一束最灿的；<br/>
<u>漫漫人生</u>，<big>我要采撷</big><small>世间最重</small>的——毅力。
</p>
<p>花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。<br/>
淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；<br/>
懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；<br/>
懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。<br/>
人心，远近相安，时光，浓淡相宜。<br/>
有些风景要远观，才能美好；<br/>
有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。
</p>
<h3>这是一级标题</h3>
<h4>这是一级标题</h4>
<h5>这是一级标题</h5>
<h6>这是一级标题</h6>
</body>
</html>
005、水平线标签hr
实现画水平线效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
<h1>这是一级标题</h1>
<p><strong>在这个世界上，一星陨落</strong>，黯淡不了星空灿烂，<b>一花凋零，荒芜不了整个春天</b>。</p>
<h2>这是一级标题</h2>
<p><em>盈盈月光</em>，我掬一杯最清的；<br/>
<sup>落落余辉</sup>，我拥一缕最暖的；<br/>
<sub>灼灼红叶</sub>，我拾一片最热的；<br/>
<s>萋萋芳草</s>，我摘一束最灿的；<br/>
<u>漫漫人生</u>，<big>我要采撷</big><small>世间最重</small>的——毅力。
</p>
<hr/>
<p>
花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。<br/>
淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；<br/>
懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；<br/>
懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。<br/>
人心，远近相安，时光，浓淡相宜。<br/>
有些风景要远观，才能美好；<br/>
有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。
</p>
<h3>这是一级标题</h3>
<h4>这是一级标题</h4>
<h5>这是一级标题</h5>
<h6>这是一级标题</h6>
</body>
</html>
006、分区标签div
可以划分多个区域/块，可以配合CSS来整体控制某一块的样式，这一个标签后面写CSS的时候再讲解
007、特殊符号
（1）网页中的空格
通过使用“ ”来空格
（2）网页中的特殊符号
类似“ ”，以&起头，看这个网站就行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页标题</title>
</head>
<body>
<h1>这是一级标题</h1>
<p><strong>在这个世界上，一星陨落</strong>，黯淡不了星空灿烂，<b>一花凋零，荒芜不了整个春天</b>。</p>
<h2>这是一级标题</h2>
<p><em>盈盈月光</em>，我掬一杯最清的；<br/>
<sup>落落余辉</sup>，我拥一缕最暖的；<br/>
<sub>灼灼红叶</sub>，我拾一片最热的；<br/>
<s>萋萋芳草</s>，我摘一束最灿的；<br/>
<u>漫漫人生</u>，<big>我要采撷</big><small>世间最重</small>的——毅力。
</p>
<hr/>
<p>
花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。<br/>
淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留；<br/>
懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契；<br/>
懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。<br/>
人心，远近相安，时光，浓淡相宜。<br/>
有些风景要远观，才能美好；<br/>
有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。
</p>
<h3>这是一级标题</h3>
<h4>这是一级标题</h4>
<h5>这是一级标题</h5>
<h6>这是一级标题</h6>
</body>
</html>
008、补充 “一般标签”和“自闭和标签”的区别
- 一般标签：有开始标签和结束标签，因此可以在内部插入其他标签和文字
- 自闭和标签：由于只有开始标签没有结束标签，因此不可以在内部插入其他标签或文字
- 常见的自闭和标签
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
