實驗一
【實驗原理】
在搜索引擎的文本分析中，標題的信息權重要比正文的大，所以標題的樣式非常重要。本實驗通過把標題標記和常規文本進行對比輸出，掌握標題標簽的用法。在網頁中，有時需要為文字設置粗體、斜體或下劃線效果，為此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>?效果展示
筆記?
?
)
