记录在听黑马课的时候的笔记以及课堂上练习的代码，文章图源于我在听课的时候所截的屏，所以有些不清晰，请见谅。下面是课程链接，可点击自行跳转。
https://www.bilibili.com/video/BV1m84y1w7Tb/?share_source=copy_web&vd_source=d521b664e1113402904fa9336bd1d0ac目录
前端开发
HTML
HTML快速入门
小练手（快速入门）：
<html>
<head>
<title>HTML快速入门</title>
</head>
<body>
<h1>Love yourself and love what you love</h1>
<img src="jennie2.jpg"></img>
</body>
</html>
VS Code安装
新浪新闻
实现标题排版
参照这个去制作html：
小练手（实现标题排版）：
<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>“就算常常失败，我也想去理解你的伤口”</title>
</head>
<body>
<!-- img标签：
src：属性，指定图片的路径
width：属性，指定图片的宽度 (px 像素; % 相对于父元素的百分比)
height：属性，指定图片的高度 (px 像素; % 相对于父元素的百分比)
alt：属性，图片无法显示时的替代文本
title：属性，鼠标悬停时显示的文本提示
路径书写方式：
绝对路径：从盘符开始写起的完整路径
绝对磁盘路径：D:\java\htmlStudy\img\news_logo.png
绝对网络路径： http://www.example.com/images/news_logo.png
相对路径：相对于当前HTML文件所在位置的路径
./ 当前目录 ./可以省略
../ 上一级目录
img/news_logo.png 当前目录下的img文件夹中的news_logo.png图片
../img/news_logo.png 上一级目录下的img文件夹中的news_logo.png图片
-->
<img src="./img/news_logo.png" width="200px" > 新世相 作家访谈系列
<h1>“就算常常失败，我也想去理解你的伤口”</h1>
<h3>——专访作家赵海珍</h3>
<hr>
原创 韩女作家访谈系列 新世相 2025年10月15日22:53 上海
<hr>
</body>
</html>实现标题样式一
小练手（修改标题字体颜色）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>“就算常常失败，我也想去理解你的伤口”</title>
<!-- 方式二：内嵌方式 -->
<style>
h1 {
/* color: gold; */
/* color: rgb(255, 215, 0); */
color: #4D4F53;
}
</style>
<!-- 方式三：外联设置 -->
<!-- <link rel="stylesheet" href="./css/news.css"> -->
</head>
<body>
<img src="./img/news_logo.png" width="200px" > 新世相 作家访谈系列
<!-- 设置CSS样式三种方式：
1. 外部样式表方式：通过link标签引入外部CSS
2. 内部样式表方式：通过style标签在head中定义CSS
3. 行内方式：通过style属性直接在HTML标签中定义CSS -->
<!-- <h1 style="color: gold;">“就算常常失败，我也想去理解你的伤口”</h1> -->
<h1>“就算常常失败，我也想去理解你的伤口”</h1>
<h3>——专访作家赵海珍</h3>
<hr>
原创 韩女作家访谈系列 新世相 2025年10月15日22:53 上海
<hr>
</body>
</html>实现标题样式二
小练手（设置下方的小字）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>“就算常常失败，我也想去理解你的伤口”</title>
<style>
h1 {
color: #4D4F53;
}
h3 {
color: #595a5b;
}
/* 元素选择器 */
/* span {
color: #968d92;
} */
/* 类选择器 */
.cls {
color: #968d92;
margin-right: 10px;
}
.source {
color: #5b6a99;
margin-right: 10px;
}
/* ID选择器 */
/* #author {
color: #968d92;
margin-right: 10px;
}
#series {
color: #968d92;
margin-right: 10px;
}
#source {
color: #5b6a99;
margin-right: 10px;
}
#date {
color: #968d92;
margin-right: 10px;
}
#location {
color: #968d92;
margin-right: 10px;
} */
</style>
</head>
<body>
<img src="./img/news_logo.png" width="200px" > 新世相 作家访谈系列
<h1>“就算常常失败，我也想去理解你的伤口”</h1>
<h3>——专访作家赵海珍</h3>
<hr>
<span class="cls" id="author">原创</span> <span class="cls" id="series">韩女作家访谈系列</span> <span class="source" id="source">新世相</span> <span class="cls" id="date">2025年10月15日22:53</span> <span class="cls" id="location">上海</span>
<hr>
</body>
</html>
实现标题超链接
小练手（为新世相三个字增加超链接）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>“就算常常失败，我也想去理解你的伤口”</title>
<style>
h1 {
color: #4D4F53;
}
h3 {
color: #595a5b;
}
.cls {
color: #968d92;
margin-right: 10px;
}
.source {
color: #5b6a99;
margin-right: 10px;
}
a {
text-decoration: none;
color: inherit;
}
</style>
</head>
<body>
<img src="./img/news_logo.png" width="200px" > 新世相 作家访谈系列
<h1>“就算常常失败，我也想去理解你的伤口”</h1>
<h3>——专访作家赵海珍</h3>
<hr>
<span class="cls" id="author">原创</span> <span class="cls" id="series">韩女作家访谈系列</span> <span class="source" id="source"> <a href="http://shixiang.xin/" target="_self">新世相</a></span> <span class="cls" id="date">2025年10月15日22:53</span> <span class="cls" id="location">上海</span>
<hr>
</body>
</html>
实现正文排版
小练手（实现正文部分排版）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>“就算常常失败，我也想去理解你的伤口”</title>
<style>
h1 {
color: #4D4F53;
}
h3 {
color: #595a5b;
}
.cls {
color: #968d92;
margin-right: 10px;
}
.source {
color: #5b6a99;
margin-right: 10px;
}
a {
text-decoration: none;
color: inherit;
}
p{
text-indent: 35px; /* 首行缩进 */
line-height: 40px; /* 设置行高 */
}
#editor {
margin-top: 50px;
font-size: 14px;
text-align: right;
color: #969696;
}
</style>
</head>
<body>
<img src="./img/news_logo.png" width="200px" > 新世相 作家访谈系列
<h1>“就算常常失败，我也想去理解你的伤口”</h1>
<h3>——专访作家赵海珍</h3>
<hr>
<span class="cls" id="author">原创</span> <span class="cls" id="series">韩女作家访谈系列</span> <span class="source" id="source"> <a href="http://shixiang.xin/" target="_self">新世相</a></span> <span class="cls" id="date">2025年10月15日22:53</span> <span class="cls" id="location">上海</span>
<hr>
<!-- 正文 -->
<img src="./img/1.png" width="65%" >
<br>
<!-- 视频 -->
<video src="./video/interview.mp4" controls width="65%"></video>
<!-- 音频 -->
<!-- <audio src="./audio/interview.mp3" controls></audio> -->
<p>一个意外的角度，一句小声的询问，赢得 59.5 万点赞，6816 条评论。这条评论下面，我看到很多人止不住的眼泪。</p>
<p>“关心他人”是我们从小就被教育的品质，而现实的教育却是无视他人。付出的理解很少得到回报，每个人都有弱者的一面，光是处理自己的伤口，就已经足够艰难。</p>
<p>但是你看，最终给予所有人会心一击的，依然是最朴素的「关心」。</p>
<p>我透过你的话，看见你这个人。</p>
<p>今年夏天，我们前往韩国与作家赵海珍对话，她书写的就是这样的故事：</p>
<p style="color: #5051b8;"><strong>“人如何通过他人来照见自己，并在那一刻共享‘想要活下去的心’。”</strong></p>
<p style="color: #5051b8;"><strong>“理解与共情，常常以失败告终。但我相信，即使失败，本身也有其价值。”</strong></p>
<p>赵海珍童年生活在可以被称为“贫民窟”的街区，在波兰教书时，她以一个真正的“异乡人”的身份体验世界，种种沦为少数、沦为弱者的经历，让她将目光从主角身上挪开，转而投向生活中那些被忽视的他者——那些在宏大叙事中缺席的人，那些掉进社会变迁缝隙的人，那些生活随时要脱轨和下坠的人。</p>
<p>“在我们每个人身上，其实都潜藏着‘弱者’的一面。”</p>
<p>“我并不想只去描写那些‘可怜的人’。我更想写的是，那些在悲伤之中仍能突破自我、并在痛苦中依然愿意去照顾他人的人。”</p>
<p>这是新世相韩女作家访谈系列的第三期。正如赵海珍所说，我们最该做的努力，就是不要遗忘那份对人的深情，那是一种太容易被遗忘、也太容易被丢失的心意。</p>
<p id="editor">文章编辑：王雪琴</p>
</body>
</html>
实现正文布局
小练手（实现正文布局）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>“就算常常失败，我也想去理解你的伤口”</title>
<style>
h1 {
color: #4D4F53;
}
h3 {
color: #595a5b;
}
.cls {
color: #968d92;
margin-right: 10px;
}
.source {
color: #5b6a99;
margin-right: 10px;
}
a {
text-decoration: none;
color: inherit;
}
p {
text-indent: 35px;
/* 首行缩进 */
line-height: 40px;
/* 设置行高 */
}
#editor {
margin-top: 50px;
font-size: 14px;
text-align: right;
color: #969696;
}
#center {
width: 65%;
/* margin: 0% 17.5% 0% 17.5%; 上右下左 */
margin: auto;
}
</style>
</head>
<body>
<div id="center">
<img src="./img/news_logo.png" width="200px"> 新世相 作家访谈系列
<h1>“就算常常失败，我也想去理解你的伤口”</h1>
<h3>——专访作家赵海珍</h3>
<hr>
<span class="cls" id="author">原创</span> <span class="cls" id="series">韩女作家访谈系列</span> <span class="source"
id="source"> <a href="http://shixiang.xin/" target="_self">新世相</a></span> <span class="cls"
id="date">2025年10月15日22:53</span> <span class="cls" id="location">上海</span>
<hr>
<!-- 正文 -->
<img src="./img/1.png" width="65%">
<br>
<!-- 视频 -->
<video src="./video/interview.mp4" controls width="65%"></video>
<!-- 音频 -->
<!-- <audio src="./audio/interview.mp3" controls></audio> -->
<p>一个意外的角度，一句小声的询问，赢得 59.5 万点赞，6816 条评论。这条评论下面，我看到很多人止不住的眼泪。</p>
<p>“关心他人”是我们从小就被教育的品质，而现实的教育却是无视他人。付出的理解很少得到回报，每个人都有弱者的一面，光是处理自己的伤口，就已经足够艰难。</p>
<p>但是你看，最终给予所有人会心一击的，依然是最朴素的「关心」。</p>
<p>我透过你的话，看见你这个人。</p>
<p>今年夏天，我们前往韩国与作家赵海珍对话，她书写的就是这样的故事：</p>
<p style="color: #5051b8;"><strong>“人如何通过他人来照见自己，并在那一刻共享‘想要活下去的心’。”</strong></p>
<p style="color: #5051b8;"><strong>“理解与共情，常常以失败告终。但我相信，即使失败，本身也有其价值。”</strong></p>
<p>赵海珍童年生活在可以被称为“贫民窟”的街区，在波兰教书时，她以一个真正的“异乡人”的身份体验世界，种种沦为少数、沦为弱者的经历，让她将目光从主角身上挪开，转而投向生活中那些被忽视的他者——那些在宏大叙事中缺席的人，那些掉进社会变迁缝隙的人，那些生活随时要脱轨和下坠的人。
</p>
<p>“在我们每个人身上，其实都潜藏着‘弱者’的一面。”</p>
<p>“我并不想只去描写那些‘可怜的人’。我更想写的是，那些在悲伤之中仍能突破自我、并在痛苦中依然愿意去照顾他人的人。”</p>
<p>这是新世相韩女作家访谈系列的第三期。正如赵海珍所说，我们最该做的努力，就是不要遗忘那份对人的深情，那是一种太容易被遗忘、也太容易被丢失的心意。</p>
<p id="editor">文章编辑：王雪琴</p>
</div>
</body>
</html>
表格标签
小练手（表格实现）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品牌表格</title>
</head>
<body>
<table border="1px" cellspacing="0" width="600px">
<tr>
<th>序号</th>
<th>品牌Logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr>
<td>1</td>
<td><img src="img/huawei.jpg" width="100px"></td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<tr>
<td>2</td>
<td><img src="img/alibaba.png" width="100px"></td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>
</html>
表单标签
小练手（实现表单）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-表单</title>
</head>
<body>
<!--
form表单属性:
action: 表单提交的url，往何处提交数据.
method: 表单的提交方式.
get: 通过url提交数据，数据会显示在url中 url长度有限 默认. username=Je&password=123&gender=female
post: 通过请求体提交数据，数据不会显示在url中 参数大小无限制.
-->
<form action="" method="get">
用户名: <input type="text" name="username" placeholder="请输入用户名"><br><br>
密码: <input type="password" name="password" placeholder="请输入密码"><br><br>
性别:
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<input type="submit" value="提交">
</form>
</body>
</html>
表单项标签
小练手（表单项标签实现）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单示例</title>
</head>
<body>
<!-- value: 表单项提交的值 -->
<form action="" method="post">
姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"> <br><br>
性别: <label><input type="radio" name="gender" value="1"> 男 </label>
<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
<label><input type="checkbox" name="hobby" value="game"> game </label>
<label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
图像: <input type="file" name="image"> <br><br>
生日: <input type="date" name="birthday"> <br><br>
时间: <input type="time" name="time"> <br><br>
日期时间: <input type="datetime-local" name="datetime"> <br><br>
邮箱: <input type="email" name="email"> <br><br>
年龄: <input type="number" name="age"> <br><br>
学历: <select name="degree">
<option value="">---------- 请选择 ----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br><br>
描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>代码效果显示：
这篇文章就先更到这里，接下来的内容可查看我的下一篇博客，感谢观看，希望对你有帮助。
扫一扫
4646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
