Head First HTML與CSS
- 1、認識HTML和CSS
- 2、元素認識
-
- 超文本連結元素< a>
- 屬性
- 路徑
- < html>、< head>、< title>、< body>這幾個标簽在寫HTML時必不可少
- 引用元素< q>、< blockquote>
- 換行元素< br>
- 有序清單< ol>、無序清單< ul>、自定義清單< dl>
- < img>圖像元素
- 3、網站網址
- 4、HTML标準化
1、認識HTML和CSS
HTML: HyperText Makeup Language
CSS: cascading Style Sheet
Web浏覽器工作原理：點選連結來通路某個頁面，點選促使浏覽器向web伺服器發送請求，伺服器收到請求後，會查找請求的資源，再把找到的資源傳遞給浏覽器
元素=開始标記+内容+結束标記（有部分特殊标記如br，img，em沒有結束标記，空标簽）
2、元素認識
超文本連結元素< a>
超文本連結元素< a>
使用< a>元素建立一個超文本連結，連結到另一個web頁面。< a>元素的内容會成為web頁面中可單擊的文本，href屬性告訴浏覽器連結的目标檔案。
<a href="new_page.html">頁面顯示内容，點選跳轉到連結new_page頁面</a>
< a>元素有target屬性，當target=_blank時，點選連結會在一個新的空視窗打開，不寫預設覆寫原視窗
屬性
href="new_page.html" target="_blank" rel="external nofollow" 稱為元素的屬性，一個給定元素隻能使用某些特點的屬性。屬性用來定制一個元素，提供元素的附加資訊。
路徑
目前路徑 ./ （一個點）
上級路徑 …/ （兩個點）
< html>、< head>、< title>、< body>這幾個标簽在寫HTML時必不可少
引用元素< q>、< blockquote>
< q>是一個内聯元素，适合一句話這種短引用，< blockquote>是塊級元素，前後自動換行，适合詩歌等段引用
換行元素< br>
< br>沒有實際内容，隻是一個換行，隻有開始标記，沒有結束标記，沒有内容的元素叫void元素。
有序清單< ol>、無序清單< ul>、自定義清單< dl>
< ol>ordered list、< ul>unordered list和< li>list item标簽配套使用，中間不能加其他元素
< dl>defined list,自定義清單，裡面有定義術語< dt>和定義描述< dd>
< img>圖像元素
示例 < img src="…/images/green,jpg">
不同浏覽器可能無法顯示頁面圖像，是以建議提供候選格式或設定 alt屬性 提醒。
技巧：當圖檔比較大時，建議先進行壓縮變成縮略圖。後面将縮略圖連結到大圖檔，當使用者對某個縮略圖感興趣時，點選即可跳轉到大圖。
方式：将< img>元素放到< a>元素中，img變成了< a>元素的内容
3、網站網址
http：HyperText Transfer Protocol 超文本傳輸協定
4、HTML标準化
html5為html的最終版本，具有向後相容性
1、HTML5 doctype 增加文檔類型定義
< !doctype html> 必須位于文檔内容首行，用途在于讓浏覽器明确知道你在使用HTML5
2、增加一個< meta>指定字元編碼
< meta charset=“uft-8”>
技巧：w3c驗證工具
網址：http://validator.w3.org，可以檢查編寫的HTML是否符合标準