最后
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
因为 HTML的代码几乎就没有什么改变，所以我们能不能想 CSS 代码一样进行 “引入复用”呢？
可以！但是以博主这点扫盲的知识储备，还做不到。
因为 HTML 原生，是不支持这样的操作的。
本来 HTML 设计出来，只是一个用来做报纸的东西，天知道几十年后，HTML 变成如此的模样。
所以，要想实现类似的效果，就需要借助 JS 对 相同的 HTML 片段进行自动生成。
此时，公共的，重要的 HTML 代码，就不是写 html 文件中了，而是写到一个 JS的函数里，通过这个 JS 函数来生成这个 HTML 片段，然后加入到页面合适位置中。
但是这种做法，在原生开发，非常麻烦。
像前端中的一些框架 Vue,React，其实其中的一个重要功能，就是做这个的。
可以让程序员更好的复用 HTML / CSS /JS，这样的代码片段。
我们在框架中，把它称为“组件（component）”。
这里就不展开，只是告诉大家，前端的代码都是可以通过一些框架来实现“复用”的。有兴趣的，自行了解。【对前端的朋友是必学的】
这里再小拓展一下，
什么是框架？
像前端有框架：Vue，React
Java 后端也有框架：Spring
其他的语言也有框架：
Python：Django，fastAPI
Go：Beego，gin…
反正各种语言都有着各自的框架。
我们谈到的框架是一个“范围很广”的词。
所谓的框架，就是你写一个程序，这个程序的大部分的内容，都是已经写好了的。
你只需要往里面的一些关键部分，去填充一些你自定义的代码 和 逻辑 就好了。
框架，大概就是这么一个东西。
所以，但凡是符合这样条件的东西，我们都将其称为是 框架。
举个例子：四驱车 / 乐高 / 电脑
其实一个四驱车玩具，具体长什么样子，都是规定好了。
只不过换那个壳子，或者 材料 和 马达，就是一个 “新产品”了！
但是本质，它还是一个四驱车玩具，这一点并没有变。
总的框架已经是固定了，无非就是里面的内容由你来决定。
可能用电脑来举例更贴切一些。
一个电脑大的框架，就这么几个大件：CPU，散热器，内存，硬盘，主板，电源，机箱，显示器。
在这个 大框架下面，我们可以进行调整。
比如：
我们觉得这个 CPU不行，我们要换个i9的。
自比如：这个硬盘不行，我们要换个 固态的。
等等。。。
这些操作，都是在现有的框架里面，做出的一些微调。
但是，大的方向都是已经既定好了的。
无论你怎么换，这些软件的本质是不会发生改变的。
这就是框架。
不同的框架，效果是不一样的，功能上差别也是非常大的。
所以，大家不要随意把两个不同的框架，混为一谈！
尤其是 不要把前端和后端的框架，给混淆了！！！
它们两个完全就不搭边！！
各自做的工作，都是完全不同的。
接着上面的内容，我们现在就只需要实现右侧内容就可以了。
注意！这里其实有个问题。
如果 博客的内容很多，样式就会变形。
让我们这里的 三个自然段 变成 30 个自然段。
专业来说：当内容过多的时候，超出了我们浏览器窗口的显示范围，就会出现“滚动”。
这样的“滚动”，就会造成 当前已有的页面格局出现了问题。
解决这个问题，最好的方式就是“固定背景”。
如何固定背景？很容易！！！
当前我们网页的滚动条’是出现在浏览器窗口上的，这就导致拖动滚动条，使整个页面都在滚动。
那么，我们能不能把滚动条，给放到某个元素上，让它再里面滚动？
就是让里面的内容滚动，但是页面不跟着一起滚动。
又因为 内容是在 版心的右侧部分，也就是我们 right部分。
即， right 部分就是 这些内容的父级元素。
这样的话，我们就希望这些内容，只是在 right 部分的内部进行滚动。
right 保持不动。
就像瀑布的一样，山体（right）不动，水流（内容）在往下流动（滚动）。
我们可以通过 给 right 加上 一个简单的CSS属性（overflow: auto）就能实现.
overflow - 中文意思就是溢出。
另外，overflow 还有一些其它的功能
其它的方法很少用，我也不会，就不说了。
目前的网页就算合格了。
有的人可能会问：这个感动条，有点丑。
能不能让这个滚动条变好看点。
办法也是有的，但并不是 CSS 标准中 提供的内容。
CSS 标准（CSS2, CSS3）属于“放之四海而皆准”这样的规则。
只要是主流的浏览器，都会遵守。
新晋浏览器，也会遵守。
但是 标准内容是有限的，像有些细节内容，可能标准上没有规定到，但浏览器也对这些内容进行了支持 和扩展。
就比如现在遇到的滚动条样式，CSS 标准中没有属性来进行设置、
但是主流的浏览器中都提供了相关的方法。
比较悲伤的是，不同的浏览器，提供的设置方法，其实也会存在差异。
了解即可，多的我也不会。
<!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>博客详情页</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/blogdetail.css">
</head>
<body>
<!-- 导航栏 -->
<!-- 为了能够在后续过程中，添加样式等操作，建议都引入一个类属性 -->
<div class="navigation">
<img src="./image/2.jpg" alt="">
<span>我的博客系统</span>
<!-- 空白元素，用于站位置 -->
<div class="spacer"></div>
<a href="bloghome.html">主页</a>
<a href="writingblog.html">写博客</a>
<a href="#">注销</a>
</div>
<!-- 这里的 .container 作为页面的版心 -->
<div class="container">
<!-- 左侧用户信息区 -->
<div class="left">
<!-- 表示整个用户信息区域 -->
<div class="card">
<img src="./image/1.jpg" alt="">
<!-- 空格符 -->
<h3>Dark And Grey</h3>
<a href="#">github 地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>1</span>
</div>
</div>
</div>
<!-- 右侧内容区 -->
<div class="right">
<!-- 使用一个 div 来包裹整个博客的内容详情 -->
<div class="blog-content">
<!-- 博客标题 -->
<h3>我的第一篇博客</h3>
<!-- 发布时间 -->
<div class="date">2022-05-10 17:48:00</div>
<!-- 博客内容 -->
<!-- 第一个自然段 -->
<p>
<!-- 输入lorem，就会自动生成一串随机字符 -->
从今天起，争取卷死在读的各位，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.
</p>
<!-- 第二个自然段 -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.
</p>
<!-- 第三个自然段 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?
</p>
<p>
<!-- 输入lorem，就会自动生成一串随机字符 -->
从今天起，争取卷死在读的各位，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.
</p>
<!-- 第二个自然段 -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.
</p>
<!-- 第三个自然段 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?
</p>
<p>
<!-- 输入lorem，就会自动生成一串随机字符 -->
从今天起，争取卷死在读的各位，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.
</p>
<!-- 第二个自然段 -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.
</p>
<!-- 第三个自然段 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?
</p>
<p>
<!-- 输入lorem，就会自动生成一串随机字符 -->
从今天起，争取卷死在读的各位，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.
</p>
<!-- 第二个自然段 -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.
</p>
<!-- 第三个自然段 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?
</p>
<p>
<!-- 输入lorem，就会自动生成一串随机字符 -->
从今天起，争取卷死在读的各位，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.
</p>
<!-- 第二个自然段 -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.
</p>
<!-- 第三个自然段 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?
</p>
<p>
<!-- 输入lorem，就会自动生成一串随机字符 -->
从今天起，争取卷死在读的各位，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.
</p>
<!-- 第二个自然段 -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.
</p>
<!-- 第三个自然段 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?
</p>
<p>
<!-- 输入lorem，就会自动生成一串随机字符 -->
从今天起，争取卷死在读的各位，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.
</p>
<!-- 第二个自然段 -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.
</p>
<!-- 第三个自然段 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?
</p>
<p>
<!-- 输入lorem，就会自动生成一串随机字符 -->
从今天起，争取卷死在读的各位，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.
</p>
<!-- 第二个自然段 -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.
</p>
<!-- 第三个自然段 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?
</p>
<p>
<!-- 输入lorem，就会自动生成一串随机字符 -->
从今天起，争取卷死在读的各位，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.
</p>
<!-- 第二个自然段 -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.
</p>
<!-- 第三个自然段 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?
</p>
<p>
<!-- 输入lorem，就会自动生成一串随机字符 -->
从今天起，争取卷死在读的各位，Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id numquam vitae voluptate, veniam ipsa placeat! Consectetur eligendi quia quibusdam, mollitia eos totam quod repellendus veritatis, iste natus odio nihil ea.
</p>
<!-- 第二个自然段 -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus similique cumque corrupti. Officiis adipisci exercitationem aspernatur ea libero quia, labore optio tempore delectus pariatur dicta officia blanditiis cum deleniti fuga.
</p>
<!-- 第三个自然段 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo consectetur dolores ullam quo sed. Sunt, placeat voluptatem quia qui tenetur voluptas perspiciatis, numquam suscipit id ipsa veritatis iusto dolore itaque?
</p>
</div>
</div>
</div>
</body>
</html>
/* 给博客详情页使用的样式文件 */
/* 首先，我们需要给 blog-content 设置内边距*/
/* 因为你们仔细看看模板，就会知道内容与边框是有一定的距离的 */
.blog-content{
padding: 30px;
}
/* 标题 */
.blog-content h3{
/* 标题居中 */
text-align: center;
/* 设置边距，因为标题与下面的时间是有距离的 */
/* .blog-content设置的边距 和这个没有关系！！！ */
/* .blog-content 是针对整体，.blog-content h3 是针对内容中的标题 */
/* 上下 20 px，左右0px */
padding: 20px 0;
}
/* 日期 */
.blog-content .date{
/* 文本居中 */
text-align: center;
/* 字体颜色 */
color: rgb(204, 33, 204);
/* 针对日期设置间距 */
padding: 20px;
}
/* 自然段 */
.blog-content p{
/* 每个自然段首行缩进 2个字符 */
text-indent: 2em;
/* 给每个自然段设置边距，使其每个自然段隔开 */
padding: 10px 0;
}
====================================================================
老规矩：Ctrl + C 和 Ctrl + V，再删除不需要的部分。
创建一个 bloglogin HTML文件，来存储。
还没有完！我们还要删除 注销 按钮。
1、页面模板是这样的
2、你登录都没登进去，填什么注销退出登录？
下面我们再来创建一个专门用来 添加登录页样式 的文件。
下面我们先来实现登录的页面框架
此时，我们就可以往这个对话框，添加更具体元素 和 样式了。
此时，我们就完成了 博客登录页。
<!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>博客登录页</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/bloglogin.css">
</head>
<body>
<!-- 导航栏 -->
<!-- 为了能够在后续过程中，添加样式等操作，建议都引入一个类属性 -->
<div class="navigation">
<img src="./image/2.jpg" alt="">
<span>我的博客系统</span>
<!-- 空白元素，用于站位置 -->
<div class="spacer"></div>
<a href="bloghome.html">主页</a>
<a href="writingblog.html">写博客</a>
<!-- <a href="#">注销</a> -->
</div>
<!-- 登录页面内容区域 -->
<div class="login-container">
<!-- 加上一个对话框 -->
<div class="login-dialog">
<h3>登陆</h3>
<div class="row">
<span>用户名</span>
<input type="text" id="username">
</div>
<div class="row">
<span>密码</span>
<input type="password" id="password">
</div>
<div class="row">
<button>提交</button>
</div>
</div>
</div>
</body>
</html>
/* 登录页面的专用样式文件 */
.login-container{
/* 页面宽度 */
width: 100%;
/* 减去导航的高度 */
height: calc(100% - 50px);
/* 需要让里面的子元素，垂直水平居中，就会用到 flex */
display: flex;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
}
.login-dialog{
/* 尺寸 */
width: 400px;
height: 350px;
background-color: rgba(255, 255, 255, 0.75);
/* 边框圆角 */
border-radius: 15px;
}
.login-dialog h3{
/* 文本居中 */
text-align: center;
/* 字体大小 */
font-size: 20px;
/* 间距 */
/* 上下 50 边距，左右苓边距 */
padding: 50px 0;
}
.login-dialog .row{
/* 尺寸 */
height: 50px;
width: 100%;
/* 使用弹性布局 */
/* 因为 类row，所拥有的元素都是 行内元素*/
/* 只要是涉及到行内元素，或者子元素的操作都可以使用弹性布局 */
display: flex;
justify-content: center;
align-items: center;
}
/* 针对 .login-dialog 中 span 标签 */
.login-dialog .row span{
/* 把span 转化成块级元素，方便您设置尺寸 */
/* 因为行内元素设置尺寸，大部分操作都是不会生效的 */
display: block;
/* 尺寸 */
width: 100px;
/* 字体加粗 */
font-weight: 700;
}
/* 使用并集选择器，同时选择 用户名和密码的输入框 */
#username,#password{
width: 200px;
height: 40px;
/* 去掉边框线 */
border: none;
/* 去掉轮廓线 */
outline: none;
/* 字体大小 */
font-size: 22px;
/* 文本垂直居中 */
line-height: 40px;
/* 设置 左内边距，让输入的数据与边框隔开 */
padding-left: 10px;
/* 设置边框圆角 */
border-radius: 15px;
}
.row button{
width: 300px;
height: 50px;
/* 背景颜色 */
background-color: rgb(21, 100, 21);
/* 字体颜色 */
color: white;
/* 字体大小 */
font-size: 20px;
/* 去掉边框线 */
border: none;
/* 去掉轮廓线 */
outline: none;
/* 边框圆角 */
border-radius: 20px;
}
.row button:active{
/* 背景颜色 */
background-color: white;
/* 字体颜色 */
color: black;
}
==================================================================
前端这块的入门，相比于后端来说，我觉得更简单一点点。
通过一些练习，很快就能看到成效。
比如，当你学习了一端时间的 HTML 和 CSS（学个把月）
就已经差不多能写出很多页面了，随便给你网站，你照着抄一抄，就能写出一个类似的。
很多看起来复杂的页面，无非就是一些简单样式的叠加。
而且做出网页的成就感，还是非常爆棚的！
可以支持你进一步深入学习下去。
想我们学Java的，得先学2个月 Java 语法，好像能写 黑框框程序了。
再学 2月 数据结构，好像用处不大。
再学 半个月的数据库，好像会了点啥，好像有不会啥。
再学了很久的多线程，网络…
好像能写个控制台的客户端服务器…然后？？
像后端这里就属于“厚积薄发”。
就像游戏中的 adc，前期闷头发育，等发育出 关键装备 / 关键等级，然后才能在团战中有所作用。
但是！一个adc只有装备（知识），还不行！
还必须要熟练，这需要不断练习（敲代码，复习知识点），才能成为大佬的存在。
如果缺少练习，装备再好（学的多，学历好），都是白搭，一碰就碎。
而前端，就像 辅助 / 打野，无论前中后期，都有它的身影。
一会去蹲个中路，再绕个草丛去杀个 adc。。。
就是说，体验感是良好的。
但是 打野也是需要装备和等级，是需要刷野的（练习实现个网页，不要求带功能，至少能做出来那种效果），才能发挥作用。才能成为大佬。
后端也别灰心，马上就能看到曙光了。
等 博主 Servlet 学完之后（博客也会到位），你们和我，就能写出一个完整的网站。
总之，前面所学的，都为了后面的内容，做铺垫。
但是，你们要明白一点！
前端也不是但成婚的就是“做页面”，这也是一个复杂的“工程”。
现在的很多网站 和 APP，非常强调用户体验，也就包含了很多的复杂的业务逻辑。
大部分业务逻辑，其实都是前端来实现的。
后端的定位，更偏向于 “提供数据”。
前端的定位，既是要能够与用户交互，更是能实现一些业务逻辑。
凡是 和业务搭边的，这件事就很难做。
业务的复杂程度有多高？
你怎么想，想破头！
你也想不出来的！！！
实际场景中业务逻辑复杂程度，是超乎你的想象力的。
像什么引入的各种框架和工具，本质都是为了 更方便的解决业务上的问题。
但是！通过现有的工具/框架，有的时候可以满足需求，有的时候又不一定。
这也是为什么前面说，业务需求的复杂度，经常会超乎你的想象。
如果当前的框架解决不了，就需要自己动手 造 / 魔改的 框架 / 库。
比如支付宝，你登录的时候，需要人脸，号码，短信，来验证你的身份信息。
使用我们现有的逻辑，是无法达到 目的 的。
总之，无论你学习的什么方向，要想学好，都需要深入研究。
不是一下就能成为佬的。
====================================================================
老规矩：Ctrl + C 和 Ctrl + V，再删除不需要的部分。
至于专属的html文件我们在做 导航的时候就已经创建好了。【writingblog】
我们开始“搬东西”了。
然后，就是创建一个专属的 样式文件，并使用 link 标签 来引入 这个文件。
博客编辑页，这里是 我们的又一个重点。
先来书写页面的框架。
我们先来搞定 标题区。
标题区部分，完成。
接下来，就是编辑区。
也是这个网页最最复杂的部分。
我们所要做的是：引入 markdown 编译器。
PS：坑不是我们自己去实现一个markdown，吹牛皮，还是要有个度的。
虽然我们自己去实现一个markdown 编译器，是可以的。
但是要求非常高！
markdown 编译器有一个核心功能：预览编辑效果 / 转换效果。
预览功能，就是把 已有的文件 进行分析，并且把它转换成对应的 HTML 的样式。
换个说法， 预览功能，需要通过代码来分析 md 文件内容，进行解析，并渲染成 带样式 的 html 片段。
其中的 解析过程，非常复杂！！！
这块主要是涉及到 “编译原理” 相关的内容。【我不会。】
不过，计算机专业的朋友，应该都接触过。
毕竟这是计算机专业中几个硬核课程之一。
学习这门学科的目的，就是为了能写出一个简易的 C 语言编辑器。
不过难度很大！ 可以说是万一挑一。
几万个学生，可能只有那么一两个能做到。
写一个 C 语言编辑器，用什么写？
你可以使用 c 语言 来写。
这就涉及到一个很有意思的问题，是先有鸡，还是先有蛋。
也就是说，先有 语言，还是先有 编译器。
看起来很矛盾，但其实并不矛盾。
其实我们可以讨论：第一个 C 语言编译器是怎么来的？
这个可以认为是，先通过汇编语言，实现一个 C编译器的最小功能集合。
然后再基于 C 语言来试下完整的编译器。
大概就是这么来的。
有了 c 语言之后，就可以写 C++ 编译器了，有了 C++之后，Java，Python，Go…等等类型的编译器，也就都可以写了。
那么，既然 C语言的编译器需要使用 汇编语言 来实现。
那么，汇编语言又是怎么来的？汇编需要编译器嘛？
不太需要！
汇编，其实就是和机器指令 一一对应的。
这个就很容易进行相互转换：从汇编转换成机器指令这件事很简单。
所以，汇编就不太需要编译器，就需要一个简单的转换过程。
机器指令就是 CPU 厂商 在设计生产 CPU 的时候，提供的。
归根结底，还是 CPU 做主导体位。
毕竟 CPU 是当前这个时代，人类科技的巅峰之作。
因此，我们要想去分析一个 markdown 文件，那么你们就需要有一些 编译原理的知识背景。这个我们就不做过多讨论。【反正我是不会】
既然如此，我们做不到实现一个 markdown 编译器，又该如何去完成这个部分呢？
引入现成的 markdown编译器 即可。
直接通过 嵌入的方式，放入到我们所构建的页面中即可。
前端这个圈子，不仅仅是 JS + DOM 本身，同时还有非常海量的第三方库。
也就是大佬们写好的一些组件，我们可以直接拿来使用、
因此，markdown 编译器，也是有现成的。
关于这个第三方库，我们又称为“生态”。
我们在进行实际的开发，光会语言本身，是远远不够的。
还需要对整个生态都要有一定的理解。
生态，它还有一个名字：技术栈。
技术栈：就是说你都会那些东西，这些东西就是指一些 第三方库 / 组件，可以帮助我们解决具体问题的一些东西。
这也是我们所需要学习的一个部分。
要注意！ 前端 和 后端，要想学得好，其实都挺难的。
核心知识本身没有什么，但是这个生态很庞大。
Java 的生态已经非常庞大了。
但是 JS 前端的这个生态，其实是和 Java 生态相同的体量。
在 Java 这个圈子里面，做后端开发，我们可以找到各种各样的组件和库，来帮我解决实际问题。
比如说，我们想实现一个登陆页面里面，引入一个手机验证码的功能，或者想使用一个简单的验证码。
其实这个时候，都不用我们自己实现，直接找一下开源的组件，引入一下就能用。
写起来就非常简单容易。
这种操作，在前端里面是非常常见的。
就像这里的 markdown 编译器，我们自己写很复杂，但是我们可以直接使用现成的资源，直接引入使用即可。
博主 写的是Java，后端的库有很多，博主只是学习一些比较重要和常用的框架（Spring + Tomcat）。还有很多海量的生态，等待博主和大家一起去探索。
总之，学就对了！
回到主线，说到 markdown 的引入。
markdown 的版本有很多。我们具体使用那个组件呢？
我们选择使用 editor.md 这个组件。
这是一个国内大佬写的组件，它的文档都是一些中文的，是非常友好的。
下面，我们就来引入这个 markdown。
到这里，我们就成功引入 这个markdown。
其实前端这里引入第三方库，是非常简单的。
一般就是手动把人家的代码下载好，拷贝到我们自己的项目目录中
然后就可以在HTML中引入人家的指定的 CSS / JS 文件了。
引入了文件，代码也就自然而然的生效了。
注意！这里文件名，非常重要！
这个文件的名字，会影响到后续代码中的一些相关写法。
要想使用这文件，来达到 在代码中引入markdown 的 目的。
我们需要 在 博客编辑页的 HTML 文件 代码中，引入人家的 css 和 js
首先，和下面的图片一样，引入框选的代码。
注意！建议使用相对路径来输入，先输入 ./
因为 我的代码 和 markdown的文件夹是同级目录。
然后根据编译器的提示，选择与我下面框选部分相同的路径即可。
这样我们就能确定 路径的正确性。
唯一需要注意的是：第二行引入的文件，还没有创建。所以先直接抄上去
之所以， 第二行的 “./js/jquery.min.js” 的路径，在敲的没有提示。
是因为 jQuery 不是 editor,md 的一部分，而是 editor.md 所依赖的库。
jquery 可以说是 JS 世界中，最知名的第三方库，没有之一！！
站在十年前，jQuery 在 JS 中的低位，就相当于 Spring 在 Java 中的低位。
但凡是写一个前端的程序，都会使用到 jQuery。
正因为 jQuery 非常非常火，所以很多的第三方库，也要依赖 jQuery。
我们就需要通过其它手段来安装引入 jQuery
因为 jQuery 是另外一个库，所以不能说直接拿过来就能用。
需要我们先去下载安装它。
此时，我们的引入就完成了、
虽然 jquery 这种引入的方法，在 专业的前端开发中不会使用这种方式来下载安装jquery，
因为我们确实有更好的方法，但是当前对于我们来说，这就是最简单的方法。
接下来，就是初始化 editor.md
记住一定要和自己磁盘文件相匹配，要不然代码是跑不起来的！！！
保证正确的路径，就是保证各种依赖的资源，文件，目录，图片，数据库…这些都得一致。
正是因为我们要保证 依赖 数据是对应的。
这就会导致 搭建环境，是个麻烦事。
为了解决这个环境不一致的麻烦问题，聪明的程序员，发明了 docker、
以后，在工作中，大概率会用到。
docker：相当于是一个轻量的虚拟机。（直接带着整个系统）
你不是说，环境和依赖难搞吗？
docker 直接把整个系统打包给你，这不就行了嘛。
这就好比，我们在家想吃海底捞，按照海底捞那个步骤，那个材料 去配置。
做出来的效果不理想！不是我们想要的那个味。
这个时候，我们就可以通过 定购 海底捞的外卖。（打包整个系统给我们）
直接吃就行了。
此时，我们再刷新我们的网页。
但是，距离模板相差，还是有大的。
此时我们就完成了所有的页面设置了！
等等，，，
还差点东西，模板中的输入框中有一行预览文字
我们可以使用 input的 placeholder 属性 来实现。
placeholder：就是起着一个提示文本的作用。
未输入数据之前，输入框中回显示 placeholder 的 值 / 文本内容。
但是！一旦输入框中输入了数据，显示 的 placeholder 的值，就会消失。
我们只能看到输入的数据。
我们来看一下效果。
到这里，我们的项目也就差不多完成了。
其它的，你们想优化的，自行尝试。
另外，这里并没有使用 JS 的代码。
这是因为：这个系统主要是通过 JS 来实现前后的交互。
等后端部分，学得差不多的时候，我可能还会把它拎出来，加以完善。
<!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>博客编辑页</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/writingblog.css">
<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="./editor.md/css/editormd.min.css">
<script src="./js/jquery.min.js"></script>
<script src="./editor.md/lib/marked.min.js"></script>
<script src="./editor.md/lib/prettify.min.js"></script>
<script src="./editor.md/editormd.min.js"></script>
</head>
<body>
<!-- 导航栏 -->
<!-- 为了能够在后续过程中，添加样式等操作，建议都引入一个类属性 -->
<div class="navigation">
<img src="./image/2.jpg" alt="">
<span>我的博客系统</span>
<!-- 空白元素，用于站位置 -->
<div class="spacer"></div>
<a href="bloghome.html">主页</a>
<a href="writingblog.html">写博客</a>
<a href="#">注销</a>
</div>
<!-- 包裹整个博客编辑页内容的顶级容器 -->
<div class="blog-edit-container">
<!-- 内容分为两个部分：标题区 和 编辑区 -->
<!-- 标题区 -->
<div class="title">
<!-- 输入框 -->
<input type="text">
<button>发布文章</button>
</div>
<!-- 编辑区：放置 markdown 编译器 -->
<div id="editor">
</div>
<script>
// 初始化编译器
let editor = editormd("editor",{
// 这里的尺寸必须在这里设置，设置样式会被 editormd 自动覆盖掉
width: "100%",
// 设置编译器的高度
height: "calc(100% - 50px)",
// 编译器中的初始内容
markdown: "# 在这里写一篇博客",
// 指定 editor.md 依赖的插件路径
path: "./editor.md/lib/"
});
</script>
</div>
</body>
</html>
/* 这是博客编辑页专用的样式文件 */
/* 容器 */
.blog-edit-container {
/* 尺寸 */
width: 1000px;
/* 页面高度 - 导航栏高度 */
height: calc(100% - 50px);
/* 水平居中 */
margin: 0 auto;
}
/* 先针对标题区 的 div 下手 */
.blog-edit-container .title{
/* 与分类元素 .blog-edit-container 一样：1000px */
width: 100%;
/* 标题区域高度 */
height: 50px;
/* 为了方便调节尺寸，我们使用 弹性布局 */
display: flex;
/* 垂直居中 */
align-items: center;
/* 使子元素 输入框 和 按钮 靠两边放置，中间留个缝 */
justify-content: space-between;
}
.blog-edit-container .title input{
/* 尺寸 */
/* 宽度我们要考虑一下 */
/* 总长度是1000px，我打算给按钮设置 100px 的宽度*/
/* 那么 输入的宽度就应该是 900px */
/* 但是模板中，两者是不能紧挨着的 */
/* 所以我给 890px */
width: 890px;
height: 40px;
/* 边框圆角 */
border-radius: 15px;
/* 去掉边框线 */
border: none;
/* 去掉轮廓线 */
outline: none;
/* 背景颜色 和 透明度 */
background-color: rgba(255, 255, 255, 0.75);
font-size: 20px;
padding-left: 10px;
}
.blog-edit-container .title button{
width: 100px;
height: 40px;
/* 背景颜色 */
background-color: rgb(240, 163, 21);
/* 字体颜色 */
color: white;
/* 去掉边框线 */
border: none;
/* 去掉轮廓线 */
outline: none;
/* 边框圆角 */
border-radius: 15px;
}
/* 点击时，按钮背景颜色为黑色 */
.blog-edit-container .title button:active{
background-color: black;
}
#editor{
border-radius: 15px;
/* background-color 只是针对当前元素进行设置，不会影响到子元素 */
/* background-color: rgba(255, 255, 255, 0.75); */
/* opacity 会影响到子元素 */
/* 给最外面的父元素设置了透明，里面的元素也会一起半透明 */
opacity: 75%;
}
=================================================================
其实实现一个 网页样式 / 布局，本身并不难，但是可能比较麻烦。
最后
资料过多，篇幅有限
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
与分类元素 .blog-edit-container 一样：1000px */
width: 100%;
/* 标题区域高度 */
height: 50px;
/* 为了方便调节尺寸，我们使用 弹性布局 */
display: flex;
/* 垂直居中 */
align-items: center;
/* 使子元素 输入框 和 按钮 靠两边放置，中间留个缝 */
justify-content: space-between;
}
.blog-edit-container .title input{
/* 尺寸 */
/* 宽度我们要考虑一下 */
/* 总长度是1000px，我打算给按钮设置 100px 的宽度*/
/* 那么 输入的宽度就应该是 900px */
/* 但是模板中，两者是不能紧挨着的 */
/* 所以我给 890px */
width: 890px;
height: 40px;
/* 边框圆角 */
border-radius: 15px;
/* 去掉边框线 */
border: none;
/* 去掉轮廓线 */
outline: none;
/* 背景颜色 和 透明度 */
background-color: rgba(255, 255, 255, 0.75);
font-size: 20px;
padding-left: 10px;
}
.blog-edit-container .title button{
width: 100px;
height: 40px;
/* 背景颜色 */
background-color: rgb(240, 163, 21);
/* 字体颜色 */
color: white;
/* 去掉边框线 */
border: none;
/* 去掉轮廓线 */
outline: none;
/* 边框圆角 */
border-radius: 15px;
}
/* 点击时，按钮背景颜色为黑色 */
.blog-edit-container .title button:active{
background-color: black;
}
#editor{
border-radius: 15px;
/* background-color 只是针对当前元素进行设置，不会影响到子元素 */
/* background-color: rgba(255, 255, 255, 0.75); */
/* opacity 会影响到子元素 */
/* 给最外面的父元素设置了透明，里面的元素也会一起半透明 */
opacity: 75%;
}
* * *
[]( )总结
=================================================================
> 其实实现一个 网页样式 / 布局，本身并不难，但是可能比较麻烦。
### 最后
[外链图片转存中...(img-hSoK8yke-1715881964249)]
[外链图片转存中...(img-cQSlXmRD-1715881964249)]
**资料过多，篇幅有限**
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
>自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
扫一扫
2068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
