前端開發學習筆記（三）HeadFirst HTML 與 CSS （第二版）

時間 2019-12-17

標籤前端開發學習筆記 headfirst html css 第二欄目 HTML 简体版

原文原文鏈接

先後花了1周時間來學習這本書，書中提到了不少基礎的概念，如：盒模型、元素定位等，這些概念能夠幫助初學者深刻了解實現的原理，爲後面的複雜應用打下堅實的基礎。php

1、HTML相關知識點css

1.構建WEB頁面html

　第一步：先畫出頁面的草圖（實際工做中能夠結合一些原型設計工具：如VISIO、AXTURE、手繪等）web

　第二步：規劃元素架構。肯定大的框架和使用的元素（實際工做肯定佈局，如：上部爲標題區，左邊爲導航區，右側爲功能區；使用有含義的元素標籤，如：標題用Header、導航用Nav）canvas

　第三步：加入頁面風格樣式。使用CSS來設置頁面的顯示和元素的位置、效果。瀏覽器

2.塊元素/內聯元素（在後面介紹流部分還有說明）服務器

　塊元素（block）：垂直佈局，其後添加換行符，一般用做web頁面中的主要構建模塊。如：<div>、<header>等架構

　內聯元素（inline）：水平佈局，行內顯示水平方向達到邊界時自動換行。如：<span>、<a>等框架

　瞭解了這兩種不一樣類型元素在頁面中的做用和特性，才能更好地實現設計。　ide

3.空元素(void)

　沒有內容部分，只須要使用一個開始標記便可。

　例如：<br>換行，<img>圖片等

4.列表

　有序列表（ol），包含列表項li，能夠設置列表項的顯示風格（數字、羅馬、大寫）等

　無序列表（ul），包含列表項li，能夠設置列表項的顯示風格（星、棱）等

　定義列表（dl），包含定義術語（dt）和定義描述（dd）成對出現

5.經常使用字符實體

　< -- <　　> -- >　　© -- ©　　& -- &

6.<a>元素

　可使用相對路徑或者URL來連接其餘web頁面（內部最好用相對路徑、外部用url）

　連接頁面內的元素（經過元素的ID建立一個目標），在href中使用「頁面名稱+#+ID」的方法連接到頁面中的那個位置（頁面滾動定位）

　爲了便於訪問，可使用title屬性提供連接的一個描述，鼠標移動到<a>上時，自動顯示一個信息提示工具窗

　使用target屬性，能夠在另外一個窗口中打開連接，_blank每次打開新窗口，自定義名稱每次在同一個窗口中打開。

7.圖像

　<img>元素是內聯元素

　頁面中使用<img>來表示的圖像，在頁面加載後，須要再次請求服務器單獨傳輸（注意：每一個圖像都須要一次傳輸，所以應儘可能減小圖像文件的個數，提升性能）

　在WEB中經常使用的圖像格式：JPEG、PNG、GIF。JPEG不支持透明，但文件較小；PNG支持透明，但文件相比GIF大；GIF支持透明，但僅有256色，更適合圖標。

　alt屬性：描述圖片的解釋性文字信息，若是圖像沒有顯示/加載失敗，則在相應區域顯示這段文字信息。

　在圖像的處理中，「透明」設置蒙版「matte」的目的是爲了解決顯示圖像與透明背景邊緣的毛刺問題，若是不設置會影響顯示效果。

8.HTML標準

　<!doctype html>最新的HTML5標識。不在進行版本標註，也就是說之後的HTML再也不有版本的變化，而是對現有校準的不斷完善。同時瀏覽器會進行更新來適應變化並作到向後兼容。

　須要注意的書寫要求：

　<img>中的alt屬性是必須添加的

　在<head>中加入字符編碼<meta charset="UTF-8">

　在<head>中包含<title>

　不容許在<img>、<br>等void元素嵌套其餘內聯元素

9.HTML5新增元素

　新增了不少元素以及屬性，例如：<header>、<footer>、<nav>、<section>、<article>、<aside>、<video>、<audio>、<canvas>、<progress>、<meter>、<mark>、<time>、<figure>等等

　注意：新增的不少元素只是用來標明內容的用途，其功能可使用<div>來替代。使用<div>更通用，但不利於對頁面結構的理解以及搜索的優化。若是瀏覽器支持HTML5建議採用新的元素來替代<div>

　<section>用以標記一些內容。只是這是由相關內容構成的一個結構明確的區塊。

　<atricle>有些內容能夠獨立於頁面上的其他內容進行重用和分發。一般表示文章，能夠用於博客、論壇等

　<header>能夠爲頁面、<section>、<article>添加一個頭部區域

　<video>因爲視頻解碼格式的版權問題，官方沒有肯定一個統一的格式，支持主流的三種格式：H.26四、WebM、Ogg，不一樣的瀏覽器兼容不一樣的格式，具體能夠查閱相關說明。

　<audio>與視頻解碼相似，支持多種格式。對於<video>、和<audio>來講，爲了可以更好地兼容大部分瀏覽器，建議提供主流的多種格式文件，並在聲明中添加。

　例如：<video>

　　　　</video>

　<progress>表示一個進度條

　<meter>用於範圍度量

　<mark>用於突出顯示文本，相似於記號筆

　<figure>用於照片、圖標、代碼清單

10.表格（table）

　表格主要用於顯示錶格數據，不該該用於頁面的佈局。頁面佈局應該考慮其結構的可讀性，若是使用tr、td來組織，不利於後期的維護以及搜索引擎的優化。

　主要的元素有：tr、td、th、caption

　單元格合併：<td rowspan="n">表示該單元格與下n-1行的單元格合併，注意：後面的n-1行中，對應的td數量要減去1。

　　　　　　　<td colspan="n">表示該電源格與後面的n-1格單元格合併，注意：要去掉該行後面的n-1個td。

　也就是說，對於合併單元格操做，不論是行合併仍是列合併，對於總的td數量來講，應該減去合併單元格的數量，也就是說要保持單元格總數不變（合併的單元至關於多個單元格）

　單元格盒模型：能夠設置邊框td {border: thin dotted gray;}，能夠設置內邊距td{padding: 5px;}，能夠設置外邊距table{border-spacing=2px}，能夠取消外邊距table{border-collapse=collapse}

　nth-child僞類：用於根據表格中元素的相關性來設置樣式，例如：基數行/偶數行，第一行、最後一行等。例如：tr:nth-child(2n+1){background-color: #fcba7a;}設置基數行的背景顏色
11.表單（Form）

　method屬性：POST，表單中的提交項（名稱=值）做爲html的一部分（後臺，用戶不可見）提交給action屬性指定的頁面。多用於含有敏感信息、大量文本、文件等的提交

　　　　　　　　GET，表單中的提交項（名稱=值）做爲地址的一部分（地址欄，用戶可見）提交給action屬性指定的頁面。多用於非POST狀況下使用。

　注意事項：

　　每一個表單元素有要有一個name屬性。

　　<label for="輸入控件的Id">，好的習慣。鼠標單擊<label>元素，for指定的輸入控件將得到輸入焦點。

　　<fieldset>包圍一組標籤元素，相似於桌面應用中的groupbox空間的邊框效果。

　　<legend>爲<fieldset>提供標題

2、CSS相關知識點

　　1.通用性說明

　　　一個元素能夠有多個規則。

　　　不是全部的樣式都能繼承。通常影響文本外觀的樣式都能繼承，例如：color、font-family等

　　　一個元素能夠加入多個類，類名間加空格分隔，例如：<div class="classA classB classC">

　　　使用media屬性，指定適用於特定設備的樣式。例如：@media screen and (min-device-width: 480px) { ... } 指定屏幕最小寬度在480px的設備使用。

　　　應用樣式的常識性規則：

　　　規則A（繼承特性），指定元素 --> 指定元素的父元素 --> 瀏覽器默認值（按照箭頭所指的順序查找，應用首先找到的樣式設置）

　　　規則B（多樣式），最特定的規則 --> 最特定系列中在CSS中最靠後的一個規則（若是有多個css文件，則出如今後面的優先級高）

　　2.字體相關

　　　A.字體（font-family）共有5大系列

　　　　sans-serif。如: Verdana、Arial Black、Trebuchet MS、Arial、Geneva等等。包括沒有襯線（字母末端的裝飾性小細線）的字體。

　　　　serif。如: times、times new roman、georgia等等。包括有襯線的字體

　　　　monospace。包含：Courier、Courier New、Andale Mono等等。包括固定寬度的字符

　　　　Cursive。如：Comic Sans、Apple Chancery等等。看似手寫的字體

　　　　Fantasy。如：Last Ninja、Impact等等。有某種風格的裝飾性字體

　　　　特色：

　　　　Sans-serif　　　　　　外觀清晰、可讀性好，多用於計算機屏幕

　　　　Serif　　　　　　　　高雅、傳統，多用於新聞報紙排版

　　　　Monospace　　　　　打字機效果，多用於顯示軟件代碼示例

　　　　Cursive和Fantasy　　有風格

　　　　屬性設置：font-family: Verdana, Geneva, Arial, sans-serif; 前面放置同系列字體，最後一般放一個通用字體系統名。注意：字體名由多個單詞組成時，在兩邊加上引號，例如："Arial Black"

　　　　工做原理：瀏覽器按順序（從左至右）查找字體，直到有可用字體；若是沒有特定字體，則使用瀏覽器默認」字體系列「的字體。

　　　B.Web字體

　　　　存儲在服務器上的字體文件（.woff）Web Open Font Format。若是頁面須要，則瀏覽器會向服務器請求該字體。

　　　　如何使用Web字體：

　　　　首先，找到字體文件（能夠從網上下載）

　　　　而後，確保有所需字體的全部文件格式。TrueType、OpenType、Embedded OpenType、SVG字體、Web開放字體

　　　　然後，將文件放在Web上（能夠本身管理、或者託管）

　　　　然後，在css文件的最上面加入@font-face屬性，設置其在css中使用的font-family名稱，以及文件下載的地址。例如：

　　　　　　@font-face{

　　　　　　　　font-family: "Embedded One"; 可以使用的名稱

　　　　　　　　src: url("http://......"), url("http://...."), ... ; 多個不一樣格式的文件

　　　　　　}

　　　　最後，在css中使用font-family設置字體

　　　C.調整大小

　　　　絕對值：font-size: 14px; 指定大小爲14px

　　　　相對值：font-size: 150%; (相對於父元素的字體大小)

　　　　　　　　font-size: 1.2em;（比例值，相對於父元素的字體大小）相似%

　　　　　　　　font-size: 1.2rem;（比例值，相對於根元素的字體大小）

　　　　關鍵字：xx-small、x-small、small、meduim、large、x-large、xx-large（每一個級別大20%）。默認small的大小爲12px，不一樣瀏覽器存在差別

　　　　推薦方法：

　　　　　　爲body設置字體大小，能夠選擇一個關鍵字，如：small、medium

　　　　　　使用em、rem相對頁面（body）字體調整大小。

　　　D.調整粗細

　　　　font-weight: bold、normal

　　　E.字體風格

　　　　font-style: italic、oblique

　　　F.顏色

　　　　color

　　　　能夠設置名稱（已命名的大概有150個）

　　　　能夠設置顏色值：rgb(80%, 40%, 0%) == rgb(204, 102, 0) 紅綠藍三色的值

　　　　　　　　　　　　#cc6600，使用十六進制數表示

　　　G.文本裝飾

　　　　text-decoration。line-through | underline | overline | none。能夠設置多種裝飾(空格分隔)

　　　H.文本行高

　　　　line-height。行間距，能夠改善可讀性

　　　　line-height: 1; 直接用數字，則表示基於各個元素自身的字體大小

　　　縮寫：

　　　　font: font-style font-variant font-weight font-size/line-height font-family。將全部跟字體相關的屬性在一行聲明（優勢：簡單；缺點：不利於調試）

　　3.盒模型（Box Model）

　　　是CSS看待元素的一種方式，將每一個元素看作一個盒子。盒子由內至外分別由：內容區、內邊距(padding)、邊框(border)、外邊距(margin)組成。

　　　各個元素關於盒模型的經常使用屬性：

　　　　background（背景）有關的：-image -repeat -position -color。經常使用簡寫爲：background: color image repeate

　　　　border（邊框）有關的：-color -style -width -radius。經常使用簡寫爲：border: 寬度、樣式、顏色（例如：border: thin solid #007e7e;）

　　　　padding（內邊距）有關的：-left -right -top -bottom。經常使用簡寫爲：padding: 上、右、下、左（例如：padding: 0px 10px 10px 10px;）或者 padding: 上下、左右（例如：padding: 10px 20px;）或者 padding: 所有（例如：padding: 10px;）

　　　　margin（外邊距）有關的：-left -right -top -bottom。經常使用簡寫爲：margin: 上、右、下、左（例如：margin: 0px 10px 10px 10px;）或者 margin: 上下、左右（例如：margin: 10px 20px;）或者 margin: 所有（例如：margin: 10px;）

　　　　width（寬度）：具體是指盒模型元素內容區的寬度。能夠設置三種類型的值：A.具體大小；B.百分比；C.Auto。設置B/C，則寬度的計算爲元素所在容器的寬度

　　　　　　盒子的總寬度 = width + 左側內邊距 + 左側邊框寬度 + 左側外邊距 + 右側內邊距 + 右側邊框寬度 + 右側外邊距

　　　　　　若是沒有設置width值，則默認爲auto，便可以延伸佔滿所在容器的整個寬度

　　　　text-align（文本對齊）：對塊元素中的全部內聯元素的內容對齊。只能在塊元素上使用，<div>中的其餘塊元素能夠繼承其特性。　　

4.塊元素<div>、內聯元素<span>、僞類的使用

　A.找出頁面邏輯區（頁面上彼此相關的一些元素）

　B.使用塊元素（如：<div>）標記邏輯區。將邏輯區中的元素放入<div>中，使用<div>也就是將元素分組

　C.一般把<div>描述爲容器。能夠做爲邏輯容器和圖形容器。

　D.<div>能夠做爲結構進行嵌套。但必定要作到簡單，不要濫用。使用多個<div>進行嵌套是爲了更好地分解邏輯區，從而保證結構清晰並便於指定樣式。

　E.後代選擇器，寫法就是把外層的標記寫在前面，內層的標記寫在後面，之間用空格分隔。當標記發生嵌套時，內層的標記就成爲外層標記的後代。對孫子後代以及多層後代產生做用。（例如：div h2 / #id h2 等）。

　F.子選擇器，外層標記和內層標記之間不用空格而是>分隔。表示只對外層標記的直接孩子產生做用，對孫子等不產生做用（例如：div>h2）。沒有測試經過呀

　G.內聯元素<span>也用於分組，相似塊元素<div>。內聯元素也能夠設置寬度、內邊距、外邊距、邊框等屬性。但與塊元素不一樣的是，上下邊距與其餘內聯元素會有重疊。

　H.僞類，例如：a:visited、a:link、a:hover等。會隨着狀態不一樣而不一樣

5.層疊規則（優先級排序）

　A.若是設置了指定的樣式（CSS）則使用指定樣式，不然使用瀏覽器默認樣式。

　B.若是設置了多個特定樣式，則按特定樣式的優先級進行計算、排序。

　　計算公式：　　0（百位，對應Id選擇器，每一個Id+1）　0（十位，對應類/僞類選擇器，每一個類/僞類+1）　0（個位，對應標籤選擇器，每一個標籤+1），計算出每一個特定選擇器的數值，數值最大的優先使用。

　C.若是多個特定樣式的計算數值相等，則就會產生衝突。按照在樣式表中出現的順序排序，位置靠後的樣式優先級高

　D.若是沒有應用樣式，能夠繼承的樣式從父元素（或父元素的父元素，一直追溯到根）繼承，不可以繼承的樣式使用瀏覽器默認值。

6.頁面佈局（流體）

　瀏覽器默認使用流放置元素（即從上到下沿着元素流逐個顯示所遇到的各個元素）。

　塊元素：從上向下流，各元素之間有換行符，水平方向擴展（默認塊元素會佔整個瀏覽器/父容器的寬度）

　　　　　上下放置的兩個塊元素，上下外邊距會產生重疊（使用最大的外邊距）。在嵌套放置時，若是外層元素沒有設置邊距，則兩個塊元素的外邊距會重疊；但外層元素設置外邊框時，兩個塊元素的外邊距就不會重疊。

　內聯元素：在塊元素內部水平方向相互挨着，從左上向右下流，在垂直方向擴展。

　　　　　　左右放置的兩個內聯元素，內外邊距都有效。

　流體佈局：是指擴展窗口時，頁面中的內容會擴展以適應頁面。

7.頁面佈局

　CSS不只能夠設置元素的外觀樣式，並且能夠設置頁面佈局樣式以及元素實際顯示的位置和大小。

　由於瀏覽器默認使用流來放置元素，若是想改變這種默認方式（例如：兩個<div>左/右並排放置；或者像T字分爲三部分）則須要改變瀏覽器的默認放置方式，就須要下面的幾種方法。

　A.浮動佈局

　　浮動元素：經過設置float屬性（取值：left向左浮動、right向右浮動）。瀏覽器遇到float屬性後，將它從元素流中取出（元素會浮在其後的元素上面，但在垂直方向上位於其前面元素的下方，因此有時須要調整浮動元素在HTML結構中的位置）。後面的元素（塊）會認爲該元素不存在，將繼續順序顯示（也就是向上佔據其原有的位置）。但後面塊中的內聯元素（包括文本）會考慮浮動元素的邊界，圍繞這個浮動元素。

　　浮動元素的TOP值是不能手動修改的，其取決於在HTML結構中的位置。

　　內聯元素也能夠設置浮動（例如：<img>元素）

　　實現步驟：

　　♦ 給要浮動的元素設置Id

　　♦ 在哪一個元素後面浮動，就將要浮動的元素移動到該元素的後面（注意，須要調整html）

　　♦ 設置浮動元素的寬度

　　♦ 設置float屬性，浮動到左/右邊

　　注意事項：

　　♦ 儘量遠的向左/向右浮動一個元素，它下面的全部內容會繞流這個元素。若是要避免繞流，能夠經過設置浮動元素後面塊元素的外邊距來解決（若是向左浮動，就設置左外邊距等於浮動元素的實際寬度）。

　　♦ 全部浮動元素必須設置一個固定寬度，而且在float屬性前設置。　　

　　♦ 設置clear屬性能夠解決浮動元素與後續元素的重疊問題（例如：浮動元素與頁腳區域）。設置了clear屬性的塊元素會自動下移，直到它的旁邊（能夠設置left、right、both）沒有浮動塊元素爲止。

　　優劣分析：

　　♦ 向右浮動（優點：浮動元素的寬度固定，有利於左側主內容區域的自由擴展；劣勢：須要將浮動元素調整到主內容區域之上，並不能反映頁面中內容的重要性，並且在部分移動設備上只能看到浮動區域）

　　♦ 向左浮動（優點：內容擺放位置是正確地，可以反映頁面內容的重要性，在受限設備上使用時能夠看到主內容；劣勢：主內容區域的寬度固定，右側邊欄自由擴展，效果不理想）

　　♦ 浮動元素與主內容區域的底部不齊，也就是沒法建立兩個相同高度的列，顯示效果很差

　B.凍結佈局（凝膠布局）固定寬度佈局

　　凍結佈局：是指內容的寬度固定，不隨窗口擴展而改變。鎖定元素，將它們凍結在頁面上，元素不能移動

　　凝膠布局：是指內容的寬度固定，但外邊距隨窗口擴展/收縮，表現起來會更美觀。

　　實現步驟：

　　♦ 在全部佈局外增長一個<div>，設置這個<div>的寬度

　　♦ 設置<div>的左/右外邊距爲auto。

　　優劣分析：

　　　　♦ 優點：能夠解決浮動佈局中，頁面中各元素正常放置狀況下浮動元素而產生的自適應問題（浮動佈局中向左浮動已經說明了）。採用固定的寬度能夠解決浮動元素的擴展或收縮。

　　　　♦ 劣勢：頁面寬度不可調整，在須要適應多種不一樣分辨率的設備時（目前這種現象很廣泛），頗有可能產生橫向的滾動條（顯示不下）或者頁面兩側留有大量空白（實際顯示區域過大）。總之，體驗很差。

　C.絕對定位

　　實現頁面中某一部分大小固定，而另外一部分能夠擴展或收縮；或者須要精確地指定某個元素的位置。設置元素的Position屬性，absolute、relative、fixed。

　　與浮動佈局不一樣的是，須要指定元素的位置（上/下、左/右）以及寬度

　　流中的元素不會將其內聯內容繞流在一個絕對定位元素的周圍。

　　Position值的含義說明：

　　♦ absolute：絕對定位。位置相對於頁面（會隨着頁面滾動而移動）

　　♦ static：默認。流式

　　♦ fixed：固定定位。位置相對於瀏覽器窗口（不會隨着頁面滾動而移動）

　　♦ relative：相對定位。相對於其在流式佈局中的位置，在顯示以前進行偏移。流式

　　多個絕對定位元素的顯示規則，取決於絕對定位元素的z-index屬性，該屬性爲數值類型（負數、零、正數），z-index值大，顯示在上面

　　實現步驟：

　　♦ 設置絕對定位元素的Position值（absolute | relative | fixed)

　　♦ 設置絕對定位元素的位置（top/bottom，left/right）

　　♦ 設置絕對定位元素的寬度（width）

　　優劣分析：

　　　　♦ 劣勢：與浮動佈局同樣，會出現下面的元素與絕對定位元素重疊的狀況。且不能使用clear屬性來解決（由於不知道決定對位元素的存在）

　D.表格顯示佈局

　　增長表格塊元素、表格行塊元素、表格單元塊元素（都是<div>），支持多欄佈局，但內容欄是均勻地。（也就是說不支持表格單元的合併）

　　實現步驟：

　　♦ 增長表格<div>元素，設置display屬性爲table。

　　♦ 增長表格行<div>元素，設置display屬性爲table-row。

　　♦ 增長表格單元塊<div>元素（若是有則不須要），設置display屬性爲table-cell。

　　說明：

　　♦ 表格間的空間（相似於元素的外邊距）是經過設置border-spacing屬性來完成。該屬性必須在表格<div>元素中設置纔有效。

　　♦ border-spacing屬性在上/下方向與其餘元素的外邊距（margin）不會重疊。須要用戶手動設置與其上下相鄰元素對應的外邊距。

　　♦ 使用表格顯示佈局，能夠完美解決多欄底部不齊的問題，在用戶體驗上有很大的優點。

　　♦ 使用表格顯示佈局，須要額外增長多個<div>元素，若是給頁面佈局帶來很大的問題，就考慮是否使用。

8.更多選擇器

　A.僞元素

　　前面已經介紹過了。例如：p:first-letter、p:first-line、a:hover等。能夠根據元素的狀態和位置等動態信息，進行檢索

　B.屬性選擇器

　　能夠根據元素的屬性/屬性值進行檢索。例如：img[width] {...}，該選擇器表示包含width屬性的圖像元素；img[height="300"] {...}，該選擇器表示height屬性爲300的圖像元素

　C.按兄弟選擇

　　使用「 + 」符號來指定兄弟，例如：h1+p {...}，該選擇器表示緊跟在h1元素後面的段落

　D.結合選擇器　　

　　♦ 定義上下文。div#greentea>blockquote {...}，該選擇器表示Id是greentea的div，且是blockquote的父親

　　♦ 指定元素。div#greentea>blockquote p {...}，該選擇器表示p是blockquote的子孫，且blockquote是（id爲greentea的div）的兒子

　　♦ 指定類/僞類。div#greentea>blockquote p:first-line {...}，該選擇器表示p的第一行，且p是blockquote的子孫，且blockquote是（id爲greentea的div）的兒子

9.廠商特定CSS屬性

　-（開發商標識）-（屬性），例如：-moz-transform，表示是開發商特定的一個屬性，因爲該屬性不是規範的一部分，所以不穩定，開發商有可能改變該屬性，須要在使用前確認是否支持。

　在css中能夠指定多個廠商的特定屬性，

　　例如：div {

　　　　　　　　transform: rotate(45deg);

　　　　　　　　-moz-transform: rotate(45deg);

　　　　　　　}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。