道格·勞埃德：所以我們花了 about--如果我的數學是正確的， 我認為看back--我想 我們花了大約35視頻聊天 關於C的各個方面，也許 多一點，也許少一些。 而且，我們也沒有覆蓋 一切都在C，但我們 涵蓋的一大塊 語言，它的絕大多數， 肯定是常見的用途。 現在我們要談 關於另一種語言，HTML。 而且我們要覆蓋 它只是一個視頻。 

但是，這將是確定。 這是怎麼回事真正成為 東西你要用來獲取。 現在，你有 一個語言基礎， 它實際上是很容易 開始學習別人。 因此，我們要開始 步驟一點點回來 和粉飾基本 這些語言之間的差異 和那種不打擾您了。 有很多真正偉大的 在互聯網上資源， 我們將開始指導你 對因為互聯網 信息的巨大的資源庫。 所以它不是像你會 是必然失去了 由不具有信息 涵蓋的視頻。 你仍然可以得到 你需要的一切和使用 你已經過知識 建立了通過了解Ç 做這些的學習曲線 其他語言其實很多平坦。 我保證。 

但是，讓我們來談談一種語言 這對每一個網站真正的基礎 頁面，這是HTML。 HTML是超文本標記語言。 HTML是一種語言，但它是 不是一種編程語言。 

HTML沒有變量。 它不具有邏輯或 功能之類的東西。 我們不能做任何 在HTML編程本身。 有時你會聽到 人們形容自己 為HTML編程，這 不完全準確。 我們不能寫HTML程序。 

HTML只是用來標記文本。 這就是所謂的標記語言。 而這是什麼does--這個markup-- 我們使用標籤在HTML和這些tags-- 這markup--語義 定義了頁面的結構 並且使得純文本 之間存在的標記來解釋 通過以不同的方式瀏覽器。 也許這是最好的解釋 此通過舉例說明的方式。 

這裡是一個非常簡單的HTML頁面，而不是 一個HTML程序，再次，一個HTML頁面。 我們知道這是一個 HTML頁面，因為我們已經 界一切與HTML標籤。 因此，這是一個HTML標籤的模樣。 它的尖括號之間。 同時注意，在我們上方 HTML和在最底層， 我們已經做了之後是什麼 顯然很多其他的HTML， 我們有尖括號斜線HTML。 所以排序是這樣的邊界 區別什麼是HTML的，哪些不是。 當然，傳統上，只 當你寫的所有的C程序 與點C擴展， 所有的HTML文件 將結束與圓點的HTML擴展。 但還有更多的事情在這裡。 我們不只是這些HTML標籤。 我們顯然有這 東西叫做頭標記。 嗯，好吧，那是什麼？ 

嗯，也許這是最好的 由主體的方式區分， 體作為網頁的內容。 所以，也許head標籤定義的東西 這不是在瀏覽器窗口恰當， 但以某種方式很重要我們 網頁被渲染正確。 例如，內部的 head標籤，我們有標題標籤。 

所以，標題為hello世界， 這實際上將是什麼 顯示在Chrome瀏覽器中的標籤 或者Safari或Firefox-- 無論瀏覽器，您prefer--那 什麼會出現在標題。 而標籤之前它會顯示 在您的整個瀏覽器窗口 你只能有一個頁面 在一次瀏覽器窗口中打開。 所以這將是 我的網頁在選項卡標題 或瀏覽器窗口吧，你好世界。 和則內容我 網頁將成為世界，你好。 因此，讓我們來看看什麼樣的一些 像這樣的事情可能看起來像。 這是一個非常簡單的HTML頁面。 所以，我在這裡我CS50 IDE和 我放大一點點。 而我只是要 開拓你好點HTML 並告訴你，這是相當多 我們以前看到的網頁內容。 我簡單的HTML，head標籤， 標題標籤，身體等。 我已經縮進是乾淨的。 

然後，我可以做我的 IDE只是預覽頁面。 還有，我們走了。 我的網頁的內容是世界的， 你好，我看不到任何東西 在從頭部標籤那裡。 它的主體的剛的內容。 世界，你好。 又一次身體剛 說，世界，你好。 另一部分缺失。 

所以，這一切真的是。 這是一個非常簡單的基本的HTML頁面。 現在，我已經縮進我的HTML 是非常好的，組織， 但我實際上並不需要。 我可以使它看起來很醜陋。 而這將仍然工作。 這將是完全相同的網頁。 我剛剛擺脫了 所有的白色空間。 

事實證明，白色的空間數據。 所以，當我們發送數據 發送端到接收端，從服務器 到客戶端，數據的成本錢。 所以，擺脫空白 實際上是一個好主意 如果你是人誰提供 了大量的網絡內容。 這是一個壞主意，如果你是 人誰是學習這些東西 你想擁有 它很好地組織。 這是一個更容易比這個來解析。 但它的功能相同。 

縮進之類的東西 實際上並不重要的HTML。 所有的事情就是打開的標籤和 結束標記以正確的順序。 請注意，這裡發生了什麼，雖然。 該標記為我們提供了一種方法， 傳達額外信息 關於我們所編寫的。 你好，世界部分是 解釋為標題。 與世界，你好部分是 解釋為內容 或者應該是什麼 可見在我的網頁。 

有超過這些不同的百 標籤和很多偉大的資源 在網上找到他們。 我們要說說 在這段視頻中幾個人，有的 的真正根本的東西。 但我們不打算談 這一切，因為它 將是詳盡這樣做。 

另一件事可以做，不過， 是開放的開發工具。 如果你回想一下 我們的視頻HTTP， 我解釋了如何打開 了開發者工具。 在Chrome中它通常是F12鍵 打開開發人員工具欄中。 那麼而不是選擇網絡 選項卡，你可以選擇的元素選項卡。 如果你加載一個網頁 頁面，你會真正 看到創建網頁的HTML。 所以你可以學到很多關於HTML 通過查看您喜愛的網站 並看到他們是如何打造的 各條他們，你喜歡。 因此，也許有這個很酷 圖案或類似的東西。 他們如何使用HTML做呢？ 那麼你可以打開你的開發者 工具和懸停在該元素 看看到底是什麼HTML使得它。 所以這是一個非常 學習HTML的好辦法， 我強烈建議 你這樣做既可以學習HTML 並且還學會了一點 一些選項位 在提供給您 開發工具， 肯定會派上用場 你開始做更深入的網絡 編程。 

因此，讓我們來看看一個 夫婦普通的HTML標籤。 我們會跳，看看 什麼這些標籤也將呈現 如通過查看我的IDE的一些文件。 因此，這裡有三個非常基本的標籤 調整文本的視覺外觀。 有'S B標籤，我的標籤，和U標籤。 分別是什麼，他們做的是 使它們之間的文本加粗， 斜體，下劃線和。 因此，讓我們看看這看起來 像我的IDE實際的網頁上。 

所以，在這裡我的IDE我有一個 文件名為BIU點HTML。 BIU點HTML擺明 粗體，斜體，下劃線。 我會打開它。 

我們會看到，在這裡我 有這樣的文字為B標記大膽。 本文是我的標籤斜體。 而本文為U標籤下劃線。 這是什麼將會是什麼樣的？ 好了，我的一切 要做的就是在這裡走了過來 到我的瀏覽器，我的文件瀏覽器，點擊 預覽，這是會發生什麼吧。 

在B之間的文本 標籤確實是現在大膽。 在I之間的文本 標籤確實是現在斜體。 而在U之間的文本 標籤確實是現在強調。 所以，這是相當不錯的。 現在，我們知道如何使文本 看起來多了幾分花哨 或繪製強調某些事情。 另一對夫婦共同的標籤這裡 段落標籤，P和標題標籤， 我在這裡呈現為HX。 

這些P標籤中，這些段落標記， 打破你的文字成幾段。 這是不夠的，只是 按Enter鍵並留下空間， 因為一個計算機只會 做你告訴它做 而忽略白 空間的大部分。 因此，我們不能只打回車 並希望我們的電腦 解釋，我們希望 開始一個新的段落。 我們必須非常明確地說，這 是paragraph--這是another-- 通過在集合P標記封閉每個。 

而且我們也有這些選擇 用於h標籤，這些標題標籤。 我們有六個不同級別 標頭，一，二，三， 四，五，和六個，這是 逐漸變大的，以及較大 頭。 他們變得越來越小， 更小和越來越小。 因此，我們有一個頂層的頭，一個第二 級別標題，等等，等等。 

讓我們來看看，也許一些 p標籤和一些標題標籤 在網頁上的動作。 所以，在這裡我的IDE我有一個名為 PH點HTML，PH值是段落 和標題標籤。 打開了。 有很多事情在這裡 因為我已經把一些LOREM 存有，這裡有的只是隨機文本。 因此，我將縮小一點點 因為有這麼多的事情。 但是請注意，我在很 頂部這裡我有一個H1的水平之一， 頭標記。 然後，我有一個段落，這只是 一串隨機text-- LOREM ipsum-- 只是默認的標準填寫文本。 所以，我有那裡面的兩個段落 一級標題，然後向下跌破我 有一個二級標題在這裡24行， 第二級別標題，和另外兩個 段落。 那麼，這是什麼樣子 如果我在預覽中查看它？ 讓我們來看看。 

這樣會注意到 這裡第一層報頭 還算是有點大 比第二電平頭。 因此，我們使用H1標籤。 並注意p標籤可以讓我們 打破東西伸到段落。 如果我們已經擺脫了這些p標籤的 實際上只是把進入或退貨 在我們所希望的會 是不同的段落， 他們都只是踩住在一起， 那就沒有這個漂亮的段落 分離空間的上方和下方。 所以這就是款 標籤和標題標籤 通常用來做繪製 關注我們的網頁的部分 以這種方式。 

接下來是我們使用一些標籤 建立在我們的網頁列表。 因此，我們必須無序 lists-- ULs--這只是 項目符號列表，有序 指的是一般numbered-- OLs--和內任一 其中的一個，我們需要有 套如何指示列表項，李。 因此，我們有開放的UL標籤 我們把項目裡面它。 然後，當我們與完成 這一點，我們可以關閉UL標記。 

並且類似地，我們可以有 有序或編號列表 放列表項的裡面。 因此，讓我們一起來看看 在幾列 並且他們會 呈現為對CS50 IDE。 所以，我在這裡我的IDE中 文件調用列表點HTML。 讓我們一起來看看。 

在這裡，通知我有一個無序 列出與五樣東西在裡面。 然後，我有一個有序的列表， 我已經改變了標籤一點點， 對不對？ 我說的開始等於六人。 原來，有一個有序列表我 可以設置起點的地方 我want--默認情況下，這將是埃德蒙頓 只需添加這個所謂的屬性 我的OL標籤。 所以，這個列表 啟動六計數。 該編號列表，這樣的元素 應該是六，七，八，九，十， 因為有五個要素 在列表中，而不是一個， 二，三，四，五，其中 是，如果我說了OL的情況下 沒有指定起始屬性。 

所以，我們只能預覽此這樣你就可以 從某種意義上什麼是怎麼回事。 還有，我們走了。 還有我的名單。 前五個要素 無序或項目符號列表。 而接下來的五個要素 是一個獨立的有序列表 從六個開始。 所以這就是我們如何能夠 建立使用HTML列表。 另一件事你可能 想與HTML 在建的表 行和列的信息 在一個演示信息 特別是有組織的方式。 要做到這一點與HTML，我們可以有一個 表定義開始開括號 表。 然後在那個表我們 可能有一組行，TR標籤 以指示每一行。 然後TD標籤去TR標籤內 指定的行中的列。 

為什麼叫TD，而不是TC？ 那麼，TD代表表中的數據。 通常你把 您的信息在那裡。 所以這就是為什麼它是TD，而不是TC。 這是一個有點混亂。 

所以，你有table標籤和 你的表標籤內 你有一個行數，紅素的。 而每行內有 TDS為列數 你想擁有 在該特定行。 讓我們來看看一個非常 簡單表了在CS50的IDE。 

所以，我這裡有一個文件 所謂表點的HTML。 讓我們一起來看看 是什麼樣子。 有很多事情在這裡，但 如果你發現我有一個表打開。 我開始與表的定義。 然後在我的第一排我明顯 有四列，一個，兩個，三個， 四人。 然後我做與此列。 

然後，我開始另一行和 做二，四，六，八。 完成該行。 做另一行，三，六，九，12。 然後最後一行，四， 八，十二，雖然它的 一個小隔斷在這裡，16。 

我完成了該行。 我的表完成。 然後，我做我的HTML。 這是什麼樣子？ 好吧，這不是真的太多地看到。 我已經清楚地組織了我的信息 在某種程度上更有組織的方式。 但它不是超級靚這裡。 而且我們要處理 當我們談論的CSS。 我們會重新審視這個想法 我們做什麼，使一個table-- 也許更好一點格式化嗎？ 但我仍然有四排， 每一個都具有四列， 真是什麼這相當於是一個 很簡單，四乘四乘 表。 

短短幾年更多的標籤，我們來談談。 讓我們來談談 概念HTML表單。 所以，你可能已經在看到了這一點 登錄到一個網頁的上下文中。 通常你在你的用戶名輸入。 你輸入你的密碼， 你是好去。 這將是一個形式的開始。 

跳過div中第二。 我們也有輸入端， 一種適合的形式中。 這些是元素 你實際上輸入進去， 或者你的單選按鈕 滴答，或者檢查 那你列舉出箱。 因此，這些去的形式裡面。 他們包括：基本 形式中的每一行 如果你的表單格式完全正確。 再有就是對這個概念 一個div，它並沒有真正 適合任何特定類別 標籤像那些我已經 在做之前。 它只是排序標定 開始的一些任意division-- div--頁面。 有沒有視覺突破。 有沒有線。 它沒有掀起為 自動獨立塊。 你不得不設置樣式 該辦法做到這一點。 

只是有點它說我想要一個 一塊在我的網頁空間， 我正要打電話 它這個師我的網頁。 我們可以把裡面的東西 的div，而事實上， 當我們頭以上 IDE在第二，我們將 看到我把我的 形成一個div中。 

所以，我在這裡我的IDE中 文件名為DIV形成點的HTML。 讓我們打開它。 請注意，就像我說的， DIV是一種武斷的。 對嗎？ 它並不真正意味著什麼。 所以，我有一個任意 我的網頁的第一部。 然後，而不是另一個分區 後來，開始在八通線， 我有這樣的形式。 而形式裡面我有一個 輸入數量，形式等領域。 所以，我有他的名字是場A-- 這並不真正意味著什麼 右now--，顯然 需要的文字，另外一個， 需要一個密碼，另一個是一個電台 按鈕，另外這是一個複選框， 而另一個是一個提交按鈕。 那麼，這是什麼 實際上所有的模樣？ 好吧，讓我們一起來看看。 我們將在我們的預覽窗口中打開它。 注意，這個任意 第一division--有 在這裡沒有目視間隔。 它並沒有真正做什麼，對不對？ 

然後，我有我的形式。 而且我沒有做任何特殊格式。 所以形式僅僅是一個 信息大排。 如果我有不同格式的我的形式， 我可能是一行一行行。 但我沒有做任何造型。 同樣，我們不是在談論此處的CSS。 我們只是在談論的HTML。 

那麼在我的文字形式，我可以類型 -  記得類型的文本形式 這樣我就可以把我的名字。 而在我的密碼我 可以輸入我的密碼。 而由於該字段 是的輸入密碼， 你不知道我的密碼。 這是所有的點。 

我也可以選擇勾一 單選按鈕或勾選複選框。 或者，我可以提交我的形式。 而我什麼都沒有做， 所以，當我提出我的表格， 頁面只是刷新。 不過，我也許可以配置我 提交按鈕做別的事情。 我們會看到什麼，我們可以做的 在PHP的一個未來的視頻。 但是，這建立了一個非常 簡單的表格，我們 可以用它來讓用戶互動， 信息提交到我們的網站。 

前一個最後的評論，我們 轉移到某些其他的標記 要看看這個 輸入標籤一次。 請注意，我已經強調 在紅色標籤的末端。 我們到目前為止看到的所有其他標籤都有 有開始和結束，一開口 標籤和關閉標籤。 

但是，一個輸入標籤沒有。 有說去沒有文本 在輸入標記之間。 所有的信息 我們打算傳達 包裹，作為部分 該輸入的屬性。 請注意，我們必須輸入姓名度等於x。 類型等於年。 這真是所有 信息我們所需要的。 

這被稱為自結束標記。 它不需要一開口和一 接近，因為所有的信息 包含內 標籤和它的屬性。 所以有時候你會看到這一點，太。 所以要知道，如果你有一個 標籤是完全獨立的， 它打開和關閉本身 左側的開角托架 和斜線角度 支架右側。 我們會看到另一個那些 現在用圖像標記為好。 

在我們討論的圖像，我們 需要談論的超鏈接。 如果我們希望我們的網頁是 互動性和移動在我們身邊， 這將是很好能夠 點擊其中的一個 什麼通常一直是一個鏈接。 這實際上是我們如何建立 在我們的網頁的超鏈接。 有意思的是 還有另一個HTML標記 稱為鏈接，這不是一個超鏈接。 一個在這裡代表錨，和 這就是我們如何表示的超鏈接。 

A HREF等於X表示去 網頁十，所有的一切都 開放式的標記之間 和關閉標籤 是發生了什麼事情是，強調 藍色的文字，看起來像一個鏈接 我們所熟悉的。 下面，我們有一個形象的標籤，這 是一個自閉的標籤顯示 位於X的形象， 你也許能夠改變 該圖像通過指定 寬度和高度 在和其他屬性 這點點點出現。 

在最底部這裡 我們有一個非常有趣的 尋找標記，不 關閉標籤。 這是感嘆號！DOCTYPE HTML。 因此，HTML一直以來，一直圍繞 20世紀90年代初建立的網頁， 而它的消失經歷了 自那時以來，多次修改。 最近一次是在2014年 它進行了修訂 所謂HTML5也就是現在的電流 排序事實上的HTML標準的。 

為了表示我們的網絡 網頁使用HTML5編寫的， 這就是我們如何開始。 它可以省略，但 什麼是基本 方法是，你不能使用任何的標籤 這是HTML5的標籤，這些新的標籤。 所以，我們總是開始 如果我們使用的是HTML5。 和所有的標籤，我們已經討論過 以前不是HTML5標籤。 但是這將表明 HTML5標籤將出席。 因此，我們必須感嘆 DOCTYPE HTML，這 是在一開始我們 的HTML文件，然後該點之後 我們實際上有我們的HTML開放 標記和從那裡繼續。 

最後一個是一個註釋標記， 這看起來略有不同，也。 它與角度開始了 支架感嘆破折號 破折號，但沒有右括號。 在這兩個元件之間存在 是你寫你的意見。 讓我們來看看圖片 和意見，並在CS50的IDE的鏈接。 

所以，我這裡有一個名為圖像鏈接 點HTML，我要去開拓。 並注意我有幾個 評論在這裡我的HTML註釋。 所以，就像在C和其他 編程語言， HTML只是作為一個標記語言 它必須有意見的能力。 所以我顯然會 把瑞克阿斯特利的圖片 地方本格之間 標籤，這個任意分割。 顯然，該文件是 位於里克點JPEG，這 如果我們頭回過來 我的文件樹的第二個， 是存在於一個文件 當前目錄。 所以這是確定。 我可以引用它。 

然後，我可以有內部鏈接。 因此，在第11行注意到這裡 我HREF為hello點HTML。 所以，僅僅是指你好點HTML 存在於當前目錄。 而且我也可以有外部 僅通過指定的HTTPS鏈接 以表明我不是說 關於我的當前目錄中的文件。 我說的是一個真實存在的文件 互聯網，我有地方上 以請求使用HTTP協議。 

因此，讓我們來看看什麼 此頁可能看起來像 並準備瑞克的照片 阿斯特利，以顯示你的屏幕上。 因此，我將預覽此。 還有里克·阿斯特利的 最高層在這個任意 師我把它排在首位。 然後，向下跌破我 有我的鏈接，對不對？ 

我有一個鏈接，你好點HTML。 如果我點擊的是，我得到 移到此頁 是我們非常熟悉的 一開始我們的節目。 如果我再彈出的頁面打開，如果我 流行的圖像鏈接打開一次， 我也可以去外部 到CS50的網站。 還有我們see--我會 縮小一點點這裡 -  我們將看到CS50的網站排序 嵌入在頁面中的中間。 所以，我能夠使內部 鏈接和外部鏈接。 

與HTML的最後一個規則 我們要在這裡談論 是你的HTML應該得到很好的形成。 在C語言中，我們談了很多關於 事物的各種語法。 在HTML語法真的 圍繞著標籤。 你打開每個標籤需要關閉。 而事實上，每個標籤打開 應該被關閉以相反的順序。 

所以，如果你打開一個大膽的標記，斜體 標籤，然後下劃線標記 做所有的三來一 特別是集文字， 你應該關閉它們以相反的順序。 所以，如果你打開了大膽的， 斜體，下劃線，你 要關閉下劃線，斜體，粗體。 這種類型的封裝是什麼 保持HTML漂亮的和有組織的。 

不像C，雖然語法錯誤不會 實際上削弱你的HTML可能。 你的HTML可能是沒有得到很好的 形成，但仍然工作。 所以，這些錯誤 可以按幻燈片通過。 這取決於你真的要提高警惕。 有時，他們會失敗，但 有時你可以逃脫它。 

它可以是一個真正的 困難的任務，不過， 跟踪，當你打開的 一個標籤，當你關閉它， 特別是在你的HTML 文件變得越來越大。 你會想一些幫助。 而且還有在線 驗證工具，您 可以用它來看看你的網站 網頁，看看它是否是良構的HTML。 而且你一定要 看看那些 並開始使用它們作為你 開始做了一些工作，HTML， 編寫HTML，只等你拿 關於組織的一些好習慣 在一個好辦法HTML和 良好的作風和確保 你沒有做任何事情， 可以創建一個語法錯誤 會導致你有點 有問題的道路。 

我是道格·勞埃德。 這是CS50。