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

2
00:00:06,986 --> 00:00:10,450
>> DAVEN FARNHAM：今天，我要
說一下關於HTML，

3
00:00:10,450 --> 00:00:12,330
超文本標記語言。

4
00:00:12,330 --> 00:00:14,450
你看到的HTML到處都是這些天。

5
00:00:14,450 --> 00:00:17,190
事實上，如果你在看這個
在瀏覽器中的視頻，你

6
00:00:17,190 --> 00:00:19,120
查看HTML現在。

7
00:00:19,120 --> 00:00:22,760
HTML不是一種編程語言，
相反，它是通過使用一種標記語言

8
00:00:22,760 --> 00:00:25,460
Web瀏覽器渲染網頁
在互聯網上。

9
00:00:25,460 --> 00:00:30,410
>> 所以，你可能會問，究竟是怎麼寫
網頁中的HTML不同

10
00:00:30,410 --> 00:00:33,574
從編程編寫一個程序
像C語言？

11
00:00:33,574 --> 00:00:38,010
那麼，C是非常嚴格的語言
該需要是語法規則

12
00:00:38,010 --> 00:00:39,880
編譯後才能運行。

13
00:00:39,880 --> 00:00:43,070
如果你曾經忘記了包括
分號在一個語句的結束

14
00:00:43,070 --> 00:00:46,660
你的C代碼，你知道我在說什麼
大約在問候嚴格的語法。

15
00:00:46,660 --> 00:00:50,360
>> 雖然Web瀏覽器，是一個比較
原諒，當涉及到的HTML。

16
00:00:50,360 --> 00:00:53,860
即使你的HTML在語法上不
正確的，你的頁面可能仍然是

17
00:00:53,860 --> 00:00:57,150
在瀏覽器中顯示，但它可能
不看你意。

18
00:00:57,150 --> 00:00:59,640
因此，它總是最好
遵守規則。

19
00:00:59,640 --> 00:01:01,990
獲得一個直覺的最佳方式
有關如何工作的事情是

20
00:01:01,990 --> 00:01:03,300
經過一個例子。

21
00:01:03,300 --> 00:01:07,360
>> 所以，我們這裡是一個基本的
藍圖的網頁。

22
00:01:07,360 --> 00:01:10,690
你可能已經注意到了很多東西
在尖括號中。

23
00:01:10,690 --> 00:01:12,900
那麼，那些都只是標籤。

24
00:01:12,900 --> 00:01:15,810
標籤基本上告知Web瀏覽器
那個，嘿嘿，東西

25
00:01:15,810 --> 00:01:17,150
是未來的路。

26
00:01:17,150 --> 00:01:20,770
但請記住，當你打開一個
標籤，你需要關閉它，一旦你有

27
00:01:20,770 --> 00:01:21,750
用它做。

28
00:01:21,750 --> 00:01:24,690
>> 因此，例如，我打開一節
與開放代碼

29
00:01:24,690 --> 00:01:26,960
支架體，右方括號。

30
00:01:26,960 --> 00:01:31,280
我再添加一些文字，在這種情況下，我
第一個網頁然後我去的時候

31
00:01:31,280 --> 00:01:35,540
結束這一節，我用的差不多
具有相同的標籤，除了這一次

32
00:01:35,540 --> 00:01:37,660
體前正斜杠。

33
00:01:37,660 --> 00:01:41,140
在一般情況下，這是你的格式
去每當你打開使用

34
00:01:41,140 --> 00:01:42,680
標記和結束標記。

35
00:01:42,680 --> 00:01:47,900
總之，開放標記和結束標記
構成所謂的一個元素。

36
00:01:47,900 --> 00:01:51,870
>> 如果你看第一行，你會
看到一個感嘆號後面

37
00:01:51,870 --> 00:01:53,350
DOCTYPE HTML。

38
00:01:53,350 --> 00:01:56,280
這真的只是告訴瀏覽器
該文件是一個網頁

39
00:01:56,280 --> 00:01:58,280
用HTML編寫的。

40
00:01:58,280 --> 00:02:01,970
HTML標記本質上說，
這裡談到一些HTML。

41
00:02:01,970 --> 00:02:04,950
然後我們有一個頭與標籤
裡面一個標題標籤。

42
00:02:04,950 --> 00:02:09,430
head標籤你能想到的作為
自帶的包括HTML程式碼

43
00:02:09,430 --> 00:02:12,670
你的大部分網頁的
實際內容。

44
00:02:12,670 --> 00:02:16,700
>> 一般情況下，你把標題您
這裡的網頁，雖然有一些

45
00:02:16,700 --> 00:02:19,350
可能出現的其他標籤
在這裡也。

46
00:02:19,350 --> 00:02:25,020
接下來是您網頁的身上，
您的網站實際的肉和骨頭。

47
00:02:25,020 --> 00:02:28,910
在我們的例子中，我們只是把一個簡單的
一句話，我的第一個網頁，

48
00:02:28,910 --> 00:02:34,100
其中，如果我們運行我們的網站，看起來
有點像這樣。

49
00:02:34,100 --> 00:02:36,810
我們的網頁是不是太奇怪，
但不要擔心。

50
00:02:36,810 --> 00:02:39,210
我們很快就會雲杉它。

51
00:02:39,210 --> 00:02:44,070
>> 所以上面的HTML，我們會給你一個非常
基本模板的網頁，

52
00:02:44,070 --> 00:02:46,310
沒什麼特別的，只是光禿禿的骨頭。

53
00:02:46,310 --> 00:02:49,160
但是，如果我創建一個網頁，
如果我想添加一個

54
00:02:49,160 --> 00:02:50,760
，比如說我自己的圖片？

55
00:02:50,760 --> 00:02:52,760
好吧，我能做到這一點。

56
00:02:52,760 --> 00:02:55,460
有幾個方法可以
將圖像添加到您的網站。

57
00:02:55,460 --> 00:02:59,780
如果圖像是在同一文件夾中
您的HTML文件，您可以鏈接到

58
00:02:59,780 --> 00:03:01,950
通過路徑的圖像是這樣的。

59
00:03:01,950 --> 00:03:05,910
>> 你打開了一個圖像標記後面
通過在alt屬性

60
00:03:05,910 --> 00:03:07,240
源的圖像。

61
00:03:07,240 --> 00:03:12,030
alt屬性的值僅僅是一些
在另一種情況下，一個文本用戶不能

62
00:03:12,030 --> 00:03:13,580
查看該圖像。

63
00:03:13,580 --> 00:03:19,680
或者，您也可以鏈接到
通過一個完整的URL的圖像，像這樣。

64
00:03:19,680 --> 00:03:24,180
現在，該網站實際上並不存在，
但如果有一個圖像

65
00:03:24,180 --> 00:03:27,760
我在這個地址，我可以使用
來源網址，包括

66
00:03:27,760 --> 00:03:29,930
它在我的網站形象。

67
00:03:29,930 --> 00:03:35,590
無論哪種方式，你結束了一個多
漂亮的網站，這樣的事情。

68
00:03:35,590 --> 00:03:39,730
>> 嗯，這是很酷，但我種
的想一些文字在這裡。

69
00:03:39,730 --> 00:03:43,020
因此，讓我們剛剛添加的東西
上述超簡單

70
00:03:43,020 --> 00:03:45,210
圖像，類似的標題。

71
00:03:45,210 --> 00:03:50,830
所有我到目前為止所做的是使用頭
標籤，H1和換行符標籤，BR。

72
00:03:50,830 --> 00:03:54,900
標題標籤使字體有點
位更大，更突出。

73
00:03:54,900 --> 00:03:58,930
換行標記，對其他
手，是那種很酷。

74
00:03:58,930 --> 00:04:03,720
與大多數其他標籤，你沒有
在開幕式和閉幕式換行標記，只是

75
00:04:03,720 --> 00:04:05,120
上面所示的1。

76
00:04:05,120 --> 00:04:10,420
這是因為休息沒有內容
因此，是一個空元素。

77
00:04:10,420 --> 00:04:14,940
>> 這樣的空元素，你可以打開
同時密切只需

78
00:04:14,940 --> 00:04:20,420
包含斜線的
在最初宣布結束。

79
00:04:20,420 --> 00:04:24,390
所以現在我的網站看起來有點
這樣的事情。

80
00:04:24,390 --> 00:04:27,410
一種更好的，但感覺
就像一個死胡同。

81
00:04:27,410 --> 00:04:30,850
有無處可去一邊
從這個主頁。

82
00:04:30,850 --> 00:04:33,075
好吧，讓我們來解決，通過
包括一個鏈接。

83
00:04:33,075 --> 00:04:36,860
>> 我什麼都做的，是使用
由A表示的屬性，使

84
00:04:36,860 --> 00:04:40,780
圖像的鏈接，讓我們說，CS50電視。

85
00:04:40,780 --> 00:04:44,460
這樣一來，只要有人點擊了我，
他們的瀏覽器將被引導到

86
00:04:44,460 --> 00:04:47,810
另外，可能更
有用的網頁。

87
00:04:47,810 --> 00:04:51,040
我不得不盡量減少大小
文字有點，因為我們的網頁是

88
00:04:51,040 --> 00:04:52,470
越來越先進。

89
00:04:52,470 --> 00:04:54,590
但我希望，它仍然是清晰的。

90
00:04:54,590 --> 00:04:59,460
我的網站看起來一模一樣的唯一
現在，每當我點擊圖片，

91
00:04:59,460 --> 00:05:04,410
我的瀏覽器會打開另一個
標籤為CS50.tv網頁。

92
00:05:04,410 --> 00:05:08,970
>> 最後，讓我們說我要去風格
本網站以後使用CSS。

93
00:05:08,970 --> 00:05:11,730
CSS是被稱為一
級聯樣式表。

94
00:05:11,730 --> 00:05:15,230
它基本上提供了一個高效
的方式來編輯和風格

95
00:05:15,230 --> 00:05:16,910
相似的塊的代碼。

96
00:05:16,910 --> 00:05:21,290
我要開始組織我的HTML
使其更易於樣式以後。

97
00:05:21,290 --> 00:05:26,900
在這裡，我設置了兩種不同的
標識符來幫助組織我的代碼。

98
00:05:26,900 --> 00:05:31,170
我用的ID屬性裡面
部門或div標籤，我已經使用了

99
00:05:31,170 --> 00:05:34,120
裡面的類屬性
另一個div標籤。

100
00:05:34,120 --> 00:05:37,190
>> id和class屬性
類似的工作。

101
00:05:37,190 --> 00:05:41,210
唯一的區別是只能有
一種元素，具體的ID，但

102
00:05:41,210 --> 00:05:43,600
任意數量的元素
可以共享一個類。

103
00:05:43,600 --> 00:05:47,690
因此，例如，我可以使用類
圖像多次，但我不能

104
00:05:47,690 --> 00:05:50,533
創建另一個師
與ID頂部。

105
00:05:50,533 --> 00:05:54,750
雖然我沒有深入研究的CSS，
常用的另一種語言

106
00:05:54,750 --> 00:05:59,700
旁邊的HTML，一旦我開始造型
我的代碼利用CSS，我可以使用這些

107
00:05:59,700 --> 00:06:03,730
組織屬性的影響
我的網頁的美觀。

108
00:06:03,730 --> 00:06:07,600
>> 該部門內的頂級一切
將具有類似的花式或任何

109
00:06:07,600 --> 00:06:12,010
另一組的HTML我組進
一流的形象將共享同樣的目光。

110
00:06:12,010 --> 00:06:15,700
這是比試圖編輯更加容易
和風格的圖像或塊

111
00:06:15,700 --> 00:06:17,690
個別文本。

112
00:06:17,690 --> 00:06:21,480
>> 於是我們過的怎麼樣的基礎知識
做一個網頁的HTML。

113
00:06:21,480 --> 00:06:25,280
HTML有很多其他的功能了
當與其他語言配對

114
00:06:25,280 --> 00:06:29,220
如CSS和JavaScript，才能真正
使網頁中脫穎而出。

115
00:06:29,220 --> 00:06:32,960
獲得舒服的最好方法
HTML只是周圍的混亂了，

116
00:06:32,960 --> 00:06:35,120
看看是什麼在起作用，哪些沒有。

117
00:06:35,120 --> 00:06:36,570
>> 我的名字是Daven法納姆。

118
00:06:36,570 --> 00:06:37,820
這是CS50。

119
00:06:37,820 --> 00:06:40,640

120
00:06:40,640 --> 00:06:45,690
>> 因此，例如，我可以使用
類圖像 - 

121
00:06:45,690 --> 00:06:48,028
不，有這麼多的屬性。

122
00:06:48,028 --> 00:06:52,500

123
00:06:52,500 --> 00:06:53,950
我的名字是Daven法納姆。

124
00:06:53,950 --> 00:06:58,560
這是CS 650。

125
00:06:58,560 --> 00:06:59,810
我想說的CSS。

126
00:06:59,810 --> 00:07:02,325

127
00:07:02,325 --> 00:07:03,575
這是CSS。

128
00:07:03,575 --> 00:07:05,408