Head First HTML与CSS阅读笔记（二）
上一篇Head First HTML與CSS閱讀筆記（一）中總結了《Head First HTML與CSS》前9章的知識點，本篇則會將剩下的10~15章內容進行總結，具體如下所示。
div與Span
此元素應該是HTML中使用頻度最高的元素之一，div將屬于一個邏輯區的元素包含起來；
如果添加div有助于將頁面分解為邏輯區，保證結構清晰并便于指定樣式，則應該使用div，否則，過多的div只會讓頁面更加復雜，不應濫用；
width屬性指定元素內容區的寬度，不包括內邊距，邊框和外邊距的寬度；
整個元素寬度 = 內容區寬度 + 兩側內邊距寬度 + 兩側邊框寬度 + 兩側外邊距寬度；
塊元素默認的寬度是“auto”，允許內容填滿可用的全部空間，一般不用指定元素的高度，默認為auto；
text-align只能在塊元素上設置，對塊元素中所有內聯內容對其；
CSS子孫選擇器：注意#id h2與#id>h2的區別，后者是直接子元素，前者則是#id下的所有子孫h2元素；
line-height屬性值可直接使用數字表示，如：
#elixirs {line-height: 1; }表示#elixirs <div>中的個元素行高是其自己字體大小的1倍；
一些屬性的簡寫形式：
background: white url(image/coll.png) repeat-x; border: #007e7e solid thin; font: font-style font-variant font-weight font-size/line-height font-family; 如： font: small/1.6em Verdana, Helvetica, sans-serif;偽類
a元素的幾種狀態：link, visited, hover, focus（焦點在此鏈接上時）, active（第一次單擊鏈接時），偽類舉例：
#elixirs a:link {color: #007e7e; }#elixirs a:visited {color: #333333; }偽類還有很多，如first-child，last-child等,偽類會根據元素的狀態來指定元素的樣式；
nth-child偽類，狀態是一個元素相對于它的兄弟元素的數字順序；
p:nth-child(even) { //偶數background-color: red; }p:nth-child(odd) { //奇數background-color: green; }p:nth-child(2n) {background-color: red; }p:nth-child(2n+1) {background-color: green; }層疊
在所有樣式表中，最優先的是作者的樣式表，其次是讀者的樣式表，最后才是瀏覽器的樣式表，如果讀者在樣式表的一個屬性聲明最后加上“!important”就可覆蓋作者的樣式；
布局與定位
并排放置兩個內聯元素時，兩元素的外邊距不會折疊，上下放置兩個塊元素時，會把他們共同的外邊距折疊折疊在一起，折疊的外邊距高度就是最大的外邊距高度；
即使一個元素嵌套在另一個元素內，如果外面元素沒設置邊框，這兩個外邊距也會折疊；
流體布局
擴展瀏覽器窗口時，頁面中的內容會擴展以適應頁面；
浮動float
浮動一個元素步驟：
1. 指定一個標識（id）； 2. 指定一個寬度，所有浮動元素都必須有一個寬度； 3. 使用float: right/left是元素浮動；浮動元素會被從正常流中刪除，但是在對內聯元素定位時，會考慮浮動元素的邊界，會圍繞著浮動元素；浮動一個元素時，如果希望它在某個元素的后面，就要移動浮動元素的HTML，讓它緊挨著放在那個元素的下面；
設置兩欄布局的話，可以采用右側邊欄浮動，左側主內容區使用margin-right指定距右側的距離，如邊欄總寬度330px，則設置margin-right: 330px；
使用了浮動，下面的元素則會上移，可能會出現重疊的問題，應使用clear屬性，clear會要求當元素流入頁面時，在這個元素的左邊，右邊或兩邊不允許有浮動內容，如：clear: right/left/both；
浮動元素的外邊距不會折疊；
浮動布局適合在一個文本段落中浮動圖像，讓文本圍繞著這個圖像；
缺點：必須把需要浮動的<div>移到其父元素之下最前面位置，另外，無法創建兩個高度相同的列；
凍結布局
當用戶調整屏幕大小時，設計仍能保持原樣，指定頁面的總寬度，調整瀏覽器大小，寬度不會變化；
凝膠布局
凝膠布局會鎖定頁面中內容區的寬度，但會將它在瀏覽器中居中，使用margin: 0 auto;
很多博客網站采用此種布局；
缺點：內容不會擴展來填滿整個瀏覽器窗口；
絕對定位
使用position屬性制定這個元素要絕對定位，例如：
#sidebar {position: absolute;top: 100px;right: 200px;width: 280px; }一個元素絕對定位時，瀏覽器會將它從正常流中完全刪除，然后將它放在top和right屬性指定的位置上，并且流中的元素不會將其內聯內容圍繞在一個絕對定位的元素周圍；
絕對定位可以分層放置，一個元素可以放在另一個絕對定位元素上面，每個定位元素（絕對定位，相對定位，固定定位）都有一個名為z-index的屬性，z-index值越大，越方在上面；
可以對任何元素指定絕對位置，包括塊元素和內聯元素；
position屬性有static(默認值)，absolute，fixed(固定定位，固定元素永遠也不會移動)，relative(相對定位會讓元素正常流入頁面，在頁面上顯示之前要進行偏移)；
相對定位元素仍在正常流中（還在它原本的位置上），然后按照指定的量偏移，可以使用top、left，bottom，right偏移元素，它是相對于其外圍包含的元素來定位的；
絕對定位是相對于離它最近的父元素來定位的，可以將一個<div>放在另一個<div>中，對外圍<div>使用相對定位，然后用絕對定位指定內部<div>的位置，這樣就能相對于父<div>定位了，即一個絕對定位元素嵌套在另一個定位元素中，這個元素就會相對外包含元素定位；
固定定位
#coupon {position: fixed;top: 300px;left: -90px; } 固定定位元素是相對瀏覽器的位置不會變動，而不是頁面；表格布局
表格布局結構也比較簡單，如下所示：
首先，創建一個<div>表示整個表格，行和列要嵌套在這個<div>中； 然后，對表格中的每一行創建一個<div>，包含行的內容； 最后，在行中，對于每一列，只需要一個塊元素作為該列內容；<div id="tableContainer"><div id="tableRow"><div id="main">...</div><div id="sidebar">...</div></div> </div>div#tableContainer {display: table;border-spacing: 10px; //指定表格中單元格之間的邊框間距，可看做常規元素的外邊距 }div#tableRow {display: table-row; }#main {display: table-cell;verticle-align: top;
width: 500px; //控制列寬度 }#sidebar {display: table-cell;
verticle-align: top/middle/bottom; }
border-spacing和外邊距創建的空間不會折疊；
建立多欄布局，且內容欄是均勻的，表格布局就比較適合；
HTML5標記
<section>與<article>的區別？
使用<section> 可以把相關內容分組在一起，<article>包含獨立內容，如一個新聞報道，一個博客帖子或者一個簡短的報告；要組織相關的內容就是用<section>，而對于獨立的內容，則使用<article>；
<time>元素負責在頁面中增加日期或時間，datetime屬性用來指定一個日期或時間，如果元素內容沒有采用官方Internet日期/時間格式來寫，就必須有datetime屬性；
<time datetime="2015-01-31">1/31/2015</time>在<section>、<article>、<aside>元素中也可以是用<header>和<footer>元素，可以把一些元素組合起來放在首部或尾部；
導航使用<nav>元素，導航內容一般使用列表來構建；
<video>元素使用
<video controls autoplay width="512" height="288" src="video/test.mp4" poster="images/test.png"> </video>controls屬性使播放器提供一些控制視頻音頻播放的組件； autoplay屬性，一旦頁面加載，視頻就會自動播放； poster屬性，提供一個可選的海報圖像，視頻未播放時就顯示這個圖像；loop屬性，布爾屬性，如果有loop，視頻結束播放后會自動重新開始播放視頻；
preload屬性，preload屬性通常用來細粒度的控制視頻如何加載，來實現優化，值為"none"表示用戶在真正播放視頻之前不下載，"metadata"表示下載視頻元數據，但不下載視頻內容；
<video>元素可以對每一種視頻格式分別使用一個<source>元素，提供一組視頻，讓瀏覽器選擇其支持的第一種格式，如下：
<video controls autoplay width="512" height="288"><source src="video/tweetsip.mp4"><source src="video/tweetsip.webm"><source src="video/tweetsip.ogv"><p>Sorry, your browser doesn't support the video element</p> </video><mark>元素用于突出顯示某些文本；
<audio>包含聲音內容；
<canvas>在頁面中顯示用JS繪制的圖像和動畫；
<progress>顯示任務的完成進度；
<meter>顯示某個范圍的度量；
表格與列表
<caption>元素指定表格標題，默認顯示在表格上方，想將標題移動到表格下方，可在css中使用caption-side: bottom來改變；
不能單獨地設置各個單元格的“外邊距”，而要使用border-spacing為所有單元格設置一個共同的間距；
border-collapse屬性用來折疊邊框，使單元格之間沒有邊框間距，如下所示：
table {border: thin solid black;caption-side: bottom;border-collapse: collapse; }可以使用rowspan屬性指定一個表格數據單元格占多少行，然后從這個單元格所跨越的其他行中刪除相應的表格數據元素；
使用colspan屬性指定跨多列，跨多列時，需要刪除同一行中的表格數據元素；
嵌套表格也很簡單，只需要把另一個<table>元素放在一個<td>中即可；
列表的主要屬性是list-style-type，disc是默認值，其他值還包括circle，square，none（會刪除所有列表標記）；
定制標記
list-style-image屬性允許為列表設置標記圖像；
li {list-style-image: url(image/backpack.gif);padding: 5px; }list-style-position控制列表上的文本回繞，屬性設為"inside"文本會在標記下回繞，設為"outside"文本會在文本下回繞；
HTML表單
?表單里可以有什么？
<input type="text" name="fullname" placeholder="Buckaroo Banzai" required> //文本輸入 <input type="submit"> //提交按鈕 <input type="radio" name="hotornot" id="hot" value="hot" checked><label for="hot">hot</label>
<input type="radio" name="hotornot" id="not" value="not">
<label for="not">not</label>
<input type="checkbox" name="spice" value="Salt" checked> <input type="checkbox" name="spice" value="Pepper"> <input type="checkbox" name="spice" value="Garlic"> <textarea name="comments" rows="10" cols="48"> xxxx </textarea> <select name="characters"><option value="Buckaroo">Buckaroo</option><option value="Tommy">Tommy</option><option value="Penny">Penny</option> </select> <input type="number" min="0" max="20"> //限制只能輸入數字 <input type="range" min="0" max="20" step="5"> //范圍輸入，顯示為滑動條 <input type="color"> //顏色輸入 <input type="date"> //日期輸入 <input type="email"> //email輸入 <input type="tel"> //電話號碼輸入 <input type="url"> //URL輸入 email、tel、url都是text的變體，在移動設備上會顯示不同的定制鍵盤；
<input type="password" name="secret">
<input type="file" name="doc"> //文件輸入
多選菜單
<select name="characters" multiple>
<option value="Buck">Buckaroo</option>
....
</select>
CSS選擇器
偽元素
偽元素可以用來選擇元素的某些部分，如:first-letter偽元素用來選擇一個塊元素中文本的第一個字母；:first-line偽元素用來選擇段落的第一行；
p:first-letter {font-size: 3em; }屬性選擇器
根據屬性值來選擇元素；
img[width] {border: black thin solid;} img[height="300"] {border: red thin solid;} img[alt~="flowers"] {border: #ccc thin solid;} //alt屬性包含“flowers”的所有圖像；按兄弟選擇
h1+p {font-style: italic; } 選擇所有緊跟在<h1>元素后面的p元素；結合選擇器
div#greentea > blockquote p:first-line {font-style: italic; }開發商特定的CSS屬性
div#box {transform: rotate(45deg); //通用屬性，旋轉45度-webkit-transform: rotate(45deg); //Safari，Chrome-moz-transform: rotate(45deg); //mozilla-o-transform: rotate(45deg); //Opera-ms-transform: rotate(45deg); //IE }CSS變換和過渡
transition屬性，使元素在規定時間內變換到新狀態；
#box {position: absolute;top: 100px;left: 100px;width: 200px;height: 20px;transition: transform 2s;-webkit-transition: -webkit-transform 2s;-moz-transition: -moz-transform 2s;-o-transition: -o-transform 2s; }#box:hover {transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg); }?
轉載于:https://www.cnblogs.com/pflee/p/4264811.html
總結
以上是生活随笔為你收集整理的Head First HTML与CSS阅读笔记（二）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： laravel安装笔记
- 下一篇： COJ 1163 乘法逆元的求解