1
00:00:01,440 --> 00:00:03,080
這這將是一個非常快速的視頻。

2
00:00:03,090 --> 00:00:09,710
我只是想強調一些開發工具，谷歌Chrome瀏覽器為我們提供了與各隊進行工作，並請參閱評估。

3
00:00:09,720 --> 00:00:12,260
因此，這是我們在過去的影片提出的任務列表。

4
00:00:12,360 --> 00:00:16,950
它仍然醜如就在那時，我只想強調兩件事。

5
00:00:17,130 --> 00:00:23,040
所以第一個我們可以實際查看就像我們在其他國家人民頁面的源代碼。

6
00:00:23,040 --> 00:00:28,210
在這個過程中每一個出來的方式早，但是這還不是全部有用。

7
00:00:28,230 --> 00:00:37,110
我們無法去改變這個或者什麼，但我們可以做的是點擊右鍵，然後單擊檢查元素。

8
00:00:37,110 --> 00:00:40,170
而這是什麼要做的是啟動元素督察。

9
00:00:40,320 --> 00:00:43,170
所以，你會看到我們在這裡得到這個新的看法。

10
00:00:43,530 --> 00:00:47,080
因此，有一堆我們要了解所有這些時間標籤。

11
00:00:47,160 --> 00:00:50,270
現在我們剛剛開始在這個元素的標籤。

12
00:00:50,370 --> 00:00:56,700
因此，這就是它的它實際上是所有元素中的一個很好的互動表示。

13
00:00:56,700 --> 00:00:59,280
所以你可以看到，我們有我們的doctype。

14
00:00:59,370 --> 00:01:03,600
每個小組將有身體的頭。

15
00:01:03,840 --> 00:01:13,650
或者每一個或美國和我們的盟友以及輸入和我想讓你注意到的第一件事是因為我將鼠標懸停在這些元素。

16
00:01:13,710 --> 00:01:15,420
因此，讓我們將鼠標懸停在該H-1。

17
00:01:15,690 --> 00:01:17,810
它實際上強調了在這裡。

18
00:01:18,000 --> 00:01:23,230
所以，我在這裡盤旋，它的突出展示我這裡有，你在說什麼的人。

19
00:01:23,260 --> 00:01:27,960
這裡的UL或這裡的輸入框。

20
00:01:28,290 --> 00:01:30,020
這裡的文字等。

21
00:01:30,120 --> 00:01:32,790
因此，這是在自己的權利是有用的。

22
00:01:32,790 --> 00:01:39,100
只是為了調試的東西並看到一個元件被服用的空間並在那裡它落入一個文件的流程。

23
00:01:39,360 --> 00:01:44,140
但我真正想關注的是在這裡的樣式選項卡綜援標籤。

24
00:01:44,190 --> 00:01:45,890
因此，讓我們選擇這些東西。

25
00:01:46,080 --> 00:01:51,600
我們選擇這個盟友課堂上完成頂部或第二個。

26
00:01:51,810 --> 00:01:53,000
而我要去一下就可以了。

27
00:01:53,160 --> 00:02:01,700
而在這裡，我看到所有的該元素目前已適用於它的風格的交互式視圖。

28
00:02:02,070 --> 00:02:12,540
所以我們看到，因為已完成的課程它有這個文飾線通過，因為蒼蠅的代碼，我寫的所有的盟友。

29
00:02:12,540 --> 00:02:16,500
它有一個紅色邊框和我們所能做的實際上是把這些或關閉。

30
00:02:16,920 --> 00:02:21,360
所以，我現在已經切換所有盟友紅色邊框了。

31
00:02:21,390 --> 00:02:29,800
我可以把他們回來了，我可以在這裡改變這個活到6個像素或10或一個像素。

32
00:02:30,210 --> 00:02:35,050
我可以點擊顏色，選擇新的顏色給它一個藍色邊框。

33
00:02:35,100 --> 00:02:38,900
有一件事我會強調，雖然這並不能真正改變我們的檔案。

34
00:02:38,910 --> 00:02:44,360
這，只要我刷新此頁面或關閉窗口，我的變化消失僅是在瀏覽器中。

35
00:02:44,370 --> 00:02:47,340
因此，這是真的在兩種不同的方式非常有用。

36
00:02:47,340 --> 00:03:01,320
一個是在你自己的代碼你自己的網頁和測試的東西的工作，看看當您更改顏色或更改邊框或更改他們的一些屬性的某些其他的屬性，只是視覺上立即看到發生了什麼。

37
00:03:01,320 --> 00:03:05,990
這是有用的另一件事實際上是在看別人的代碼。

38
00:03:06,150 --> 00:03:09,570
所以，我有MVNO開放只是主頁。

39
00:03:10,200 --> 00:03:14,910
比方說，我想知道一些更多關於這個文本就在這裡。

40
00:03:15,270 --> 00:03:20,790
我能做的其實是右鍵單擊它，然後單擊檢查元素。

41
00:03:21,360 --> 00:03:25,000
如果我點擊尤其是將實際突出了我一個元素。

42
00:03:25,350 --> 00:03:31,670
所以，你可以看到它跳了馬上到正確的標籤，它是H-1共享的知識。

43
00:03:31,680 --> 00:03:33,430
再有就是在那裡一個跨度為好。

44
00:03:33,450 --> 00:03:34,920
它說，在開放的網絡。

45
00:03:35,240 --> 00:03:37,190
因此，讓我們來看看在H-1。

46
00:03:37,470 --> 00:03:40,530
而在這裡我得到的所有的樣式。

47
00:03:40,650 --> 00:03:41,980
所以，第一個是顏色。

48
00:03:42,210 --> 00:03:46,630
如果我改變了的H-1的顏色發生變化。

49
00:03:46,890 --> 00:03:57,360
因此，讓我們說，我想知道的字體，所以我會在某個時候有人Mazola寫道，應用字體樣式向下滾動和。

50
00:03:57,360 --> 00:04:06,030
這裡的事情是，這就是我們要著眼於在未來幾年視頻的是，這可能從另一個選擇某處被繼承。

51
00:04:06,030 --> 00:04:11,200
因此，它可能已經被應用到直接在整個身體而不僅僅是H-1。

52
00:04:11,250 --> 00:04:13,940
所以，如果你向下滾動，它看起來就像是在這裡。

53
00:04:13,950 --> 00:04:21,640
字體家庭敞開，如果那樣子，做它發出的光非常現實的意義。

54
00:04:22,560 --> 00:04:25,010
因此，這不是向您展示我們是如何真正做字體的。

55
00:04:25,020 --> 00:04:26,950
這是一個獨立的視頻很快就來了。

56
00:04:26,970 --> 00:04:35,810
這只是告訴你，如果你想找到的東西了約一個網頁，讓我們說，我想知道是什麼類型的元素是這些按鈕就在這裡。

57
00:04:35,900 --> 00:04:47,250
圖標我可以選擇的放大鏡將鼠標懸停在東西，點擊它會告訴我的權利在這裡，眼睛的作用。

58
00:04:47,340 --> 00:04:52,790
所以眼睛是用於圖標其他標籤，我們可以看到在這裡的所有樣式。

59
00:04:52,880 --> 00:05:03,080
同樣的事情，如果我想看看這是什麼因素在這裡我可以點擊它，一旦他們有放大鏡，我看到它是一個錨標記，它看起來像。

60
00:05:03,090 --> 00:05:11,190
因此，這不是一個圖像標記它是一個錨標記必須意味著他們的地方設置背景圖片，讓我們看到這是。

61
00:05:11,270 --> 00:05:11,850
開始了。

62
00:05:11,850 --> 00:05:14,860
他們設置背景圖片是這樣的形象就在這裡。

63
00:05:15,090 --> 00:05:33,100
因此，要總結這一切我只是想證明你可以在谷歌瀏覽器打開這個屬性檢查器可以查看HMO，你可以查看評估不僅可以查看它，但你可以操縱它，你可以與它進行交互，你可以嘗試改變的東西，你可以做你自己的網站，或者你可以做到這一點對別人的網站。

64
00:05:33,150 --> 00:05:39,130
因此，如果你想出去，並在您想要有效複製複製別人的設計，這是非常有用的。

65
00:05:39,150 --> 00:05:43,670
當我們到達的Javascript你實際看到我們可以做同樣的事情對JavaScript以及。