一、HTML基礎
1.1.1 HTML簡介
html不是一種程式設計語言，而是一種描述性的标記語言，用于描述超文本中内容的顯示方式，如大小，顔色
（簡單了解就是學習一大堆用于布局的API）
eg:<I>斜體字</I>
<B>粗體字</B>
1.1.2 HTML檔案的基本結構
<html> //html開始标記
//頭
<head>
<meta charset="UTF-8"> //元資訊
<title>标題</title>
</head>
//主體
<body>
......主體内容
</body>
</html> //html結束标記 基本上所有标記有頭有尾 <X>開始 </X>結束 中間内容 即:<X>内容</X>
1.1.3 認識HTML标記
所有标記成對出現，結束标記總是在開始标記前增加一個/
标記(也叫标簽)與标記之間可以嵌套，也可以放置各種屬性
源檔案中，标記不區分大小寫
第二章 HTML基本标簽
2.1 HTML頭部标記head
<head>...</head>
一般包括标題，基礎資訊，元資訊（<meta>）
注：元資訊 即<meta>
元資訊是關于資訊的資訊，元資訊允許伺服器提供所發送資料的資訊，如HTTP可以提高所發的對象語言和對象，也可以用元資訊來實作有條件請求以及報告事務完成。收到資料的浏覽器可以根據元資訊确定伺服器發來的是什麼内容，預料有什麼資料，确知是否接收完整的資料，以及過程中是否出錯，這樣客戶就可以知道傳輸對象的類型。
<head>元素的作用範圍是整篇文檔。<head>元素中可以有<meta>元資訊定義、文檔樣式表定義和腳本等資訊，定義在HTML語言頭部的内容往往不會在網頁上直接顯示
2.2 标題标記title
HTML頁面的标題一般是用來說明頁面的用途，它顯示在浏覽器的标題欄
文法: <title>...</title>
2.3元資訊标簽meta
meta元素提供的資訊不顯示在頁面中，一般用來定義頁面資訊的說明、關鍵字、重新整理等。
在HTML中，meta标記不需要設定結束标記，在一個尖括号内的就是一個meta内容。在一個html網頁中可以有多個meta标簽。meta标簽的屬性有name和http-equiv,其中name屬性主要用于描述網頁，以便于搜尋引擎查找、分類
2.3.1 設定頁面關鍵字
文法: <meta name="keywords" content="具體關鍵字">
說明:name為屬性名稱，這裡是keywords(提示框裡的，不是自己随便定義的字元串),也就是設定網頁的關鍵字屬性，而在content中則定義具體的關鍵字
注: 關鍵字可以不止一個，最好根據不同的頁面，制定不同的關鍵字組合，這樣頁面被搜尋到的機率将大大增加
2.3.2 設定頁面說明
便于搜尋引擎查找
文法:<meta name="description" content="設定頁面說明">
2.3.3 定義編輯工具·
文法:<meta name="generator" content="設定頁面說明">
2.3.4 設定作者資訊
文法:<meta name="author" content="作者姓名">
注:description,generator,author 都是html提供的，不是自己随便寫的
2.3.5 設定網頁文字及語言
可以設定網頁的語言編碼方式，這樣浏覽器就可以正确選擇語言，而不需要人工選取
文法:<meta http-equiv="content-type" content="text/html; charset=字元集類型" /> #注意結尾多了/
說明: http-equiv用于傳送HTTP通信協定的标頭，而在content中才是具體的屬性值。charset用于設定網頁的内碼語系，也就是字元集的類型，國内常用的是GB碼，charset常常設定為gb2312,即簡體中文。現在UTF-8更加流行。英文是ISO-8859-1字元集，此外還有其他的字元集。
2.3.6 設定網頁的定時跳轉
使用<meta/>标簽可以使網頁在經過一定時間後自動重新整理，這可通過将http-equiv屬性值設定為refresh來實作。content屬性值可以設定為更新時間。
文法: <meta http-equiv="refresh" content="跳轉時間;URL=跳轉到的位址">
說明:refresh表示網頁的重新整理，content中設定重新整理時間(通常以秒為機關)和重新整理後的連結位址，分号隔開
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5;url=index.html" />
<title>網頁定時跳轉</title>
</head>
<body>
5秒後自動跳轉
</body>
</html> //index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
跳轉到這來
</body>
</html> 2.4 網頁的主體标記body
網頁的主體部分包括要在浏覽器中顯示處理的所有資訊。在網頁的主體标記中有很多的屬性設定，包括網頁的背景設定、文字屬性設定和連結設定等。
2.4.1 網頁的背景色bgcolor
使用<body>标簽的bgcolor屬性可以為整個網頁定義背景顔色
文法:<body bgcolor="背景顔色">
說明:bgcolor的值可以是一個已命名的顔色，也可以是一個十六進制的顔色值
eg:
<html>
<head>
<meta charset="UTF-8">
<title>背景色</title>
</head>
<body bgcolor="red">
紅紅的網頁
</body>
</html> 運作效果
2.4.2 網頁背景圖檔 background
以圖檔作為網頁背景，入csdn. 可以設定背景圖檔的平鋪方式，顯示方式等
文法: <body background="圖檔的位址">
說明: 圖檔位址可以是相對位址，也可以是絕對位址。預設情況下，使用者可以省略此屬性，這時圖檔會按照水準和垂直的方向不斷重複出現，直到鋪滿整個頁面。
eg:
<html>
<head>
<meta charset="UTF-8">
<title>背景圖檔</title>
</head>
<body background="image/pal4.bmp">
仙劍奇俠傳四
</body>
</html> 目錄:
運作結果:
2.4.3 文字顔色 text
這一屬性可以對頁面中所有文字起作用
文法: <body text="文字顔色">
eg:
<html>
<head>
<meta charset="UTF-8">
<title>頁面所有文字顔色</title>
</head>
<body text="blue">
<p>仙劍奇俠傳四仙劍奇俠傳四仙劍奇俠傳四仙劍奇俠傳四仙劍奇俠傳四仙劍奇俠傳四仙劍奇俠傳四仙劍奇俠傳四</p>
<p>仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五</p>
<p>仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五</p>
<p>仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五</p>
<p>仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五</p>
<p>仙劍奇俠傳五仙劍奇俠傳五仙劍奇俠傳五</p>
<p>仙劍奇俠傳五仙劍奇俠傳五</p>
<p>仙劍奇俠傳五</p>
</body>
</html> 運作結果:
2.4.4 連結文字屬性link
超連結是網頁中最重要、最根本的元素之一。網站中的一個個網頁是通過超連結的形式關聯在一起的，正是因為有了網頁之間的連結才形成了這紛繁複雜的網絡世界。超連結中以文字連結最多，在預設情況下，浏覽器以藍色作為超連結文字的顔色，通路過的文字則顔色變為暗紅色。可以通過link參數改變連結文字的顔色。
文法: <body link="顔色">
說明: 這一屬性的設定與前面幾個設定顔色的參數類似，都是與body标簽放置在一起，表明它對網頁所有未單獨設定的元素起作用。
eg:
<html>
<head>
<meta charset="UTF-8">
<title>超連結文字顔色</title>
</head>
<body link="#993300">
<center>
<a href="http://www.baidu.com">百度一下</a>
</center>
</body>
</html> 注: <center>本内容居中顯示</center>
<a href="連結網址">超連結文本</a>
運作結果:
點選百度一下後:
使用alink可以設定正在通路的文字顔色
使用vlink可以設定通路後連結文字的顔色
eg:
<html>
<head>
<meta charset="UTF-8">
<title>超連結文字顔色</title>
</head>
<body link="red" alink="blue" vlink="black">
<center>
<a href="#">轉到目前頁面</a>
</center>
</body>
</html> 注：#表示跳轉到目前頁面
剛開始:
單擊時:滑鼠按住還沒放時:
單擊後：頁面跳轉後
2.4.5 邊距margin
在網頁中可以設定頁面與浏覽器邊框之間的距離,包括上邊距和左邊距
文法: <body topmargin=上邊距的值 leftmargin=左邊距的值>
說明: 預設情況下,邊距的值以像素為機關
eg:
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
</head>
<body topmargin="100" leftmargin="100">
<p>設定頁面上邊距</p>
<p>設定頁面左邊距</p>
</body>
</html> 運作結果:
2.5 頁面注釋标記 <!-- -->
和其他語言一樣,必不可少的注釋
文法: <!--注釋内容-->
eg:
<html>
<head>
<meta charset="UTF-8">
<title>margin</title>
</head>
<body>
<!--頁面注釋-->
<center>
頁面注釋内容
</center>
</body>
</html>