1
00:00:00,000 --> 00:00:06,100

2
00:00:06,100 --> 00:00:08,790
>> 道格·劳埃德：所以我们花了
about--如果我的数学是正确的，

3
00:00:08,790 --> 00:00:11,900
我认为看back--我想
我们花了大约35视频聊天

4
00:00:11,900 --> 00:00:15,139
关于C的各个方面，也许
多一点，也许少一些。

5
00:00:15,139 --> 00:00:16,930
而且，我们也没有覆盖
一切都在C，但我们

6
00:00:16,930 --> 00:00:21,170
涵盖的一大块
语言，它的绝大多数，

7
00:00:21,170 --> 00:00:22,882
肯定是常见的用途。

8
00:00:22,882 --> 00:00:25,090
现在我们要谈
关于另一种语言，HTML。

9
00:00:25,090 --> 00:00:28,180
而且我们要覆盖
它只是一个视频。

10
00:00:28,180 --> 00:00:29,340
>> 但是，这将是确定。

11
00:00:29,340 --> 00:00:31,410
这是怎么回事真正成为
东西你要用来获取。

12
00:00:31,410 --> 00:00:33,535
现在，你有
一个语言基础，

13
00:00:33,535 --> 00:00:35,776
它实际上是很容易
开始学习别人。

14
00:00:35,776 --> 00:00:37,650
因此，我们要开始
步骤一点点回来

15
00:00:37,650 --> 00:00:43,340
和粉饰基本
这些语言之间的差异

16
00:00:43,340 --> 00:00:45,750
和那种不打扰您了。

17
00:00:45,750 --> 00:00:48,530
有很多真正伟大的
在互联网上资源，

18
00:00:48,530 --> 00:00:51,279
我们将开始指导你
对因为互联网

19
00:00:51,279 --> 00:00:53,340
信息的巨大的资源库。

20
00:00:53,340 --> 00:00:55,960
所以它不是像你会
是必然失去了

21
00:00:55,960 --> 00:00:58,349
由不具有信息
涵盖的视频。

22
00:00:58,349 --> 00:01:00,640
你仍然可以得到
你需要的一切和使用

23
00:01:00,640 --> 00:01:03,590
你已经过知识
建立了通过了解Ç

24
00:01:03,590 --> 00:01:07,130
做这些的学习曲线
其他语言其实很多平坦。

25
00:01:07,130 --> 00:01:08,640
我承诺。

26
00:01:08,640 --> 00:01:12,770
>> 但是，让我们来谈谈一种语言
这对每一个网站真正的基础

27
00:01:12,770 --> 00:01:14,830
页面，这是HTML。

28
00:01:14,830 --> 00:01:18,230
HTML是超文本标记语言。

29
00:01:18,230 --> 00:01:22,700
HTML是一种语言，但它是
不是一种编程语言。

30
00:01:22,700 --> 00:01:23,900
>> HTML没有变量。

31
00:01:23,900 --> 00:01:26,430
它不具有逻辑或
功能之类的东西。

32
00:01:26,430 --> 00:01:30,301
我们不能做任何
在HTML编程本身。

33
00:01:30,301 --> 00:01:32,300
有时你会听到
人们形容自己

34
00:01:32,300 --> 00:01:35,710
为HTML编程，这
不完全准确。

35
00:01:35,710 --> 00:01:37,980
我们不能写HTML程序。

36
00:01:37,980 --> 00:01:40,770
>> HTML只是用来标记文本。

37
00:01:40,770 --> 00:01:42,690
这就是所谓的标记语言。

38
00:01:42,690 --> 00:01:47,680
而这是什么does--这个markup--
我们使用标签在HTML和这些tags--

39
00:01:47,680 --> 00:01:51,600
这markup--语义
定义了页面的结构

40
00:01:51,600 --> 00:01:55,280
并且使得纯文本
之间存在的标记来解释

41
00:01:55,280 --> 00:01:57,320
通过以不同的方式浏览器。

42
00:01:57,320 --> 00:02:00,370
也许这是最好的解释
此通过举例说明的方式。

43
00:02:00,370 --> 00:02:06,450
>> 这里是一个非常简单的HTML页面，而不是
一个HTML程序，再次，一个HTML页面。

44
00:02:06,450 --> 00:02:08,680
我们知道这是一个
HTML页面，因为我们已经

45
00:02:08,680 --> 00:02:11,480
界一切与HTML标签。

46
00:02:11,480 --> 00:02:13,850
因此，这是一个HTML标签的模样。

47
00:02:13,850 --> 00:02:15,870
它的尖括号之间。

48
00:02:15,870 --> 00:02:18,570
同时注意，在我们上方
HTML和在最底层，

49
00:02:18,570 --> 00:02:21,400
我们已经做了之后是什么
显然很多其他的HTML，

50
00:02:21,400 --> 00:02:24,310
我们有尖括号斜线HTML。

51
00:02:24,310 --> 00:02:29,262
所以排序是这样的边界
区别什么是HTML的，哪些不是。

52
00:02:29,262 --> 00:02:32,220
当然，传统上，只
当你写的所有的C程序

53
00:02:32,220 --> 00:02:35,300
与点C扩展，
所有的HTML文件

54
00:02:35,300 --> 00:02:37,909
将结束与圆点的HTML扩展。

55
00:02:37,909 --> 00:02:39,200
但还有更多的事情在这里。

56
00:02:39,200 --> 00:02:40,658
我们不只是这些HTML标签。

57
00:02:40,658 --> 00:02:44,010
我们显然有这
东西叫做头标记。

58
00:02:44,010 --> 00:02:46,010
嗯，好吧，那是什么？

59
00:02:46,010 --> 00:02:48,550
>> 嗯，也许这是最好的
由主体的方式区分，

60
00:02:48,550 --> 00:02:50,590
体作为网页的内容。

61
00:02:50,590 --> 00:02:55,860
所以，也许head标签定义的东西
这不是在浏览器窗口恰当，

62
00:02:55,860 --> 00:02:59,410
但以某种方式很重要我们
网页被渲染正确。

63
00:02:59,410 --> 00:03:02,490
例如，内部的
head标签，我们有标题标签。

64
00:03:02,490 --> 00:03:05,500
>> 所以，标题为hello世界，
这实际上将是什么

65
00:03:05,500 --> 00:03:08,797
显示在Chrome浏览器中的标签
或者Safari或Firefox--

66
00:03:08,797 --> 00:03:11,880
无论浏览器，您prefer--那
什么会出现在标题。

67
00:03:11,880 --> 00:03:14,800
而标签之前它会显示
在您的整个浏览器窗口

68
00:03:14,800 --> 00:03:19,710
你只能有一个页面
在一次浏览器窗口中打开。

69
00:03:19,710 --> 00:03:22,160
所以这将是
我的网页在选项卡标题

70
00:03:22,160 --> 00:03:24,600
或浏览器窗口吧，你好世界。

71
00:03:24,600 --> 00:03:28,611
和则内容我
网页将成为世界，你好。

72
00:03:28,611 --> 00:03:31,360
因此，让我们来看看什么样的一些
像这样的事情可能看起来像。

73
00:03:31,360 --> 00:03:33,210
这是一个非常简单的HTML页面。

74
00:03:33,210 --> 00:03:35,970
所以，我在这里我CS50 IDE和
我放大一点点。

75
00:03:35,970 --> 00:03:38,290
而我只是要
开拓你好点HTML

76
00:03:38,290 --> 00:03:42,000
并告诉你，这是相当多
我们以前看到的网页内容。

77
00:03:42,000 --> 00:03:45,240
我简单的HTML，head标签，
标题标签，身体等。

78
00:03:45,240 --> 00:03:47,320
我已经缩进是干净的。

79
00:03:47,320 --> 00:03:51,530
>> 然后，我可以做我的
IDE只是预览页面。

80
00:03:51,530 --> 00:03:52,630
还有，我们走了。

81
00:03:52,630 --> 00:03:56,070
我的网页的内容是世界的，
你好，我看不到任何东西

82
00:03:56,070 --> 00:03:58,500
在从头部标签那里。

83
00:03:58,500 --> 00:03:59,980
它的主体的刚的内容。

84
00:03:59,980 --> 00:04:00,780
世界，你好。

85
00:04:00,780 --> 00:04:03,700
又一次身体刚
说，世界，你好。

86
00:04:03,700 --> 00:04:06,160
另一部分缺失。

87
00:04:06,160 --> 00:04:07,610
>> 所以，这一切真的是。

88
00:04:07,610 --> 00:04:11,370
这是一个非常简单的基本的HTML页面。

89
00:04:11,370 --> 00:04:14,280
现在，我已经缩进我的HTML
是非常好的，组织，

90
00:04:14,280 --> 00:04:15,840
但我实际上并不需要。

91
00:04:15,840 --> 00:04:17,959
我可以使它看起来很丑陋。

92
00:04:17,959 --> 00:04:19,467
而这将仍然工作。

93
00:04:19,467 --> 00:04:21,050
这将是完全相同的网页。

94
00:04:21,050 --> 00:04:23,100
我刚刚摆脱了
所有的白色空间。

95
00:04:23,100 --> 00:04:24,820
>> 事实证明，白色的空间数据。

96
00:04:24,820 --> 00:04:28,540
所以，当我们发送数据
发送端到接收端，从服务器

97
00:04:28,540 --> 00:04:30,670
到客户端，数据的成本钱。

98
00:04:30,670 --> 00:04:34,460
所以，摆脱空白
实际上是一个好主意

99
00:04:34,460 --> 00:04:37,320
如果你是人谁提供
了大量的网络内容。

100
00:04:37,320 --> 00:04:39,820
这是一个坏主意，如果你是
人谁是学习这些东西

101
00:04:39,820 --> 00:04:41,528
你想拥有
它很好地组织。

102
00:04:41,528 --> 00:04:43,810
这是一个更容易比这个来解析。

103
00:04:43,810 --> 00:04:45,540
但它的功能相同。

104
00:04:45,540 --> 00:04:48,720
>> 缩进之类的东西
实际上并不重要的HTML。

105
00:04:48,720 --> 00:04:53,634
所有的事情就是打开的标签和
结束标记以正确的顺序。

106
00:04:53,634 --> 00:04:55,050
请注意，这里发生了什么，虽然。

107
00:04:55,050 --> 00:04:58,450
该标记为我们提供了一种方法，
传达额外信息

108
00:04:58,450 --> 00:04:59,940
关于我们所编写的。

109
00:04:59,940 --> 00:05:03,130
你好，世界部分是
解释为标题。

110
00:05:03,130 --> 00:05:06,410
与世界，你好部分是
解释为内容

111
00:05:06,410 --> 00:05:09,090
或者应该是什么
可见在我的网页。

112
00:05:09,090 --> 00:05:12,167
>> 有超过这些不同的百
标签和很多伟大的资源

113
00:05:12,167 --> 00:05:13,000
在网上找到他们。

114
00:05:13,000 --> 00:05:14,900
我们要说说
在这段视频中几个人，有的

115
00:05:14,900 --> 00:05:16,440
的真正根本的东西。

116
00:05:16,440 --> 00:05:18,440
但我们不打算谈
这一切，因为它

117
00:05:18,440 --> 00:05:20,250
将是详尽这样做。

118
00:05:20,250 --> 00:05:22,880
>> 另一件事可以做，不过，
是开放的开发工具。

119
00:05:22,880 --> 00:05:26,069
如果你回想一下
我们的视频HTTP，

120
00:05:26,069 --> 00:05:27,860
我解释了如何打开
了开发者工具。

121
00:05:27,860 --> 00:05:32,020
在Chrome中它通常是F12键
打开开发人员工具栏中。

122
00:05:32,020 --> 00:05:35,909
那么而不是选择网络
选项​​卡，你可以选择的元素选项卡。

123
00:05:35,909 --> 00:05:37,700
如果你加载一个网页
页面，你会真正

124
00:05:37,700 --> 00:05:40,280
看到创建网页的HTML。

125
00:05:40,280 --> 00:05:44,090
所以你可以学到很多关于HTML
通过查看您喜爱的网站

126
00:05:44,090 --> 00:05:48,474
并看到他们是如何打造的
各条他们，你喜欢。

127
00:05:48,474 --> 00:05:50,890
因此，也许有这个很酷
图案或类似的东西。

128
00:05:50,890 --> 00:05:52,140
他们如何使用HTML做呢？

129
00:05:52,140 --> 00:05:55,630
那么你可以打开你的开发者
工具和悬停在该元素

130
00:05:55,630 --> 00:05:57,700
看看到底是什么HTML使得它。

131
00:05:57,700 --> 00:05:59,450
所以这是一个非常
学习HTML的好办法，

132
00:05:59,450 --> 00:06:02,330
我强烈建议
你这样做既可以学习HTML

133
00:06:02,330 --> 00:06:04,930
并且还学会了一点
一些选项位

134
00:06:04,930 --> 00:06:07,050
在提供给您
开发工具，

135
00:06:07,050 --> 00:06:10,200
肯定会派上用场
你开始做更深入的网络

136
00:06:10,200 --> 00:06:11,090
编程。

137
00:06:11,090 --> 00:06:14,080
>> 因此，让我们来看看一个
夫妇普通的HTML标签。

138
00:06:14,080 --> 00:06:17,210
我们会跳，看看
什么这些标签也将呈现

139
00:06:17,210 --> 00:06:20,490
如通过查看我的IDE的一些文件。

140
00:06:20,490 --> 00:06:26,330
因此，这里有三个非常基本的标签
调整文本的视觉外观。

141
00:06:26,330 --> 00:06:29,050
有'S B标签，我的标签，和U标签。

142
00:06:29,050 --> 00:06:33,170
分别是什么，他们做的是
使它们之间的文本加粗，

143
00:06:33,170 --> 00:06:35,430
斜体，下划线和。

144
00:06:35,430 --> 00:06:40,430
因此，让我们看看这看起来
像我的IDE实际的网页上。

145
00:06:40,430 --> 00:06:43,390
>> 所以，在这里我的IDE我有一个
文件名为​​BIU点HTML。

146
00:06:43,390 --> 00:06:46,770
BIU点HTML摆明
粗体，斜体，下划线。

147
00:06:46,770 --> 00:06:47,830
我会打开它。

148
00:06:47,830 --> 00:06:51,810
>> 我们会看到，在这里我
有这样的文字为B标记大胆。

149
00:06:51,810 --> 00:06:54,010
本文是我的标签斜体。

150
00:06:54,010 --> 00:06:56,307
而本文为U标签下划线。

151
00:06:56,307 --> 00:06:57,640
这是什么将会是什么样的？

152
00:06:57,640 --> 00:06:59,473
好了，我的一切
要做的就是在这里走了过来

153
00:06:59,473 --> 00:07:04,690
到我的浏览器，我的文件浏览器，点击
预览，这是会发生什么吧。

154
00:07:04,690 --> 00:07:07,520
>> 在B之间的文本
标签确实是现在大胆。

155
00:07:07,520 --> 00:07:10,720
在I之间的文本
标签确实是现在斜体。

156
00:07:10,720 --> 00:07:14,634
而在U之间的文本
标签确实是现在强调。

157
00:07:14,634 --> 00:07:15,550
所以，这是相当不错的。

158
00:07:15,550 --> 00:07:18,450
现在，我们知道如何使文本
看起来多了几分花哨

159
00:07:18,450 --> 00:07:20,360
或绘制强调某些事情。

160
00:07:20,360 --> 00:07:25,530
另一对夫妇共同的标签这里
段落标签，P和标题标签，

161
00:07:25,530 --> 00:07:27,980
我在这里呈现为HX。

162
00:07:27,980 --> 00:07:32,520
>> 这些P标签中，这些段落标记，
打破你的文字成几段。

163
00:07:32,520 --> 00:07:34,646
这是不够的，只是
按Enter键并留下空间，

164
00:07:34,646 --> 00:07:37,186
因为一个计算机只会
做你告诉它做

165
00:07:37,186 --> 00:07:39,450
而忽略白
空间的大部分。

166
00:07:39,450 --> 00:07:41,636
因此，我们不能只打回车
并希望我们的电脑

167
00:07:41,636 --> 00:07:43,760
解释，我们希望
开始一个新的段落。

168
00:07:43,760 --> 00:07:47,670
我们必须非常明确地说，这
是paragraph--这是another--

169
00:07:47,670 --> 00:07:50,740
通过在集合P标记封闭每个。

170
00:07:50,740 --> 00:07:54,560
>> 而且我们也有这些选择
用于h标签，这些标题标签。

171
00:07:54,560 --> 00:07:57,000
我们有六个不同级别
标头，一，二，三，

172
00:07:57,000 --> 00:08:01,110
四，五，和六个，这是
逐渐变大的，以及较大

173
00:08:01,110 --> 00:08:01,710
头。

174
00:08:01,710 --> 00:08:04,360
他们变得越来越小，
更小和越来越小。

175
00:08:04,360 --> 00:08:07,690
因此，我们有一个顶层的头，一个第二
级别标题，等等，等等。

176
00:08:07,690 --> 00:08:10,480
>> 让我们来看看，也许一些
p标签和一些标题标签

177
00:08:10,480 --> 00:08:13,110
在网页上的动作。

178
00:08:13,110 --> 00:08:18,180
所以，在这里我的IDE我有一个名为
PH点HTML，PH值是段落

179
00:08:18,180 --> 00:08:18,970
和标题标签。

180
00:08:18,970 --> 00:08:20,709
打开了。

181
00:08:20,709 --> 00:08:23,000
有很多事情在这里
因为我已经把一些LOREM

182
00:08:23,000 --> 00:08:24,660
存有，这里有的只是随机文本。

183
00:08:24,660 --> 00:08:27,284
因此，我将缩小一点点
因为有这么多的事情。

184
00:08:27,284 --> 00:08:31,980
但是请注意，我在很
顶部这里我有一个H1的水平之一，

185
00:08:31,980 --> 00:08:32,802
头标记。

186
00:08:32,802 --> 00:08:36,010
然后，我有一个段落，这只是
一串随机text-- LOREM ipsum--

187
00:08:36,010 --> 00:08:38,720
只是默认的标准填写文本。

188
00:08:38,720 --> 00:08:41,970
所以，我有那里面的两个段落
一级标题，然后向下跌破我

189
00:08:41,970 --> 00:08:46,850
有一个二级标题在这里24行，
第二级别标题，和另外两个

190
00:08:46,850 --> 00:08:47,840
段落。

191
00:08:47,840 --> 00:08:51,910
那么，这是什么样子
如果我在预览中查看它？

192
00:08:51,910 --> 00:08:53,790
让我们来看看。

193
00:08:53,790 --> 00:08:55,730
>> 这样会注意到
这里第一层报头

194
00:08:55,730 --> 00:08:58,420
还算是有点大
比第二电平头。

195
00:08:58,420 --> 00:08:59,940
因此，我们使用H1标签。

196
00:08:59,940 --> 00:09:03,820
并注意p标签可以让我们
打破东西伸到段落。

197
00:09:03,820 --> 00:09:07,500
如果我们已经摆脱了这些p标签的
实际上只是把进入或退货

198
00:09:07,500 --> 00:09:10,110
在我们所希望的会
是不同的段落，

199
00:09:10,110 --> 00:09:13,193
他们都只是踩住在一起，
那就没有这个漂亮的段落

200
00:09:13,193 --> 00:09:15,840
分离空间的上方和下方。

201
00:09:15,840 --> 00:09:18,300
所以这就是款
标签和标题标签

202
00:09:18,300 --> 00:09:22,440
通常用来做绘制
关注我们的网页的部分

203
00:09:22,440 --> 00:09:23,550
以这种方式。

204
00:09:23,550 --> 00:09:27,560
>> 接下来是我们使用一些标签
建立在我们的网页列表。

205
00:09:27,560 --> 00:09:30,820
因此，我们必须无序
lists-- ULs--这只是

206
00:09:30,820 --> 00:09:34,090
项目符号列表，有序
指的是一般numbered--

207
00:09:34,090 --> 00:09:37,680
OLs--和内任一
其中的一个，我们需要有

208
00:09:37,680 --> 00:09:40,600
套如何指示列表项，李。

209
00:09:40,600 --> 00:09:44,370
因此，我们有开放的UL标签
我们把项目里面它。

210
00:09:44,370 --> 00:09:46,920
然后，当我们与完成
这一点，我们可以关闭UL标记。

211
00:09:46,920 --> 00:09:49,850
>> 并且类似地，我们可以有
有序或编号列表

212
00:09:49,850 --> 00:09:51,560
放列表项的里面。

213
00:09:51,560 --> 00:09:53,350
因此，让我们一起来看看
在几列

214
00:09:53,350 --> 00:09:57,230
并且他们会
呈现为对CS50 IDE。

215
00:09:57,230 --> 00:10:00,640
所以，我在这里我的IDE中
文件调用列表点HTML。

216
00:10:00,640 --> 00:10:03,100
让我们一起来看看。

217
00:10:03,100 --> 00:10:08,482
>> 在这里，通知我有一个无序
列出与五样东西在里面。

218
00:10:08,482 --> 00:10:11,440
然后，我有一个有序的列表，
我已经改变了标签一点点，

219
00:10:11,440 --> 00:10:11,939
对？

220
00:10:11,939 --> 00:10:13,152
我说的开始等于六人。

221
00:10:13,152 --> 00:10:16,110
原来，有一个有序列表我
可以设置起点的地方

222
00:10:16,110 --> 00:10:20,130
我want--默认情况下，这将是埃德蒙顿
只需添加这个所谓的属性

223
00:10:20,130 --> 00:10:21,190
我的OL标签。

224
00:10:21,190 --> 00:10:23,572
所以，这个列表
启动六计数。

225
00:10:23,572 --> 00:10:26,780
该编号列表，这样的元素
应该是六，七，八，九，十，

226
00:10:26,780 --> 00:10:29,930
因为有五个要素
在列表中，而不是一个，

227
00:10:29,930 --> 00:10:33,770
二，三，四，五，其中
是，如果我说了OL的情况下

228
00:10:33,770 --> 00:10:36,730
没有指定起始属性。

229
00:10:36,730 --> 00:10:41,594
>> 所以，我们只能预览此这样你就可以
从某种意义上什么是怎么回事。

230
00:10:41,594 --> 00:10:42,260
还有，我们走了。

231
00:10:42,260 --> 00:10:44,610
还有我的名单。

232
00:10:44,610 --> 00:10:47,810
前五个要素
无序或项目符号列表。

233
00:10:47,810 --> 00:10:51,010
而接下来的五个要素
是一个独立的有序列表

234
00:10:51,010 --> 00:10:52,980
从六个开始。

235
00:10:52,980 --> 00:10:56,247
所以这就是我们如何能够
建立使用HTML列表。

236
00:10:56,247 --> 00:10:58,080
另一件事你可能
想与HTML

237
00:10:58,080 --> 00:11:01,520
在建的表
行和列的信息

238
00:11:01,520 --> 00:11:04,560
在一个演示信息
特别是有组织的方式。

239
00:11:04,560 --> 00:11:09,110
要做到这一点与HTML，我们可以有一个
表定义开始开括号

240
00:11:09,110 --> 00:11:10,160
表。

241
00:11:10,160 --> 00:11:14,680
然后在那个表我们
可能有一组行，TR标签

242
00:11:14,680 --> 00:11:15,980
以指示每一行。

243
00:11:15,980 --> 00:11:22,510
然后TD标签去TR标签内
指定的行中的列。

244
00:11:22,510 --> 00:11:24,340
>> 为什么叫TD，而不是TC？

245
00:11:24,340 --> 00:11:25,940
那么，TD代表表中的数据。

246
00:11:25,940 --> 00:11:27,900
通常你把
您的信息在那里。

247
00:11:27,900 --> 00:11:29,440
所以这就是为什么它是TD，而不是TC。

248
00:11:29,440 --> 00:11:31,140
这是一个有点混乱。

249
00:11:31,140 --> 00:11:33,720
>> 所以，你有table标签和
你的表标签内

250
00:11:33,720 --> 00:11:35,600
你有一个行数，红素的。

251
00:11:35,600 --> 00:11:40,030
而每行内有
TDS为列数

252
00:11:40,030 --> 00:11:42,880
你想拥有
在该特定行。

253
00:11:42,880 --> 00:11:47,730
让我们来看看一个非常
简单表了在CS50的IDE。

254
00:11:47,730 --> 00:11:49,730
>> 所以，我这里有一个文件
所谓表点的HTML。

255
00:11:49,730 --> 00:11:53,390
让我们一起来看看
是什么样子。

256
00:11:53,390 --> 00:11:56,225
有很多事情在这里，但
如果你发现我有一个表打开。

257
00:11:56,225 --> 00:11:57,850
我开始与表的定义。

258
00:11:57,850 --> 00:12:02,100
然后在我的第一排我明显
有四列，一个，两个，三个，

259
00:12:02,100 --> 00:12:02,660
四人。

260
00:12:02,660 --> 00:12:04,290
然后我做与​​此列。

261
00:12:04,290 --> 00:12:07,750
>> 然后，我开始另一行和
做二，四，六，八。

262
00:12:07,750 --> 00:12:08,850
完成该行。

263
00:12:08,850 --> 00:12:11,410
做另一行，三，六，九，12。

264
00:12:11,410 --> 00:12:14,830
然后最后一行，四，
八，十二，虽然它的

265
00:12:14,830 --> 00:12:16,560
一个小隔断在这里，16。

266
00:12:16,560 --> 00:12:17,710
>> 我完成了该行。

267
00:12:17,710 --> 00:12:18,970
我的表完成。

268
00:12:18,970 --> 00:12:21,430
然后，我做我的HTML。

269
00:12:21,430 --> 00:12:22,590
这是什么样子？

270
00:12:22,590 --> 00:12:26,014

271
00:12:26,014 --> 00:12:27,430
好吧，这不是真的太多地看到。

272
00:12:27,430 --> 00:12:31,690
我已经清楚地组织了我的信息
在某种程度上更有组织的方式。

273
00:12:31,690 --> 00:12:33,755
但它不是超级靓这里。

274
00:12:33,755 --> 00:12:36,130
而且我们要处理
当我们谈论的CSS。

275
00:12:36,130 --> 00:12:38,930
我们会重新审视这个想法
我们做什么，使一个table--

276
00:12:38,930 --> 00:12:41,260
也许更好一点格式化吗？

277
00:12:41,260 --> 00:12:45,070
但我仍然有四排，
每一个都具有四列，

278
00:12:45,070 --> 00:12:48,890
真是什么这相当于是一个
很简单，四乘四乘

279
00:12:48,890 --> 00:12:49,870
表。

280
00:12:49,870 --> 00:12:51,690
>> 短短几年更多的标签，我们来谈谈。

281
00:12:51,690 --> 00:12:54,617
让我们来谈谈
概念HTML表单。

282
00:12:54,617 --> 00:12:57,450
所以，你可能已经在看到了这一点
登录到一个网页的上下文中。

283
00:12:57,450 --> 00:12:59,100
通常你在你的用户名输入。

284
00:12:59,100 --> 00:13:01,510
你输入你的密码，
你是好去。

285
00:13:01,510 --> 00:13:04,170
这将是一个形式的开始。

286
00:13:04,170 --> 00:13:05,420
>> 跳过div中第二。

287
00:13:05,420 --> 00:13:07,987
我们也有输入端，
一种适合的形式中。

288
00:13:07,987 --> 00:13:10,320
这些是元素
你实际上输入进去，

289
00:13:10,320 --> 00:13:12,580
或者你的单选按钮
滴答，或者检查

290
00:13:12,580 --> 00:13:14,310
那你列举出箱。

291
00:13:14,310 --> 00:13:15,770
因此，这些去的形式里面。

292
00:13:15,770 --> 00:13:18,500
他们包括：基本
形式中的每一行

293
00:13:18,500 --> 00:13:19,887
如果你的表单格式完全正确。

294
00:13:19,887 --> 00:13:22,220
再有就是对这个概念
一个div，它并没有真正

295
00:13:22,220 --> 00:13:25,060
适合任何特定类别
标签像那些我已经

296
00:13:25,060 --> 00:13:26,170
在做之前。

297
00:13:26,170 --> 00:13:29,790
它只是排序标定
开始的一些任意division--

298
00:13:29,790 --> 00:13:31,670
div--页面。

299
00:13:31,670 --> 00:13:33,210
有没有视觉突破。

300
00:13:33,210 --> 00:13:34,800
有没有线。

301
00:13:34,800 --> 00:13:37,180
它没有掀起为
自动独立块。

302
00:13:37,180 --> 00:13:39,430
你不得不设置样式
该办法做到这一点。

303
00:13:39,430 --> 00:13:42,110
>> 只是有点它说我想要一个
一块在我的网页空间，

304
00:13:42,110 --> 00:13:45,190
我正要打电话
它这个师我的网页。

305
00:13:45,190 --> 00:13:47,619
我们可以把里面的东西
的div，而事实上，

306
00:13:47,619 --> 00:13:49,410
当我们头以上
IDE在第二，我们将

307
00:13:49,410 --> 00:13:53,760
看到我把我的
形成一个div中。

308
00:13:53,760 --> 00:13:57,050
>> 所以，我在这里我的IDE中
文件名为​​DIV形成点的HTML。

309
00:13:57,050 --> 00:13:59,260
让我们打开它。

310
00:13:59,260 --> 00:14:01,460
请注意，就像我说的，
DIV是一种武断的。

311
00:14:01,460 --> 00:14:01,640
对？

312
00:14:01,640 --> 00:14:02,973
它并不真正意味着什么。

313
00:14:02,973 --> 00:14:05,140
所以，我有一个任意
我的网页的第一部。

314
00:14:05,140 --> 00:14:07,848
然后，而不是另一个分区
后来，开始在八通线，

315
00:14:07,848 --> 00:14:08,730
我有这样的形式。

316
00:14:08,730 --> 00:14:13,594
而形式里面我有一个
输入数量，形式等领域。

317
00:14:13,594 --> 00:14:16,510
所以，我有他的名字是场A--
这并不真正意味着什么

318
00:14:16,510 --> 00:14:19,350
右now--，显然
需要的文字，另外一个，

319
00:14:19,350 --> 00:14:22,630
需要一个密码，另一个是一个电台
按钮，另外这是一个复选框，

320
00:14:22,630 --> 00:14:24,797
而另一个是一个提交按钮。

321
00:14:24,797 --> 00:14:26,630
那么，这是什么
实际上所有的模样？

322
00:14:26,630 --> 00:14:27,629
好吧，让我们一起来看看。

323
00:14:27,629 --> 00:14:31,010
我们将在我们的预览窗口中打开它。

324
00:14:31,010 --> 00:14:33,557
注意，这个任意
第一division--有

325
00:14:33,557 --> 00:14:34,640
在这里没有目视间隔。

326
00:14:34,640 --> 00:14:37,150
它并没有真正做什么，对不对？

327
00:14:37,150 --> 00:14:38,220
>> 然后，我有我的形式。

328
00:14:38,220 --> 00:14:39,890
而且我没有做任何特殊格式。

329
00:14:39,890 --> 00:14:42,680
所以形式仅仅是一个
信息大排。

330
00:14:42,680 --> 00:14:46,424
如果我有不同格式的我的形式，
我可能是一行一行行。

331
00:14:46,424 --> 00:14:47,590
但我没有做任何造型。

332
00:14:47,590 --> 00:14:49,256
同样，我们不是在谈论此处的CSS。

333
00:14:49,256 --> 00:14:51,030
我们只是在谈论的HTML。

334
00:14:51,030 --> 00:14:53,980
>> 那么在我的文字形式，我可以类型 - 
记得类型的文本形式

335
00:14:53,980 --> 00:14:55,480
这样我就可以把我的名字。

336
00:14:55,480 --> 00:14:57,330
而在我的密码我
可以输入我的密码。

337
00:14:57,330 --> 00:14:59,740
而由于该字段
是的输入密码，

338
00:14:59,740 --> 00:15:01,470
你不知道我的密码。

339
00:15:01,470 --> 00:15:02,800
这是所有的点。

340
00:15:02,800 --> 00:15:09,140
>> 我也可以选择勾一
单选按钮或勾选复选框。

341
00:15:09,140 --> 00:15:10,420
或者，我可以提交我的形式。

342
00:15:10,420 --> 00:15:11,810
而我什么都没有做，
所以，当我提出我的表格，

343
00:15:11,810 --> 00:15:13,090
页面只是刷新。

344
00:15:13,090 --> 00:15:16,970
不过，我也许可以配置我
提交按钮做别的事情。

345
00:15:16,970 --> 00:15:20,410
我们会看到什么，我们可以做的
在PHP的一个未来的视频。

346
00:15:20,410 --> 00:15:22,520
但是，这建立了一个非常
简单的表格，我们

347
00:15:22,520 --> 00:15:27,360
可以用它来让用户互动，
信息提交到我们的网站。

348
00:15:27,360 --> 00:15:29,620
>> 前一个最后的评论，我们
转移到某些其他的标记

349
00:15:29,620 --> 00:15:32,040
要看看这个
输入标签一次。

350
00:15:32,040 --> 00:15:35,760
请注意，我已经强调
在红色标签的末端。

351
00:15:35,760 --> 00:15:39,390
我们到目前为止看到的所有其他标签都有
有开始和结束，一开口

352
00:15:39,390 --> 00:15:41,030
标签和关闭标签。

353
00:15:41,030 --> 00:15:42,520
>> 但是，一个输入标签没有。

354
00:15:42,520 --> 00:15:46,860
有说去没有文本
在输入标记之间。

355
00:15:46,860 --> 00:15:49,160
所有的信息
我们打​​算传达

356
00:15:49,160 --> 00:15:52,640
包裹，作为部分
该输入的属性。

357
00:15:52,640 --> 00:15:54,690
请注意，我们必须输入姓名度等于x。

358
00:15:54,690 --> 00:15:55,580
类型等于年。

359
00:15:55,580 --> 00:15:57,660
这真是所有
信息我们所需要的。

360
00:15:57,660 --> 00:15:59,470
>> 这被称为自结束标记。

361
00:15:59,470 --> 00:16:02,470
它不需要一开口和一
接近，因为所有的信息

362
00:16:02,470 --> 00:16:04,974
包含内
标签和它的属性。

363
00:16:04,974 --> 00:16:06,390
所以有时候你会看到这一点，太。

364
00:16:06,390 --> 00:16:10,400
所以要知道，如果你有一个
标签是完全独立的，

365
00:16:10,400 --> 00:16:14,170
它打开和关闭本身
左侧的开角托架

366
00:16:14,170 --> 00:16:17,000
和斜线角度
支架右侧。

367
00:16:17,000 --> 00:16:20,580
我们会看到另一个那些
现在用图像标记为好。

368
00:16:20,580 --> 00:16:23,300
>> 在我们讨论的图像，我们
需要谈论的超链接。

369
00:16:23,300 --> 00:16:26,080
如果我们希望我们的网页是
互动性和移动在我们身边，

370
00:16:26,080 --> 00:16:28,121
这将是很好能够
点击其中的一个

371
00:16:28,121 --> 00:16:30,190
什么通常一直是一个链接。

372
00:16:30,190 --> 00:16:34,440
这实际上是我们如何建立
在我们的网页的超链接。

373
00:16:34,440 --> 00:16:36,540
有意思的是
还有另一个HTML标记

374
00:16:36,540 --> 00:16:39,000
称为链接，这不是一个超链接。

375
00:16:39,000 --> 00:16:44,130
一个在这里代表锚，和
这就是我们如何表示的超链接。

376
00:16:44,130 --> 00:16:49,150
>> A HREF等于X表示去
网页十，所有的一切都

377
00:16:49,150 --> 00:16:51,580
开放式的标记之间
和关闭标签

378
00:16:51,580 --> 00:16:56,010
是发生了什么事情是，强调
蓝色的文字，看起来像一个链接

379
00:16:56,010 --> 00:16:57,590
我们所熟悉的。

380
00:16:57,590 --> 00:17:01,660
下面，我们有一个形象的标签，这
是一个自闭的标签显示

381
00:17:01,660 --> 00:17:05,599
位于X的形象，
你也许能够改变

382
00:17:05,599 --> 00:17:08,280
该图像通过指定
宽度和高度

383
00:17:08,280 --> 00:17:11,640
在和其他属性
这点点点出现。

384
00:17:11,640 --> 00:17:14,260
>> 在最底部这里
我们有一个非常有趣的

385
00:17:14,260 --> 00:17:16,170
寻找标记，不
关闭标签。

386
00:17:16,170 --> 00:17:19,410
这是感叹号！DOCTYPE HTML。

387
00:17:19,410 --> 00:17:23,300
因此，HTML一直以来，一直围绕
20世纪90年代初建立的网页，

388
00:17:23,300 --> 00:17:25,859
而它的消失经历了
自那时以来，多次修改。

389
00:17:25,859 --> 00:17:28,550
最近一次是在2014年
它进行了修订

390
00:17:28,550 --> 00:17:33,440
所谓HTML5也就是现在的电流
排序事实上的HTML标准的。

391
00:17:33,440 --> 00:17:36,730
>> 为了表示我们的网络
网页使用HTML5编写的，

392
00:17:36,730 --> 00:17:38,160
这就是我们如何开始。

393
00:17:38,160 --> 00:17:40,380
它可以省略，但
什么是基本

394
00:17:40,380 --> 00:17:45,930
方法是，你不能使用任何的标签
这是HTML5的标签，这些新的标签。

395
00:17:45,930 --> 00:17:48,591
所以，我们总是开始
如果我们使用的是HTML5。

396
00:17:48,591 --> 00:17:51,340
和所有的标签，我们已经讨论过
以前不是HTML5标签。

397
00:17:51,340 --> 00:17:55,470
但是这将表明
HTML5标签将出席。

398
00:17:55,470 --> 00:17:58,400
因此，我们必须感叹
DOCTYPE HTML，这

399
00:17:58,400 --> 00:18:01,280
是在一开始我们
的HTML文件，然后该点之后

400
00:18:01,280 --> 00:18:04,930
我们实际上有我们的HTML开放
标记和从那里继续。

401
00:18:04,930 --> 00:18:10,050
>> 最后一个是一个注释标记，
这看起来略有不同，也。

402
00:18:10,050 --> 00:18:12,810
它与角度开始了
支架感叹破折号

403
00:18:12,810 --> 00:18:15,220
破折号，但没有右括号。

404
00:18:15,220 --> 00:18:20,150
在这两个元件之间存在
是你写你的意见。

405
00:18:20,150 --> 00:18:28,420
让我们来看看图片
和意见，并在CS50的IDE的链接。

406
00:18:28,420 --> 00:18:32,850
>> 所以，我这里有一个名为图像链接
点HTML，我要去开拓。

407
00:18:32,850 --> 00:18:36,420
并注意我有几个
评论在这里我的HTML注释。

408
00:18:36,420 --> 00:18:38,990
所以，就像在C和其他
编程语言，

409
00:18:38,990 --> 00:18:43,169
HTML只是作为一个标记语言
它必须有意见的能力。

410
00:18:43,169 --> 00:18:45,710
所以我显然会
把瑞克阿斯特利的图片

411
00:18:45,710 --> 00:18:49,060
地方本格之间
标签，这个任意分割。

412
00:18:49,060 --> 00:18:51,497
显然，该文件是
位于里克点JPEG，这

413
00:18:51,497 --> 00:18:53,580
如果我们头回过来
我的文件树的第二个，

414
00:18:53,580 --> 00:18:55,490
是存在于一个文件
当前目录。

415
00:18:55,490 --> 00:18:56,031
所以这是确定。

416
00:18:56,031 --> 00:18:57,710
我可以引用它。

417
00:18:57,710 --> 00:18:59,680
>> 然后，我可以有内部链接。

418
00:18:59,680 --> 00:19:05,080
因此，在第11行注意到这里
我HREF为hello点HTML。

419
00:19:05,080 --> 00:19:09,050
所以，仅仅是指你好点HTML
存在于当前目录。

420
00:19:09,050 --> 00:19:12,980
而且我也可以有外部
仅通过指定的HTTPS链接

421
00:19:12,980 --> 00:19:16,180
以表明我不是说
关于我的当前目录中的文件。

422
00:19:16,180 --> 00:19:19,730
我说的是一个真实存在的文件
互联网，我有地方上

423
00:19:19,730 --> 00:19:23,370
以请求使用HTTP协议。

424
00:19:23,370 --> 00:19:25,990
>> 因此，让我们来看看什么
此页可能看起来像

425
00:19:25,990 --> 00:19:29,500
并准备瑞克的照片
阿斯特利，以显示你的屏幕上。

426
00:19:29,500 --> 00:19:31,490
因此，我将预览此。

427
00:19:31,490 --> 00:19:33,800
还有里克·阿斯特利的
最高层在这个任意

428
00:19:33,800 --> 00:19:35,008
师我把它排在首位。

429
00:19:35,008 --> 00:19:36,960
然后，向下跌破我
有我的链接，对不对？

430
00:19:36,960 --> 00:19:39,330
>> 我有一个链接，你好点HTML。

431
00:19:39,330 --> 00:19:42,860
如果我点击的是，我得到
移到此页

432
00:19:42,860 --> 00:19:47,050
是我们非常熟悉的
一开始我们的节目。

433
00:19:47,050 --> 00:19:50,880
如果我再弹出的页面打开，如果我
流行的图像链接打开一次，

434
00:19:50,880 --> 00:19:54,420
我也可以去外部
到CS50的网站。

435
00:19:54,420 --> 00:19:56,740
还有我们see--我会
缩小一点点这里 - 

436
00:19:56,740 --> 00:20:00,260
我们将看到CS50的网站排序
嵌入在页面中的中间。

437
00:20:00,260 --> 00:20:04,670
所以，我能够使内部
链接和外部链接。

438
00:20:04,670 --> 00:20:07,200
>> 与HTML的最后一个规则
我们要在这里谈论

439
00:20:07,200 --> 00:20:09,510
是你的HTML应该得到很好的形成。

440
00:20:09,510 --> 00:20:13,020
在C语言中，我们谈了很多关于
事物的各种语法。

441
00:20:13,020 --> 00:20:17,650
在HTML语法真的
围绕着标签。

442
00:20:17,650 --> 00:20:19,660
你打开每个标签需要关闭。

443
00:20:19,660 --> 00:20:22,630
而事实上，每个标签打开
应该被关闭以相反的顺序。

444
00:20:22,630 --> 00:20:25,790
>> 所以，如果你打开​​一个大胆的标记，斜体
标签，然后下划线标记

445
00:20:25,790 --> 00:20:28,120
做所有的三来一
特别是集文字，

446
00:20:28,120 --> 00:20:30,070
你应该关闭它们以相反的顺序。

447
00:20:30,070 --> 00:20:32,270
所以，如果你打开​​了大胆的，
斜体，下划线，你

448
00:20:32,270 --> 00:20:35,240
要关闭下划线，斜体，粗体。

449
00:20:35,240 --> 00:20:39,990
这种类型的封装是什么
保持HTML漂亮的和有组织的。

450
00:20:39,990 --> 00:20:44,370
>> 不像C，虽然语法错误不会
实际上削弱你的HTML可能。

451
00:20:44,370 --> 00:20:48,730
你的HTML可能是没有得到很好的
形成，但仍然工作。

452
00:20:48,730 --> 00:20:50,589
所以，这些错误
可以按幻灯片通过。

453
00:20:50,589 --> 00:20:52,130
这取决于你真的要提高警惕。

454
00:20:52,130 --> 00:20:54,760
有时，他们会失败，但
有时你可以逃脱它。

455
00:20:54,760 --> 00:20:56,509
>> 它可以是一个真正的
困难的任务，不过，

456
00:20:56,509 --> 00:21:00,660
跟踪，当你打开的
一个标签，当你关闭它，

457
00:21:00,660 --> 00:21:04,110
特别是在你的HTML
文件变得越来越大。

458
00:21:04,110 --> 00:21:05,490
你会想一些帮助。

459
00:21:05,490 --> 00:21:07,560
而且还有在线
验证工具，您

460
00:21:07,560 --> 00:21:11,474
可以用它来看看你的网站
网页，看看它是否是良构的HTML。

461
00:21:11,474 --> 00:21:13,390
而且你一定要
看看那些

462
00:21:13,390 --> 00:21:16,620
并开始使用它们作为你
开始做了一些工作，HTML，

463
00:21:16,620 --> 00:21:20,800
编写HTML，只等你拿
关于组织的一些好习惯

464
00:21:20,800 --> 00:21:24,377
在一个好办法HTML和
良好的作风和确保

465
00:21:24,377 --> 00:21:27,210
你没有做任何事情，
可以创建一个语法错误

466
00:21:27,210 --> 00:21:30,270
会导致你有点
有问题的道路。

467
00:21:30,270 --> 00:21:31,190
>> 我是道格·劳埃德。

468
00:21:31,190 --> 00:21:33,450
这是CS50。

469
00:21:33,450 --> 00:21:34,859