整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本章目標(biāo)：
Cascading Style Sheet 級(jí)聯(lián)樣式表。 表現(xiàn)HTML或XHTML文件樣式的計(jì)算機(jī)語言。 包括對(duì)字體、顏色、邊距、高度、寬度、背景圖片、網(wǎng)頁定位等設(shè)定
在這里插入圖片描述
說明：
在這里插入圖片描述
CSS1.0 讀者可以從其他地方去使用自己喜歡的設(shè)計(jì)樣式去繼承性地使用樣式；
CSS2.0 融入了DIV+CSS的概念，提出了HTML結(jié)構(gòu)與CSS樣式表的分離
CSS2.1 融入了更多高級(jí)的用法，如浮動(dòng)，定位等。
CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向著模塊化的趨勢(shì)發(fā)展，又加了很多使用的新技術(shù)，如字體、多背景、圓角、陰影、動(dòng)畫等高級(jí)屬性，但是它需要高級(jí)瀏覽器的支持。
由于現(xiàn)在IE 6、IE 7使用比例已經(jīng)很少，對(duì)市場(chǎng)企業(yè)進(jìn)行調(diào)研發(fā)現(xiàn)使用CSS3的頻率大幅增加，學(xué)習(xí)CSS3已經(jīng)成為一種趨勢(shì)，因此本書會(huì)講解最新的CSS3版本
本課程中主要講解css2.1和css3
CSS的優(yōu)勢(shì)
在這里插入圖片描述
Style標(biāo)簽
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
鏈接式與導(dǎo)入式的區(qū)別
CSS樣式優(yōu)先級(jí)
行內(nèi)樣式>內(nèi)部樣式表>外部樣式表
就近原則：越接近標(biāo)簽的樣式優(yōu)先級(jí)越高
【學(xué)員練習(xí)】 使用標(biāo)題標(biāo)簽和段落標(biāo)簽制作李白的詩《望廬山瀑布》，詩正文字體顏色為綠色，字體大小為14p
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
小結(jié)
基本選擇器的優(yōu)先級(jí)
ID選擇器>類選擇器>標(biāo)簽選擇
標(biāo)簽選擇器是否也遵循“就近原則”？ 不遵循，無論是哪種方式引入CSS樣式，一般都遵循ID選擇器 > class類選擇器 > 標(biāo)簽選擇器的優(yōu)先級(jí)
在這里插入圖片描述
在這里插入圖片描述
后代選擇器兩個(gè)選擇符之間必須要以空格隔開，中間不能有任何其他的符號(hào)插入
在這里插入圖片描述
在這里插入圖片描述
添加圖片注釋，不超過 140 字（可選）
者通過實(shí)踐來闡述HTML 優(yōu)先原則的主要目標(biāo)是擴(kuò)大能夠從事 Web 軟件編程工作的人員范圍。
原文鏈接：https://html-first.com/
未經(jīng)允許，禁止轉(zhuǎn)載！
HTML優(yōu)先是一組原則，旨在通過以下方式使構(gòu)建 Web 軟件更容易、更快、更具包容性且更易于維護(hù)：
利用現(xiàn)代網(wǎng)絡(luò)瀏覽器的默認(rèn)功能。
利用 HTML 屬性語法的極致簡(jiǎn)單性。
利用 Web 的查看源代碼功能。
HTML優(yōu)先原則的主要目標(biāo)是擴(kuò)大能夠從事 Web 軟件編程工作的人員范圍。從個(gè)人角度來看，這是件好事，因?yàn)檫@可以讓更多的人成為Web 程序員，構(gòu)建出色的 Web 軟件，并提高他們的收入。從業(yè)務(wù)角度來看，這些原則也有好處，因?yàn)檫@可以降低構(gòu)建軟件的成本，并減少招聘所需的資源量（眾所周知，這是一個(gè)資源密集型流程）。
HTML優(yōu)先原則的第二大目標(biāo)是讓構(gòu)建 Web 軟件的工作變得更加愉快和無縫。對(duì)于大多數(shù) Web 程序員來說，在快速構(gòu)建產(chǎn)品期間能夠流暢地在文本編輯器和瀏覽器之間來回切換，而不會(huì)遇到各種磕磕絆絆，也不需要切換上下文，他們會(huì)感到非常興奮。但如今程序員需要幾年的時(shí)間來掌握工具和框架才能達(dá)到這個(gè)階段。HTML 優(yōu)先原則能夠讓人們?cè)趯W(xué)習(xí)編程的早期階段體會(huì)這種感覺，并達(dá)到這種水平。
為了實(shí)現(xiàn)這些目標(biāo)，首先必須承認(rèn) HTML 非常容易理解，因此我們將 HTML 作為產(chǎn)品的基石，不僅用 HTML 來定義內(nèi)容和結(jié)構(gòu)，還用它來設(shè)置樣式和行為。
1. 推薦使用 HTML 原生的方法。
2. 使用 HTML 屬性來設(shè)置樣式和行為。
3. 使用利用了 HTML屬性的庫。
4. 避開構(gòu)建過程。
5. 推薦使用“裸” HTML。
6. 保留查看源代碼的功能。
瀏覽器支持的開箱即用的功能范圍很廣，而且數(shù)量還在不斷增長。在將庫或框架添加到代碼庫之前，請(qǐng)檢查是否可以使用原汁原味的 html/css 來實(shí)現(xiàn)它。
鼓勵(lì)的寫法：
不鼓勵(lì)的寫法：
我們可以使用 Tailwind 或 Tachyons等 SPC 庫來實(shí)現(xiàn)樣式。同時(shí)使用 hyperscript、Alpine 或類似的庫來實(shí)現(xiàn)行為。這意味著很多功能都需要使用 HTML 來實(shí)現(xiàn)。但這也意味著其他開發(fā)人員更容易找到和理解行為、瀏覽并修改它們。
鼓勵(lì)的寫法：
不鼓勵(lì)的寫法：
你可能會(huì)注意到，這種方法似乎違反了關(guān)注點(diǎn)分離——備受吹捧的軟件設(shè)計(jì)原則之一。我們認(rèn)為，非黑即白的關(guān)注點(diǎn)分離原則是有缺陷的，因此我們提倡采用一種考慮到行為局部性以及兩者之間權(quán)衡的方法。
鼓勵(lì)的寫法：
不鼓勵(lì)的寫法：
需要將文件從一種格式轉(zhuǎn)換為另一種格式的庫會(huì)導(dǎo)致維護(hù)開銷增加大量，嚴(yán)重影響查看源代碼的功能或?qū)е缕錈o法使用，而且通常開發(fā)人員需要學(xué)習(xí)新工具才能使用它們。現(xiàn)代瀏覽器已不再有當(dāng)初引入這些實(shí)踐時(shí)的性能限制。如果我們使用 HTML 優(yōu)先的庫（例如 static tailwind 或 htmx），則額外所需的 CSS 和JS 量為最少。
鼓勵(lì)的寫法：
不鼓勵(lì)的寫法：
這條原則適用于后端實(shí)現(xiàn)。基本思想是可讀性。熟悉 HTML 但不熟悉后端框架的開發(fā)人員查看視圖文件，仍然應(yīng)該能夠理解 90% 以上的內(nèi)容。如上所述，這意味著犧牲簡(jiǎn)潔性而換取易于理解性。
鼓勵(lì)的寫法：
不鼓勵(lì)的寫法：
早期網(wǎng)絡(luò)的美妙之處在于，我們總能 "窺探 "到網(wǎng)頁任何部分的代碼。對(duì)于有抱負(fù)的開發(fā)人員來說，這是一項(xiàng)福利，因?yàn)檫@為我們?cè)诶碚摚ㄩ喿x代碼如何工作）和實(shí)踐之間架起了一座橋梁，將代碼和界面并排展示在我們眼前。對(duì)于許多網(wǎng)站來說，我們只需復(fù)制并粘貼 html 或 css，然后放到自己的網(wǎng)站上運(yùn)行，就可以獲得近乎相同的復(fù)制品。新舊代碼的混合不僅是一種學(xué)習(xí)方式，而且往往也是我們創(chuàng)作新作品的基礎(chǔ)。
后來，業(yè)界采用了一些 "改進(jìn) "方法，導(dǎo)致這種做法變得更為罕見。例如，如果我們使用流行的前端框架 React，就不能點(diǎn)擊 "查看源代碼"，復(fù)制代碼并重新混合，因?yàn)槭紫?React 有構(gòu)建過程，這意味著我們?cè)陂_發(fā)人員工具中看到的代碼與開發(fā)人員編寫的代碼不同；其次，React 代碼片段必須封裝在 react 應(yīng)用程序中才能工作。
遵循 HTML 優(yōu)先原則的網(wǎng)站能夠重新獲得查看源代碼的功能。事實(shí)上，HTML 優(yōu)先的網(wǎng)站往往更進(jìn)一步。因?yàn)槿绻褂?HTML 屬性定義用戶界面交互，那么在復(fù)制粘貼到新的代碼庫時(shí)，也可以保留這些交互（前提是目標(biāo)文件包含相同的 js 庫）。我們打算將來將其擴(kuò)展到 HTML 優(yōu)先的代碼片段庫。
本文中描述的實(shí)踐和原則在整個(gè)行業(yè)中仍然很小眾，而且使用的社區(qū)也很少。我希望通過建設(shè)網(wǎng)站（https://html-first.com/）的方式來尋找同道合的人，共同探討并完善這些想法。
至如今，TypeScript逐漸成為各個(gè)公司維護(hù)前端項(xiàng)目的方案之一，它的作用很直接——規(guī)范，提高代碼質(zhì)量，降低維護(hù)成本，延長項(xiàng)目的生命周期。
TypeScript 是由 Microsoft 開發(fā)的開源語言，它是 JavaScript 的一種超集。通俗來講， TypeScript 包含了 JavaScript 的所有功能，并在此基礎(chǔ)上添加了更多的特性。
隨著TypeScript的普及，面試被提問到TypeScript的幾率越來越大，最常見的問題就是介紹下TypeScript的特點(diǎn)，本篇文章將帶大家了解TypeScript的使用，明白TypeScript和JavaScript的區(qū)別。
一、基本使用
1. 下載TypeScript
npm install typescript -g
2. 使用TypeScript
我們使用的是編譯后的js文件，ts文件無法直接使用。
tsc index.ts // -> index.js
我們可以對(duì)比編譯前后的文件內(nèi)容:
需要借助ts-node這個(gè)包運(yùn)行ts文件，否則無法識(shí)別運(yùn)行。
npm install ts-node -g
看看coderunner的效果:
同學(xué)們可以通過第一種方式生成js文件，然后在html文件中引入，也可以通過第二種方式直接運(yùn)行ts文件，查看運(yùn)行結(jié)果。
注：對(duì)打包了解的同學(xué)，可以通過webpack/rollup等工具簡(jiǎn)易地搭建一個(gè)自動(dòng)編譯的項(xiàng)目，釋放雙手。
二、TypeScript的特性
1. 強(qiáng)類型語法
JavaScript屬于弱類型語言，我們?cè)谶M(jìn)行變量操作的時(shí)候，可以進(jìn)行任何類型的賦值。
var num = 1 // typeof num == 'number'
num = '1' // typeof num == 'string'
與JavaScript不同，TypeScript在對(duì)變量進(jìn)行聲明時(shí)必須聲明變量的類型。
var num : number = 1
num為number類型的變量，那后續(xù)的操作中，則不能對(duì)num進(jìn)行其他類型數(shù)據(jù)的賦值
num = '1' // 不能將類型“string”分配給類型“number”
強(qiáng)類型的意義：安全，嚴(yán)謹(jǐn)?shù)拇a編寫
假如我創(chuàng)建了num變量是用于計(jì)數(shù)的number類型，那后續(xù)的操作中，num變量就不允許被更改為其他類型的數(shù)據(jù)，防止相關(guān)功能因?yàn)閚um變量不是一個(gè)數(shù)值導(dǎo)致出錯(cuò)的情況。
2.靜態(tài)類型檢查（編譯時(shí)的錯(cuò)誤提示）
TypeScript 提供了靜態(tài)類型系統(tǒng)，可以在編譯時(shí)發(fā)現(xiàn)類型錯(cuò)誤，從而避免運(yùn)行時(shí)的錯(cuò)誤。
對(duì)熟用JavaScript的同學(xué)們來講，這一點(diǎn)不難理解，JavaScript是一種解釋型語言，我們只有在運(yùn)行時(shí)才能發(fā)現(xiàn)代碼是否有錯(cuò)誤，例如：
var num = 1
num.toLowerCase()//a.tolowerCase is not num function
具體的報(bào)錯(cuò)，是代碼在瀏覽器運(yùn)行時(shí)才能看到:
有些同學(xué)下意識(shí)的反應(yīng)就是：“誰看不出來這是一個(gè)數(shù)值，肯定沒有字符串的方法，沒人會(huì)寫這種報(bào)錯(cuò)代碼。”
這個(gè)想法沒錯(cuò)，但是在工作中，也肯定沒有人只會(huì)寫這兩行代碼，一個(gè)變量的定義，從起初的幾行代碼，經(jīng)過維護(hù)人員的變更，功能的擴(kuò)展，會(huì)讓這個(gè)變量功能性變得"不穩(wěn)定“
結(jié)合強(qiáng)類型的特性，我們?cè)跁鴮懘a時(shí)就能看到ts為我們帶來的友好提示
var num : number = 1
num.toLowerCase()
//類型“number”上不存在屬性“toLowerCase”。ts(2339)
看看實(shí)際的提示效果:D
是不是很棒，我們?cè)跁鴮懘a的時(shí)候，就能避免許多意料之外的隱患，例如你的前任在某個(gè)偏僻的角落定義的同名變量（哀）。
3. 自動(dòng)推導(dǎo)
TypeScript 具備類型的自動(dòng)推導(dǎo)功能，我們?cè)跁鴮懘a時(shí)如果沒有對(duì)目標(biāo)進(jìn)行類型定義，則默認(rèn)使用ts推導(dǎo)出的類型。
var num = 1 // => var num : number = 1
像這段代碼，即使我們沒有定義變量num的類型，TS也會(huì)將初始化賦值的數(shù)值類型(number)作為變量num的類型。
在后續(xù)對(duì)num變量的操作中，TS則將num變量作為一個(gè)number類型的數(shù)據(jù)進(jìn)行檢測(cè)。
Typescript根據(jù)上下文語境對(duì)目標(biāo)進(jìn)行自動(dòng)推導(dǎo)的特性，大幅度地減輕了使用者的工作成本，官方不希望用戶在大量且重復(fù)的類型定義上浪費(fèi)時(shí)間，而是根據(jù)功能結(jié)構(gòu)去進(jìn)行類型設(shè)計(jì)。
但有一點(diǎn)需要注意，Typescript的自動(dòng)推導(dǎo)并不參與用戶的復(fù)雜邏輯檢測(cè)，我們可以通過一個(gè)函數(shù)重載的案例進(jìn)行簡(jiǎn)單區(qū)分（不清楚的同學(xué)可以在本系列文章中學(xué)到函數(shù)重載再回頭復(fù)習(xí)）：
function fn(num : number ) : number
function fn(num : string ) : string
function fn(num : number | string) : string | number {
if(typeof num == 'string') return 1
return 1
}
const a = fn('1') // a的類型為string
在這個(gè)簡(jiǎn)單的案例上就有一系列重復(fù)出現(xiàn)的疑問：
同學(xué)："我這里返回值似乎是number類型，a變量的提示卻是string？"
我："從代碼邏輯上看，你設(shè)定了一個(gè)重載列表，當(dāng)函數(shù)參數(shù)類型為string時(shí)，返回值就是string類型，沒問題。但這個(gè)案例上的代碼，a變量實(shí)際數(shù)據(jù)確實(shí)是number類型，錯(cuò)的沒毛病"。
同學(xué)："錯(cuò)的沒毛病？Typescript的檢測(cè)出錯(cuò)了嗎？還是我寫錯(cuò)了？"
我："Typescript的自動(dòng)推導(dǎo)并不參與用戶的復(fù)雜邏輯檢測(cè)，實(shí)際上確實(shí)是你邏輯有問題導(dǎo)致這種現(xiàn)象。"
這個(gè)問題，我拿去反問一些工作中常寫Typescript的同學(xué)，也有不少有出現(xiàn)錯(cuò)愕的反應(yīng)。
簡(jiǎn)單來說，面對(duì)函數(shù)重載，Typescript在檢測(cè)時(shí)只會(huì)確定你的重載列表的設(shè)定，而不會(huì)去檢查你在函數(shù)內(nèi)部做了什么復(fù)雜的邏輯。
根據(jù)這三個(gè)特性的具體展現(xiàn)，我們可以對(duì)Typescript的優(yōu)點(diǎn)進(jìn)行總結(jié)及劃分：
1. 類型安全：靜態(tài)類型檢查的特性讓使用者在編寫代碼時(shí)就能檢測(cè)到類型錯(cuò)誤，不用在運(yùn)行代碼后才發(fā)現(xiàn)，提高代碼的質(zhì)量。
2. 工具支持：許多代碼編輯器類似IDE、VScode、webStome等都支持Typescript，其中包括代碼提示，自動(dòng)補(bǔ)全，類型檢查等，大幅度提高使用者的開發(fā)效率。
3. 可讀性與可維護(hù)性：強(qiáng)類型語法的特點(diǎn)，以及我們?cè)谏衔牡撵o態(tài)類型檢查中，能明確看到vscode在Typescript語法檢查上的有效提示，根據(jù)類型的定義以及語法檢查的提示，代碼更容易閱讀和理解，增加代碼的可讀性和可維護(hù)性。
4. 面向?qū)ο缶幊烫匦裕篢ypescript支持類、接口、和抽象類等面向?qū)ο缶幊痰奶匦裕@些特性能讓使用者更好地書寫功能和管理代碼（關(guān)于類的學(xué)習(xí)，同學(xué)們可以在本系列文章中繼續(xù)深入）。
綜合上述，我們?cè)诿嬖嚨倪^程中，可以先詳細(xì)講解Typescript的語言特點(diǎn)，靜態(tài)檢查，自動(dòng)推導(dǎo)等特性細(xì)節(jié)，最后再總結(jié)它的優(yōu)點(diǎn)。
總結(jié)
在文章中我們先了解TypeScript怎么使用，TypeScript需要通過編譯器將ts文件編譯成js文件，其中ts的相關(guān)語法都會(huì)被剔除，不影響js運(yùn)行。
明白TypeScript和JavaScript的區(qū)別，知道TypeScript優(yōu)勢(shì)，比如強(qiáng)語言的安全性，書寫檢測(cè)的錯(cuò)誤排查等，避免在面試中被問到兩者區(qū)別又回答不出的尷尬情景。在后續(xù)文章中，我們?cè)倮^續(xù)了解typescript的類型有哪些，泛型，接口等如何使用。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
