HTML+CSS筆記
網頁的基本結構
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- charset="utf-8" 告訴瀏覽器採用 utf-8 的編碼格式解碼，防止出現亂碼 --> <!-- 瀏覽器預設採用的是 gb2312 的編碼格式 --> <title>網頁標題</title> </head> <body> <!-- 在網頁中顯示的內容 --> </body> </html>
- ：為 HTML5 的文件宣告，表示以 HTML5 的標準編寫。
- ：HTML文件中的根標籤，有且僅有一個，所有內容都被其包括。
- ：用於設定網頁頭部資訊，提供給瀏覽器觀看，瀏覽器通過提供的資訊從而解析網頁，其內容不會顯示在網頁中。
- ：表示網頁的主體，承載著需要在網頁中顯示的全部內容。
- ：
meta標籤設定網頁中的一些元資料，比如網頁的字符集（charset）、關鍵字和簡介等。 ：用於設定網頁的標題
常用的標籤
1. 標題標籤（h1~h6)
<h1>一級標題</h1> <h2>一級標題</h2> <h3>一級標題</h3> <h4>一級標題</h4> <h5>一級標題</h5> <h6>一級標題</h6>
執行效果：
一級標題
一級標題
一級標題
一級標題
一級標題
一級標題
說明：標題中的文字由h1~h6依次從大到小進行展示。且h1標籤的重要性僅次於title標籤，搜尋引擎在檢索玩title邊前後會立即檢視h1中的內容，因此h1標籤會影響到頁面在搜尋引擎中的排名，且頁面只能寫一個h1。
2. 段落標籤（p)
<p>
第一行段落 文字...，
第二行段落文字---，
第三行段落文字！！！，<br />
第四行段落文字+++。
</p>
執行效果：
第一行段落 文字...， 第二行段落文字---， 第三行段落文字！！！，
第四行段落文字+++。
說明：
- 在
p標籤中，無論有多少空格，最終只會顯示一個空格。- 及時在
p標籤中通過回車換行，但是不會有任何效果，即無法通過回車換行。- 如果想在
p標籤進行換行，則需要藉助<br />標籤。
3. 水平線標籤（hr）
<hr />
執行效果：
說明：在指定位置畫出一條直線。
實體（轉義字串）
在HTML中，一些如：<、>這類特殊字元是不能直接使用的，因此需要一些特殊的字元來表示這些特殊字元，這些特殊符號我們稱為實體（轉義字串）。示例如下
<p>
a<b>c <!-- 原意為：a小於b大於c -->
</p>
執行效果：
ac
執行發現，<b>無法正常顯示，並且字元 c 有加粗效果，因為<b></b>標籤就是將其包裹的文字進行加粗處理，如果想正常顯示出<b>，則需要藉助實體來進行轉換。
實體語法：
&實體名字;：例如
<顯示一個小於號（less than），>顯示一個大於號（greater than）。
<p>
a<b>c <br />
空格：一段測 試文字, <br />
版權符號：©
</p>
執行效果：
a<b>c
空格：一段測試文字,
版權符號：©
說明：
(non-breaking space)：不間斷顯示空格，可以解決在<p>標籤中無法顯示多個空格的問題。- 更多實體符號可參考HTML實體符號參考手冊
圖片格式
在開發過程中，常見的圖片格式有jpg（jpej）、png和gif，不同格式的圖片展現的效果不同，因此使用時有一定的原則，但並非硬性要求。
三中圖片格式的特點：
jpg（jpeg）：支援的圖片顏色比較多，圖片可以壓縮，但不支援透明的，一般用來儲存顏色豐富的圖片。png：支援的顏色多，並且支援複雜的透明，一般用來儲存顏色複雜的透明圖片。gif：支援的顏色少，只支援簡單的透明，但是支援動態圖，一般用於儲存顏色單一或者動態的圖片。
圖片使用原則（非硬性要求）：
圖片效果一致，使用圖片大小最小的。
圖片效果不一致，使用圖片效果好的。
HTML5標籤
1.圖片標籤（img）
由於在純文字中無法直接新增圖片，但在網頁中需要通過圖片去展示一些資訊，因此需要通過<img />標籤間接引入圖片，示例如下：
<img src="http://pic.51yuansu.com/pic3/cover/03/47/75/5bac12ac81be0_610.jpg" alt='logo' />
執行效果：
說明：
src屬性是引入的圖片地址，既可以是網頁上的連結，也可以是電腦中的圖片路徑。
- 相對路徑：引入的圖片路徑是相對於當前檔案（編寫HTML的檔案）所在資料夾的路徑。
- 絕對路徑：引入的圖片路徑是電腦中某個盤中圖片所在位置的完整路徑。
- ../可用來返回上一級
alt屬性的作用是當圖片無法正常先試時，則用屬性值代替圖片，並且搜尋引擎可以通過alt的屬性值來搜尋圖片。比如：在搜尋框中輸入logo，這張圖片就會被搜尋引擎找到。如果要設定圖片的尺寸，則可用
width和height屬性，其兩者的屬性值單位為px，當僅僅設定兩者中的一個時，圖片等比例縮放。
2. META標籤（meta）
meta標籤一般用來設定網頁中的一些元資料，比如網頁的字符集（charset）、關鍵字和簡介等，通常放在head標籤裡面。示例如下：
<meta charset="utf-8" /> <!-- 常用的編髮型別有：ASCII、gbk、gb2312、utf-8等 -->
<meta name="keywords" content="java,javascript,python,前端" />
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
說明：
charset：用於告訴瀏覽器通過哪種編碼格式對網頁進行解碼，以防出現亂碼現象。name="keywords"：用於設定網頁的關鍵字，多個關鍵字在content屬性值中以逗號隔開。http-equiv="refresh"：對網頁進行重定向處理，此時content中的值為：秒數;url=重定向的網址。
3. 內聯框架（iframe）
使用內聯框架可以引入一個外部頁面。在實際開發中並不推薦使用，因為內聯框架的內容不會被搜尋引擎檢索。
<iframe src="http://www.baidu.com" width="100px"></iframe>
執行效果：
4. 超連結（a）
點選後進行網頁跳轉
<a href="http://www.baidu.com" target="_self">百度一下</a>
執行效果：
說明：
href：該屬性值為點選後跳轉的網址。
target：主要設定一怎樣的方式展示跳轉後的網頁。
_self：預設值，在當前視窗開啟網頁。_blank：在新視窗開啟網頁。_top：一般用於內聯框架中，在最頂部的框架中開啟網頁。_parent：一般用於內聯框架中，在父框架中開啟網頁。- 如果屬性值為內聯框架中的
name屬性的屬性值，則在該框架中開啟網頁。
實現頁內跳轉：
- 返回頂部：只需把屬性
href的值設定為#即可實現。- 返回指定位置：在指定跳轉的地方選擇一個標籤，併為其取一個id名，然後將
a標籤的屬性href值設定為：#id名（相當於 CSS3 中的id選擇器），即可實現。