添加预览

public/turtorial/01/README.md

@@ -1,4 +1,4 @@
-# HTML 基本标签
+# HTML 基本标签 —— 标题和段落
 
 > [!NOTE]
 > 这是测试的版本
@@ -16,7 +16,7 @@
 <h6>标题 6</h6>
 ```
 
-给六个标题字体颜色换一下，注意：`color` 表示字体颜色。
+给六个标题字体颜色换一下，注意：`color` 表示**字体颜色**。
 
 ```css
 h1 {
@@ -85,7 +85,7 @@ p {
 
 ### 要求
 
-完成《白鹭》散文的排版：
+完成下面《白鹭》散文（节选）的排版：
 
 - 标题：使用 `h1` 标签，设置字号 32px，颜色黑色;
 - 每个段落：设置字号 28px，颜色（#333），行间距 40px，首行缩进两字符；
@@ -103,3 +103,24 @@ p {
 然而白鹭却因为它的常见，而被人忘却了它的美。
 
 那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。
+
+### 效果
+```html preview
+<h1 style="font-size: 32px; color: black;">白鹭</h1>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹭是一首精巧的诗。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">色素的配合，身段的大小，一切都很适宜。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">然而白鹭却因为它的常见，而被人忘却了它的美。</p>
+<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。</p>
+```
+
+## 总结
+### HTML
+标题：h1 到 h6  
+段落：p
+
+### CSS
+color 字体颜色  
+font-size 字体大小  
+line-height 行间距  
+text-indent: 2em; 表示首行缩进2字符