欢迎回来｡
让我们建立我们的第一个网站｡
现在, 我已经创建了一个名为Web Server的文件夹, 因为这将是我们目前的web服务器｡
在这个web服务器中, 我们有一个索引HTML文件, 它将是创建HTML文件的扩展名｡
我们有脚本JS, 它是编写JavaScript的扩展, 就像我们有py来编写Python一样,
然后我们有样式CSS来编写CSS样式｡
在这一节中, 我将使用sublime text和我的AI term terminal,
但你可以使用任何你想要的开发工具｡
我喜欢用这些只是为了屏幕录音｡
他们帮了忙, 因为这里又干净又漂亮｡
它不会给予我太多的提示, 这样我也可以犯错误, 并向您展示我如何修复错误｡
但是, 您可以使用Visual Studio代码, 无论您喜欢什么｡
现在您可以看到, 所有这些文件都是空的｡
但请记住, web服务器只是将这三个文件提供给浏览器, 以便浏览器可以显示页面｡
让我们从HTML开始｡
我们如何编写HTML？
Sublime text实际上让我做了一些有趣的事情, 如果我输入HTML, 然后点击tab｡
它会自动为我填充｡
好吧, 好吧, 我知道了
我有点作弊了, 但是, 嘿, 我不想让你烦死｡
这是一个标准的HTML文件, 因为我有. html扩展名｡
如果我有这种类型的语法, 我可以写HTML, 这并不困难｡
我们在这里有一个带反斜杠的开始标记和结束标记｡
所以我们有一个网站的标题｡
这就是选项卡上显示的内容｡
所以说我的｡
网站｡
很有创意｡
这是头然后是身体｡
这就是网站上显示的内容｡
所以在这里我可以说我是一个网站大师｡
就像那样｡
我们已经创建了HTML文件｡
现在看看这个
如果我现在打开索引｡ html, 如果我右键单击这里, 比如说在窗口中打开,
或者您甚至可以双击该文件｡
如果我双击这个, 看看那个｡
我是站长｡
只是简单的文字｡
没什么太疯狂的｡
但我刚刚创建了我的第一个网站｡
让我们继续CSIS｡
CSS的语法与html css的语法不同｡
像这样｡
我们可以给予它添加一些样式的html元素｡
在我们的情况下, 让我们说身体｡
我可以说身体｡
然后是花括号｡
在这里我想有背景, 让我们说颜色, 我们将去｡
嗯嗯嗯
我们选绿色吧｡
如果我保存这个｡
然后刷新页面｡
嗯嗯嗯
什么也没发生｡
这是一个很小的细节, 再说一次, 这不是一个web开发课程, 所以我们不需要太担心｡
但实际上, 首先发生的事情是HTML文件被发送, 而HTML文件实际上是浏览器唯一读取的内容｡
在HTML文件中, 我必须说, 嘿, HTML｡
顺便说一下, 我们还有一个CSS文件｡
你也可以在网站上使用它吗？
所以我们可以在head标签中这样做吗？
通过使用一种叫做链接标记的东西｡
所以一个链接标记｡
我们可以去掉一些｡
我们只需要说, 嘿, 这是一种文本CSS, 它有一个叫做H ref的东西｡
H ref只是简单地说, 嘿, 这个文件在哪里？
在我们的例子中, 因为它和我们的索引HTML在同一个文件夹中, 我们可以简单地说它是样式点CSS, 因为只要查找Solidot
CSS, 样式文件就在那里｡
现在, 如果您还记得的话, 我们还需要包含关系样式表｡
我只是把它移走了, 这样我们就可以看到我们在这里写的东西｡
所以如果我们做样式表, 这只是一个语法, 如果你想包含一个CSS文件, 你必须习惯它｡
如果我保存这个然后回去刷新｡
嘿, 看那个｡
我丑陋的网站｡
让我们把它弄大一点｡
我的丑陋的网站与绿色的背景颜色现在有一些风格｡
如果我再次打开开发者工具｡
我点击刷新｡
你看那个｡
我得到了一个HTML文件和一个CSS文件｡
太棒了｡
所以我创建了自己的网络服务器｡
好吧, 我知道了
我们甚至可以在这里编写JavaScript｡
但是, 这又不是JavaScript课程, 所以我们不需要担心这个问题｡
给你的, 谢谢
我刚刚写了一些JavaScript, 这有点像用Python写print｡
如果我再刷新一次页面｡
同样, JavaScript文件不会显示,
因为我们必须再次告诉索引HTML, 我们需要一个JavaScript文件, 通常JavaScript文件包含在脚本标记中, 通常在正文的底部｡
所以我们把它关上吧｡
在这里, 不使用ref, 我们只需要对源代码使用CRC｡
再问一次, JavaScript文件在哪里？
它在脚本JS中, 如果我保存它, 然后刷新页面｡
你看那个｡
我们现在正在加载脚本, JJ的文件, 它所做的就是, 如果我们单击控制台选项卡,
它会在控制台中打印一些内容, 而控制台是JavaScript使用的内容｡
但我们所关心的是, 我们能够提供这三个文件｡
我们所做的是创建我们的第一台服务器｡
但你可能已经注意到了｡
当你到这里来的时候｡
查看我们拥有的URL路径｡
这不是你通常在网站上输入的内容, 对吗？
我的意思是, 我们看到这里的网站xkcd. com, 以及. com使用http｡
这是一个真实的网址, 对吧｡
很遗憾地告诉大家, 我们实际上并没有创建一个真实的web服务器, 因为我们所做的只是向浏览器提供一些文件,
如你所见, 这些文件来自我们的计算机｡
所以它所做的就是浏览器说, 嘿, 我要显示这些文件, 这些文件就在你的计算机上｡
所以本质上我们有一个运行浏览器的网络服务器, 但这不是真实的生活中的工作方式｡
为什么会这样呢？
想象一下如果你有自己的网站｡
你真的想让来自世界各地的人直接通过你的电脑访问你的网站, 从你的电脑上抓取文件吗？
我的意思是, 没有｡
好吧, 我知道了
有很多安全问题｡
性能方面有很多问题｡
你必须让你的笔记本电脑一直开着, 这样人们才能访问你的网站｡
相反, 我们需要一个web服务器, 顾名思义, 它提供文件服务, 专门为浏览器提供文件服务｡
在世界上某个我不用担心的地方｡
我的电脑上没有｡
有人拥有那台机器, 有人拥有那台电脑, 它一直开着, 所以每当我们访问一个网站或链接时,
它总是在运行, 并将这些文件发送出去｡
所以我们最后还是回到Python, 因为我们要做的是做一些更复杂的事情, 而不仅仅是在我们的机器上保存这些文件｡
相反, 我们希望使用Python构建一个真实的服务器, 我们可以部署它, 这样人们就可以在世界任何地方访问我们的网站｡
现在你可能还不明白｡
这整个过程可能对你来说没有完全的意义, 因为我们才刚刚开始｡
但别担心, 到最后, 一切都会有意义的｡
现在让我们暂时忘记浏览器, 开始构建一个真实的服务器, 比我们之前所做的更复杂, 它只是一个包含这三个文件的文件夹,
我们只需双击索引｡
html中找到｡
下一个视频里见｡
再见, 再见, 再见