[TOC]
一蚜迅、對(duì)于網(wǎng)頁(yè)的基本理解
-
網(wǎng)頁(yè)是一種數(shù)據(jù)展示和信息交互的載體
生活中，我們通過(guò)各種各樣的方式獲取信息陨献，網(wǎng)頁(yè)只是其中一種号枕，網(wǎng)頁(yè)目前是被使用最頻繁的一種。早年網(wǎng)頁(yè)的目的更多在于數(shù)據(jù)的展示砸王，現(xiàn)在的網(wǎng)頁(yè)為了提供更好的用戶體驗(yàn)推盛，在保持原有目的不變的情況下，越來(lái)越關(guān)注：- 界面的美觀度
- 交互性的提升
- 性能的優(yōu)化和數(shù)據(jù)的高效傳輸
-
網(wǎng)頁(yè)大概有如下幾部分內(nèi)容組成
- 網(wǎng)頁(yè)結(jié)構(gòu)谦铃，關(guān)注網(wǎng)頁(yè)'長(zhǎng)什么樣'
結(jié)構(gòu)提供了網(wǎng)頁(yè)骨架 - 網(wǎng)頁(yè)數(shù)據(jù)耘成，關(guān)注網(wǎng)頁(yè)'提供了什么內(nèi)容'
數(shù)據(jù)是網(wǎng)頁(yè)承載的主要內(nèi)容，也是網(wǎng)頁(yè)制作的最主要目的:數(shù)據(jù)展示+人機(jī)交互 - 網(wǎng)頁(yè)樣式，關(guān)注網(wǎng)頁(yè)'好不好看'
樣式是網(wǎng)頁(yè)的外觀瘪菌，提供對(duì)用戶最直觀的感受
樣式審美和整體風(fēng)格也代表著隱式的數(shù)據(jù)表達(dá) - 網(wǎng)頁(yè)動(dòng)作撒会，關(guān)注網(wǎng)頁(yè)'閱讀時(shí)是否方便、愉快'
動(dòng)作提供了交互师妙，良好的交互可以提升用戶的體驗(yàn)
動(dòng)作優(yōu)化了性能诵肛，良好的數(shù)據(jù)傳輸設(shè)計(jì)可以增加效率，降低服務(wù)端壓力 - 網(wǎng)頁(yè)傳輸默穴，關(guān)注網(wǎng)頁(yè)'如何被更快更高效的傳輸'
傳輸側(cè)的技術(shù)一般被劃歸至：web服務(wù)器+路由交換網(wǎng)絡(luò)
- 網(wǎng)頁(yè)結(jié)構(gòu)谦铃，關(guān)注網(wǎng)頁(yè)'長(zhǎng)什么樣'
-
當(dāng)前支撐一個(gè)網(wǎng)頁(yè)的主流技術(shù)模塊如下
- 結(jié)構(gòu):html
- 數(shù)據(jù):web框架(處理)+數(shù)據(jù)庫(kù)(存儲(chǔ))
- 樣式:css
- 動(dòng)作:js
- 傳輸:web服務(wù)器+路由交換
二怔檩、結(jié)構(gòu):html
對(duì)于html技術(shù)的理解
就像造房子一樣，一棟房子有多個(gè)組成部分蓄诽，html類似于房子的戶型薛训，它設(shè)計(jì)了房子的整體長(zhǎng)相，而且還定義了每個(gè)區(qū)塊的功能作用仑氛。html技術(shù)為后續(xù)入住的數(shù)據(jù)事先搭建好了對(duì)應(yīng)的空間乙埃。-
html技術(shù)圖譜
- http協(xié)議棧
(待補(bǔ)充) - html標(biāo)簽
- http協(xié)議棧
html 代表包含一個(gè)網(wǎng)頁(yè)文檔，是一個(gè)網(wǎng)頁(yè)的根元素(某些瀏覽器將body作為根元素)
head 代表文檔的頭部锯岖，包含控制信息
meta 代表控制信息膊爪，通過(guò)標(biāo)簽中的屬性來(lái)提供頁(yè)面控制，如:charset='UTF-8'表示編碼格式
title 代表網(wǎng)頁(yè)標(biāo)題
link 外部文件鏈接嚎莉，主要是css鏈接
body 代表文檔的主體米酬，包含數(shù)據(jù)、主體骨架趋箩、布局赃额、樣式、行為事件和回調(diào)函數(shù)等
a 代表一個(gè)鏈接叫确，包含一個(gè)去往某鏈接的文字說(shuō)明
h1-6 代表文章主題跳芳，h1的字體最大
p 代表一個(gè)段落，包含段落中的內(nèi)容
img 代表一個(gè)圖像竹勉，包含一個(gè)展示圖像
i 代表一個(gè)圖標(biāo)飞盆，包含一個(gè)圖標(biāo)
div 代表一個(gè)盒子模型，一般用于布局
span 代表一個(gè)行內(nèi)文本次乓，一般用于需要特別處理的行內(nèi)文本標(biāo)記
hr/br 代表水平分隔符/換行符
form 代表一個(gè)表單吓歇，包含很多表單組件，一般用于用戶數(shù)據(jù)交互
input 代表一個(gè)表單組件票腰，通過(guò)type來(lái)切換不同功能城看，一般用戶數(shù)據(jù)的輸入
text 代表一個(gè)文本輸入框，一般用于輸入小段文本
email 代表一個(gè)email輸入框,會(huì)對(duì)輸入的郵件格式做格式判斷
password 代表一個(gè)密碼輸入框杏慰，輸入的密碼會(huì)被轉(zhuǎn)換成一個(gè)黑點(diǎn)或者星號(hào)
radio 代表一個(gè)單選框测柠，多個(gè)相同name的單選框組成一個(gè)組炼鞠，選項(xiàng)互斥
checkbox 代表一個(gè)復(fù)選框，多個(gè)項(xiàng)目name的復(fù)選框組成一個(gè)組
textarea 代表一個(gè)文本輸入域轰胁，一般用于輸入大段文本
select 代表一個(gè)下拉框谒主，包含多個(gè)下拉選項(xiàng)
option 代表一個(gè)下拉選項(xiàng)
label 代表一個(gè)標(biāo)記，一般用于指向?qū)?yīng)的輸入框用于實(shí)現(xiàn)點(diǎn)擊label時(shí)輸入框產(chǎn)生焦點(diǎn)
file 代表一個(gè)文件上傳框
submit 代表提交表單數(shù)據(jù)赃阀，一旦點(diǎn)擊瘩将，所屬表單的所有組件值會(huì)被統(tǒng)一提交
table 代表一個(gè)表格，包含很多表格元素
thead 代表表格頭部凹耙，一般是一行
tr 代表一行
th 代表表格數(shù)據(jù)的名稱，如：名字肠仪、年齡肖抱、學(xué)校、工資等
tbody 代表表格數(shù)據(jù)主體
tr 同上
td 代表數(shù)據(jù)單元格异旧，包含一個(gè)單元格的數(shù)據(jù)
ul/ol 代表一個(gè)無(wú)序/有序列表意述，包含列表項(xiàng)目
li 代表一個(gè)列表項(xiàng)目
script 代表一個(gè)js代碼的引用,包含內(nèi)斂的js代碼或一個(gè)js文件地址
三、樣式:css
對(duì)于css技術(shù)的理解
css類似于房子的裝修吮蛹，裝修讓這棟房子看上去更加的美觀荤崇，裝修定義了每一塊墻面該粉刷成什么顏色，地板應(yīng)該如何規(guī)劃潮针，是長(zhǎng)方形還是正方形等术荤。裝修應(yīng)該從整體主題出發(fā)，根據(jù)良好的審美素養(yǎng)規(guī)劃設(shè)計(jì)每一個(gè)區(qū)域的長(zhǎng)相每篷，整體裝修方案也表達(dá)了這棟房子的主題瓣戚。-
css技術(shù)圖譜
-
2.1選擇器
選擇器的目的是為了得到對(duì)目標(biāo)元素的引用，一旦得到引用焦读，就可以在此引用上執(zhí)行各類操作子库。
一個(gè)元素有很多不同的表征，這些都可以用于尋找引用的依據(jù)矗晃。-
2.1.1基本選擇器
id: id是一個(gè)標(biāo)簽元素在html中的唯一標(biāo)識(shí)仑嗅，使用id可以快速且唯一的尋找到引用
class: class表示了一個(gè)標(biāo)簽元素所屬的類，類和標(biāo)簽屬于多對(duì)多關(guān)系张症，一個(gè)類可以有多個(gè)標(biāo)簽仓技，一個(gè)標(biāo)簽也可以屬于多個(gè)類，
使用class會(huì)尋找到歸屬于此類的多個(gè)標(biāo)簽(使用數(shù)組存儲(chǔ))
tagName: tagName是一個(gè)標(biāo)簽的名稱俗他，通過(guò)標(biāo)簽名可以找到文檔中所有此標(biāo)簽(使用數(shù)組存儲(chǔ))
優(yōu)先級(jí): 使用id > 使用class > 使用tagNamediv p: 表示文檔中浑彰，所有div，子樹中的p都被抓取拯辙，不論p是div的兒子輩還是孫子輩
div>p: 表示文檔中郭变，所有div颜价，子樹中的直接后輩p都被抓取，即p必須是div的兒子輩
div#box1: 表示文檔中诉濒，所有id是box1的div(其實(shí)應(yīng)該只有1個(gè))周伦，查詢結(jié)果等價(jià)于#box1
div.box1: 表示文檔中，所有class中含有box1的div
div, p, li: 表示組合未荒，即對(duì)多個(gè)元素執(zhí)行相同的樣式操作
-
屬性選擇器
[school]: 表示文檔中专挪，所有含有school屬性的所有標(biāo)簽
div[school]: 表示文檔中，含有school屬性的所有div
div[school='abc']: 表示文檔中片排，含有school屬性且值為'abc'的所有div偽類選擇器
:link 表示當(dāng)此元素未被訪問(wèn)時(shí)的樣式(即初始默認(rèn)樣式)
:hover 表示當(dāng)鼠標(biāo)移到此元素上時(shí)的樣式
:active 表示當(dāng)鼠標(biāo)點(diǎn)擊瞬間(未釋放鼠標(biāo))時(shí)的樣式
:visited 表示當(dāng)此元素被訪問(wèn)過(guò)(釋放鼠標(biāo)后)時(shí)的樣式
以上4種偽類選擇器定義了當(dāng)發(fā)生某些動(dòng)作時(shí)的樣式改變寨腔，可以用于提供簡(jiǎn)單的界面交互p:first-child 表示當(dāng)p是某一個(gè)父元素的第一個(gè)子元素時(shí)被獲取
p:last-child 表示當(dāng)p是某一個(gè)父元素的最后一個(gè)子元素時(shí)被獲取
p:nth-child(x) 表示當(dāng)p是某一個(gè)父元素的指定第x個(gè)子元素時(shí)被獲取
p:nth-child(2n) 表示當(dāng)p是某一個(gè)父元素的指定偶數(shù)個(gè)子元素時(shí)被獲取
以上4種偽類的理解容易發(fā)生偏差，且使用時(shí)容易出錯(cuò)率寡，產(chǎn)生意外結(jié)果偽元素選擇器
li:first-letter 表示此元素的第一個(gè)文本字符被獲取
li:before
li:after 一般配合content屬性使用迫卢，表示此元素的原有文本前/后增加對(duì)應(yīng)內(nèi)容
first-letter不能應(yīng)用于a等行內(nèi)元素 -
2. 樣式
字體屬性
顏色屬性
文本屬性
背景屬性
元素分類:塊級(jí)、行內(nèi)冶共、行內(nèi)塊級(jí)
3. 盒子模型
外邊距margin
代表盒子邊界到邊框的距離
邊框border
代表盒子邊框乾蛤，邊框可以有一定的寬度
內(nèi)邊距padding
代表盒子邊框到內(nèi)容區(qū)的距離
內(nèi)容區(qū)width/height
代表內(nèi)容區(qū)的寬高
一個(gè)盒子模型可以被認(rèn)為是一個(gè)操作單元，頁(yè)面的布局由盒子組成捅僵。
4. 浮動(dòng)
html文檔被瀏覽器所解析時(shí)家卖，瀏覽器會(huì)將各元素按照元素性質(zhì)放入頁(yè)面中，解析操作遵循標(biāo)準(zhǔn)文檔流庙楚。
浮動(dòng)的作用是將某個(gè)元素脫離文檔流上荡，看上去就好像它懸浮在原有頁(yè)面上一樣。
浮動(dòng)使用float啟動(dòng)馒闷，可以選擇向左或者向右榛臼。
此外，浮動(dòng)的元素會(huì)被看作是塊級(jí)元素窜司，即一個(gè)行內(nèi)元素一旦浮動(dòng)沛善，就可擁有width和height屬性
浮動(dòng)一般會(huì)配合盒子模型使用，將浮動(dòng)元素包含在盒子中塞祈，再通過(guò)盒子完成頁(yè)面布局金刁。
5. 定位
相對(duì)定位: 不脫離標(biāo)準(zhǔn)流，原區(qū)域保留议薪，無(wú)浮動(dòng)效果
絕對(duì)定位: 脫離標(biāo)準(zhǔn)流尤蛮，原區(qū)域不保留，浮動(dòng)效果
固定定位: 脫離標(biāo)準(zhǔn)流,原區(qū)域不保留斯议，浮動(dòng)效果产捞，將會(huì)固定在原區(qū)域即使發(fā)生滾動(dòng)
四、行為:js
-
對(duì)于js技術(shù)的理解
js類似于房子里的家具哼御，家具給用戶提供了更方便坯临、快捷焊唬、簡(jiǎn)單的方法用于處理事務(wù)：- 以前我們需要用鑰匙開門，現(xiàn)在有了智能鎖只需要指紋
- 以前我們需要煙囪排煙看靠，現(xiàn)在有了油煙機(jī)只需要打開開關(guān)
- 以前我們需要燒水洗澡赶促，現(xiàn)在有了熱水器
- 以前我們需要將食物放到水里保質(zhì)，現(xiàn)在有了冰箱
- 以前我們需要到社區(qū)大隊(duì)看電影挟炬，現(xiàn)在有了電視鸥滨、電腦
家具提供了更優(yōu)秀的用戶體驗(yàn)，也提升了用戶完成某一件事的效率谤祖。
