深入淺出HTML and CSS 第二版讀書心得
圖片來源博客來
前言：本書範例可以下載 本書籍勘誤 前端資源懶人包 網站HTML語法檢核 網站CSS語法檢核
心得說明：
基本上本書是一本基礎入門書籍，很簡易的說明HTML各項語法。
第一章到第六章都在HTML的基礎教學課程，這八章中可以學到
- 元素由三個部份組成：起始標籤（opening tag）、內容、結束標籤（closing tag）。但是有有元素例外，<img>。
- 起始標籤可以具有屬性：type。
- 結束標籤 /。
- 網頁中應該都有<html>元素，以及一個<head>元素及一個<body>元素。
- 關於網頁的資訊放在<title>元素中。
- <body>元素裡得事物，也就是連瀏覽器可以看到的事物。
- 大多數的空白字元會被忽視。
- <style>元素中加入CSS規則，即可為HTML網頁加上CSS。<style>僅能放置<head>元素中。
- 想要做網頁連結使用<a>。
- <a>元件的href屬性，可以指定連結目標。
- 使用「..」，通向比起連結所在網頁更上一層的目錄裡的檔案。
- 「..」為父目錄。
- <p>、<blockquote>、<ol>、<ul>、<li>都是區塊元件。它們獨立存在，且呈現其中內容時（預設為）前後均加上換行。
- <q>與<em>是行內元件。
- 需要換行字元請使用<br>元件。是個「空」元件。
- 製作HTML清單，使用<ol>與<li>有序號的清單；<ul>與<li>沒有序號清單。
- HTML內容中的特殊字元，請使用字元實體。
- 「index.html」與「default.html」是預設檔案，若是指定目錄但是沒有指定檔名，將以這兩個為預設。
- 使用id屬性，在網頁中建立連結目錄。使用#後接目標id，即可連結至網頁中的指定檔案。
- 為了改善無障礙度，可於<a>元件使用title屬性，提供連結的敘述。
- 使用tagert屬性，可在另一個瀏覽器視窗中開啟連結。
- 使用<img>元件，在網頁中放入圖像，是內行元件，瀏覽器不會在圖像前後加上換行字元。
- src 屬性是我們指定圖像檔案位置的方式。我們可以在src屬性中使用相對路徑，指定在自己網站圖像；或是使用URL指定源自其它網站的圖像。
- <img>元件的alt屬性是實際有意義的圖像說明。在某些瀏覽器上，當無法取得圖像時會顯示這個屬性的內容。
- 圖像可用於連結到其它網頁。要在圖像上建立連結，請以<img>元件作為一個<a>元件內容，並把連結放在<a>元件的href屬性中。
- 文件類型定義（doctype），讓瀏覽器知道網頁採用的HTML版本。
- <head>元件中的<meta>標籤，讓瀏覽器知道關於網頁的額外資訊，例如內容類型、字元編碼等。
- <meta>標籤的charset屬性，讓瀏覽器知道網頁採用的字元編碼方式。
- CSS包含簡單的敘述，稱為規則（rule）。
- 每項規則為一組選定的HTML元件提供樣式。
- 以逗號分隔元件名稱，可以同時選擇多個元件。
- 在HTML中加入樣式的最簡易方式，是把樣式放在<style>標籤中。
- 對於任何稍具複雜度的HTML或網站，應該連結到外部樣式表。
- <link>元件用於引入外部樣式。
- 許多特性都有繼承性。例如說，為<body>元件設定了某個可以繼承的特性，則<body>的所有子元件都會繼承此特性。
- 針對育改變的元件建立更為特定的規則，即可複寫繼承得來的特性。
- 使用class屬性，把元件放在某個類型下。
- 在元件名稱與類型名稱間，加上「.」，以選擇屬於類型下的特定一種元件。
- 使用「.類型名稱」的格式，以選擇屬於該類別的任何元件。
- 我們可以把一個元件指定給多個類型，作法是在class屬性裡設定多個類型，並以空格區分各各類型名稱。
留言