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