Почетна Преглед Помоћ
Пријавите се
lovecoding
/
W260426
10
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

first commit

fengchuanyu пре 6 дана
комит
aaf3d7b15f
20 измењених фајлова са 549 додато и 0 уклоњено
Један поглед Покажи статистику Diff
  1. BIN
      1_HTML/.DS_Store
  2. 31 0
      1_HTML/1_helloworld.html
  3. 36 0
      1_HTML/2_文本常用标签.html
  4. 20 0
      1_HTML/3_图片标签.html
  5. 15 0
      1_HTML/4_链接标签.html
  6. 25 0
      1_HTML/5_列表标签.html
  7. 52 0
      1_HTML/6_表单标签.html
  8. 16 0
      1_HTML/7_实体字符.html
  9. 69 0
      1_HTML/8_表格标签.html
  10. 17 0
      1_HTML/9_补充标签.html
  11. BIN
      1_HTML/image/bdlogo.png
  12. 21 0
      2_CSS/1_认识CSS.html
  13. 34 0
      2_CSS/2_CSS选择器.html
  14. 35 0
      2_CSS/3_控制文本样式.html
  15. 28 0
      2_CSS/4_控制图片.html
  16. 30 0
      2_CSS/5_样式重置.html
  17. 44 0
      2_CSS/6_边距.html
  18. 24 0
      2_CSS/7_边距_内边距.html
  19. BIN
      2_CSS/img/img1.jpg
  20. 52 0
      2_CSS/练习1_歌曲练习.html

BIN
1_HTML/.DS_Store
Прегледај датотеку


+ 31 - 0
1_HTML/1_helloworld.html
Прегледај датотеку 

@@ -0,0 +1,31 @@
 
+<!-- html 语法基础 "<" ">" -->
 
+<!-- "<" 后边的为标签名 -->
 
+<!-- 标签有成对有单个，成对标签有开始标签和结束标签，结束标签用 "/" 表示，单个标签只有开始标签，没有结束标签 -->
 
+<!-- 标签名后边为属性 ，“属性名=属性值” 属性可以有一个或多个 -->
 
+<!-- 标签可以嵌套使用 -->
 
+<!-- 可以用拟人方式来称呼标签间关系 -->
 
+<!-- 直接内外关系 成为父子关系 比如 head 和 meta -->
 
+<!-- 间接包含关系 称为祖先后代关系 比如 html 包含 h1 标签  -->
 
+<!-- 紧邻关系 称为兄弟关系 比如 head 和 body  -->
 
+
 
+<!-- 文档声明 用于指定文档类型 html-->
 
+<!DOCTYPE html>
 
+
 
+<!-- 下边为网页的主体结构 -->
 
+<!-- html 根标签 最外层一个标签-->
 
+<!-- lang 属性指定文档的语言 -->
 
+<html lang="en">
 
+<!-- head 标签一般用作与设置网页使用 -->
 
+<head>
 
+    <!-- charset 属性指定文档的字符编码 -->
 
+    <meta charset="UTF-8">
 
+    <!-- viewport 属性用来设置网页的视口，即网页在不同设备上的显示效果 -->
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <!-- title 标签指定网页的标题 -->
 
+    <title>四福科技</title>
 
+</head>
 
+<!-- body 标签指定网页的主体内容 -->
 
+<body>
 
+    <h1>hello world!</h1>
 
+</body>
 
+</html>

+ 36 - 0
1_HTML/2_文本常用标签.html
Прегледај датотеку 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- h标签 用于定义标题，h1 到 h6 分别对应不同级别的标题 -->
 
+    <h1>这是一个标题</h1>
 
+    <h2>这是一个二级标题</h2>
 
+    <h3>这是一个三级标题</h3>
 
+    <h4>这是一个四级标题</h4>
 
+    <h5>这是一个五级标题</h5>
 
+    <h6>这是一个六级标题</h6>
 
+
 
+    <!-- p标签 用于定义段落 -->
 
+    <p>这是一个段落</p>
 
+    <p>这是一个段落</p>
 
+    <p>这是一个段落</p>
 
+
 
+    <!-- 行内标签 -->
 
+     <!-- b标签 用于定义加粗文本 -->
 
+    <p>超文本标记语言（英语：<b>HyperText Markup Language</b>，简称：HTML）是一种用于创建网页的标准标记语言</p>
 
+     <!-- i标签 用于定义斜体文本 -->
 
+    <p>超文本标记语言（英语：<i>HyperText Markup Language</i>，简称：HTML）是一种用于创建网页的标准标记语言</p> 
+     <!-- u标签 用于定义下划线文本 -->
 
+    <p>超文本标记语言（英语：<u>HyperText Markup Language</u>，简称：HTML）是一种用于创建网页的标准标记语言</p> 
+    <!-- del标签 用于定义删除线文本 -->
 
+    <p>超文本标记语言（英语：<del>HyperText Markup Language</del>，简称：HTML）是一种用于创建网页的标准标记语言</p> 
+    <!-- span标签 没有任何特殊效果 后面css配合使用 -->
 
+    <p>超文本标记语言（英语：<span>HyperText Markup Language</span>，简称：HTML）是一种用于创建网页的标准标记语言</p> 
+
 
+
 
+</body>
 
+</html>

+ 20 - 0
1_HTML/3_图片标签.html
Прегледај датотеку 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- img标签 用于定义图片 -->
 
+     <!-- src属性 图片的路径 -->
 
+      <!-- 路径分为相对路径和绝对路径 -->
 
+       <!-- 相对路径 相对于当前文件所在目录 相对于当前文件的位置 例如：./images/1.jpg -->
 
+       <!-- 绝对路径 从根目录开始的完整路径 比如D:/codes/2026042601/1_HTML/images/1.jpg -->
 
+    
+       <!-- ./ 表示当前目录   ../ 表示上一级目录  -->
 
+
 
+       <!-- alt属性 图片的替代文本 用于图片无法显示时的提示 -->
 
+       <img src="./image/bdlogo.png" alt="这是一个图片"> 
+</body>
 
+</html>

+ 15 - 0
1_HTML/4_链接标签.html
Прегледај датотеку 

@@ -0,0 +1,15 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- a标签 用于定义链接 -->
 
+     <!-- href属性 链接的目标地址 例如：https://www.baidu.com -->
 
+
 
+     <!-- target属性 链接打开的方式 例如：_blank 表示在新窗口打开  -->
 
+    <a href="https://www.baidu.com/" target="_blank" >百度</a> 
+</body>
 
+</html>

+ 25 - 0
1_HTML/5_列表标签.html
Прегледај датотеку 

@@ -0,0 +1,25 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 有序列表 和 无序列表 -->
 
+    <!-- ol标签 用于定义有序列表 -->
 
+     <!-- li标签 用于定义列表项 -->
 
+    <ol>
 
+        <li>有序列表项1</li>
 
+        <li>有序列表项2</li>
 
+        <li>有序列表项3</li>
 
+    </ol> 
+
 
+    <!-- ul标签 用于定义无序列表 -->
 
+     <ul>
 
+        <li>无序列表项1</li>
 
+        <li>无序列表项2</li>
 
+        <li>无序列表项3</li>
 
+     </ul>
 
+</body>
 
+</html>

+ 52 - 0
1_HTML/6_表单标签.html
Прегледај датотеку 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <!-- 输入框 input标签 type属性等于text 用于定义输入框  -->
 
+    <input type="text">
 
+    <!-- 密码框 input标签 type属性等于password 用于定义密码框  -->
 
+    <input type="password">
 
+    <!--普通按钮 input标签 type属性等于button 用于定义普通按钮  value属性 用于定义按钮的文本内容 -->
 
+    <input type="button" value="按钮">
 
+    <!-- 提交按钮 input标签 type属性等于submit 用于定义提交按钮  value属性 用于定义按钮的文本内容 -->
 
+    <input type="submit" value="提交">
 
+    <!-- 重置按钮 input标签 type属性等于reset 用于定义重置按钮  value属性 用于定义按钮的文本内容 -->
 
+    <input type="reset" value="重置">
 
+    <!-- button标签 用于定义按钮 -->
 
+    <button>按钮</button>
 
+    <!-- 复选框 input标签 type属性等于checkbox 用于定义复选框  name属性 用于定义复选框的名称   -->
 
+    <input type="checkbox" name="ball"> 篮球
 
+    <input type="checkbox" name="ball"> 足球
 
+    <input type="checkbox" name="ball"> 排球
 
+    <input type="checkbox" name="ball"> 乒乓球
 
+    <!-- 单选框 input标签 type属性等于radio 用于定义单选框  name属性 用于定义单选框的名称 单选框只能选择一个选项必须使用相同的name属性  -->
 
+    <input type="radio" name="gender"> 男
 
+    <input type="radio" name="gender"> 女
 
+    <!-- 下拉选择框 select标签 用于定义下拉选择框  option标签 用于定义下拉选择框的选项  value属性 用于定义下拉选择框的选项的值  -->
 
+    <select>
 
+        <option value="1">黑龙江</option>
 
+        <option value="2">吉林</option>
 
+        <option value="3">辽宁</option>
 
+    </select>
 
+    <!-- 文本域 textarea标签 用于定义文本域  rows属性 用于定义文本域的行数  cols属性 用于定义文本域的列数  -->
 
+    <textarea rows="4" cols="50"></textarea>
 
+    <!-- 上传文件 input标签 type属性等于file 用于定义上传文件  -->
 
+    <input type="file">
 
+
 
+
 
+    <!-- form 表单标签 -->
 
+    <form action="xxx.php">
 
+        <!-- name属性 用于定义表单元素的名称 用于提交表单数据  placeholder属性 用于定义表单元素的占位符  value属性 用于定义表文本框素的默认值  -->
 
+        <input type="text" name="username" placeholder="请输入用户名" value="username">
 
+        <input type="password" name="password" placeholder="请输入密码">
 
+        <input type="submit" value="提交">
 
+    </form>
 
+</body>
 
+
 
+</html>

+ 16 - 0
1_HTML/7_实体字符.html
Прегледај датотеку 

@@ -0,0 +1,16 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 如果输入空格 会显示为一个空格  -->
 
+     <!-- 如果显示多个空格 使用&nbsp;实体字符  -->
 
+    <h1>hello &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; world!</h1>
 
+
 
+    <!-- 1 <3>2 -->
 
+    1&lt;3&gt;2    
+</body>
 
+</html>

+ 69 - 0
1_HTML/8_表格标签.html
Прегледај датотеку 

@@ -0,0 +1,69 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <!-- table标签 表格标签 -->
 
+     <!-- border属性 表格的边框宽度 cellspacing属性 表格的单元格间距 -->
 
+    <table border="1" cellspacing="0">
 
+        <!-- thead标签 表格的表头部分 -->
 
+        <thead>
 
+            <!-- tr标签 表格的行标签 -->
 
+             <tr>
 
+                <!-- th标签 表格的表头单元格标签 -->
 
+                <th>姓名</th>
 
+                <th>年龄</th>
 
+                <th>性别</th>
 
+             </tr>
 
+        </thead>
 
+        <!-- tbody标签 表格的主体部分 -->
 
+        <tbody>
 
+            <!-- tr标签 表格的行标签 -->
 
+             <tr>
 
+                <!-- td标签 表格的单元格标签 -->
 
+                <td>张三</td>
 
+                <td>18</td>
 
+                <td>男</td>
 
+             </tr>
 
+             <tr>
 
+                <td>李四</td>
 
+                <td>19</td>
 
+                <td>女</td>
 
+             </tr>
 
+             <tr>
 
+                <td>王五</td>
 
+                <td>20</td>
 
+                <td>男</td>
 
+             </tr>
 
+        </tbody>
 
+    </table>
 
+
 
+
 
+    <!-- 简化版本的表格标签 -->
 
+    <table border="1" cellspacing="0">
 
+        <tr>
 
+            <td>1</td>
 
+            <!-- colspan属性 跨列合并 合并多个单元格到一个单元格中 -->
 
+            <td colspan="2">23</td>
 
+            
+        </tr>
 
+        <tr>
 
+            <td>4</td>
 
+            <td>5</td>
 
+            <!-- rowspan属性 跨行合并 合并多个单元格到一个单元格中 -->
 
+            <td rowspan="2">69</td>
 
+        </tr>
 
+        <tr>
 
+            <td>7</td>
 
+            <td>8</td>
 
+            
+        </tr>
 
+    </table> 
+</body>
 
+
 
+</html>

+ 17 - 0
1_HTML/9_补充标签.html
Прегледај датотеку 

@@ -0,0 +1,17 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- hr标签 分割线 -->
 
+     <h1>这是一个标题</h1>
 
+     <hr>
 
+     <p>这是一个段落</p>
 
+
 
+     <!-- br标签 换行标签 -->
 
+     <p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）<br>是一种用于创建网页的标准标记语言。</p>
 
+</body>
 
+</html>

BIN
1_HTML/image/bdlogo.png
Прегледај датотеку


+ 21 - 0
2_CSS/1_认识CSS.html
Прегледај датотеку 

@@ -0,0 +1,21 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- css 样式 需要写在style标签中  -->
 
+    <style>
 
+        /* css 通过选择器选中要控制的标签 */
 
+        h1{
 
+            /* css样式通过不同的属性来控制 */
 
+            /* color属性 控制文字颜色 */
 
+            /* red 为属性值 */
 
+            color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>认识CSS</h1>
 
+</body>
 
+</html>

+ 34 - 0
2_CSS/2_CSS选择器.html
Прегледај датотеку 

@@ -0,0 +1,34 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 标签选择器 直接使用标签名即可选中 */
 
+        /* 选中所有h1标签 */
 
+        /* h1{
 
+            color: red;
 
+        } */
 
+
 
+        /* 类选择器 用类名来选中标签 前面以点.开头 */
 
+        /* .title{
 
+            color:red;
 
+        } */
 
+
 
+        /* id选择器 用id值来选中标签 前面以井号#开头 */
 
+        #test{
 
+            color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 用 class属性 给标签起一个类名 -->
 
+    <!-- 用 id属性 给标签起一个唯一标识 id值不允许重复 -->
 
+    <h1 class="title" id="test">识别CSS</h1>
 
+    <h1>选择器</h1>
 
+
 
+    <!-- 类名可以用作于任何标签 -->
 
+    <p class="title">这是一个段落</p>
 
+</body>
 
+</html>

+ 35 - 0
2_CSS/3_控制文本样式.html
Прегледај датотеку 

@@ -0,0 +1,35 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        h1{
 
+            /* 控制文本颜色 */
 
+            color: red;
 
+            /* 控制文本大小 */
 
+            /* px 像素单位 */
 
+            font-size: 100px;
 
+            /* 控制文本对齐方式 */
 
+            /* center 居中对齐 */
 
+            /* left 左对齐 */
 
+            /* right 右对齐 */
 
+            text-align: center;
 
+        }
 
+        p{
 
+            font-size: 100px;
 
+            color: red;
 
+            text-align: center;
 
+            /* 控制文本加粗 */
 
+            /* bold 加粗 */
 
+            /* 可以写数值 100-900 */
 
+            font-weight: 100;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>控制文本样式</h1>
 
+    <p>这是一个段落</p>
 
+</body>
 
+</html>

+ 28 - 0
2_CSS/4_控制图片.html
Прегледај датотеку 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        img{
 
+            /* width 宽度 */
 
+            width: 300px;
 
+            /* height 高度 */
 
+            height: 300px;
 
+        }
 
+        div{
 
+            text-align: center;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 展示图片的时候 图片大小为图片默认尺寸 -->
 
+     <!-- 当控制图片某一条边的长度时，另一条边会等比例缩放图片 -->
 
+    
+    <!-- div 容器 -->
 
+     <div>
 
+        <img src="./img/img1.jpg" alt="封面图片">
 
+    </div>
 
+</body>
 
+</html>

+ 30 - 0
2_CSS/5_样式重置.html
Прегледај датотеку 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 样式重置  css reset*/
 
+        /* 通配符选择器  选中所有标签  */
 
+        *{
 
+            /* 外边距  标签与标签之间的距离 */
 
+            margin:0;
 
+            /* 内边距  容器与内容之间的距离 */
 
+            padding: 0;
 
+            /* 网页默认字体大小  12px */
 
+            font-size: 12px;
 
+            /* 字体样式  正常字体 */
 
+            /* normal  普通样式 */
 
+            font-style: normal;
 
+            font-weight: normal;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>标题</h1>
 
+    <p>段落</p>
 
+    <p>段落</p>
 
+    <i>斜体文本</i>
 
+</body>
 
+</html>

+ 44 - 0
2_CSS/6_边距.html
Прегледај датотеку 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box1{
 
+            width: 200px;
 
+            height: 200px;
 
+            /* 背景色 */
 
+            background-color: red;
 
+            /* 外边距 */
 
+            /* 表示当前元素距离上下左右的距离都是20px */
 
+            /* margin:20px; */
 
+            /* 表示当前元素距离上的距离是10px，距离右的距离是20px，距离下的距离是30px，距离左的距离是40px */
 
+            /* margin:10px 20px 30px 40px; */
 
+            /* 表示上下距离是10px，左右距离是20px */
 
+            /* margin: 10px 20px; */
 
+            /* 表示上10px 左右20px 下30px */
 
+            /* margin:10px 20px 30px; */
 
+            
+            /* 表示下20px距离 */
 
+            margin-bottom: 20px;
 
+            /* 表示上20px距离 */
 
+            margin-top: 20px;
 
+            /* 表示左20px距离 */
 
+            margin-left: 20px;
 
+             /* 表示右20px距离 */   
+             margin-right: 20px;
 
+
 
+        }
 
+        .box2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1"></div>
 
+    <div class="box2"></div>
 
+</body>
 
+</html>

+ 24 - 0
2_CSS/7_边距_内边距.html
Прегледај датотеку 

@@ -0,0 +1,24 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box1{
 
+            width: 200px;
 
+            height: 200px;
 
+            /* 边框 宽度 样式 颜色 */
 
+            border:5px solid red;
 
+            /* 内边距 */
 
+            /* 与margin值的使用方法是一样的 */
 
+            /* padding:20px; */
 
+
 
+            padding-top: 20px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">hello</div>
 
+</body>
 
+</html>

BIN
2_CSS/img/img1.jpg
Прегледај датотеку


+ 52 - 0
2_CSS/练习1_歌曲练习.html
Прегледај датотеку 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .music-title{
 
+            text-align: center;
 
+            color: blue;
 
+        }
 
+        .music-singer{
 
+            text-align: center;
 
+        }
 
+        .music-info{
 
+            text-align: center;
 
+        }
 
+        .music-img{
 
+            text-align: center;
 
+        }
 
+        img{
 
+            width: 400px;
 
+        }
 
+        .music-text{
 
+            text-align: center;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 起类名要做见名知意。如果多个单词 用短横线连接起来 -->
 
+    <h1 class="music-title">《枫》</h1>
 
+    <hr>
 
+    <h2 class="music-singer">歌手：周杰伦</h2>
 
+    <h3 class="music-info">作词人：弹头（宋健彰）</h3>
 
+    <h3 class="music-info">作曲人：周杰伦</h3>
 
+    <div class="music-img">
 
+        <img src="./img/img1.jpg" alt="歌曲封面">
 
+    </div>
 
+    <h4 class="music-text">
 
+        歌词
 
+    </h4>
 
+    <p class="music-text">
 
+        乌云在我们心里搁下一块阴影
 
+    </p>
 
+    <p class="music-text">
 
+        我聆听沉寂已久的心情
 
+    </p>
 
+    <p class="music-text">
 
+        清晰透明 就像美丽的风景
 
+    </p>
 
+</body>
 
+</html>