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