实验一
【实验原理】
在搜索引擎的文本分析中，标题的信息权重要比正文的大，所以标题的样式非常重要。本实验通过把标题标记和常规文本进行对比输出，掌握标题标签的用法。在网页中，有时需要为文字设置粗体、斜体或下划线效果，为此HTML准备了专门的文本格式化标记，本实验通过综合应用文本格式化标记对文本进行格式设置。
【实验目的和要求】
- 熟练掌握<h1>到<h6>标记的使用。
- 掌握斜体、粗体、下划线、删除线等文本格式化标记。
- 掌握<p>标记及其属性的应用。
- 掌握常用特殊字符标记的使用。
【实验任务】
- 效果如图2-1所示。
- 具体实现步骤如下：
- 新建HTML文档。
- 在<title></title>标记中添加网页标题---唐诗欣赏。
- 在<body></body>标记中添加内容,应用标题、hr、p标签等文本格式化标签将内容呈现出来。
- 保存后，在谷歌浏览器中预览效果。
设计要求：
文本素材
唐诗欣赏
静夜思
李白
床前明月光， 疑是地上霜。 举头望明月， 低头思故乡。
【简析】 这是写远客思乡之情的诗，诗以明白如话的语言雕琢出明静醉人的秋夜的意境。它不追求想象的新颖奇特，也摒弃了辞藻的精工华美；它以清新朴素的笔触，抒写了丰富深曲的内容。境是境，情是情，那么逼真，那么动人，百读不厌，耐人寻绎。无怪乎有人赞它是“妙绝古今”。
版权？版权所有，违者必究 E-mail:limingwei@gmail.com
<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html>
<!-- 根元素，整个HTML文档的根节点 -->
<head><!-- 包含文档的元数据 --><title>唐诗赏析</title><!-- 设置文档的标题，显示在浏览器标签上 -->
</head>
<body><!-- 文档的主体内容 --><h2 align="center">唐诗赏析</h2><!-- 二级标题，居中对齐，显示“唐诗赏析” --><hr color="blue" size="1"/><!-- 水平线，颜色为蓝色，高度为1像素 --><h5 align="center" style="color: red;"><font size="3">静夜思</font></h5><!-- 五级标题，居中对齐，颜色为红色，字号为3，显示“静夜思” --><!-- 这是一个一级标题，居中对齐，颜色为红色 --><h5 align="center" style="color: blue;"><font size="2">李白</font></h5><!-- 五级标题，居中对齐，颜色为蓝色，字号为2，显示“李白” --><!-- 这是一个五级标题，居中对齐，颜色为蓝色 --><p align="center">床前明月光，</p><!-- 段落标记，居中对齐，显示“床前明月光，” --><!-- 段落标记，居中对齐 --><p align="center">疑是地上霜。</p><!-- 段落标记，居中对齐，显示“疑是地上霜。” --><p align="center">举头望明月，</p><!-- 段落标记，居中对齐，显示“举头望明月，” --><p align="center">低头思故乡。</p><!-- 段落标记，居中对齐，显示“低头思故乡。” --><hr color="blue" size="1"/><!-- 水平线，颜色为蓝色，高度为1像素 --><h3>【简析】</h3><!-- 三级标题，默认对齐，显示“【简析】” --><!-- 这是一个三级标题，默认对齐 --><p> 这是写<strong>远客思乡之情</strong>的诗，诗以<u>明白如话</u>的语言雕琢出明净醉人的秋夜的意境。它不追求想象的新颖奇特，也摒弃了辞藻的精工华美；<br /> 它以<span style="background-color: yellow;">清新朴素</span>的笔触，抒写了<span style="background-color: yellow;">清新朴素</span>的内容。<span style="background-color: yellow;">境</span>是境，<span style="background-color: yellow;">情</span>是情，那么逼真，那么动人，百读不厌，耐人寻味。无怪乎有人赞它是<span style="background-color: yellow;">“妙绝古今”</span>。——《唐诗三百首》</p><!-- 段落标记，包含诗歌的分析内容，使用了多种文本格式化标记 --><hr color="blue" width="400" align="left" size="3"><!-- 水平线，颜色为蓝色，宽度为400像素，居左对齐，高度为3像素 --><!-- 水平线，分隔内容 --><footer><p>版权©<del>版权</del>所有，违者必究</p><!-- 段落标记，显示“版权所有，违者必究”，中间的“版权”被删除线标记 --><!-- 段落标记，居中对齐 --><p>E-mail:limingwei@gmail.com</p><!-- 段落标记，显示电子邮件地址 --><!-- 段落标记，居中对齐 --><time datetime="2025-2-19">2025年2月19日</time><!-- 时间标记，显示日期 --><!-- 段落标记，居中对齐 --></footer>
</body>
</html>代码效果
遇到的问题
1、标题标记中如何设置颜色属性
在 HTML 中，可以在标题标记（如 <h1>、<h2> 等）中使用 style 属性来设置颜色。以下是具体的语法和示例：
使用 style 属性设置标题颜色
<h1 style="color: red;">这是一个红色的 h1 标题</h1>
<h2 style="color: blue;">这是一个蓝色的 h2 标题</h2>
<h3 style="color: green;">这是一个绿色的 h3 标题</h3>效果展示
使用颜色代码
除了使用颜色名称（如 red、blue 等），还可以使用十六进制颜色代码来指定更精确的颜色。例如：
<h1 style="color: #ff0000;">使用十六进制代码的红色 h1 标题</h1>
<h2 style="color: #0000ff;">使用十六进制代码的蓝色 h2 标题</h2>效果展示
说明
style="color: 颜色;"是内联样式，直接在 HTML 标记中设置样式。颜色可以是颜色名称（如
red、blue等），也可以是十六进制颜色代码（如#ff0000）。在纯 HTML 中，这种方式是最直接的设置颜色的方法。
2、如何为文本添加背景色
在 HTML 中，可以使用 <span> 标签结合 style 属性来为文本添加背景色。<span> 标签是一个行内元素，用于包裹文本或其它行内元素，并可以为其应用样式。
以下是具体的语法和示例：
使用 <span> 标签为文本添加背景色
<p>这是一个<span style="background-color: yellow;">高亮显示</span>的文本示例。</p>效果展示
说明
<span>标签用于包裹需要添加背景色的文本。
style="background-color: 颜色;"用于设置背景色，颜色可以是颜色名称（如yellow）或十六进制颜色代码（如#ff0000）。在纯 HTML 中，这种方式是最直接的为文本添加背景色的方法。
3、如何给主体文字设置字号
在 HTML 中，可以使用 <font> 标签的 size 属性来设置文字的字号。<font> 标签允许你指定文字的大小，可以用数值（1 到 7）或者关键词（如 "small", "medium", "large" 等）。
以下是具体的语法和示例：
使用 <font> 标签设置文字字号
<p><font size="3">这是一个默认大小的文字。</font></p>
<p><font size="4">这是一个稍大的文字。</font></p>
<p><font size="5">这是一个更大的文字。</font></p>
<p><font size="6">这是一个很大的文字。</font></p>效果展示
说明
<font size="数值">用于设置文字的字号，数值范围通常是 1 到 7，数值越大，字号越大。在纯 HTML 中，这种方式是最直接的设置文字字号的方法。
4、如何让文本空一行
在HTML中，可以让文本空一行，可以通过以下几种方式：
使用 <br> 标签
<br> 标签表示换行，可以在文本之间插入一个换行符，从而实现空一行的效果。
<p>第一行文本。<br><br>第二行文本，空了一行。</p>使用段落标记 <p>
每个 <p> 标记默认会在其前后添加一些空白行，因此将文本放在不同的段落中也会实现空行的效果。
<p>第一段文本。</p>
<p>第二段文本，空了一行。</p> 效果展示
笔记
