HTML：超爲本傳輸協議，特點：支持超鏈接，可以跳轉到其他網頁，構建互聯網。
瀏覽器網頁開發涉及技術：HTML，CSS，Javascript。
HTML：定義網頁結構和內容；
CSS：定義網頁樣式；
JavaScript：定義網頁與用戶的交互。
一、HTML簡介
- 標籤：告訴瀏覽器如何處理這段代碼；
標籤內容：需要展示渲染在網頁上的內容；
標籤名是大小寫不敏感，比如<title>和<TITLE>是同一個標籤。不過，一般習慣都是使用小寫。
HTML 語言忽略縮進和換行。
- 元素
瀏覽器渲染網頁的時候，會把 HTML 源碼解析成一個標籤樹，每個標籤都是一個節點（node），稱爲網頁元素（element）。所以，“標籤”和“元素”基本上是同義詞，只是使用的場合不一樣：標籤是源碼角度來看，元素是從編程角度來看，比如<p>標籤對應網頁的p元素。
嵌套的標籤就構成了網頁元素的層級關係。
所有元素可以分成兩大類：塊級元素（block）和行內元素（inline）。塊級元素默認佔據一個獨立的區域，在網頁上會自動另起一行，佔據 100% 的寬度。
<p>hello</p>
<p>world</p>
上面代碼中，p元素是塊級元素，因此瀏覽器會將內容分成兩行顯示。
行內元素默認與其他元素在同一行，不產生換行。比如，span就是行內元素，通常用來爲某些文字指定特別的樣式。
<span>hello</span>
<span>world</span>
上面代碼中，span元素是行內元素，因此瀏覽器會將兩行內容放在一行顯示。
- 屬性
屬性（attribute）是標籤的額外信息，使用空格與標籤名和其他屬性分隔。
<img src="demo.jpg" width="500">
上面代碼中，<img>標籤有兩個屬性：src和width。
屬性可以用等號指定屬性值，比如上例的demo.jpg就是src的屬性值。屬性值一般放在雙引號裏面，這不是必需的，但推薦總是使用雙引號。
注意，屬性名是大小寫不敏感的，onclick和onClick是同一個屬性。
- 網頁基本標籤
符合語法標準的網頁，應該滿足下面的基本結構。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
不管多麼複雜的網頁，都是從上面這個基本結構衍生出來的。
注意，HTML 代碼的縮進和換行，對於瀏覽器不產生作用。所以，上面的代碼完全可以寫成一行，渲染結果不變。上面這樣分行寫，只是爲了提高可讀性。
-
1 <!doctype>
網頁的第一個標籤通常是<!doctype>，表示文檔類型，告訴瀏覽器如何解析網頁。
一般來說，只要像下面這樣，簡單聲明doctype爲html即可。瀏覽器就會按照 HTML5 的規則處理網頁。
<!doctype html>
有時，該標籤採用完全大寫的形式，以便區別於正常的 HTML 標籤。因爲<!doctype>本質上不是標籤，更像一個處理指令。
<!DOCTYPE html>
- 2
<html>
<html>標籤是網頁的頂層容器，也稱爲根元素（root element），其他元素都是它的子元素。一個網頁只能有一個<html>標籤。
該標籤的lang屬性，表示網頁內容默認的語言。
<html lang="en">
上面代碼表示，網頁的語言是英語。
- 3 <head>
<head>標籤是一個容器標籤，用於放置網頁的元信息。它的內容不會出現在網頁上，而是爲網頁渲染做準備。
<!doctype html>
<html>
<head>
<title>網頁標題</title>
</head>
</html>
<head>是<html>的第一個子元素。如果網頁不包含<head>，瀏覽器會自動創建一個。
<head>的子元素一般有下面七個，後文會一一介紹。
<meta>：設置網頁的元數據。<link>：連接外部樣式表。<title>：設置網頁標題。<style>：放置內嵌的樣式表。<script>：引入腳本。<noscript>：瀏覽器不支持腳本時，所要顯示的內容。<base>：設置網頁內部相對 URL 的計算基準。
<meta>
<meta>標籤用於設置或說明網頁的元數據，必須放在<head>裏面。一個<meta>標籤就是一項元數據，網頁可以有多個<meta>。
（1）name 屬性，content 屬性
<meta>的name屬性表示元數據的名字，content屬性表示元數據的值。
<head>
<meta name="description" content="HTML 語言入門">
<meta name="keywords" content="HTML,教程">
<meta name="author" content="張三">
</head>
上面代碼包含了三個元數據：description是網頁內容的描述，keywords是網頁內容的關鍵字，author是網頁作者。
元數據有很多種，大部分涉及瀏覽器內部工作機制，或者特定的使用場景，這裏就不一一介紹了。
（2）charset 屬性
<meta>還有一個charset屬性，指定網頁內容的編碼方式，該屬性非常重要。如果設置得不正確，瀏覽器可能無法正確解碼，就會出現亂碼。
<meta charset="utf-8">
上面代碼聲明，網頁爲utf-8編碼。雖然可以使用其他的編碼方式，但基本上總是應該採用 UTF-8。
注意，聲明的編碼方式，應該與網頁實際的編碼方式一致，即聲明瞭utf-8，網頁就應該使用 UTF-8 編碼保存。
<title>
<title>標籤用於指定網頁的標題，會顯示在瀏覽器窗口的標題欄。
<head>
<title>網頁標題</title>
</head>
搜索引擎根據這個標籤，顯示每個網頁的標題。它對於網頁在搜索引擎的排序，有很大的影響，應該精心安排，反映網頁的主題。
<title>標籤的內部，不能再放置其他標籤，只能放置無格式的純文本。
<body>
<body>標籤是一個容器標籤，用於放置網頁的主體內容。瀏覽器顯示的頁面內容，都是放置在它的內部。它是<html>的第二個子元素，緊跟在<head>後面。
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<p>hello world</p>
</body>
</html>
空格和換行
HTML 語言有自己的空格處理規則。標籤內容的頭部和尾部的空格，一律忽略不計。
<p> hello world </p>
上面代碼中，hello前面的空格和world後面的空格，瀏覽器一律忽略不計。
標籤內容裏面的多個連續空格（包含製表符\t），會被瀏覽器合併成一個。
<p>hello world</p>
上面代碼中，hello與world之間有多個連續空格，瀏覽器會將它們合併成一個。網頁渲染的結果是，hello與world之間只有一個空格。
瀏覽器還會將文本里面的換行符（\n）和回車符（\r），替換成空格。
<p>hello
world
</p>
上面代碼中，hello與world之間有多個換行，瀏覽器會將它們替換成空格，然後再將多個空格合併成一個。網頁渲染的結果是，hello與world之間有一個空格。
這意味着，HTML 源碼裏面的換行，不會產生換行效果。
註釋
HTML 代碼可以包含註釋，瀏覽器會自動忽略註釋。註釋以<!--開頭，以-->結尾，下面就是一個註釋的例子。
<!-- 這是一個註釋 -->
註釋可以是多行的，並且內部的 HTML 都不再生效了。
<!--
<p>hello world</p>
-->
上面代碼是一個註釋的區塊，內部的代碼都是無效的，瀏覽器不會解析，更不會渲染它們。
註釋有助於理解代碼的含義，複雜的代碼塊前面最好加上註釋。