[音乐播放] 大卫·马兰:好,欢迎回来。 这是CS50。 这是7周结束。 而且这是清道夫的结束 从追捕问题集4 你可能还记得。 恢复所有的经过 员工的JPEG文件, 你受到挑战,如果你愿意, 拍摄自己与尽可能多的 那些人的,你可以。 我们得到了一大堆的意见书 在过去的几周里, 事实上,相当多的正确中午前 今天,其中一些是那些在这里 在这里抓到in--看起来like--安嫩伯格 大厅办公时间,一个在这里 洛厄尔房子尼克。 这里的拉蒙被抓的电话。 这是在CS50的午餐。 这是杰森Skyping与 一个更有创意的同学, 谁给他打电话这种方式。 我们不知道这是什么了。 [笑] 大卫·马兰:但 这是值得一千兆字节。 这里是长安,谁 硬是跑了舞台 为了避免被偷拍1 一天,但最终被抓获。 这是尼克。 这是尼克。 这是尼克。 这里是艾莉森下来的领域。 和Zamyla即使被发现 在舞厅的竞争。 因此,我们将通过 这些照片,弄清楚 谁提交的最 最早和奖励 1神话般的奖品,如 承诺规范。 同时,我们也将跟进有关 被涉及的空间。 一对夫妇announcements--所以午餐 是,再次,本周五下午1:15。 如果您想加入我们的行列, RSVP在该URL在这里。 杰森再次出现在这里从一个 该路段的一两年 回来,刚巧 落在万圣节。 而事实上,他装扮成一个 南瓜特定的一年。 如果你看这一节 他从2011年段 8,如果你很好奇, 在CS50.tv,我觉得 这是在这一年中 他的空气泵工作。 如果再观看 在2012年类似的部分, 你会看到这个杰森多少瘪, 由于该诉讼已不再发挥作用, 这仅仅是说 本周五,如果你愿意 想刻有Daven南瓜 和加布等人,RSVP的头 在cs50.harvard.edu地址。 它有望成为很大的乐趣。 Daven,我们被告知,已刻 南瓜他所有的生活。 加布里埃尔来自巴西从未 雕刻南瓜的万圣节。 所以在那里与他们他在学习。 研讨会,meanwhile-- 所以你很快就学会 什么我们的期望是 最后的项目,基本上 将归结为 设计和实现 最感兴趣的任何项目 你,虽然经审批 从你的教学研究员的指导。 朝的结束 学期中,我们介绍了一些 研讨会,这是可选的类 为首的教学研究员和哈佛 工作人员,横跨朋友,当然 校园里,各种主题, 相切的 课程的基本大纲 但仍然适用的,有趣的, 不同的潜在最终的项目。 例如,第一,如果你想 注册,头部到网址那里。 这就是阵容 今年的研讨会孤单。 但要意识到我们有几十个 从过去几年的研讨会,所有这些 在研讨会菜单链接 课程网站的选项。 所以,如果你正在考虑 超越你的舒适区 或者挑一些新的技能, 例如,编程iPhone 与雨燕,新的语言的应用程序 苹果或Objective-C的 或Android应用程序或编程[? CUE?] 灯泡,或任何的主题 在这里,更由于支票 从注册页面。 所以我们开始和结束的 与看着HTTP周一。 这么快refresher-- HTTP, 超文本传输​​协议。 但是,这究竟意味着什么? 这是什么意思呢? 那是一只手? 我知道你只是摸不着头脑。 但是你要提出HTTP是什么? 听众:如何电脑 与[听不清]通信。 大卫·马兰:我错过了最后一部分。 计算机通信with-- 听众:互联网服务器。 大卫·马兰:Good--与互联网 服务器,并且具体地,网络服务器。 因为回忆,有一堆 在互联网上的服务,其中的一些 你可能使用的日常聊天的 和消息,聊天和Web和电子邮件, 等。 和HTTP仅仅是 协议的Web浏览器 沟通与说话的时候 Web服务器,反之亦然。 并且,在该模拟 人类世界可能是, 我伸出我的手有些抖 其他人的,他(或她) 确认通过扩展 他或她的手为好。 所以,这只是一个协议, 一组约定。 什么确实是这些公约? 那么,它只是归结为 发送邮件来回, 因为我们在这里描述。 还有的在几个方面 您可以发送这些消息。 也许最 常见的被称为GET。 我们会看到一个对比 这之前很长。 但是,从浏览器中的GET请求 服务器只是看起来像这样。 这是一堆文字,它使得 里面的一个虚拟的信封。 在该包络线的外侧 走了几个片段的细节。 有什么需要去上 信封,可以这么说, 为了得到这样的一个请求 这从我的Web服务器? 是啊。 听众:您的IP地址。 大卫·马兰:我的IP地址 在From字段,可以这么说, 并且,当然,在 接收方的IP地址。 但在网络分组的情况下, 我们需要更多的细节 这是不够的只是 送的包络线到一台服务器, 因为该服务器可能 听不同类型的 互联网流量。 那么还有什么需要我们 除了收件人的IP? 是吗? 听众:是不是TCP? 大卫·马兰:好。 TCP-- 听众:地址。 大卫·马兰:地址, 或端口,因为它被称为。 接近,但一TCP端口号。 并有一堆这些。 但肯定是最 熟悉最终应 是80,这是默认 1用于Web流量。 而另一位熟悉 1很快就会443, 这是用于安全网络 交通,即开始以https网址。 原来这就是云 里面那个信封。 并获得/只是手段,给 我的默认网页。 给我的硬盘的根目录 开车的Web服务器上。 并希望,在网络 服务器将,OK响应 及数量200,这仅仅是 公约说,是的,所有的 的确确定。 这里的页面。 所述网页的类型是要 是文字,但更具体地,HTML 我们正要潜入回。 和点点点只是 手段,这里是HTML。 而这也正是我们 今天拿起故事, 实际编写HTML, 超文本标记语言,它 是语言中 网页被写入。 这是不是一种编程语言。 有没有功能 或循环或条件。 它是一种标记语言, 也再次看到今天, 它允许您指定 如何构建和风格化 美学上的网页。 所以这是一个 我们只有真正的页面 看了看,如果简单地说,在星期一。 并注意到一些 显着特点。 有很多开放的弯角 支架和关闭角度的支架。 在这些弯角之间 括号内的话。 我们要开始 调用这些话的标签。 因此,开放式支架头 与封闭的支架头 是在打开和关闭标记, 或在开始和结束标记 HTML元素的分别, 因为我们把它叫做,称为头。 和相同的专业术语适用 到身体中的HTML等。 什么是不错的 HTML--而事实上,我们将 花非常少的时间就可以了, 因为你大多只是弄清楚 什么功能它都有,当你 其实有一个具体的问题, 以solve--你会发现, 浏览器是非常愚蠢的。 它只是要do--没有什么不同 一个computer--你告诉它的事情。 因此,如果你已经打开 支架HTML在最高层 那里,基本上 只是意味着,嘿嘿,浏览器, 这里谈到HTML编写的网页。 当它看到开放式支架 头,这只是意味着, 哎,浏览器,来了头, 我的网页最上面的部分。 当它看到一个封闭的支架 头,那只是意味着,嘿嘿, 这就是它的头部。 待机别的东西。 和别的东西是 显然将是本体。 而当你没有一个标签,像 你刚才你好,逗号,世界, 这只是将是原始文本 最终显示在屏幕上。 现在,你会发现太多 这里的压痕。 你大概可以推断出 怎么我们风格化了。 每当我打开一个标签, 可以这么说,我缩进。 每次我关闭 一个标签,我取消缩进, 类似的精神,大括号。 而除此之外,我是那种 用我的判断。 请注意,我没有打扰打 请输入标题标签里面。 为什么呢? 好吧,我刚刚决定它看起来 少许清洁剂给我,人, 只是懒得做。 如此反复,有一些 判决称只是 好像有C或任何语言。 但是请注意过,这个压痕 适合于一个心智模式, 不要过度复杂化。 但是,一棵树,对不对? 如果你想一个网站 页,显然写 这样,作为被 很好地缩进的方式, 你几乎可以认为开放式支架 HTML封闭的支架标记标定 一个节点的根,一个家谱 在树上的款式风格节点 我们研究了上周五。 事实上,我们在这里的权利 我们会打电话给一个DOM,D-O-M,文档 对象模型中,说一个奇特的方式 表示该HTML树。 并注意HTML有,我们会说, 就像一个家庭树,两个孩子。 左边是头。 右边是身体。 而且,正如一个无意识的思想运动, 当然,头,有多少孩子 根据这个结构? 所以只有一个,title-- 这就是为什么我们有 箭头从头部将标题。 因此,这好像是人在 家族树刚一后代。 然后标题本身就 可以说有一个孩子了。 回想一下,在HTML有 你好,逗号,在它下面的世界。 而我只是一个在它绘制 椭圆形而不是矩形刚 传达语义,即使 它是树中的一个节点,可以这么说, 这有点本质的不同。 这不是一个标签。 或者更确切地说,它不是一个元素。 这只是一个文本节点,如果你愿意。 但是,这些是完全 任意人的约定。 这是刚才我的方式 代表我会作为一个集合体 调用该文档。 而作为一个在旁边,在事 超级左上角, 开放式托架感叹号文档 HTML类型,这就像是一个标签, 但它是愚蠢的角落情况 这只是在那里,复制和粘贴 来指示浏览器 这是HTML 5版本。 世界在不断变化的是什么 代码在页面的第一行应该是。 这也就意味着5版本。 所以它完全不是那么回事 看起来像其他人。 好吧,让与 说,现在你会明白 这还算这种愚蠢的 纹身的人了。 [笑] 大卫·马兰:好吧, 现在,让我们真正的潜水 为做一些与此有关。 你会记得,最后一次 我打开了CS50电器 我做了一件为 简单的开放gedit中。 我保存的文件即使在 我desktop--无处special-- 为hello.html的。 因此,让我这样做 again-- hello.html的输入。 现在,在这个文件中,我将 继续前进,复制我们刚刚 saw--文档类型的HTML然后我要去 做开放式支架HTML封闭支架。 然后我要先发制人 打开和关闭标记。 为什么呢? 只是让我不要忘了后面。 这是一个好的做法,比如开放 闭花括号的一次。 然后呢紧随其后? 你能想到的纹身。 听众:头。 大卫·马兰:头。 然后在这里,我 有标题,我想。 而标题是随意, 你好,世界接近冠军。 再往下这里,身体的, course--那么我们关闭body标签。 然后只是有些冗余, 我有同样的事情到这里。 所以我说这是一个网页。 这是后话了 现在可以生活在网络上, 尽管,当然,它的字面意思 住在我的桌面上现在。 不过说实在的,如果我减少gedit中, 我将我的桌面图标上看到的。 即使是这样的设备, 你可以这样做在Mac OS 没有TextEdit或 窗户用记事本偶数。 如果我继续和双击 即使和选择 - 好了,让我们 没有选择,因为 Chrome的不开放。 让我们继续前进,打开浏览器。 然后执行命令-O开放 并导航到我的桌面 并打开文件。 这是怎样一个浏览器解释 HTML中,从上到下,从左到右。 嘿,浏览器这里的HTML。 这里的负责人。 这里的称号。 这里的身体。 事实上,这是怎么 它呈现的网页。 但是要注意的URL。 没有,你可以拉起来这个特定的 在您的笔记本电脑的页面,现在, 甚至里面的 通过该URL家电, 因为文件://表明它实际上 在我的文件系统,我的硬盘, 不是你的。 因此,这是不是所有的有用。 现在,让我们走向移动 用一个实际的Web服务器。 而事实证明,在CS50电器 不仅仅是一个环境, 你可以写C代码和编译 并运行它,就像你一直在做。 它也已被配置成通过所述 人员来表示一个典型的网络 服务器在Internet上, 可能是你付 或一个就是在所谓的云。 而且它的运行 标准的开源免费 软件,例如,一些 叫阿帕奇,这也许是 仍然是最流行的Web 在世界上的服务器软件 成千上万的网站今天使用。 它甚至还可以有 软件如MySQL, 这是一个数据库服务器 我们最终会到达, 这仅仅是说 我可以开始治疗 我的设备作为一个完全成熟的服务器 我不是支付其他地方。 它只是生活在自己的笔记本电脑 发展和方便的目的。 因此,让我们继续前进, 利用这一点。 我要继续前进, 打开一个终端窗口。 而且我要继续前进, move--实际上,第一个我 要导航到我的桌面。 如果我做LS,有hello.html的。 我要去 未来,并开始使用 我们已经新目录 在今天之前不能使用。 hello.html--我要动 以../vhosts虚拟hosts-- 更多的,在未来 - 然后 到一个名为localhost目录下, 这是考虑到几乎昵称 任何一台电脑,无论是在Mac,PC, 或Linux计算机,然后 具体到一个目录中,我们, 工作人员已为您创建的时候 您下载的所谓家电 公众。 正如它的名字所暗示的,任何事情 我把这个文件夹中,在理论上, 是要现在是 公开的,至少人 直接谁拥有 连接到我的电脑。 所以,现在让我继续前进, 做cd到同一个目录下 这样我就可以看到什么 怎么回事,输入ls。 事实上,这就是 在那里嘛。 我现在,因为我已经把这种说法 文件hello.html的一个目录的内 称为目录的公开内 目录内为localhost 所谓虚拟主机,这 感谢CS50人员 已被预先配置成 您的Web服务器的根目录, 我现在希望能做到这一点。 我要开辟一个新的选项卡。 我要去不予立案://。 我将用实际 HTTP / localhost,该 再次,是昵称 对于我自己的服务器。 然后我会去到什么 文件名,只是要清楚吗? 哪里是这个故事的大概走向何方? hello.html的。 所以,换句话说,我想现在这个 是我自己的电脑,我自己的家电, 就好像它是一个真正的服务器。 它的绰号为localhost。 不过想想本地主机作为像 Facebook.com google.com,等等。 这只是我的本地名称。 然后最终我要的是在 硬盘驱动器的根目录,可以这么说, 或Web服务器的根, ERGO正斜杠,然后 文件名hello.html的。 让我缩小并按下回车键。 事实上,现在有我的网页。 因此,它是略有不同的。 它只是为给人留下深刻印象。 这是旧版本。 让我缩小字体回去。 这是老了。 这是新的。 但是,什么是根本上发生的事情 现在是HTTP的正在被使用。 让我们把这个更加清楚一点,或者, 如果你愿意,更复杂一点。 让我去右下角 角落我的设备的。 并注意到这一切 时间,还有的是一个数字。 这是唯一的地址 您CS50电器。 这是一个私有地址, 所暗示的172.16, 只有您身体只是手段 可以访问这个Web服务器。 一切都和防火墙 很好地保护,其余 因为这个世界的寻址。 现在发现,虽然如果我去 这个地址,而不是在我的器具, 但在Mac OS--我要去 回头看过来。 这是我的Mac了。 而现在我要去开拓 这个版本的Chrome浏览器在这里。 我要去到http://172.16.25 /我忘了rest-- 133。 所以我打算从我的Mac访问 该IP地址/hello.html输入。 而现在,我从我的Mac看 我的CS50电器,谁的 IP地址是 数,的确表现 像在互联网上的web服务器。 它没有一个很好的容易 记得名字一样Facebook.com, 但它使用HTTP 显然,即使铬 一种是简化了的世界 对我们来说却没有向我们展示HTTP。 但是,这确实是完全相同的。 Chrome浏览器只是节省一些 击键这些天。 这就是我们现在看到的。 所以这是一切优秀和良好。 但是,这是一个非常深刻印象的页面。 让我进去做什么 有一点不同了。 因此,让我回去gedit中。 而代替打招呼, 世界,让我们把图像。 我从before--让我去称 进入我的本地目录中公布。 让我继续前进,复制 一大堆从今天的文件 从我的Dropbox文件夹复制到这里。 现在,如果我输入ls,看 在所有这些文件 我已经通过分布 当然网站提前的今天, 其中之一是静止hello.html的。 因此,有那一个。 而回忆这段痴心一片 从去年时间 - cat.jpg。 所以让我尝试嵌入 cat.jpg我的网页里。 我要继续前进 做cat.jpg,保存。 让我再回到浏览器。 让我放大了 字体现在重装。 哎呀,在这里我把这个? Standby--我还有老 版本从桌面打开。 因此,让我进入我的虚拟主机,我 本地主机,我的公开和hello.html的。 所以,现在让我继续前进, 说主体的内部cat.jpg 在这里我希望它是 显示并重新加载。 当然,这是不正确的。 所以,我需要告诉浏览器一点点 更刻意就是我想要做的事。 只需键入名称是 显然不充分。 所以,记得还有一个 标签,图像,IMG的简称。 这仅仅是因为人类 不喜欢的类型完整的单词。 然后我们可以做源=“cat.jpg”。 现在我该怎么办 有一点不同的位置。 即使所有的 我们的标签迄今有 过了这个概念 开始标记和结束标记, 这并没有真正 有意义的图像,对不对? 图像或者是有还是没有出现。 这样一来,人类发展, 了一个简单的约定。 当你有一个标记,既可以 开始和结束于相同的时间 - 它可以是空的,所以speak--刚 把正斜杠标签内 在最后。 现在让我回到我的浏览器。 打刷新妈的,什么是错的。 你可能已经看到了这个 偶尔在网络上, 即使它没有得到你的错。 这是Web服务器的故障。 什么颂歌这似乎预示? 这是坏了。 这就是图像所属。 是吗? 听众:但它不 可以访问该图像。 大卫·马兰:这不 可以访问该图像。 也就是说,甚至更糟,也许 它甚至不存在。 让我们来看看,如果我们不能诊断的。 从最后一次回想一下,如果 在Chrome中,在家电, 甚至在您的Mac或PC, 你去Developer菜单 并转到开发工具 选项​​,这可能是你已经 不使用过多或过。 如果我去网 并重新加载页面, 让我们来实际看一下HTTP 正在做出该请求。 它看起来像hello.html的是 确实好,因此200。 但cat.jpg是403。 所以它不是一个404。 文件可能存在。 403是指禁止。 所以这是一个有点混乱。 我要回去 我的终端窗口。 让我放大了这里。 让我做一个LS。 有那些相同的文件。 现在让我做了LS-L, 这你可能 之前看文件中使用 尺寸可能或时间戳。 而且我们看到一大堆 铺天盖地的信息。 但是要注意一些细节。 下面是hello.html的本 排在这里和这里的cat.jpg。 它只是家电是 用户通过突出显示JPEG友好 紫色是这样的。 但是,什么是不同的旁边 文件大小和文件名? 听众:[听不清]。 大卫·马兰:是啊,有 2多个R的看过来。 注意什么hello.html的已回事。 所以,事实证明,名称 这个目录公开是很重要的。 任何在此目录中 是指被公开。 但是,这还不够 只是在那里放文件。 你还需要改变 的文件的模式, 更改的权限 该文件不主动 是默认设置, 这是只有我能读懂 写吧,我是主人。 我想全世界的每个人都来 能读懂我的文件,可以这么说。 阅读只是手段进行查看。 事实上,正如你会在看到问题 设置7,这就是这些R的意思。 这两个R的意思让大家 在世界其他也读它, 尤其是现在, 这是该目录中。 因此,要解决这个问题最简单的方法是 去我的提示做CHMOD变革 模式,然后做一个+ R,干脆, 每个人,一切和r表示读, 然后cat.jpg Enter键。 似乎什么都没有发生,这 通常是指一件好事。 所以LS-L again--现在 让我们来看看cat.jpg。 与此权限 似乎已经改变。 顺便说一句,如果你犯了一个 错,你,例如, 刚才your--我不知道 - 作文 公开偶然访问, 你可以反其道而行之,存取权限chmod a-R。 但坦率地说,它不应该 在公共目录 反正如果是这样的问题。 所以,现在,让我们回到 我的浏览器和重载。 我要去点击 小捉鬼敢死队 符号清除的那部分 屏幕,我们可以看到新的要求。 事实上,这里是 脾气坏的猫从之前。 但更重要的是, 技术上,有 数200,其 意味着我们得到了确定。 好了,所以这是一切优秀和良好。 但是,我们并没有做 最好的网站, 我们也将试图太难 使网站今天最高档。 但是,让我们至少做一些事情 之前剑拔弩张超熟悉 关闭其他几个标签。 因此,假设我不只是要一只猫在这里。 假设我真的希望这 猫要链接到的东西。 我可能,例如 做这样的事情。 一个锚的HREF 超基准equals-- 而我们只是做一些事情 像www.google.com关闭 引述接近支架。 现在搜索的猫。 关闭锚标记。 因此,这只有一个排序 从根本上新的细节。 当然,标签是不同的。 它的名称的锚 HREF或Hyper参考。 但更重要的是,有 这个语法功能在这里。 这就是我们将开始呼唤 没有一个标签,而是一个属性。 和属性是什么, 修改标签的行为。 而这种属性,HREF,手段 修改此锚的行为 这样,当它被点击, 它进入这个网址在这里。 ,当然,该URL是谷歌。 同时,这是什么 文字在这里将会是? 嗯,这将是 实际上是什么人 看到的下划线 链接,就这么简单。 因此,让我们试试这个。 让我保存它。 我仍然在hello.html的。 但在网上的版本中,你会看到 我们的实际文件名预先制备。 让我继续前进,重新加载。 而现在它是一个非常 给人留下深刻印象仍页面。 但是,如果我将鼠标悬停在那里 - 这是一个有点小, 但 - 你可以在下方看到 左上角屏幕, 它真的到google.com。 如果我点击,它会 拂我的方式来实际的谷歌。 但是请注意,这里的机会 开发,只是作为一个备用。 我们会回来给其他 安全用不了多久的问题。 因为有这种二分法 你去哪里和你说的, 你可以这样做 this-- http://www.google.com。 好了,现在如果我重装 保存该网页后, 它看起来像我会去谷歌。 但是,没有任何原因,我 必须去谷歌,对吗? 我其实可以去像 badguy.com,重新加载该页面在这里。 和通知,它仍然看起来像谷歌。 且仅当我尖锐 足以将鼠标悬停在这里 我会看到它甚至会 去一个不同的位置。 所以,如果你曾经得到 的电子邮件,特别是 一个来自支付宝,或 貌似从支付宝 请您登录 您的帐户,这 所以你千万别 曾经在电子邮件中点击链接, 坦率地说,在电子邮件中的任何链接。 如果你知道你有实际 在支付宝或银行的钱 美国或富达或任何 网站手动输入进来。 因为看起来它是多么容易 欺骗某人为展示什么 看起来像一个链接。 但它实际上可能 绝对去任何地方。 并有更大的 威胁莫过于此。 其实,这是一个有点 切线的现在,但一 的最好的我见过 这已被关闭, 是有人牵头人 to--所以这可能会说, 点击这里登录到您的 帐户,银行帐户。 这是西方银行。 因此,有人买了这个。 这是一个很容易就能看到 它在一个单间距字体放大 在一个30英尺的投影机。 但是,当它是小字体中 电子邮件是您收到, 这看起来像bankofthewest.com, 不bankofthevvest.com, 其中有人已支付10美元购买。 然后这导致了他们的 相当于一些不良网站。 你会看到too--其实我们可以做的 this--如果我去实际的网站, bankofthewest.com,再次 从上一次召回 如果这是他们的网页, 你好奇的是,它的工作原理, 你当然可以去 Chrome的开发者工具。 你可以看到所有的 HTML格式良好的存在​​。 但更重要的是, 你cam--让我们关闭 this--你可以去查看 开发人员查看源文件。 我为什么不只是复制 所有这一切,然后我 可以进入我的小窗口gedit中 在这里,让我自己的网页。 在hello.html的存档。 大概这是要打破, 因为它不是如此简单平常。 但现在,如果我重装上自己的网页 我自己CS50电器和打重装, OK,有些东西打破了。 但我敢接近有 我自己的银行网站,对吧? 所有的这HTML-- [笑] 大卫·马兰:--I 没有actually--你 知道有一个人在那里谁 实际上过于点击这些链接。 所以很明显,有些东西打破了。 但是这会导致 我们进入一个讨论, 不必要的现在,至于是什么 CSS,层叠样式表,是, 实际上你如何 下载其他HTML文件 和JPEG文件GIF文件 该网站可能会使用。 但是,所有这一切是accomplishable。 但是,它真的可以归结为 这些非常简单的启发式方法。 所以,现在就让我们通过略读 几个HTML的其它实例 只是给你的感觉 还有什么可以做。 例如,这是list.html。 假如我要拍一个网页 与房屋的四边形的列表。 我可能会使用的UL标签无序 列表,然后将列表项子 然后遍历over--或列表, rather--房子有问题。 如果我开这件事,让我们做到这一点。 让我们不要hello.html的, 但list.html。 该死的。 我该如何解决这个问题? 这是相同的问题和以前一样,对不对? 所以,让我做chmod-- oops-- 存取权限chmod a + list.html的河 而现在,如果我回到我的浏览器 单击刷新,它就在那里。 因此,如果你曾经想制作 项目符号列表,你​​可以做到这一点。 如果你想成为超级花哨,使 的有序列表,而不是一个无序列表, 改变那些OL,重新加载页面, 现在,浏览器将编号给你。 我们还能做什么? 嗯,一对夫妇的others--如果 你有text--长款 例如,一些 像this--拉丁文本 你希望它在不同的段落, 开P,段落标记密切页。 而一次又一次地这样做。 如果我现在打开这个文件, paragraphs.html,好了,这 越来越讨厌。 所以,现在就让我们回到我 提示,存取权限chmod a + R R星.html-- 一个可爱的小外卡可以这么说。 这应该可以解决所有的 这些问题对我来说。 让我们来重新加载。 有三段。 现在,让我们继续 并开辟另外一个。 怎么样的表? 你会发现表如下 稍微复杂一些。 但它同样idea-- 开放标签,打开标签, 开放,开放,开放,关闭标签,打开标签。 而这些恰好代表 表,其边界是很明显 将是一个厚度1--任何 这是指:表行,表 数据,这意味着小区。 如果我回到我的浏览器 在这里,去table.html, 你可以看到什么 这样,狰狞。 但我们会去点 在这里我们可以真正 使比漂亮的东西。 因此,让我规定现在。 还有更多的标签束。 而HTML是美妙的回暖 因为,坦率地说,所有你需要做的 是看现有的网页 与你熟悉。 和你一样,哦,这是怎么 他们这样做美观。 或者,你可以查找任何在线 资源为HTML是如何工作的, 你会看到,有一个 其他标记的所有词汇。 但是,用简单的心理模型 孤独,几乎任何标签打开 已被真正关闭, 没有足够的自学 HTML了解后, 标签这些基本理念 和属性以及良好性 我们已经谈到, 收什么,我们可能会打开 所以,我们不要混淆一个浏览器。 现在让我们借此来 一个更有趣的水平 通过将实际的。 让我们去我的Mac 在这里,到google.com。 现在notice--让我们做到这一点。 我锣去 设置,搜索设置。 我想关闭这个恼人的瞬间 结果事情立刻在那里 开始回应你的打字。 让我们做到这一点旧的学校,所以 实际上我们看到发生了什么事情。 所以,我要救我 谷歌在这里设置。 现在notice--我要去 搜索类似猫科动物。 它仍然在做汽车 在这里完成,但基于东西 人们已经输入了过去。 但是要注意什么事情要发生。 在URL的时刻 是这样的,只是google.com。 而在技术上,它的斜线。 谷歌只是保存字符 而不是向我们展示这一点。 他们向我们展示了HTTPS,只 是超级让人欣慰的是我们 在安全或加密的页面。 因此,让我继续前进,寻找猫。 现在,这个真的有 铺天盖地的快。 看看这个URL的长度。 但事实证明,大部分这样的东西 在URL实际上是相当无用的。 我要开始删除 事情我不明白。 我看到猫。 我明白了猫。 我不知道为什么猫那里了。 我真的不知道 这是什么废话。 所以,我只是要保持 突出显示和删除的东西 我不明白, 蒸馏网址逼到这一点。 现在,让我得到重新输入。 它看起来像谷歌仍然有效。 所以由于某些原因,他们增加一个 很多东西到他们的URL的默认。 但它没有严格要求。 那么,什么是好的,这一点? 好吧,让我继续前进, 打开Chrome的督察。 有一点点鼠标快捷键吧。 进入网络选项卡。 现在让我重新加载 此页面一次。 而且我按住Shift键。 顺便说一句,浏览器 往往高速缓存或保存 只是为了效率的缘故信息。 但通常情况下,按住Shift 重装将迫使一切 从头开始。 而这正是我想在这里做。 并注意所有这些 那个刚刚出现的行。 事实证明,在任何给定的网络 页,则可能是只有一个文件 involved-- hello.html--或有 可能是52,因为在这种情况下。 当我访问google.com, 显然,我的浏览器 揭幕52分开的HTTP请求。 这是为什么? 好了,看看里面有什么 这个网页往上顶。 这里不仅是文字, 但有实际图像 的猫科动物转移到右侧。 有一个丰富多彩的标志在这里在左边。 还有所有的图标 用于麦克风等。 有很多件,建筑 块,刮片,如果你愿意, 这个网页。 什么样的浏览器做在 获得的第一个文件,该文件 是此行这里时,它基本上 遍历HTML顶部 至底部,左到右,找 之类的图像标记或其他标记 所提到的其他的文件和 当它看到他们,去和他们取 通过HTTP,可行全 信封比喻, 然后在显示它们 在网页中适当的位置。 但是请注意,在这里,如果我专注于 第一掷,搜索猫, 注意到,确实它使用HTTP 1.1。 不幸的是,谷歌 Chrome浏览器目前已经在39版 是一种方法简化下来,并 不向我们展示了实际的头。 但确实是发送一个请求 不削减,但/搜索?Q =猫。 现在,为什么是重要的? 嗯,我要去推断 从这个,如果你谷歌 支持这种形式,为什么查询 不我实现我自己的搜索 发动机CS50,只是前 结束,就在图形用户界面。 我们将外包后端, 实际的搜索结果谷歌。 所以,我怎么能这样做呢? 好吧,让我进入gedit中在这里。 让我继续前进,打开 了,让我们说,一个新的文件。 而且我要救这个 暂时作为搜索-0.html。 然后最终,我们将快速 期待一个我事先准备好的。 而我要去 迅速掀起文档类型 HTML打开HTML支架 靠近支架的HTML。 然后我会做头 靠近头部公开赛冠军CS50 搜索代替谷歌搜索。 到这里我将有 身体,到这里靠近身体。 现在我需要CS50搜索。 而实际上,让我们 建立这个增量。 我要继续前进,并关闭该和 其实把它放在我的公开目录。 所以给我的只是一个瞬间。 搜索0.html--我要去 时间search.html调用它。 我要和chmod它+ R search.html。 现在我要打开它。 好了,所以这是快。 但我们的目标是简单的 让我们给点意见 有此文字 文件名为​​search.html。 所以,没有什么好看的呢。 事实上,如果我去我的浏览器,并 去search.html,这一切是。 但是你知道吗? 我可以是一个小票友。 我在读一本书,有 标题标签称为H1。 而且我要继续前进, 使用开放的H1和关闭H1。 重新加载页面。 现在它的更大,更大胆, 不是所有的有趣, 但至少在结构上 更有趣。 但现在让我介绍另一个标记。 原来,有一个表单标签。 让我关闭的标签。 而事实证明有 输入标记, 有一个名为类型的属性,它 是该字段的数据类型, 如果你愿意。 并且将是文本类型。 它的值是怎么回事 要CS50搜索。 关闭标签。 而且也将是没有概念 打开和关闭与独立的标签。 让我回到了这里 看看这是怎么回事,重装。 越来越有趣。 它看起来就像是一个文本字段。 而实际上,我不想 把一个价值还没有。 让我回到这里,并实际获得 摆脱这个值来保持它的简单。 而不是一个值,我想要的东西 给这个事情是一个名字。 我不知道它是什么, 所以我会回来的。 但下面这一点,我想 做INPUT TYPE =提交。 并且这个值将是CS50搜索。 我们会看到为什么我 移动的价值这一点。 当我重装,我好像现在有 我自己搜索的开始 发动机,超可怕的, 但坦率地说,这是 不是远远抛在了什么 谷歌的默认页面的样子。 如果我现在在这里,我可以键入 猫,希望单击搜索。 但我没有完全完成, 因为我还没有实现, 显然,一个数据库。 我还没有爬的 网络搜索结果。 所以,我需要外购,为谷歌。 那么,如何做到这一点? 嗯,首先我的 需要补充和行动 归功于我的表单标记, 是http://www.google.com/search。 我知道,只有从具有 看仔细推断 在他们的URL。 而现在采取的猜测。 什么应该这个文本字段可能 被称为基础上,我们来了 从之前? 听众:Q。 大卫·马兰:Q。 而我们实际上并不需要的问题 纪念它的出现,但q是确实的, ●对于可能由查询 默认情况下,只是因为这是 拉里和谢尔盖 想到了几年前。 所以,现在让我重新加载该页面。 它看起来并不都不同。 但现在看会发生什么。 如果我输入的猫和点击 CS50搜索和放手, 请注意,我得到护送 客场实际谷歌。 现在,谷歌正在一点点 恼人的,因为它们是 附加一个额外的参数, 如果你愿意,到URL。 这一切发生 自动对谷歌的一面。 最重要的是,我似乎 要在这里产生了这一请求。 事实上,这是发生了什么。 当你有HTML的 看起来是这样的,这 是某种Web开发人员表示法 这么说,就创建一个表单 当它的提出, 它会去这个网址。 并且当URL提供 对于喜欢的东西的Q值, 不要去只是为了这个URL。 其实,去质疑 标记,然后Q =猫。 附加的参数时, 像HTTP参数。 和刚需超精密, 什么东西被推断这里 - 但我会更explicit--是 我想使用的方法 为得到而不是像, 后,我们最终会看到的。 因此,在短期,简单地理解 HTML和使用一些非常简单的标签, 我们现在可以开始创建 我们自己的前端用户 与搜索界面 发动机后面。 但当然这是很可怕的。 因此,让我真正打通 一个稍微好一点的版本。 这是我编写的一个 提前有一些意见。 但是你会看到,我 几乎是重新创建它。 因此,这是网上已经可用。 我也正好先发制人 访问https只是为了保持它的简单。 现在,让我们打开了 这下一次迭代。 是版本1,而不是0。 什么跳出你的稍微 在这个例子中有什么不同? 听众:[听不清]。 是啊,有这样的文字居中。 这是一个有点怪异了这里。 但是,这确实是新的。 也许猜到了什么事情发生。 如果我去我现在的浏览器 参观搜索1.HTML, 这几乎是同样的事情。 但它是更近了一步 是多了几分可爱。 它仍然是丑陋的,但在那漂亮 至少一切的,现在居中。 所以,事实证明,我正在使用 在另一种语言完全叫 CSS,层叠样式表。 和CSS,坦率地说,是一种 ,在我个人看来, 一个残暴的设计语言。 这是非常恼人的记忆 所有的各种细节。 但它是什么stylizes的 整个万维网今天。 我得罪人。 行。 所以,让我们回到这里,看看 怎么我们实际上用这个。 而事实证明,至少它的 实际上是一个非常简单的语言。 这只是键值对,性质 和值,属性和值。 事实上,这里是1 这样的属性和值。 只需通过使用样式 属性在我身上的标签 并给它的值 字结肠和另一单词, 或一个属性和一个值, 我会影响美观 的网页,而不是对 不一定但该结构中, 但它的美观性。 而就在谷歌搜索的时候,我意识到 该CSS,层叠样式表, 支持一个名为属性 文本对齐,其值可以 将左,右或中心,例如。 所以,现在当我重新加载 这一页,我没拿到 是一个居中的页面, 但仍然相当难看。 让我们继续前进,打开 搜索了第2版。 现在发现我做多一点。 注意,在这里的头部的里面 标记,可以有多于标题。 事实上,有一个风格的标签。 而这正是它只是得到了 有点乱眼看CSS的时候。 请注意,我好像有东西 在结构上看起来非常不同。 但这里是名 我想要的标签程式化。 这是我们的老朋友卷发 括号和封闭的大括号。 然后这里是 属性和它的值。 如果我打开这个文件,search2.html, 最终的结果是相同的。 但它是朝着更好的设计的一个步骤。 通过分解出这个CSS,我已经 不符合我的HTML混合的。 事实上,正如我们所看到的,我可以 重新使用这些属性和值。 如果我要拍的串 我的网页的部分为中心, 我不必键入风格=文本对齐 中心所有的地方。 我可以在一个地方 或许,就像在顶部。 但是,即使这不是最好的设计。 事实上,其中的一件事,你将学习 因为你花更多的时间与 网络编程的,你就可以 模块化的东西和因素的事情了 像.h文件让我们因数的东西出来, 喜欢helpers.c让我们因子的事情了 一些pset中前。 同样地,我们可能 要实现这一点。 因此,在版本通知 3 search.html我已经 清理的头 页面,只是把 在此,一个链接标记,这 相反的名称, 不给你一个超链接。 它通过的方式链接到另一个文件 一个href其值在这种情况下, 是搜索3.css 所以,我知道我们要快。 但是,所有我做的是怎么样 中移动周围的事物。 让我打开搜索3.css。 就在那儿,没有什么吧。 我只是复制并粘贴到一个新的 文件,就像我们分解出来的东西 进入之前的其他文件。 和result-- 完全underwhelming-- 将是完全一样的。 但是,我们正在toward--不,它不是。 哦,我知道为什么。 因此,它似乎是一个错误。 它在某种意义上是。 不过,让我打开我的网络标签。 让我重新加载页面。 啊,为什么是CSS没有被应用? 那么,CSS文件,同样,有 是世界可读的,可以这么说。 而它也正在被禁止。 因此,让我做一个存取权限chmod a + R 星点CSS-- whoops-- 我们点CSS仅仅是 文件扩展名的CSS文件。 现在让我回去 我的浏览器和重载。 OK,好一点。 现在让我做最后一件事。 在搜索4.html。 我说我只是想一个版本 是这样凉,虽然这样更 复杂的。 让我们来看看结果第一次。 关闭这个给我们更多的空间。 改变这种搜索-4,回车。 现在一堆东西被打破。 我要回去 进入我的目录位置。 而现在我只是做 一+ R上file--在chmod 因为我知道它叫exists-- logo.gif,这是一个图像。 而现在重装。 和wow--所以现在我 八九不离十,坦率地说, 喜欢1999年的版本,谷歌,以及 坦率地说,2014年版的谷歌, 对不对? 所以它现在要他们的网站, 最终,如果我搜索的猫。 的确是。 但我做了什么不同 在这个版本4? 所以我们不会过多谈论在这里。 你会看到这个问题, 集7最终。 但是请注意,我做了几件事情。 我介绍一个div 标签,这是师, 类似的精神,一个段落标记。 但是,一个部门就像是,这里的 一个长方形的不可见区域 屏幕。 让我们给它一个独特的 标识符,页脚,只是 这样我们就可以谈 它在其他地方我们的HTML。 这里是页的另一种格 其ID将是内容。 它是该页面的内容。 而且在这里是页的标题中。 换句话说,我已经 实际上在HTML中很弱智 查看此网页的 三部分组成,一个头 在这里用这种无形的矩形, 在中间的内容,然后 页脚向下跌破,甚至 虽然我们没有看到那些东西。 因为我想在我的脑海中 在此页面,或在.css文件, 我可以用这个语法。 头是不是一个标签。 这是一个ID,因此它变成 指出,这样做的#header, 我现在可以申请一个或多个 属性的报头。 我可以做同样的内容, 同样对于这里的内容。 因此,例如,在页脚,通知 所有这些特性,我加入。 我知道它们的存在仅仅通过阅读 了对CSS的文档。 字体大小将是smaller-- 因此一些相对字号。 权重将是大胆的。 Margin--多少像素 围绕它 - 是20个像素。 而且它会为中心。 但现在,页面看起来是这样的。 如果我不喜欢的 我的副本就在那里, 我可以不喜欢红色。 然后我就可以节省这一点,重新加载, 现在我已经程式化页脚。 所以这只是暗示的力量 你可以在一个网页怎么办 改变周围的事物。 而比这更酷,如果你想 闲逛实际的网站, 你永远不能改变他们。 但是,如果我打开 再次Chrome的督察 我去不要的左手侧 在这里,这说明Facebook的HTML, 但在右图所示 右手边所有的CSS, 您可以和 在运行中改变的东西。 因此,让我继续前进,做到这一点。 让我继续前进,控制 在这个随机单词点击这里, 签字,然后单击检查元素。 Chrome浏览器很方便地跳转到 Facebook是用h1标签。 并请注意这里的Facebook 有一种懒洋洋 硬编码的字体大小为这里的属性。 因此,很酷的事情,虽然是 如果我真的去这里 并说,哦,Facebook的,我不喜欢这样 64个像素,我们可以改变现在的Facebook。 当然,我们只是改变它 对我个人的时刻。 但是,这仅仅是另一个 工具在我们的工具包 那将让我们能够调整 并找出和诊断也 问题在我们自己的网页。 我们可以同样地走了过来 在这里,这是同一件事。 如果你真的想获得幻想,我 意思是说,现在你真的可以发生变异的页面 做疯狂的事情。 那么,为什么这一切有用吗? 好了,最后,我们 将要成为 能够创建Web页面 通过我们自己的后端驱动, 不只是谷歌和 外包后端存在。 我们真正想要的 值,例如 我们的搜索引擎的作用 属性去不是别人, 但像search.php中, 那里的search.php是我们自己的服务器上, 而不是别人的。 所以到那里,我们其实 需要引入一种新的语言。 因此,我们已经看了一眼新 这里的语言,或两个真的,HTML 和CSS。 但他们真的只是 结构和审美语言。 他们不是编程 语言本身。 那就是尽可能多的正式 时间,我们将花费在他们身上。 因为我们现在将开始 转换到PHP。 所以,PHP是一个实际的 编程语言。 这是一个脚本语言 在这个意义上,它的 意思是重量更轻 不是像C. 它是一种解释型语言, 这意味着它不会被编译。 因此,概括地说,这是什么意思 当我们使用类似C语言 我们不得不去编译它? 什么意思 编译C源代码? 听众:[听不清]。 大卫·马兰:再说一遍吗? 听众:[听不清]。 大卫·马兰:完美。 它把它变成二进制代码。 它把它变成零和一 从实际的类似英语的源代码。 然后我们就可以真正 运行这些零和一 通过在将它们传递 CPU通过双击图标 或者运行一个命令。 PHP和Python和Ruby 和Perl和JavaScript 和其他的串 语言的解释 语言,这是说 你不编译它们。 相反,你喂它们作为输入 一个程序调用一个解释。 并且解释, 这别人写的, 读取您的源代码,从上到下, 左到右,只是解译 那些线条和做什么,你说​​。 所以,如果你遇到一个 该行表示,打印, 它不一定转换打印 为相应的零和一。 它只是有这种类似的解释 一个大的if条件,上面写着: 如果程序员的指令 打印,然后执行以下操作。 所以它只是把它解释 通过一种推理 通过什么你告诉它做的事。 而PHP是其中一种语言。 和PHP年前设计 正是基于web编程。 它最初是一个 很邋遢凌乱的语言。 事实上,有一个巨大的 量差的PHP代码在那里。 但是语言本身 已经成熟,多年来, 以至于现在它的 实际上是一个美妙的下一步 教学上从C,因为它是 所以该死的熟悉的一切 你刚才看到的,在过去​​的几个星期。 我们将看到一个初始的区别 是没有的主要功能了。 当你开始写代码,它只是 要得到执行,不管是什么, 正如我们将看到一个时刻。 同时,这里就是一个 变量看起来像在PHP。 这是一个有点不同的, 但只是勉强。 在PHP中,有没有强类型。 还有一周打字, 这只是意味着有 有数据类型,如字符串 和数字和其他东西。 但是,你不要打扰指定 他们是什么样了。 PHP的数字出来给你。 美元符号仅仅是一个决策 该PHP的人做年 以前,这样在PHP中的任何变量 刚开始用一个美元符号。 它是一种真正的有用 它跳出你多一点。 但在此之后,这 在PHP中的条件。 有什么不同的对C? 欺骗question--什么, 这实际上是非常好的。 布尔表达式PHP--相同。 同和与布尔表达式 或者,开关,循环,循环,loops-- OK, 这个人是不同的。 因此,原来有一个 情侣在PHP中的其他功能。 其中之一就是实际上这一点, 这是奇妙的方便。 如果$的数字是,你已经一个数组 在程序中事先声明, 你有这样奇特的每个构造 这样做,而不是所有的 讨厌我等于0,我是 低于此,[? I ++?] 每个数字作为编号,其中每个 那些美元符号的值就是 一个变量,而后者 你能想到的是一 你可以把它叫做任何你想要的。 我把它叫做数字。 这是要遍历 数组被叫号码。 并在每个迭代中,它是 要自动更新 为你的美元符号数 变量使你不断 有机会获得你想要的变量 无需做任何括号 符号或索引到一个数组中。 除此之外,我们甚至有类似的东西 数组,这看上去几乎相同, 除非这是非常常见的,如我们 看,无论是在PHP和JavaScript 预初始化数组 使用方括号。 C使用大括号。 因此,它是略有不同的,即使 我们并没有真正使用的伎俩了。 但更强大的是, PHP有关联数组, 这是一种奇特的方式 说法哈希表。 事实上,如果你想声明一个哈希 表在PHP中,不像在C--多少 代码行花了来 真正实现在C语言的哈希表? 或者有多少行代码是 以C语言实现一个哈希表? 因此,它可能是一个很大吧? 这是几十个,也许100或200。 这是平凡的。 或者它即将被作为 您很快就会看到,平凡 实现一个哈希表 [听不清],也是一个尝试。 但在PHP--坦率地说,我 或许不应该告诉你这 直到Monday--在PHP中,如果 你想有一个表,完成。 这是一个哈希table--这样 用一行代码。 和 很多语言做到这一点。 有乐趣的PSET 5。 所以很多语言做到这一点。 他们给你的这些抽象 其他人,其他程序员, 为你创造这样 你可以站在他们的肩膀上 并开始使用的想法是超 引人注目的,像哈希表和树 并尝试。 但你不一定要 实现这些东西自己。 因此,最终,有什么 我们将使用PHP 可能是写程序 所谓的命令行。 我们可以重新创建每个程序 我们已经写了本学期迄今, 也许除了突围它采用SPL, 这是专门针对C的时刻。 但是,所有其他问题集, 当然马里奥和恺撒 和的V @ genere和 [?破解?]及以后,我们 可以重新实现在PHP中,和 可能有点更容易。 但我们最终会 用PHP的Web编程。 而我们将要介绍下一个 一周的心理模型,一个叫范 MVC,模型视图控制器, 其中,如果你做编程 之前在Python或 Ruby或其他地方,你 可能知道这​​支球队与 Rails和Django和等。 但如果你是新来 这也太,你会看到 这其实是一个很自然的 延伸因子的 和设计的那种 的代码,我们已经 一直在做C.我们要现在 运用其中的一些教训,PHP 所以,最终,我们是 实现我们自己的网站。 如果你是那种 催眠或惊奇 我们要做的 所有的这么快, 认识到,几乎每 学期中,近90% 学生CS50,包括那些 谁从来没有编程之前, 最终使最终的项目 基于web编程。 所以你会看到回报 高在几周来。 所以我们会看到你,然后在星期一。 扬声器1:现在,深 思考了Daven法纳姆。 哈希表。 [笑]