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