CSS基礎3--工作流程及DOM
阿新 • • 發佈：2020-09-16
瀏覽器工作流程
1.瀏覽器載入HTML檔案
2.將HTML檔案轉化成一個DOM（Document Object Model）
3.拉取該HTML相關資源
4.解析CSS
5.渲染樹會依照應該出現的結構進行佈局
6.顯示在螢幕上
什麼是DOM
作用：幫助你設計、除錯和維護CSS
應用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信搜尋：伊洛的小屋</title> <link href="index.css" rel="stylesheet" type="text/css"> </head> <body> <p> 投資的方式: <span>買個股</span> <span>買基金</span> <span>買期貨</span> </p> </body> </html>
瀏覽器會解析HTML並創造一個DOM，然後解析CSS，開啟瀏覽器檢視效果
出錯
當你編寫錯誤的程式碼或者拼寫錯誤的時候瀏覽器會怎麼顯示你的內容呢？
答案是：忽略。 沒錯就是直接被忽略然後去繼續解析正確的內容
CSS樣式
來做一個假的名片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信搜尋：伊洛的小屋</title> <link href="index.css" rel="stylesheet" type="text/css"> </head> <body> <h1>個人簡介： 伊洛Yiluo</h1> <div class="job-title">職位：遊手好閒攻城師</div> <p>微信搜尋：伊洛的小屋</p> <p>部落格園：https://www.cnblogs.com/yiluotalk/</p> <p>愛好：遊戲，投資，敲程式碼， 讀了個書</p> <h2>我的聯絡方式</h2> <ul> <li>Email: <a href="mailto:[email protected]">[email protected]（舉例-非真實有效郵箱)</a></li> <li>Web: <a href="https://yiluotalk.com">https://yiluotalk.com</a></li> <li>Tel: 888 666666（舉例-非真實有效電話)</li> </ul> </body> </html>
開啟瀏覽器
簡單加點CSS美化一下
回答後臺看到一些雷同的私信留言
留言大意：
我最近在看你之前Python的內容，但是遇到了一些報錯我怎麼也解決不了，怎麼處理啊 ？
答（個人習慣並非適用所有小夥伴）：
1.搜尋引擎尋求答案 （某歌，百度）俗稱面向某歌程式設計 0.0~
2.尋個身邊的大佬虛心請教 （前提是：自己努力過了，但搜尋引擎沒有需要的答案）
請教格式通常為：我遇到了一個xxx問題，我搜索引擎看到的x種解決方法和xx種方式都試過了。但還是解決不了，等你有時間的時候可不可以幫我看一下？
3.暫時放棄繼續實踐學習，待自己能力提升會自然而然的解開