當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【HTML/CSS】从放弃到入门-笔记1

發(fā)布時(shí)間：2024/3/13 HTML 41 豆豆

生活随笔收集整理的這篇文章主要介紹了【HTML/CSS】从放弃到入门-笔记1 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

從放棄到入門1 ? 從放棄到入門2

了解瀏覽器

瀏覽器和服務(wù)器(了解)

瀏覽器是一款軟件，瀏覽器功能：1將網(wǎng)頁渲染出來給用戶查看，2讓用戶通過瀏覽器與網(wǎng)頁交互
不同瀏覽器的內(nèi)核不同，渲染效果會(huì)有小的差別。市面上最常用的瀏覽器：
IE -內(nèi)核 Trident
谷歌 - 內(nèi)核 WebKit/Blink
火狐 - 內(nèi)核 Gecko
Safarf - 內(nèi)核 WebKit
歐朋 - 內(nèi)核 Presto

服務(wù)器也是電腦，你可以理解服務(wù)器為超級(jí)計(jì)算機(jī)，因?yàn)樗呐渲帽燃矣秒娔X高，并且服務(wù)器不關(guān)機(jī)不斷電。

瀏覽器訪問網(wǎng)頁原理(理解)

當(dāng)用戶訪問網(wǎng)頁時(shí)，是會(huì)有真實(shí)的數(shù)據(jù)傳輸，數(shù)據(jù)會(huì)緩存到用戶本地緩存文件夾，然后瀏覽器再渲染出來，所以通常第二次訪問網(wǎng)站比首次訪問快
網(wǎng)頁不是一個(gè)文件，是很多類型的文件組成的。

瀏覽器請(qǐng)求數(shù)據(jù)的過程(理解)

打開瀏覽器輸入U(xiǎn)RL敲下回車后，
-> 1 瀏覽器會(huì)發(fā)送“請(qǐng)求報(bào)文”（Request）給服務(wù)器
-> 2 服務(wù)器處理請(qǐng)求
-> 3 服務(wù)器將處理結(jié)果發(fā)送“響應(yīng)報(bào)文”（Response ）給瀏覽器
-> 4 瀏覽器解析數(shù)據(jù)渲染出來

Request 請(qǐng)求報(bào)文：請(qǐng)求行+請(qǐng)求頭+空行+請(qǐng)求體
Response 響應(yīng)報(bào)文：響應(yīng)行+響應(yīng)頭+響應(yīng)體

什么是URL(理解)

https:// abc. com/index.html
https： URL協(xié)議類型，
abc. com：服務(wù)器域名
:80：服務(wù)器端口號(hào)，
index.html：需要訪問的資源

HTTP協(xié)議(理解)

超文本傳輸協(xié)議（HTTP, HyperText Transfer Protocol）
什么是協(xié)議？

兩個(gè)人約定要傳文件，他們協(xié)商好先傳文件名，再傳文件大小類型時(shí)間等信息，最后傳內(nèi)容，那么接收的一方在收到后就會(huì)返回一個(gè)狀態(tài)，由于經(jīng)常要傳文件，他們就默認(rèn)了這種兩個(gè)人約定的傳輸方式，這叫原始協(xié)議。
隨著更多人要傳文件，這個(gè)協(xié)議被不會(huì)斷的新增完善細(xì)節(jié)化，慢慢的變成了一種標(biāo)準(zhǔn)協(xié)議。

HTTP協(xié)議是干什么的？：HTTP協(xié)議解決溝通的問題，作用是約束/規(guī)范瀏覽器與服務(wù)器之間如何溝通。

其它知識(shí)補(bǔ)充(理解)

HTML作用(掌握)

用一些文本來描述另一些文本的語義，而這些文本不會(huì)在網(wǎng)頁中顯示出來，所以我們稱這些文本為“超文本”，而這些文本又叫標(biāo)簽，所以HTML被稱為“超文本標(biāo)記語言”。
HTML的作用只有一個(gè)，專門用來給純文本添加語義的，而不是修改文本樣式的。

就像《編碼》這本書中所講的盲文，用手去摸“< h1> HTML< /h1>”，這幾個(gè)字本沒有特別之處，但是因?yàn)閮蛇呌?h1的標(biāo)記而中間是HTML，那么盲文就會(huì)認(rèn)為這個(gè)HTML除本身代表的語義，它還是一個(gè)標(biāo)題。

h1標(biāo)簽它的作用是什么？
-錯(cuò)誤：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

第一個(gè)HTML網(wǎng)頁(掌握)

html標(biāo)簽只是用來添加語義，不更改樣式。

HTML基本結(jié)構(gòu)詳解(掌握)

字符集問題(掌握)

解決亂碼問題，在head中加入 < meta charset=“utf-8”>
在實(shí)際開發(fā)中，使用GBK還是UTF-8呢？ GBK存儲(chǔ)的字符比較少，存儲(chǔ)了所有漢字和常用外文，體積小。UTF-8存儲(chǔ)了全世界所有文字，體積大，如果網(wǎng)站只做中文站那么GBK訪問速度會(huì)更快，而使用UTF-8會(huì)更兼容。
亂碼的問題：1瀏覽器

標(biāo)簽的分類(掌握)

DTD文檔聲明上(掌握)

HTML有多個(gè)版本規(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ā)中，一個(gè)頁面只用一個(gè)h1標(biāo)簽，因?yàn)殛P(guān)系到SEO

p 標(biāo)簽 (paragraph 美 [p?r??ɡr?f] )定義段落。
p 元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白。瀏覽器會(huì)自動(dòng)添加這些空間，您也可以在樣式表中規(guī)定。
hr標(biāo)簽在 HTML 頁面中創(chuàng)建一條水平線。
水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個(gè)部分。

標(biāo)簽綜合練習(xí)(掌握)

在 XHTML 中，< hr> 必須被正確地關(guān)閉，比如 < hr />。
在 HTML 中，< hr> 標(biāo)簽沒有結(jié)束標(biāo)簽。

注釋(掌握)

< !–這是一段注釋。注釋不會(huì)在瀏覽器中顯示。–>

img標(biāo)簽(掌握)

img 標(biāo)簽有兩個(gè)必需的屬性：src 屬性和 alt 屬性。功能顯示圖像的 URL、圖像的替代文本。
讓圖片等比例放大縮小？寬度和高度只設(shè)定一項(xiàng)

br標(biāo)簽(掌握)

br換行，用于一句話還沒結(jié)束，但是要另起一行來寫的情況。段落之間不用br換行，企業(yè)開發(fā)中不常用 br標(biāo)簽

路徑問題(理解)

相對(duì)路徑，當(dāng)前項(xiàng)目所在位置開始查找
絕對(duì)路徑，從最底層目錄查找

路徑練習(xí)(理解)

a標(biāo)簽基本使用(掌握)

href屬性指向非當(dāng)前域名加 http://，屬性target="_blank" 在新窗口打開頁面，屬性download當(dāng)鏈接地址指向二進(jìn)制文件時(shí)下載此文件

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)，#號(hào)點(diǎn)擊返回頁面頂部，javascript:點(diǎn)擊沒有反應(yīng)

<a href="#">#號(hào)</a> <a href="javascript:">javascript:</a>

錨點(diǎn)(掌握)

應(yīng)用場(chǎng)景，線在閱讀的書籍，一整本書都在一個(gè)頁面，點(diǎn)擊目錄就會(huì)定位到對(duì)應(yīng)的內(nèi)容
使用方法，在目標(biāo)錨點(diǎn)加上id，在 a 鏈路中，href等于# + id
跳轉(zhuǎn)到 HTTP協(xié)議

<div id="httppro"><div> <a href="#httpproto">HTTP協(xié)議</a>

跳轉(zhuǎn)到其它頁面的指定位置，在目標(biāo)地址加上#id
示例跳轉(zhuǎn)到網(wǎng)站 W3C 簡(jiǎn)介頁面底部

無序列表(掌握)

無序列表 unordered list，沒有先后順序，場(chǎng)景：新聞列表，導(dǎo)航條等

輸出：

新聞一
新聞二

無序列表練習(xí)(理解)

列表前面的圓，由實(shí)心變成空心
type=“circle”

無序列表練習(xí)2(理解)

可在列表中，加入其它標(biāo)簽進(jìn)而豐富界面

<h5>四大名著</h5> <ul><li><h6>三國(guó)演義</h6><p> 故事開始黃巾兵起義，結(jié)束于司馬氏滅吳開晉，以描寫戰(zhàn)爭(zhēng)為主，反映了魏、蜀漢、吳三。。 </p></li><li><h6>水滸傳</h6><p>是中國(guó)歷史上第一部用古白話文寫成的歌頌農(nóng)民起義的長(zhǎng)篇章回體版塊結(jié)構(gòu)小說。。</p></li> </ul>

輸出：

四大名著

三國(guó)演義

故事開始黃巾兵起義，結(jié)束于司馬氏滅吳開晉，以描寫戰(zhàn)爭(zhēng)為主，反映了魏、蜀漢、吳三個(gè)。。
水滸傳

是中國(guó)歷史上第一部用古白話文寫成的歌頌農(nóng)民起義的長(zhǎng)篇章回體版塊結(jié)構(gòu)小說。。

無序列表練習(xí)3(理解)

在 li 里面再添加 ul>li

有序列表(理解)

有序列表 ordered list，所有數(shù)據(jù)有先后之分
type 屬性 a、A、1、i、I五個(gè)屬性值表示列表以何種方式排序，分別對(duì)應(yīng) 小寫字母、大寫字母、數(shù)字、小寫羅馬字符、大寫羅馬字符

輸出：

熱點(diǎn)榜

熱點(diǎn)新聞

定義列表(掌握)

<dl> 標(biāo)簽定義了定義列表（definition list）。
<dl> 標(biāo)簽用于結(jié)合 <dt> （description term 定義列表中的項(xiàng)目）和 <dd>（description description 描述列表中的項(xiàng)目）。

應(yīng)用場(chǎng)景：網(wǎng)站底部的相關(guān)信息，圖文混排

<dl><dt>計(jì)算機(jī)</dt><dd>用來計(jì)算的儀器 ... ...</dd><dt>顯示器</dt><dd>以視覺方式顯示信息的裝置 ... ...</dd> </dl>

輸出：

計(jì)算機(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> MonthSavings

January

$100

表格標(biāo)簽的屬性(了解)

寬度和高度，水平對(duì)齊和垂直對(duì)齊，外邊距和內(nèi)邊距
width and height , algin = left/ center/ right, valgin =top/ middle/ bottom ,
cellspacing=“0” 單元格之間的空白， cellpadding 單元邊沿與其內(nèi)容之間的空白。

細(xì)線表格(理解)

cellspacing 邊框大小，bgcolor 邊框背景顏色

表格中的其它標(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)支持多選，多個(gè)按鈕設(shè)置相同name才會(huì)單選，默認(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)擊按鈕，重置按鈕，提交按鈕

Label標(biāo)簽(掌握)

讓文字關(guān)聯(lián)輸入框，點(diǎn)擊文字光標(biāo)出現(xiàn)在輸入框，label標(biāo)簽的 for 綁定輸入框的 id

dalist標(biāo)簽(了解)

把輸入框和下拉列表綁定，給datalist 添加一個(gè)id，給輸入框添加一個(gè)list，list的值等于id的值。
但是datailst標(biāo)簽眾多瀏覽器不支持，僅作為了解。

請(qǐng)輸入您的車型： <input type="text" name="" list="cars"> <datalist id="cars"><option>奔馳</option><option>寶馬</option><option>奧迪</option><option>賓利</option><option>路虎</option> </datalist>

表單標(biāo)簽-H5(了解)

h5新增表單類型，郵箱，域名，數(shù)字，時(shí)間控件，取色板
目前瀏覽器對(duì)H5的支持不夠，

郵箱<input type="email" name="mail" value=""><br> 域名<input type="url" name="url" value=""><br> 手機(jī)號(hào)<input type="number" name="number" value=""><br> 時(shí)間：<input type="date" name="date" value=""><br> 顏色：<input type="color" name="color" value=""><br>

表單標(biāo)簽-非input標(biāo)簽(掌握)

H5下拉列表，默認(rèn)選中 selected屬性，長(zhǎng)文本輸入框cols文本區(qū)域可見寬，rows可見高度

表單練習(xí)上(理解)

表單練習(xí)下(理解)

H5完整的form表單， fieldset為表單加上邊框，legend讓文字出現(xiàn)在邊框左上角

video標(biāo)簽(掌握)

video標(biāo)簽用于播放視頻
屬性，src 視頻地址，autoplay自動(dòng)播放，controls顯示播放控件，poster播放前的圖片，loop循環(huán)播放，preload預(yù)加載即播放前加載視頻與autoplay同時(shí)出現(xiàn)會(huì)失效，muted靜音，width寬，height高

video標(biāo)簽第二種格式(掌握)

當(dāng)前，video 元素支持三種視頻格式：Ogg、MPEG 4、WebM
但沒有一種格式是所有瀏覽器廠商都支持的，為了兼容所有的瀏覽器，新加了source標(biāo)簽，所以至少要準(zhǔn)備兩個(gè)格式的視頻，一個(gè)mp4格式加一個(gè)ogg或者webm格式的視頻
video 元素允許多個(gè) source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式

audio標(biāo)簽(掌握)

audio音頻播放
autoplay 音頻就緒后馬上播放，controls 向用戶顯示播放控件，
loop 當(dāng)音頻結(jié)束后重新開始播放，preload 預(yù)備播放頁面加載時(shí)音頻也加載如果使用了autoplay則此屬性失效，src 音頻的URL。audio沒有寬/高屬性

詳情和概要標(biāo)簽(理解)

details 標(biāo)簽用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。目前只有 Chrome 支持 details 標(biāo)簽。

<details><summary>HTML 4.01 與 HTML 5 之間的差異</summary>標(biāo)簽是 HTML 5 中的新標(biāo)簽。 </details>

marquee標(biāo)簽(理解)

讓文字從右向左水平滾動(dòng)，此標(biāo)簽w3c沒有出標(biāo)準(zhǔn)，但各大瀏覽器支持。
屬性 direction滾動(dòng)方向值down,up,right,up，scrollamount移動(dòng)速度值 number，loop滾動(dòng)次數(shù)，behavior滾動(dòng)方式，值 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>strong定義重要性強(qiáng)調(diào)文字 </strong> <ins>ins定義插入的文字 </ins> <em>em定義強(qiáng)調(diào)的文字 </em> <del>del被刪除的文字 </del>

strong定義重要性強(qiáng)調(diào)文字 ins定義插入的文字 em定義強(qiáng)調(diào)的文字 del被刪除的文字

字符實(shí)體(理解)

在 HTML 中，某些字符是預(yù)留，比如不能使用小于號(hào)（<）和大于號(hào)（>），這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽，更多參考w3c字符實(shí)體
< > ?

  空格，小于 <，大于 > 顯示h1標(biāo)簽合起來就是 <h1> © 版權(quán)符號(hào)

體驗(yàn)CSS(理解)

CSS的作用，只有一個(gè)就是修改樣式，css寫在head標(biāo)簽之中，
text-algin 讓文字居中，font-family 設(shè)置字體

CSS的固定格式(掌握)

style寫在head標(biāo)簽內(nèi)，與title同級(jí)，屬性type="text/css"可寫可不寫，因?yàn)槟J(rèn)就是text/css。屬性格式 key: value; 冒號(hào)分號(hào)不能省

<head><title></title><style type="text/css">p {width: 500px;}</style> </head>

文字相關(guān)屬性(掌握)

font-family 字體必須是用戶電腦上安裝了才會(huì)展示這種字體

font-style: italic; //italic 文字傾斜， normal 文字正常 font-weight: blod; // blod文字加粗，bloder 加粗+ ，lighter 細(xì)線，值100-900 font-size: 20px; //文字大小， pixels font-fmaily:

字體屬性補(bǔ)充(掌握)2

family可以設(shè)置多個(gè)字體，如果前面的字體不存在，就會(huì)展示后面的字體，以逗號(hào)分隔。如果設(shè)置的多個(gè)字體都不存在，那么就會(huì)使用客戶端的默認(rèn)字體。
怎樣分別為中英設(shè)置字體？但凡是英文字體都不包含中文，但凡是中文字體一定包含英文，所以先設(shè)置英文字體，再設(shè)置中文字體。
企業(yè)開發(fā)常用字體，中文：宋體/黑體/微軟雅黑，英文: “Times New Roman”, “Arial”

font-family: "宋體","微軟雅黑"; font-family: "Arial","宋體";

文字屬性的簡(jiǎn)寫(掌握)

font屬性
font: style weifht size family;
size family 這兩個(gè)值不能更改位置，不能刪除，style weifht這兩個(gè)隨意

font: italic blod 15px "Arial";

文本屬性(掌握)

文本裝飾 text-decoration，文本水平對(duì)齊 text-align，文本縮進(jìn) text-indent

text-decoration: //上劃線 overline; 刪除線line-through;不要線包含超鏈接下劃線none; text-align: right; // right; left; center; text-indent: 2em; // 2個(gè)字符

顏色控制屬性上(理解)

顏色的取值，更多顏色參考 W3C顏色
英文單詞。
rgb(red, green, blue)每個(gè)顏色取值范圍0-255 ，當(dāng)3個(gè)值相同，就是灰色。
rgba是CSS3新增，rgba(紅色，綠色，藍(lán)色，透明度)，透明度取值0-1。

color: yello; color: rgb(255,255,0) color: rgba(255,255,0,0.5);

顏色控制屬性下(理解)

十六進(jìn)制，本質(zhì)是rgb，但是更方便書寫，十六進(jìn)制每?jī)晌槐硎疽粋€(gè)顏色，例如
#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前面寫一個(gè)#號(hào)，不過CSS通常不使用ID

類選擇器(掌握)

根據(jù)class名稱找到標(biāo)簽，在class前面寫一個(gè)"."號(hào)，類名是專用于css設(shè)置樣式的，而ID是JS使用的

.title { } <div class="title"></div>

id選擇器和類選擇器(理解)

一個(gè)標(biāo)簽只能設(shè)置一個(gè)ID名，而一個(gè)標(biāo)簽可以設(shè)置多個(gè)類名，類名之間以空格分隔，在使用類名時(shí)，如果多個(gè)類名有不同的樣式，把這幾個(gè)類名都添加到標(biāo)簽以實(shí)現(xiàn)一個(gè)整體樣式

.c1 { color: red; } .c2 { font-size: 30px; } <p class="c1 c2">一段文字</p> //這段文字展示效果是紅色 + 加粗

后代選擇器(掌握)

后代選擇器用空格分隔，后代選擇器會(huì)查找所有p標(biāo)簽內(nèi)的span標(biāo)簽，而不管有多少層級(jí)
示例，選擇div 標(biāo)簽內(nèi)的p標(biāo)簽，選擇p標(biāo)簽內(nèi)的a標(biāo)簽內(nèi)的span標(biāo)簽

div p{ } p a span{ }

子元素選擇器(掌握)

子元素選擇器使用大于 >符號(hào)分隔，子元素只會(huì)選擇元素下的第一層，如果在這個(gè)元素下面還有第二層第三層，它是不會(huì)選擇的。
以下示例中，div> p 第一層會(huì)被選擇，第四層不會(huì)， div>li不會(huì)選中任何標(biāo)簽，ul 才是div的第一層，正確做法 div>ul>li

div> p {width: 300px;color: red; } div>li{border: 1px solid red; } <div><p>第一層<ul><li><p>第四層</p></li></ul></p><p>第一層</p> </div>

后代選擇器和子元素選擇器(理解)

后代選擇器使用空格連接，會(huì)選擇標(biāo)簽內(nèi)的兒子，孫子，更內(nèi)層的指定標(biāo)簽
子元素選擇器使用大于 >連接，只選擇第一層指定的標(biāo)簽

交集選擇器(理解)

選中標(biāo)簽中相交的那部分，選擇器之間沒有任何連接符號(hào)
示例，選擇P標(biāo)簽中類名等于rr的標(biāo)簽，選擇p標(biāo)簽中類名等于rr且id名等于two的標(biāo)簽，

p.rr{color: red; } p.rr#two{font-size: 3em; } <p>我是段落</p> <p class="rr" id="two">我是段落</p> <p class="rr">我是段落</p> <p>我是段落</p>

并集選擇器(掌握)

以逗號(hào)連接
示例，選擇類名等于union，和類名等于selector的標(biāo)簽

.union,.selector{color: blue; } <div class="union">并集</div> <p class="selector">選擇器</p> <span>選擇</span>

兄弟選擇器(掌握)

相鄰選擇器，用加號(hào) + 連接，即選擇同級(jí)標(biāo)簽中，緊跟在指定標(biāo)簽之后的指定標(biāo)簽，如選擇h5之后的p，當(dāng)a標(biāo)簽將h5和p隔開就無法選中
兄弟選擇器，用波浪號(hào) ~ 連接，同級(jí)標(biāo)簽中，選擇在指定標(biāo)簽后面的所有標(biāo)簽。例如選擇h5后面的所有p，

h5+p{color: blue; } h5~p{font-size: 2em; } <h5>標(biāo)題一</h5> <a href=""></a> <p>段落</p> <h5>標(biāo)題二</h5> <p>段落</p> <p>段落</p> <span><p>段落</p></span>

序選擇器上(掌握)

css3新增，
選中同級(jí)別第一個(gè)標(biāo)簽，即是第一個(gè)，且為指定的標(biāo)簽
選中同級(jí)別同類型的第一個(gè)，即同級(jí)別中的第一個(gè)標(biāo)簽
選擇同級(jí)別的第N個(gè)標(biāo)簽，
下面的示例，last 同理

p: first-child{ //同級(jí)中，P的標(biāo)簽等于第一個(gè)的標(biāo)簽（在同級(jí)別中找第一個(gè)，如果剛好是p標(biāo)簽就選中了） } p:first-of-type{ //同級(jí)中，第一個(gè)P標(biāo)簽（在同級(jí)眾多P標(biāo)簽中，找第一個(gè)P標(biāo)簽） } p:nth-child(2){ //同級(jí)中，P的標(biāo)簽等于第二個(gè)的標(biāo)簽（在同級(jí)別中找第二個(gè)，如果剛好是p標(biāo)簽就選中了) } p:nth-of-type(2){ //同級(jí)中，第一個(gè)P標(biāo)簽（在同級(jí)眾多P標(biāo)簽中，找第二個(gè)P標(biāo)簽） } p:only-child{ // 標(biāo)簽等于p，且是這一級(jí)別中唯一的標(biāo)簽（如果同級(jí)別中有一個(gè)P,一個(gè)a標(biāo)簽，那就不會(huì)選中） } p:only-of-type{ // 同級(jí)別中，p標(biāo)簽只有一個(gè)，那這個(gè)P標(biāo)簽就選中了（） }

序選擇器下(掌握)

child和of-type的不同點(diǎn)，child查找所有標(biāo)簽，而of-type只查找目標(biāo)標(biāo)簽
odd奇數(shù)，even偶數(shù)，n計(jì)算器x和y自定義(xn+y)

p:nth-child(odd){ //選擇同級(jí)別所有的奇數(shù)標(biāo)簽 } p:nth-child(even){ // 選擇同級(jí)別所有偶數(shù)標(biāo)簽 } p:nth-of-type(odd){ //同級(jí)別所有等于p的奇數(shù)標(biāo)簽 } p:nth-of-type(even){/同級(jí)別所有等于p的偶數(shù)數(shù)標(biāo)簽 } p:nth-child(5n){// 選擇同級(jí)別5的倍數(shù)的標(biāo)簽 } p:nth-of-type(3n){ // 同級(jí)所有等于p的3n數(shù)標(biāo)簽，也就是3的倍數(shù)，3\6\9\12。。，5n即選擇5的倍數(shù) }

屬性選擇器上(理解)

用中括號(hào) [] 括號(hào)的統(tǒng)稱屬性選擇器
[attribute] 有這個(gè)屬性的標(biāo)簽, [attribute = value ] 有這個(gè)屬性并且值等于多少的標(biāo)簽

form [name]{ //選擇from子元素中有name屬性的標(biāo)簽 } form [name=user]{ //選擇from子元素中屬性name等于user的標(biāo)簽 } input[type=text]{ //所有input標(biāo)簽type等于text的標(biāo)簽}

屬性選擇器下(理解)

*css2 |= 以什么開頭 ,~=包含某個(gè)值的 *
css2查找條件太苛刻比如必須要空格" “隔開必須要橫桿”-" 隔開才能找到，不建議使用。

css3 沒有任何限制，只要包含這個(gè)字的就找的到
^=以什么開頭，$=以什么結(jié)束，*=包含某個(gè)值的

input[value^=z]{ //查找value以 z 開頭的標(biāo)簽 } input[value$=abc]{ //查找value以 abc 結(jié)束的標(biāo)簽 } input[value*=w]{ //查找value包含 w 的標(biāo)簽 }

屬性選擇器下-js(掌握)

下拉列表值等于 10，值以7開頭，值以5結(jié)束，值的引號(hào)可不加

$('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)簽太多就會(huì)性能差

*{ 查找全部標(biāo)簽 }

選擇器練習(xí)(理解)

用所有學(xué)過的選擇器選中兩個(gè)p標(biāo)簽

<div><h1>我是一個(gè)標(biāo)題</h1><p id="identity1" class="para">我是一個(gè)段落1</p><p id="identity2" class="para">我是一個(gè)段落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)先級(jí)

繼承性(掌握)

給父元素設(shè)置屬性，所有子元素也會(huì)繼承，在瀏覽器的審查元素可看到 inherited from ***
但繼承僅限于以color/font/text/line開頭的屬性
也有特殊的標(biāo)簽不會(huì)繼承某些特性，比如H標(biāo)簽不繼承父元素的字體大小，A標(biāo)簽不繼承下劃線文字顏色

層疊性(掌握)

如果p標(biāo)簽被設(shè)置了紅色，p標(biāo)簽的class又設(shè)置了藍(lán)色，這時(shí)候類的屬性就會(huì)層疊掉P設(shè)置的屬性值，最終顯示是藍(lán)色，這是CSS的層疊性
CSS全稱層疊樣式表 Cascading StyleSAheet

優(yōu)先級(jí)(掌握)

誰離標(biāo)簽最近，就是最優(yōu)先的，直接選中》繼承。當(dāng)優(yōu)先級(jí)相同，最后執(zhí)行覆蓋前面執(zhí)行
完整優(yōu)先級(jí) （為何通配符高于繼承？因?yàn)橥ㄅ浞侵苯幽玫搅藰?biāo)簽）

ID 》 Class 》標(biāo)簽》通配符* 》繼承》瀏覽器默認(rèn)

!important(掌握)

把優(yōu)先級(jí)別提升到最高，
示例中的ID優(yōu)先級(jí)是最高的，但是標(biāo)簽選擇器在屬性值后面加了 !important ，最終文字顏色是紅色

權(quán)重問題(掌握)

當(dāng)多個(gè)選擇器混合在一起使用，都指向同一個(gè)標(biāo)簽，我們就計(jì)算權(quán)重判斷哪個(gè)選擇器優(yōu)先級(jí)最高
計(jì)算規(guī)則：

1、首先計(jì)算有幾個(gè)ID，ID多的選擇器優(yōu)先級(jí)最高 2、當(dāng)ID數(shù)量一樣，就計(jì)算有幾個(gè)類名，最多的選擇器優(yōu)先級(jí)最高 3、當(dāng)類名數(shù)量一樣，就看標(biāo)簽數(shù)量 4、標(biāo)簽數(shù)量也一樣，那就不會(huì)再計(jì)算，誰寫最后執(zhí)行誰

從放棄到入門-筆記二

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)邊距(掌握)

行高和字號(hào)(掌握)

還原字體和字號(hào)(掌握)

文字界面(理解)

網(wǎng)頁布局方式(掌握)

浮動(dòng)流基本概念(掌握)

浮動(dòng)元素脫標(biāo)(理解)

浮動(dòng)元素排序規(guī)則(理解)

浮動(dòng)元素貼靠現(xiàn)象(理解)

浮動(dòng)元素字圍現(xiàn)象(理解)

浮動(dòng)練習(xí)上(理解)

浮動(dòng)練習(xí)中(理解)

浮動(dòng)練習(xí)下(理解)

浮動(dòng)元素高度問題(掌握)

清除浮動(dòng)方式一(理解)

清除浮動(dòng)方式二(理解)

margintop失效原因(理解)

清除浮動(dòng)方式三(理解)

清除浮動(dòng)方式四(理解)

偽元素選擇器(掌握)

清除浮動(dòng)方式五(理解)

清除浮動(dòng)方式六(理解)

網(wǎng)易注冊(cè)界面-基本結(jié)構(gòu)搭建(理解)

網(wǎng)易注冊(cè)界面-完成頂部左邊(理解)

網(wǎng)易注冊(cè)界面-完成頂部右邊(理解)

網(wǎng)易注冊(cè)界面-完成中間頂部(理解)

網(wǎng)易注冊(cè)界面-完成中間右邊(理解)

網(wǎng)易注冊(cè)界面-完成中間左邊頂部(理解)

網(wǎng)易注冊(cè)界面-完成中間左邊底部中(理解)

網(wǎng)易注冊(cè)界面-完成中間左邊底部下(理解)

網(wǎng)易注冊(cè)界面-完善(理解)

定位流-相對(duì)定位(掌握)

相對(duì)定位-注意點(diǎn)(掌握)

定位流-絕對(duì)定位(掌握)

絕對(duì)定位0參考點(diǎn)(掌握)

絕對(duì)定位-注意點(diǎn)(掌握)

絕對(duì)定位-子絕父相(掌握)

絕對(duì)定位-水平居中(理解)

定位練習(xí)-團(tuán)購(gòu)界面(理解)

定位練習(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í)(理解)

動(dòng)畫模塊(掌握)

動(dòng)畫模塊-其它屬性上(理解)

動(dòng)畫模塊-其它屬性下(理解)

動(dòng)畫模塊-連寫(掌握)

動(dòng)畫模塊-云層動(dòng)畫(理解)

動(dòng)畫模塊-無限滾動(dòng)上(掌握)

動(dòng)畫模塊-無限滾動(dòng)下(掌握)

3D轉(zhuǎn)換模塊(掌握)

3D轉(zhuǎn)換模塊-正方體(理解)

3D轉(zhuǎn)換模塊-長(zhǎng)方體(理解)

3D轉(zhuǎn)換模塊-練習(xí)(理解)

3D播放器上(理解)

3D播放器下(理解)

背景尺寸屬性(掌握)

背景圖片定位區(qū)域?qū)傩?理解)

背景繪制區(qū)域?qū)傩?理解)

多重背景圖片(掌握)

多重背景圖片-練習(xí)(理解)

CSS書寫格式(掌握)

努比亞-準(zhǔn)備工作(掌握)

努比亞-基本結(jié)構(gòu)(理解)

努比亞-頂部logo(掌握)

努力比-頂部導(dǎo)航(理解)

努力比-廣告區(qū)域(理解)

努比亞-廣告區(qū)域?qū)Ш?理解)

努比亞-輪播圖(掌握)

努比亞-序號(hào)(理解)

努比亞-視頻區(qū)域(掌握)

努比亞-內(nèi)容區(qū)域(掌握)

努比亞-最新產(chǎn)品(理解)

努比亞-精品配件(理解)

總結(jié)

以上是生活随笔為你收集整理的【HTML/CSS】从放弃到入门-笔记1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：韦棋宝画柿子//作品欣赏
下一篇：超市进销存之openGauss数据库的应