道格·劳埃德：所以我们花了 about--如果我的数学是正确的， 我认为看back--我想 我们花了大约35视频聊天 关于C的各个方面，也许 多一点，也许少一些。 而且，我们也没有覆盖 一切都在C，但我们 涵盖的一大块 语言，它的绝大多数， 肯定是常见的用途。 现在我们要谈 关于另一种语言，HTML。 而且我们要覆盖 它只是一个视频。 

但是，这将是确定。 这是怎么回事真正成为 东西你要用来获取。 现在，你有 一个语言基础， 它实际上是很容易 开始学习别人。 因此，我们要开始 步骤一点点回来 和粉饰基本 这些语言之间的差异 和那种不打扰您了。 有很多真正伟大的 在互联网上资源， 我们将开始指导你 对因为互联网 信息的巨大的资源库。 所以它不是像你会 是必然失去了 由不具有信息 涵盖的视频。 你仍然可以得到 你需要的一切和使用 你已经过知识 建立了通过了解Ç 做这些的学习曲线 其他语言其实很多平坦。 我承诺。 

但是，让我们来谈谈一种语言 这对每一个网站真正的基础 页面，这是HTML。 HTML是超文本标记语言。 HTML是一种语言，但它是 不是一种编程语言。 

HTML没有变量。 它不具有逻辑或 功能之类的东西。 我们不能做任何 在HTML编程本身。 有时你会听到 人们形容自己 为HTML编程，这 不完全准确。 我们不能写HTML程序。 

HTML只是用来标记文本。 这就是所谓的标记语言。 而这是什么does--这个markup-- 我们使用标签在HTML和这些tags-- 这markup--语义 定义了页面的结构 并且使得纯文本 之间存在的标记来解释 通过以不同的方式浏览器。 也许这是最好的解释 此通过举例说明的方式。 

这里是一个非常简单的HTML页面，而不是 一个HTML程序，再次，一个HTML页面。 我们知道这是一个 HTML页面，因为我们已经 界一切与HTML标签。 因此，这是一个HTML标签的模样。 它的尖括号之间。 同时注意，在我们上方 HTML和在最底层， 我们已经做了之后是什么 显然很多其他的HTML， 我们有尖括号斜线HTML。 所以排序是这样的边界 区别什么是HTML的，哪些不是。 当然，传统上，只 当你写的所有的C程序 与点C扩展， 所有的HTML文件 将结束与圆点的HTML扩展。 但还有更多的事情在这里。 我们不只是这些HTML标签。 我们显然有这 东西叫做头标记。 嗯，好吧，那是什么？ 

嗯，也许这是最好的 由主体的方式区分， 体作为网页的内容。 所以，也许head标签定义的东西 这不是在浏览器窗口恰当， 但以某种方式很重要我们 网页被渲染正确。 例如，内部的 head标签，我们有标题标签。 

所以，标题为hello世界， 这实际上将是什么 显示在Chrome浏览器中的标签 或者Safari或Firefox-- 无论浏览器，您prefer--那 什么会出现在标题。 而标签之前它会显示 在您的整个浏览器窗口 你只能有一个页面 在一次浏览器窗口中打开。 所以这将是 我的网页在选项卡标题 或浏览器窗口吧，你好世界。 和则内容我 网页将成为世界，你好。 因此，让我们来看看什么样的一些 像这样的事情可能看起来像。 这是一个非常简单的HTML页面。 所以，我在这里我CS50 IDE和 我放大一点点。 而我只是要 开拓你好点HTML 并告诉你，这是相当多 我们以前看到的网页内容。 我简单的HTML，head标签， 标题标签，身体等。 我已经缩进是干净的。 

然后，我可以做我的 IDE只是预览页面。 还有，我们走了。 我的网页的内容是世界的， 你好，我看不到任何东西 在从头部标签那里。 它的主体的刚的内容。 世界，你好。 又一次身体刚 说，世界，你好。 另一部分缺失。 

所以，这一切真的是。 这是一个非常简单的基本的HTML页面。 现在，我已经缩进我的HTML 是非常好的，组织， 但我实际上并不需要。 我可以使它看起来很丑陋。 而这将仍然工作。 这将是完全相同的网页。 我刚刚摆脱了 所有的白色空间。 

事实证明，白色的空间数据。 所以，当我们发送数据 发送端到接收端，从服务器 到客户端，数据的成本钱。 所以，摆脱空白 实际上是一个好主意 如果你是人谁提供 了大量的网络内容。 这是一个坏主意，如果你是 人谁是学习这些东西 你想拥有 它很好地组织。 这是一个更容易比这个来解析。 但它的功能相同。 

缩进之类的东西 实际上并不重要的HTML。 所有的事情就是打开的标签和 结束标记以正确的顺序。 请注意，这里发生了什么，虽然。 该标记为我们提供了一种方法， 传达额外信息 关于我们所编写的。 你好，世界部分是 解释为标题。 与世界，你好部分是 解释为内容 或者应该是什么 可见在我的网页。 

有超过这些不同的百 标签和很多伟大的资源 在网上找到他们。 我们要说说 在这段视频中几个人，有的 的真正根本的东西。 但我们不打算谈 这一切，因为它 将是详尽这样做。 

另一件事可以做，不过， 是开放的开发工具。 如果你回想一下 我们的视频HTTP， 我解释了如何打开 了开发者工具。 在Chrome中它通常是F12键 打开开发人员工具栏中。 那么而不是选择网络 选项​​卡，你可以选择的元素选项卡。 如果你加载一个网页 页面，你会真正 看到创建网页的HTML。 所以你可以学到很多关于HTML 通过查看您喜爱的网站 并看到他们是如何打造的 各条他们，你喜欢。 因此，也许有这个很酷 图案或类似的东西。 他们如何使用HTML做呢？ 那么你可以打开你的开发者 工具和悬停在该元素 看看到底是什么HTML使得它。 所以这是一个非常 学习HTML的好办法， 我强烈建议 你这样做既可以学习HTML 并且还学会了一点 一些选项位 在提供给您 开发工具， 肯定会派上用场 你开始做更深入的网络 编程。 

因此，让我们来看看一个 夫妇普通的HTML标签。 我们会跳，看看 什么这些标签也将呈现 如通过查看我的IDE的一些文件。 因此，这里有三个非常基本的标签 调整文本的视觉外观。 有'S B标签，我的标签，和U标签。 分别是什么，他们做的是 使它们之间的文本加粗， 斜体，下划线和。 因此，让我们看看这看起来 像我的IDE实际的网页上。 

所以，在这里我的IDE我有一个 文件名为​​BIU点HTML。 BIU点HTML摆明 粗体，斜体，下划线。 我会打开它。 

我们会看到，在这里我 有这样的文字为B标记大胆。 本文是我的标签斜体。 而本文为U标签下划线。 这是什么将会是什么样的？ 好了，我的一切 要做的就是在这里走了过来 到我的浏览器，我的文件浏览器，点击 预览，这是会发生什么吧。 

在B之间的文本 标签确实是现在大胆。 在I之间的文本 标签确实是现在斜体。 而在U之间的文本 标签确实是现在强调。 所以，这是相当不错的。 现在，我们知道如何使文本 看起来多了几分花哨 或绘制强调某些事情。 另一对夫妇共同的标签这里 段落标签，P和标题标签， 我在这里呈现为HX。 

这些P标签中，这些段落标记， 打破你的文字成几段。 这是不够的，只是 按Enter键并留下空间， 因为一个计算机只会 做你告诉它做 而忽略白 空间的大部分。 因此，我们不能只打回车 并希望我们的电脑 解释，我们希望 开始一个新的段落。 我们必须非常明确地说，这 是paragraph--这是another-- 通过在集合P标记封闭每个。 

而且我们也有这些选择 用于h标签，这些标题标签。 我们有六个不同级别 标头，一，二，三， 四，五，和六个，这是 逐渐变大的，以及较大 头。 他们变得越来越小， 更小和越来越小。 因此，我们有一个顶层的头，一个第二 级别标题，等等，等等。 

让我们来看看，也许一些 p标签和一些标题标签 在网页上的动作。 所以，在这里我的IDE我有一个名为 PH点HTML，PH值是段落 和标题标签。 打开了。 有很多事情在这里 因为我已经把一些LOREM 存有，这里有的只是随机文本。 因此，我将缩小一点点 因为有这么多的事情。 但是请注意，我在很 顶部这里我有一个H1的水平之一， 头标记。 然后，我有一个段落，这只是 一串随机text-- LOREM ipsum-- 只是默认的标准填写文本。 所以，我有那里面的两个段落 一级标题，然后向下跌破我 有一个二级标题在这里24行， 第二级别标题，和另外两个 段落。 那么，这是什么样子 如果我在预览中查看它？ 让我们来看看。 

这样会注意到 这里第一层报头 还算是有点大 比第二电平头。 因此，我们使用H1标签。 并注意p标签可以让我们 打破东西伸到段落。 如果我们已经摆脱了这些p标签的 实际上只是把进入或退货 在我们所希望的会 是不同的段落， 他们都只是踩住在一起， 那就没有这个漂亮的段落 分离空间的上方和下方。 所以这就是款 标签和标题标签 通常用来做绘制 关注我们的网页的部分 以这种方式。 

接下来是我们使用一些标签 建立在我们的网页列表。 因此，我们必须无序 lists-- ULs--这只是 项目符号列表，有序 指的是一般numbered-- OLs--和内任一 其中的一个，我们需要有 套如何指示列表项，李。 因此，我们有开放的UL标签 我们把项目里面它。 然后，当我们与完成 这一点，我们可以关闭UL标记。 

并且类似地，我们可以有 有序或编号列表 放列表项的里面。 因此，让我们一起来看看 在几列 并且他们会 呈现为对CS50 IDE。 所以，我在这里我的IDE中 文件调用列表点HTML。 让我们一起来看看。 

在这里，通知我有一个无序 列出与五样东西在里面。 然后，我有一个有序的列表， 我已经改变了标签一点点， 对？ 我说的开始等于六人。 原来，有一个有序列表我 可以设置起点的地方 我want--默认情况下，这将是埃德蒙顿 只需添加这个所谓的属性 我的OL标签。 所以，这个列表 启动六计数。 该编号列表，这样的元素 应该是六，七，八，九，十， 因为有五个要素 在列表中，而不是一个， 二，三，四，五，其中 是，如果我说了OL的情况下 没有指定起始属性。 

所以，我们只能预览此这样你就可以 从某种意义上什么是怎么回事。 还有，我们走了。 还有我的名单。 前五个要素 无序或项目符号列表。 而接下来的五个要素 是一个独立的有序列表 从六个开始。 所以这就是我们如何能够 建立使用HTML列表。 另一件事你可能 想与HTML 在建的表 行和列的信息 在一个演示信息 特别是有组织的方式。 要做到这一点与HTML，我们可以有一个 表定义开始开括号 表。 然后在那个表我们 可能有一组行，TR标签 以指示每一行。 然后TD标签去TR标签内 指定的行中的列。 

为什么叫TD，而不是TC？ 那么，TD代表表中的数据。 通常你把 您的信息在那里。 所以这就是为什么它是TD，而不是TC。 这是一个有点混乱。 

所以，你有table标签和 你的表标签内 你有一个行数，红素的。 而每行内有 TDS为列数 你想拥有 在该特定行。 让我们来看看一个非常 简单表了在CS50的IDE。 

所以，我这里有一个文件 所谓表点的HTML。 让我们一起来看看 是什么样子。 有很多事情在这里，但 如果你发现我有一个表打开。 我开始与表的定义。 然后在我的第一排我明显 有四列，一个，两个，三个， 四人。 然后我做与​​此列。 

然后，我开始另一行和 做二，四，六，八。 完成该行。 做另一行，三，六，九，12。 然后最后一行，四， 八，十二，虽然它的 一个小隔断在这里，16。 

我完成了该行。 我的表完成。 然后，我做我的HTML。 这是什么样子？ 好吧，这不是真的太多地看到。 我已经清楚地组织了我的信息 在某种程度上更有组织的方式。 但它不是超级靓这里。 而且我们要处理 当我们谈论的CSS。 我们会重新审视这个想法 我们做什么，使一个table-- 也许更好一点格式化吗？ 但我仍然有四排， 每一个都具有四列， 真是什么这相当于是一个 很简单，四乘四乘 表。 

短短几年更多的标签，我们来谈谈。 让我们来谈谈 概念HTML表单。 所以，你可能已经在看到了这一点 登录到一个网页的上下文中。 通常你在你的用户名输入。 你输入你的密码， 你是好去。 这将是一个形式的开始。 

跳过div中第二。 我们也有输入端， 一种适合的形式中。 这些是元素 你实际上输入进去， 或者你的单选按钮 滴答，或者检查 那你列举出箱。 因此，这些去的形式里面。 他们包括：基本 形式中的每一行 如果你的表单格式完全正确。 再有就是对这个概念 一个div，它并没有真正 适合任何特定类别 标签像那些我已经 在做之前。 它只是排序标定 开始的一些任意division-- div--页面。 有没有视觉突破。 有没有线。 它没有掀起为 自动独立块。 你不得不设置样式 该办法做到这一点。 

只是有点它说我想要一个 一块在我的网页空间， 我正要打电话 它这个师我的网页。 我们可以把里面的东西 的div，而事实上， 当我们头以上 IDE在第二，我们将 看到我把我的 形成一个div中。 

所以，我在这里我的IDE中 文件名为​​DIV形成点的HTML。 让我们打开它。 请注意，就像我说的， DIV是一种武断的。 对？ 它并不真正意味着什么。 所以，我有一个任意 我的网页的第一部。 然后，而不是另一个分区 后来，开始在八通线， 我有这样的形式。 而形式里面我有一个 输入数量，形式等领域。 所以，我有他的名字是场A-- 这并不真正意味着什么 右now--，显然 需要的文字，另外一个， 需要一个密码，另一个是一个电台 按钮，另外这是一个复选框， 而另一个是一个提交按钮。 那么，这是什么 实际上所有的模样？ 好吧，让我们一起来看看。 我们将在我们的预览窗口中打开它。 注意，这个任意 第一division--有 在这里没有目视间隔。 它并没有真正做什么，对不对？ 

然后，我有我的形式。 而且我没有做任何特殊格式。 所以形式仅仅是一个 信息大排。 如果我有不同格式的我的形式， 我可能是一行一行行。 但我没有做任何造型。 同样，我们不是在谈论此处的CSS。 我们只是在谈论的HTML。 

那么在我的文字形式，我可以类型 -  记得类型的文本形式 这样我就可以把我的名字。 而在我的密码我 可以输入我的密码。 而由于该字段 是的输入密码， 你不知道我的密码。 这是所有的点。 

我也可以选择勾一 单选按钮或勾选复选框。 或者，我可以提交我的形式。 而我什么都没有做， 所以，当我提出我的表格， 页面只是刷新。 不过，我也许可以配置我 提交按钮做别的事情。 我们会看到什么，我们可以做的 在PHP的一个未来的视频。 但是，这建立了一个非常 简单的表格，我们 可以用它来让用户互动， 信息提交到我们的网站。 

前一个最后的评论，我们 转移到某些其他的标记 要看看这个 输入标签一次。 请注意，我已经强调 在红色标签的末端。 我们到目前为止看到的所有其他标签都有 有开始和结束，一开口 标签和关闭标签。 

但是，一个输入标签没有。 有说去没有文本 在输入标记之间。 所有的信息 我们打​​算传达 包裹，作为部分 该输入的属性。 请注意，我们必须输入姓名度等于x。 类型等于年。 这真是所有 信息我们所需要的。 

这被称为自结束标记。 它不需要一开口和一 接近，因为所有的信息 包含内 标签和它的属性。 所以有时候你会看到这一点，太。 所以要知道，如果你有一个 标签是完全独立的， 它打开和关闭本身 左侧的开角托架 和斜线角度 支架右侧。 我们会看到另一个那些 现在用图像标记为好。 

在我们讨论的图像，我们 需要谈论的超链接。 如果我们希望我们的网页是 互动性和移动在我们身边， 这将是很好能够 点击其中的一个 什么通常一直是一个链接。 这实际上是我们如何建立 在我们的网页的超链接。 有意思的是 还有另一个HTML标记 称为链接，这不是一个超链接。 一个在这里代表锚，和 这就是我们如何表示的超链接。 

A HREF等于X表示去 网页十，所有的一切都 开放式的标记之间 和关闭标签 是发生了什么事情是，强调 蓝色的文字，看起来像一个链接 我们所熟悉的。 下面，我们有一个形象的标签，这 是一个自闭的标签显示 位于X的形象， 你也许能够改变 该图像通过指定 宽度和高度 在和其他属性 这点点点出现。 

在最底部这里 我们有一个非常有趣的 寻找标记，不 关闭标签。 这是感叹号！DOCTYPE HTML。 因此，HTML一直以来，一直围绕 20世纪90年代初建立的网页， 而它的消失经历了 自那时以来，多次修改。 最近一次是在2014年 它进行了修订 所谓HTML5也就是现在的电流 排序事实上的HTML标准的。 

为了表示我们的网络 网页使用HTML5编写的， 这就是我们如何开始。 它可以省略，但 什么是基本 方法是，你不能使用任何的标签 这是HTML5的标签，这些新的标签。 所以，我们总是开始 如果我们使用的是HTML5。 和所有的标签，我们已经讨论过 以前不是HTML5标签。 但是这将表明 HTML5标签将出席。 因此，我们必须感叹 DOCTYPE HTML，这 是在一开始我们 的HTML文件，然后该点之后 我们实际上有我们的HTML开放 标记和从那里继续。 

最后一个是一个注释标记， 这看起来略有不同，也。 它与角度开始了 支架感叹破折号 破折号，但没有右括号。 在这两个元件之间存在 是你写你的意见。 让我们来看看图片 和意见，并在CS50的IDE的链接。 

所以，我这里有一个名为图像链接 点HTML，我要去开拓。 并注意我有几个 评论在这里我的HTML注释。 所以，就像在C和其他 编程语言， HTML只是作为一个标记语言 它必须有意见的能力。 所以我显然会 把瑞克阿斯特利的图片 地方本格之间 标签，这个任意分割。 显然，该文件是 位于里克点JPEG，这 如果我们头回过来 我的文件树的第二个， 是存在于一个文件 当前目录。 所以这是确定。 我可以引用它。 

然后，我可以有内部链接。 因此，在第11行注意到这里 我HREF为hello点HTML。 所以，仅仅是指你好点HTML 存在于当前目录。 而且我也可以有外部 仅通过指定的HTTPS链接 以表明我不是说 关于我的当前目录中的文件。 我说的是一个真实存在的文件 互联网，我有地方上 以请求使用HTTP协议。 

因此，让我们来看看什么 此页可能看起来像 并准备瑞克的照片 阿斯特利，以显示你的屏幕上。 因此，我将预览此。 还有里克·阿斯特利的 最高层在这个任意 师我把它排在首位。 然后，向下跌破我 有我的链接，对不对？ 

我有一个链接，你好点HTML。 如果我点击的是，我得到 移到此页 是我们非常熟悉的 一开始我们的节目。 如果我再弹出的页面打开，如果我 流行的图像链接打开一次， 我也可以去外部 到CS50的网站。 还有我们see--我会 缩小一点点这里 -  我们将看到CS50的网站排序 嵌入在页面中的中间。 所以，我能够使内部 链接和外部链接。 

与HTML的最后一个规则 我们要在这里谈论 是你的HTML应该得到很好的形成。 在C语言中，我们谈了很多关于 事物的各种语法。 在HTML语法真的 围绕着标签。 你打开每个标签需要关闭。 而事实上，每个标签打开 应该被关闭以相反的顺序。 

所以，如果你打开​​一个大胆的标记，斜体 标签，然后下划线标记 做所有的三来一 特别是集文字， 你应该关闭它们以相反的顺序。 所以，如果你打开​​了大胆的， 斜体，下划线，你 要关闭下划线，斜体，粗体。 这种类型的封装是什么 保持HTML漂亮的和有组织的。 

不像C，虽然语法错误不会 实际上削弱你的HTML可能。 你的HTML可能是没有得到很好的 形成，但仍然工作。 所以，这些错误 可以按幻灯片通过。 这取决于你真的要提高警惕。 有时，他们会失败，但 有时你可以逃脱它。 

它可以是一个真正的 困难的任务，不过， 跟踪，当你打开的 一个标签，当你关闭它， 特别是在你的HTML 文件变得越来越大。 你会想一些帮助。 而且还有在线 验证工具，您 可以用它来看看你的网站 网页，看看它是否是良构的HTML。 而且你一定要 看看那些 并开始使用它们作为你 开始做了一些工作，HTML， 编写HTML，只等你拿 关于组织的一些好习惯 在一个好办法HTML和 良好的作风和确保 你没有做任何事情， 可以创建一个语法错误 会导致你有点 有问题的道路。 

我是道格·劳埃德。 这是CS50。