【HTML/CSS】从放弃到入门-笔记1
從放棄到入門1 ? 從放棄到入門2
了解瀏覽器
瀏覽器和服務(wù)器(了解)
瀏覽器是一款軟件，瀏覽器功能：1將網(wǎng)頁渲染出來給用戶查看，2讓用戶通過瀏覽器與網(wǎng)頁交互
不同瀏覽器的內(nèi)核不同，渲染效果會有小的差別。市面上最常用的瀏覽器：
IE -內(nèi)核 Trident
谷歌 - 內(nèi)核 WebKit/Blink
火狐 - 內(nèi)核 Gecko
Safarf - 內(nèi)核 WebKit
歐朋 - 內(nèi)核 Presto
服務(wù)器也是電腦，你可以理解服務(wù)器為超級計(jì)算機(jī)，因?yàn)樗呐渲帽燃矣秒娔X高，并且服務(wù)器不關(guān)機(jī)不斷電。
瀏覽器訪問網(wǎng)頁原理(理解)
當(dāng)用戶訪問網(wǎng)頁時，是會有真實(shí)的數(shù)據(jù)傳輸，數(shù)據(jù)會緩存到用戶本地緩存文件夾，然后瀏覽器再渲染出來，所以通常第二次訪問網(wǎng)站比首次訪問快
網(wǎng)頁不是一個文件，是很多類型的文件組成的。
瀏覽器請求數(shù)據(jù)的過程(理解)
打開瀏覽器輸入URL敲下回車后，
-> 1 瀏覽器會發(fā)送“請求報文”（Request）給服務(wù)器
-> 2 服務(wù)器處理請求
-> 3 服務(wù)器將處理結(jié)果發(fā)送“響應(yīng)報文”（Response ）給瀏覽器
-> 4 瀏覽器解析數(shù)據(jù)渲染出來
Request 請求報文： 請求行+請求頭+空行+請求體
Response 響應(yīng)報文： 響應(yīng)行+響應(yīng)頭+響應(yīng)體
什么是URL(理解)
https:// abc. com/index.html
https： URL協(xié)議類型，
abc. com： 服務(wù)器域名
:80： 服務(wù)器端口號，
index.html： 需要訪問的資源
HTTP協(xié)議(理解)
超文本傳輸協(xié)議（HTTP, HyperText Transfer Protocol）
什么是協(xié)議？
兩個人約定要傳文件，他們協(xié)商好先傳文件名，再傳文件大小類型時間等信息，最后傳內(nèi)容，那么接收的一方在收到后就會返回一個狀態(tài)，由于經(jīng)常要傳文件，他們就默認(rèn)了這種兩個人約定的傳輸方式，這叫原始協(xié)議。
隨著更多人要傳文件，這個協(xié)議被不會斷的新增完善細(xì)節(jié)化，慢慢的變成了一種標(biāo)準(zhǔn)協(xié)議。
HTTP協(xié)議是干什么的？：HTTP協(xié)議解決溝通的問題，作用是約束/規(guī)范瀏覽器與服務(wù)器之間如何溝通。
其它知識補(bǔ)充(理解)
HTML作用(掌握)
用一些文本來描述另一些文本的語義，而這些文本不會在網(wǎng)頁中顯示出來，所以我們稱這些文本為“超文本”，而這些文本又叫標(biāo)簽，所以HTML被稱為“超文本標(biāo)記語言”。
HTML的作用只有一個，專門用來 給純文本添加語義的，而不是修改文本樣式的。
就像 《編碼》這本書中所講的盲文，用手去摸“< h1> HTML< /h1>”，這幾個字本沒有特別之處，但是因?yàn)閮蛇呌?h1的標(biāo)記而中間是HTML，那么盲文就會認(rèn)為這個HTML除本身代表的語義，它還是一個標(biāo)題。
h1標(biāo)簽它的作用是什么？
-錯誤：h1標(biāo)簽可以用來修改文字的文本，并且還可以將文字加粗
-正確：h1標(biāo)簽的作用是告訴瀏覽器，這段文本的語義是標(biāo)題。
HTML發(fā)展史(了解)
1993年發(fā)布HTML1.0，1995年W3C接手制定標(biāo)準(zhǔn)發(fā)布2.0，2000年轉(zhuǎn)而制定另一種標(biāo)準(zhǔn)XHTML1.0，之后的2.0因?yàn)閄HTML標(biāo)準(zhǔn)過于嚴(yán)苛，幾大瀏覽器廠商拒絕執(zhí)行，并在2004年制定HTML5的草案，2008年W3C和幾大廠商合并發(fā)布HTML5
第一個HTML網(wǎng)頁(掌握)
html標(biāo)簽只是用來添加語義，不更改樣式。
HTML基本結(jié)構(gòu)詳解(掌握)
字符集問題(掌握)
解決亂碼問題，在head中加入 < meta charset=“utf-8”>
在實(shí)際開發(fā)中，使用GBK還是UTF-8呢？ GBK存儲的字符比較少，存儲了所有漢字和常用外文，體積小。UTF-8存儲了全世界所有文字，體積大，如果網(wǎng)站只做中文站那么GBK訪問速度會更快，而使用UTF-8會更兼容。
亂碼的問題：1瀏覽器
標(biāo)簽的分類(掌握)
DTD文檔聲明上(掌握)
HTML有多個版本規(guī)范，為了讓瀏覽器能正確渲染，在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：
DTD必須寫在第一行、不區(qū)分大小分、沒有結(jié)束標(biāo)簽。
< !DOCTYPE html>
DTD文檔聲明下(了解)
HTML-XHTML-HTML5區(qū)別(了解)
WebStorm安裝(理解)
H標(biāo)簽和P標(biāo)簽以及Hr標(biāo)簽(掌握)
h1 - h6 標(biāo)簽可定義標(biāo)題。h1 定義最大的標(biāo)題。h6 定義最小的標(biāo)題。在企業(yè)開發(fā)中，一個頁面只用一個h1標(biāo)簽，因?yàn)殛P(guān)系到SEO
p 標(biāo)簽 (paragraph 美 [p?r??ɡr?f] )定義段落。
p 元素會自動在其前后創(chuàng)建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規(guī)定。
hr標(biāo)簽在 HTML 頁面中創(chuàng)建一條水平線。
水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個部分。
標(biāo)簽綜合練習(xí)(掌握)
在 XHTML 中，< hr> 必須被正確地關(guān)閉，比如 < hr />。
在 HTML 中，< hr> 標(biāo)簽沒有結(jié)束標(biāo)簽。
注釋(掌握)
< !–這是一段注釋。注釋不會在瀏覽器中顯示。–>
img標(biāo)簽(掌握)
img 標(biāo)簽有兩個必需的屬性：src 屬性 和 alt 屬性。功能顯示圖像的 URL、圖像的替代文本。
讓圖片等比例放大縮小？ 寬度和高度只設(shè)定一 項(xiàng)
br標(biāo)簽(掌握)
br換行，用于一句話還沒結(jié)束，但是要另起一行來寫的情況。段落之間不用br換行，企業(yè)開發(fā)中不常用 br標(biāo)簽
路徑問題(理解)
相對路徑，當(dāng)前項(xiàng)目所在位置開始查找
絕對路徑，從最底層目錄查找
路徑練習(xí)(理解)
a標(biāo)簽基本使用(掌握)
href屬性指向非當(dāng)前域名加 http://， 屬性target="_blank" 在新窗口打開頁面，屬性download當(dāng)鏈接地址指向二進(jìn)制文件時下載此文件
a標(biāo)簽其它屬性(掌握)
base標(biāo)簽(掌握)
< base> 標(biāo)簽為頁面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。
注釋： 標(biāo)簽必須位于 head 元素內(nèi)部。
屬性有 href 和 target
假鏈接(掌握)
點(diǎn)擊之后不跳轉(zhuǎn)，#號點(diǎn)擊返回頁面頂部，javascript:點(diǎn)擊沒有反應(yīng)
<a href="#">#號</a> <a href="javascript:">javascript:</a>錨點(diǎn)(掌握)
應(yīng)用場景，線在閱讀的書籍，一整本書都在一個頁面，點(diǎn)擊目錄就會定位到對應(yīng)的內(nèi)容
使用方法，在目標(biāo)錨點(diǎn)加上id，在 a 鏈路中，href等于# + id
跳轉(zhuǎn)到 HTTP協(xié)議
跳轉(zhuǎn)到其它頁面的指定位置，在目標(biāo)地址加上#id
示例跳轉(zhuǎn)到網(wǎng)站 W3C 簡介 頁面底部
無序列表(掌握)
無序列表 unordered list，沒有先后順序，場景：新聞列表，導(dǎo)航條等
<ul><li>新聞一</li><li>新聞二</li> </ul>輸出：
- 新聞一
- 新聞二
無序列表練習(xí)(理解)
列表前面的圓，由實(shí)心變成空心
type=“circle”
無序列表練習(xí)2(理解)
可在列表中，加入其它標(biāo)簽進(jìn)而豐富界面
<h5>四大名著</h5> <ul><li><h6>三國演義</h6><p> 故事開始黃巾兵起義，結(jié)束于司馬氏滅吳開晉，以描寫戰(zhàn)爭為主，反映了魏、蜀漢、吳三。。 </p></li><li><h6>水滸傳</h6><p>是中國歷史上第一部用古白話文寫成的歌頌農(nóng)民起義的長篇章回體版塊結(jié)構(gòu)小說。。</p></li> </ul>輸出：
四大名著
-
三國演義
故事開始黃巾兵起義，結(jié)束于司馬氏滅吳開晉，以描寫戰(zhàn)爭為主，反映了魏、蜀漢、吳三個。。
-
水滸傳
是中國歷史上第一部用古白話文寫成的歌頌農(nóng)民起義的長篇章回體版塊結(jié)構(gòu)小說。。
無序列表練習(xí)3(理解)
在 li 里面再添加 ul>li
有序列表(理解)
有序列表 ordered list，所有數(shù)據(jù)有先后之分
type 屬性 a、A、1、i、I五個屬性值表示列表以何種方式排序，分別對應(yīng) 小寫字母、大寫字母、數(shù)字、小寫羅馬字符、大寫羅馬字符
輸出：
熱點(diǎn)榜
定義列表(掌握)
<dl> 標(biāo)簽定義了定義列表（definition list）。
<dl> 標(biāo)簽用于結(jié)合 <dt> （description term 定義列表中的項(xiàng)目）和 <dd>（description description 描述列表中的項(xiàng)目）。
應(yīng)用場景：網(wǎng)站底部的相關(guān)信息，圖文混排
<dl><dt>計(jì)算機(jī)</dt><dd>用來計(jì)算的儀器 ... ...</dd><dt>顯示器</dt><dd>以視覺方式顯示信息的裝置 ... ...</dd> </dl>輸出：
計(jì)算機(jī)定義列表練習(xí)(了解)
圖文混排，左邊圖片，右邊描述
表格標(biāo)簽基本使用(理解)
表格標(biāo)簽和列表標(biāo)簽都屬于組合標(biāo)簽，table 表格，th表頭，td表單元
<table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr> </table>| January | $100 |
表格標(biāo)簽的屬性(了解)
寬度和高度，水平對齊和垂直對齊，外邊距和內(nèi)邊距
width and height , algin = left/ center/ right, valgin =top/ middle/ bottom ,
cellspacing=“0” 單元格之間的空白， cellpadding 單元邊沿與其內(nèi)容之間的空白。
細(xì)線表格(理解)
cellspacing 邊框大小，bgcolor 邊框背景顏色
<table bgcolor="black" cellspacing="1" ><tr bgcolor="width"><th>表頭</th><th>表頭</th></tr><tr bgcolor="width"><td>表單元</td><td>表單元</td></tr> </table>表格中的其它標(biāo)簽(理解)
表格的結(jié)構(gòu)(了解)
單元格合并(理解)
colspan = “2” 當(dāng)前單元格橫跨2列
表格練習(xí)(了解)
colspan=“2” 當(dāng)前單元格橫向跨2列
rowspan=“2” 當(dāng)前單元格縱向跨2行
表單標(biāo)簽-input(掌握)
單選按鈕默認(rèn)支持多選，多個按鈕設(shè)置相同name才會單選，默認(rèn)選中checked屬性
名字：<input type="text"><br> 密碼：<input type="password"><br> 性別：<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女<br> <input type="checkbox" checked="checked">已閱讀 <input type="checkbox">同意<br>表單標(biāo)簽-按鈕(掌握)
隱藏表單，點(diǎn)擊按鈕，重置按鈕，提交按鈕
<form action=""><input type="hidden" name="" value=""><input type="button" name="" value="按鈕" onclick="console.log(111)"><input type="reset" name="" value="重置"><input type="submit" name="" value="提交"> </form>Label標(biāo)簽(掌握)
讓文字關(guān)聯(lián)輸入框，點(diǎn)擊文字光標(biāo)出現(xiàn)在輸入框，label標(biāo)簽的 for 綁定輸入框的 id
<label for="user"> 名字：<input type="text" id="user"></label><br> <label for="pwd"> 密碼：<input type="password" id="pwd"></label><br>dalist標(biāo)簽(了解)
把輸入框和下拉列表綁定，給datalist 添加一個id，給輸入框添加一個list，list的值等于id的值。
但是datailst標(biāo)簽眾多瀏覽器不支持，僅作為了解。
表單標(biāo)簽-H5(了解)
h5新增表單類型，郵箱，域名，數(shù)字，時間控件，取色板
目前瀏覽器對H5的支持不夠，
表單標(biāo)簽-非input標(biāo)簽(掌握)
H5下拉列表，默認(rèn)選中 selected屬性，長文本輸入框cols文本區(qū)域可見寬，rows可見高度
<select name="" id=""><optgroup label="北京"><option value="">朝陽區(qū)</option><option value="">大興區(qū)</option></optgroup><optgroup label="廣州"><option value="">天河</option><option value="">黃浦</option></optgroup> </select> <textarea name="" id="" cols="30" rows="10"></textarea>表單練習(xí)上(理解)
表單練習(xí)下(理解)
H5完整的form表單， fieldset為表單加上邊框，legend讓文字出現(xiàn)在邊框左上角
<form action="#"> <fieldset><legend>注冊</legend><p>賬號：<input type="text" name="account"></p><p>密碼：<input type="password" name="pwd"></p><p>性別：<input type="radio" checked="" name="gender" value="1"> 男<input type="radio" name="gender" value="0">女</p><p>愛好 :<input type="checkbox" name="hobby" value="a"> a<input type="checkbox" name="hobby" value="b"> b<input type="checkbox" name="hobby" value="c"> c</p><p>簡介：<textarea name="desc" id="" cols="30" rows="10"></textarea></p><p>生日：<input type="date" name="birthday"></p><p>郵箱：<input type="email" name="email"></p><p>電話：<input type="number" name="tel"></p><p><input type="submit" value="注冊"><input type="reset" value="重置"></p> </fieldset> </form>video標(biāo)簽(掌握)
video標(biāo)簽用于播放視頻
屬性，src 視頻地址，autoplay自動播放，controls顯示播放控件，poster播放前的圖片，loop循環(huán)播放，preload預(yù)加載即播放前加載視頻與autoplay同時出現(xiàn)會失效，muted靜音，width寬，height高
video標(biāo)簽第二種格式(掌握)
當(dāng)前，video 元素支持三種視頻格式：Ogg、MPEG 4、WebM
但沒有一種格式是所有瀏覽器廠商都支持的，為了兼容所有的瀏覽器，新加了source標(biāo)簽，所以至少要準(zhǔn)備兩個格式的視頻，一個mp4格式加一個ogg或者webm格式的視頻
video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式
audio標(biāo)簽(掌握)
audio音頻播放
autoplay 音頻就緒后馬上播放，controls 向用戶顯示播放控件，
loop 當(dāng)音頻結(jié)束后重新開始播放，preload 預(yù)備播放 頁面加載時音頻也加載 如果使用了autoplay則此屬性失效，src 音頻的URL。audio沒有寬/高屬性
詳情和概要標(biāo)簽(理解)
details 標(biāo)簽用于描述文檔或文檔某個部分的細(xì)節(jié)。目前只有 Chrome 支持 details 標(biāo)簽。
<details><summary>HTML 4.01 與 HTML 5 之間的差異</summary>標(biāo)簽是 HTML 5 中的新標(biāo)簽。 </details>marquee標(biāo)簽(理解)
讓文字從右向左水平滾動，此標(biāo)簽w3c沒有出標(biāo)準(zhǔn)，但各大瀏覽器支持。
屬性 direction滾動方向 值down,up,right,up，scrollamount移動速度 值 number，loop滾動次數(shù)，behavior滾動方式，值 slide觸到邊框就停止了 alternate觸到邊框就彈回
HTML中被廢棄的標(biāo)簽(掌握)
html標(biāo)簽是用來添加語義的，而在早期，有一部分html標(biāo)簽是用來修改樣式的，那些修改樣式的標(biāo)簽已經(jīng)全部廢棄。
br, hr, font, b, u, i, s
以上標(biāo)簽只能更改樣式并沒有任何語義，而新的替代者為文字加了語義
b -> strong 定義重要性強(qiáng)調(diào)文字
u -> ins 定義插入的文字
i -> em 強(qiáng)調(diào)的文字
s -> del 被刪除的文字
strong定義重要性強(qiáng)調(diào)文字 ins定義插入的文字 em定義強(qiáng)調(diào)的文字 del被刪除的文字
字符實(shí)體(理解)
在 HTML 中，某些字符是預(yù)留，比如不能使用小于號（<）和大于號（>），這是因?yàn)闉g覽器會誤認(rèn)為它們是標(biāo)簽，更多參考w3c字符實(shí)體
< > ?
體驗(yàn)CSS(理解)
CSS的作用，只有一個就是修改樣式，css寫在head標(biāo)簽之中，
text-algin 讓文字居中，font-family 設(shè)置字體
CSS的固定格式(掌握)
style寫在head標(biāo)簽內(nèi)，與title同級，屬性type="text/css"可寫可不寫，因?yàn)槟J(rèn)就是text/css。屬性格式 key: value; 冒號分號不能省
<head><title></title><style type="text/css">p {width: 500px;}</style> </head>文字相關(guān)屬性(掌握)
font-family 字體必須是用戶電腦上安裝了才會展示這種字體
font-style: italic; //italic 文字傾斜， normal 文字正常 font-weight: blod; // blod文字加粗，bloder 加粗+ ，lighter 細(xì)線，值100-900 font-size: 20px; //文字大小， pixels font-fmaily:字體屬性補(bǔ)充(掌握)2
family可以設(shè)置多個字體，如果前面的字體不存在，就會展示后面的字體，以逗號分隔。如果設(shè)置的多個字體都不存在，那么就會使用客戶端的默認(rèn)字體。
怎樣分別為中英設(shè)置字體？但凡是英文字體都不包含中文，但凡是中文字體一定包含英文，所以先設(shè)置英文字體，再設(shè)置中文字體。
企業(yè)開發(fā)常用字體，中文： 宋體/黑體/微軟雅黑，英文: “Times New Roman”, “Arial”
文字屬性的簡寫(掌握)
font屬性
font: style weifht size family;
size family 這兩個值不能更改位置，不能刪除，style weifht這兩個隨意
文本屬性(掌握)
文本裝飾 text-decoration，文本水平對齊 text-align，文本縮進(jìn) text-indent
text-decoration: //上劃線 overline; 刪除線line-through;不要線包含超鏈接下劃線none; text-align: right; // right; left; center; text-indent: 2em; // 2個字符顏色控制屬性上(理解)
顏色的取值，更多顏色參考 W3C顏色
英文單詞。
rgb(red, green, blue)每個顏色取值范圍0-255 ，當(dāng)3個值相同，就是灰色。
rgba是CSS3新增，rgba(紅色，綠色，藍(lán)色，透明度)，透明度取值0-1。
顏色控制屬性下(理解)
十六進(jìn)制，本質(zhì)是rgb，但是更方便書寫，十六進(jìn)制每兩位表示一個顏色，例如
#FFEE00 ，FF表示R，EE表示G，00表示B
10=A,11=B,12=C,13=D,14=E,15=F
計(jì)算方法
用十六進(jìn)制的第一位乘以16 ，加十六進(jìn)制的第二位 等于十進(jìn)制 ，
21 == 1 * 16 +5 == F5
FF == F *16 + F == 15 *16 + 15 == 255
練習(xí) rgb(0, 112, 255) 的十六進(jìn)制是多少？
0== 016+0= 00，112= 716+0= 70，255= 15*16+15= 1515= FF
等于 #0070FF
標(biāo)簽選擇器(掌握)
id選擇器(掌握)
根據(jù)ID名稱找到標(biāo)簽，在ID前面寫一個#號，不過CSS通常不使用ID
<style type="text/css">#desc{} </style> <p id="desc" ></p>類選擇器(掌握)
根據(jù)class名稱找到標(biāo)簽，在class前面寫一個"."號，類名是專用于css設(shè)置樣式的，而ID是JS使用的
.title { } <div class="title"></div>id選擇器和類選擇器(理解)
一個標(biāo)簽只能設(shè)置一個ID名，而一個標(biāo)簽可以設(shè)置多個類名，類名之間以空格分隔，在使用類名時，如果多個類名有不同的樣式，把這幾個類名都添加到標(biāo)簽以實(shí)現(xiàn)一個整體樣式
.c1 { color: red; } .c2 { font-size: 30px; } <p class="c1 c2">一段文字</p> //這段文字展示效果是 紅色 + 加粗后代選擇器(掌握)
后代選擇器用空格分隔，后代選擇器會查找所有p標(biāo)簽內(nèi)的span標(biāo)簽，而不管有多少層級
示例，選擇div 標(biāo)簽內(nèi)的p標(biāo)簽，選擇p標(biāo)簽內(nèi)的a標(biāo)簽內(nèi)的span標(biāo)簽
子元素選擇器(掌握)
子元素選擇器使用大于 >符號分隔，子元素只會選擇元素下的第一層，如果在這個元素下面還有第二層第三層，它是不會選擇的。
以下示例中，div> p 第一層會被選擇，第四層不會， div>li不會選中任何標(biāo)簽，ul 才是div的第一層，正確做法 div>ul>li
后代選擇器和子元素選擇器(理解)
后代選擇器使用空格連接，會選擇標(biāo)簽內(nèi)的兒子，孫子，更內(nèi)層的指定標(biāo)簽
子元素選擇器使用大于 >連接，只選擇第一層指定的標(biāo)簽
交集選擇器(理解)
選中標(biāo)簽中相交的那部分，選擇器之間沒有任何連接符號
示例，選擇P標(biāo)簽中類名等于rr的標(biāo)簽，選擇p標(biāo)簽中類名等于rr且id名等于two的標(biāo)簽，
并集選擇器(掌握)
以逗號連接
示例，選擇類名等于union，和類名等于selector的標(biāo)簽
兄弟選擇器(掌握)
相鄰選擇器，用加號 + 連接，即選擇同級標(biāo)簽中，緊跟在指定標(biāo)簽之后的指定標(biāo)簽，如選擇h5之后的p，當(dāng)a標(biāo)簽將h5和p隔開就無法選中
兄弟選擇器，用波浪號 ~ 連接，同級標(biāo)簽中，選擇在指定標(biāo)簽后面的所有標(biāo)簽。例如選擇h5后面的所有p，
序選擇器上(掌握)
css3新增，
選中同級別第一個標(biāo)簽，即是第一個，且為指定的標(biāo)簽
選中同級別同類型的第一個，即同級別中的第一個標(biāo)簽
選擇同級別的第N個標(biāo)簽，
下面的示例，last 同理
序選擇器下(掌握)
child和of-type的不同點(diǎn)，child查找所有標(biāo)簽，而of-type只查找目標(biāo)標(biāo)簽
odd奇數(shù)，even偶數(shù)，n計(jì)算器x和y自定義(xn+y)
屬性選擇器上(理解)
用中括號 [] 括號的統(tǒng)稱屬性選擇器
[attribute] 有這個屬性的標(biāo)簽, [attribute = value ] 有這個屬性并且值等于多少的標(biāo)簽
屬性選擇器下(理解)
*css2 |= 以什么開頭 ,~=包含某個值的 *
css2查找條件太苛刻比如必須要空格" “隔開必須要橫桿”-" 隔開才能找到，不建議使用。
css3 沒有任何限制，只要包含這個字的就找的到
^=以什么開頭，$=以什么結(jié)束，*=包含某個值的
屬性選擇器下-js(掌握)
下拉列表值等于 10，值以7開頭，值以5結(jié)束，值的引號可不加
$('select option[value="10"]').css('color','red'); $('select option[value^=7]').css('color','blue'); $('select option[value$=5]').css('color','green');<select name="" id=""><option value="10">10</option><option value="72">72</option><option value="55">55</option> </select>通配符選擇器(理解)
* 通配符 標(biāo)簽太多就會性能差
*{ 查找全部標(biāo)簽 }選擇器練習(xí)(理解)
用所有學(xué)過的選擇器選中兩個p標(biāo)簽
<div><h1>我是一個標(biāo)題</h1><p id="identity1" class="para">我是一個段落1</p><p id="identity2" class="para">我是一個段落2</p> </div> p{} 標(biāo)簽選擇器 #identity1{} id選擇器 .para{} 類選擇器 div p{} 后代選擇器 div>p{} 子元素選擇器 p.para{} 交集選擇器 #identity1,#identity2{} 并集選擇器 h1~p{} 兄弟選擇器 p:nth-child(2),p:last-child{} 序選擇器上 p:nth-child(odd),p:nth-child(even){},p:nth-child(n+1) 序選擇器下 p[class]{},p[class=para]{} 屬性選擇器上 p[class^=par] 屬性選擇器下 *{} 通配符選擇器谷歌開發(fā)者工具其它使用(理解)
CSS樣式學(xué)習(xí)
CSS三大特性 繼承性、層疊性、優(yōu)先級
繼承性(掌握)
給父元素設(shè)置屬性，所有子元素也會繼承，在瀏覽器的審查元素可看到 inherited from ***
但繼承僅限于以color/font/text/line開頭的屬性
也有特殊的標(biāo)簽不會繼承某些特性，比如H標(biāo)簽不繼承父元素的字體大小，A標(biāo)簽不繼承下劃線文字顏色
層疊性(掌握)
如果p標(biāo)簽被設(shè)置了紅色，p標(biāo)簽的class又設(shè)置了藍(lán)色，這時候類的屬性就會層疊掉P設(shè)置的屬性值，最終顯示是藍(lán)色，這是CSS的層疊性
CSS全稱 層疊樣式表 Cascading StyleSAheet
優(yōu)先級(掌握)
誰離標(biāo)簽最近，就是最優(yōu)先的 ，直接選中》繼承。當(dāng)優(yōu)先級相同，最后執(zhí)行覆蓋前面執(zhí)行
完整優(yōu)先級 （為何通配符高于繼承？因?yàn)橥ㄅ浞侵苯幽玫搅藰?biāo)簽）
!important(掌握)
把優(yōu)先級別提升到最高，
示例中的ID優(yōu)先級是最高的，但是標(biāo)簽選擇器在屬性值后面加了 !important ，最終文字顏色是紅色
權(quán)重問題(掌握)
當(dāng)多個選擇器混合在一起使用，都指向同一個標(biāo)簽，我們就計(jì)算權(quán)重判斷哪個選擇器優(yōu)先級最高
計(jì)算規(guī)則：
從放棄到入門-筆記二
CSS三大特性練習(xí)(理解)
div和span標(biāo)簽(掌握)
CSS元素顯示模式(掌握)
CSS元素顯示模式轉(zhuǎn)換(掌握)
百度首頁(理解)
背景顏色(掌握)
背景圖片(掌握)
背景平鋪(掌握)
背景定位上(掌握)
背景定位下(掌握)
背景關(guān)聯(lián)和縮寫(理解)
背景圖片和插入圖片區(qū)別(掌握)
背景圖片練習(xí)(理解)
CSS精靈圖(掌握)
精靈圖練習(xí)(理解)
邊框?qū)傩陨?掌握)
邊框?qū)傩韵?掌握)
邊框練習(xí)(理解)
內(nèi)邊距屬性(掌握)
外邊距屬性(掌握)
外邊距合并現(xiàn)象(掌握)
盒子模型(理解)
盒子寬度和高度(理解)
盒子寬度和高度練習(xí)1(理解)
盒子寬度和高度練習(xí)2(理解)
盒子box-sizing屬性(理解)
盒子模型練習(xí)3(理解)
盒子居中和內(nèi)容居中(理解)
清空默認(rèn)邊距(掌握)
行高和字號(掌握)
還原字體和字號(掌握)
文字界面(理解)
網(wǎng)頁布局方式(掌握)
浮動流基本概念(掌握)
浮動元素脫標(biāo)(理解)
浮動元素排序規(guī)則(理解)
浮動元素貼靠現(xiàn)象(理解)
浮動元素字圍現(xiàn)象(理解)
浮動練習(xí)上(理解)
浮動練習(xí)中(理解)
浮動練習(xí)下(理解)
浮動元素高度問題(掌握)
清除浮動方式一(理解)
清除浮動方式二(理解)
margintop失效原因(理解)
清除浮動方式三(理解)
清除浮動方式四(理解)
偽元素選擇器(掌握)
清除浮動方式五(理解)
清除浮動方式六(理解)
網(wǎng)易注冊界面-基本結(jié)構(gòu)搭建(理解)
網(wǎng)易注冊界面-完成頂部左邊(理解)
網(wǎng)易注冊界面-完成頂部右邊(理解)
網(wǎng)易注冊界面-完成中間頂部(理解)
網(wǎng)易注冊界面-完成中間右邊(理解)
網(wǎng)易注冊界面-完成中間左邊頂部(理解)
網(wǎng)易注冊界面-完成中間左邊底部中(理解)
網(wǎng)易注冊界面-完成中間左邊底部下(理解)
網(wǎng)易注冊界面-完善(理解)
定位流-相對定位(掌握)
相對定位-注意點(diǎn)(掌握)
定位流-絕對定位(掌握)
絕對定位0參考點(diǎn)(掌握)
絕對定位-注意點(diǎn)(掌握)
絕對定位-子絕父相(掌握)
絕對定位-水平居中(理解)
定位練習(xí)-團(tuán)購界面(理解)
定位練習(xí)-焦點(diǎn)圖(理解)
定位流-固定定位(掌握)
定位練習(xí)-新浪首頁(理解)
定位流-z-index屬性(掌握)
a標(biāo)簽偽類選擇器(掌握)
a標(biāo)簽偽類選擇器注意點(diǎn)(掌握)
a標(biāo)簽偽類選擇器-練習(xí)(理解)
過渡模塊基本使用(掌握)
過渡模塊-其它屬性(理解)
過渡模塊-連寫(掌握)
過渡模塊-彈性效果(理解)
過渡模塊-手風(fēng)琴效果(理解)
2D轉(zhuǎn)換模塊(掌握)
2D轉(zhuǎn)換模塊-形變中心點(diǎn)(掌握)
2D轉(zhuǎn)換模塊-旋轉(zhuǎn)軸向(理解)
2D轉(zhuǎn)換模塊-透視屬性(理解)
2D轉(zhuǎn)換模塊-相片墻(理解)
盒子陰影和文字陰影(掌握)
翻轉(zhuǎn)菜單-綜合練習(xí)(理解)
動畫模塊(掌握)
動畫模塊-其它屬性上(理解)
動畫模塊-其它屬性下(理解)
動畫模塊-連寫(掌握)
動畫模塊-云層動畫(理解)
動畫模塊-無限滾動上(掌握)
動畫模塊-無限滾動下(掌握)
3D轉(zhuǎn)換模塊(掌握)
3D轉(zhuǎn)換模塊-正方體(理解)
3D轉(zhuǎn)換模塊-正方體(理解)
3D轉(zhuǎn)換模塊-長方體(理解)
3D轉(zhuǎn)換模塊-練習(xí)(理解)
3D播放器上(理解)
3D播放器下(理解)
背景尺寸屬性(掌握)
背景圖片定位區(qū)域?qū)傩?理解)
背景繪制區(qū)域?qū)傩?理解)
多重背景圖片(掌握)
多重背景圖片-練習(xí)(理解)
CSS書寫格式(掌握)
努比亞-準(zhǔn)備工作(掌握)
努比亞-基本結(jié)構(gòu)(理解)
努比亞-頂部logo(掌握)
努力比-頂部導(dǎo)航(理解)
努力比-廣告區(qū)域(理解)
努比亞-廣告區(qū)域?qū)Ш?理解)
努比亞-輪播圖(掌握)
努比亞-序號(理解)
努比亞-視頻區(qū)域(掌握)
努比亞-內(nèi)容區(qū)域(掌握)
努比亞-最新產(chǎn)品(理解)
努比亞-精品配件(理解)
總結(jié)
以上是生活随笔為你收集整理的【HTML/CSS】从放弃到入门-笔记1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 韦棋宝画柿子//作品欣赏
- 下一篇： 2017年html5行业报告,云适配发布