七小時帶你入門HTML+CSS網頁設計，知識準備與開發工具（一）

家好，我會用大概七個小時的時間同大家一起入門HTML+CSS網頁設計，其實全部系列加起來也就1個小時左右，剩下的時間是讓大家復習知識和練習寫代碼的，俗話說的好，七小時入門，成神靠個人。所以希望大家學習后一定要自己多練習，多練習，多練習。

本篇主要內容是給大家介紹HTML+CSS的基礎知識和開發工具的推薦

HTML是什么：

html是一種描述網頁的標記語言（記住，不是編程語言），我們用瀏覽器打開的網頁都是用html來編寫的。它的組成部分是由一對尖括號包圍，如：<html>、<body>等，通常是成對出現，有開頭就有結束，結束用斜線區分，如：<html>內容</html>等。

html是一種描述網頁的標記語言

CSS是什么：

css是用來控制html網頁的樣式和布局的，比如網頁的顏色，尺寸和輪廓，寫法也很簡單。

css是用來控制html網頁的樣式和布局

那么html與css的相互作用是什么？說小白一點，html就像一個毛坯房，只有房子的基礎框架，而css就像房屋裝修，同樣的html結構用不同的css能設計出各種各樣的網頁樣式。

html+css效果圖

開發工具：

這里給大家推薦notepad++，操作簡單而且還免費，非常適合新入門的同學使用，瀏覽器可以選擇谷歌瀏覽器或者360安全瀏覽器等，我這里使用谷歌瀏覽器為大家做演示。

notepad++

下面給大家貼上常用的HTML+CSS標簽，不要去死記硬背，后面多練習自然就會了：

<!--HTML標簽-->
<h1>這是一個標題</h1> <!--標題-->
<p>這是一段文字</p> <!--段落-->
<a  target="_blank"></a> <!--連接地址-->
<img src="http://tpt360.com/img/logo.png"> <!--一張圖片-->
<div id="content" class="content"></div> <!--布局-->
<!--列表-->
<ul>
<li>列表1</li>
<li>列表1</li>
</ul>
<!--表格-->
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>小張</td>
<td>小明</td>
</tr>
<tr>
<td>6歲</td>
<td>8歲</td>
</tr>
</table>
<!--表單-->
<form>
<input type="text" name="mingzi">
<input type="text" name="nianling">
</form>
<!--視頻-->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
/*CSS標簽*/
width: 100px; /*寬度*/
height: 100px; /*高度*/
line-height: 100px; /*行高*/
padding: 0px 0px 0px 0px; /*內邊距*/
margin: 0px 0px 0px 0px; /*外邊距*/
float: left; /*左浮動*/
float: right; /*右浮動*/
color: #000; /*字體顏色*/
background: #fff; /*背景顏色*/
font-size: 18px; /*字體大小*/
font-weight: 700; /*字體粗細*/
text-align: center; /*居中*/
a:hover {color: #FFF;} /*鼠標浮動字體變色*/
border-radius: 6px; /*邊角大小*/
border: 1px solid #CDCDCD; /*全邊框*/

下篇我將給大家具體介紹使用方法，謝謝觀看！！！

網頁展現的更快，官方說法叫做首屏繪制，First Paint 或者簡稱 FP，直白的說法叫做白屏時間，就是從輸入 URL 到真的看到內容（不必可交互，那個叫 TTI, Time to Interactive）之間經歷的時間。當然這個時間越短越好。

但這里要注意，和首屏相關的除了 FP 還有兩個指標，分別稱為 FCP (First Contentful Paint，頁面有效內容的繪制) 和 FMP (First Meaningful Paint，頁面有意義的內容繪制)。雖然這幾個概念可能會讓我們繞暈，但我們只需要了解一點：首屏時間 FP 并不要求內容是真實的，有效的，有意義的，可交互的。換言之，隨便給用戶看點啥都行。

這就是本文標題的玄機了：“看起來”。是的，只是看起來更快，實際上還是那樣。所以本文并不討論性能優化，討論的是一個投機取巧的小伎倆，但的確能夠實實在在的提升體驗。打個比方，性能優化是修煉內功，提升你本身的各項機能；而本文接下來要討論的是一些招式，能讓你在第一時間就唬住對手。

這所謂的招式就是我接下來要談的內容，學名骨架屏，也叫 Skeleton。你可能沒聽過這個名字，但你不可能沒見過它。

骨架屏長什么樣

這種應該是最常見的形式，使用各種形狀的灰色矩形來模擬圖片和文字。有些 APP 也會使用圓形，但重點都是和實際內容結構近似，不能差距太大。

如果追求效果，還可以在色塊表面添加動畫（如波紋），顯示出一種動態的效果，算是致敬 Loading 了。

在圖片居多的站點，這將會是一個很好的體驗，因為圖片通常加載較慢。如上圖演示中的占位圖片采用了低像素的圖片，即大體配色和變化是和實際內容一致的。

如果無法生成這樣的低像素圖片，稍微降級的方案是通過算法獲取圖片的主體顏色，使用純色塊占位。

再退一級，還可以使用全站相同的站位圖片，或者直接一個統一顏色的色塊。雖說效果肯定不如上面兩種，但也聊勝于無。

骨架屏完全是自定義的，想做成什么樣全憑你的想象。你想做圓形的，三角形的，立體的都可以，但“占位”決定了它的特性：它不能太復雜，必須第一時間，最快展現出來。

骨架屏有哪些優勢

大體來說，骨架屏的優勢在于：

1、在頁面加載初期預先渲染內容，提升感官上的體驗。

2、一般情況骨架屏和實際內容的結構是類似的，因此之后的切換不會過于突兀。這點和傳統的 Loading 動圖不同，可以認為是其升級版。

3、只需要簡單的 CSS 支持 (涉及圖片懶加載可能還需要 JS )，不要求 HTTPS 協議，沒有額外的學習和維護成本。

4、如果頁面采用組件化開發，每個組件可以根據自身狀態定義自身的骨架屏及其切換時機，同時維持了組件之間的獨立性。

骨架屏能用在哪里

現在的 WEB 站點，大致有兩種渲染模式：

前端渲染

由于最近幾年 Angular/React/Vue 的相繼推出和流行，前端渲染開始占據主導。這種模式的應用也叫單頁應用（SPA, Single Page Application）。

前端渲染的模式是服務器（多為靜態服務器）返回一個固定的 HTML。通常這個 HTML 包含一個空的容器節點，沒有其他內容。之后內部包含的 JS 包含路由管理，頁面渲染，頁面切換，綁定事件等等邏輯，所以稱之為前端渲染。

因為前端要管理的事情很多，所以 JS 通常很大很復雜，執行起來也要花較多的時間。在 JS 渲染出實際內容之前，骨架屏就是一個很好的替補隊員。

后端渲染

在這波前端渲染流行之前，早期的傳統網站采用的模式叫做后端渲染，即服務器直接返回網站的 HTML 頁面，已經包含首頁的全部（或絕大部分） DOM 元素。其中包含的 JS 的作用大多是綁定事件，定義用戶交互后的行為等。少量會額外添加/修改一些 DOM，但無礙大局。

此外，前端渲染的模式存在 SEO 不友好的問題，因為它返回的 HTML 是一個空的容器。如果搜索引擎沒有執行 JS 的能力（稱為 Deep Render），那它就不知道你的站點究竟是什么內容，自然也就無法把站點排到搜索結果中去。這對于絕大部分站點來說是不可接受的，于是前端框架又相繼推出了服務端渲染（簡稱 SSR, Server Side Rendering）模式。這個模式和傳統網站很接近，在于返回的 HTML 也是包含所有的 DOM，而非前端渲染。而前端 JS 除了綁定事件之外，還會多做一個事情叫做“激活”（hydration），這里就不再贅述了。

不論是傳統模式還是 SSR，只要是后端渲染，就不需要骨架屏。因為頁面的內容直接存在于 HTML，所以并沒有骨架屏出場的余地。

骨架屏怎么用

討論了一波背景，我們來看如何使用。首先先無視具體的實現細節，先看思路。

實現思路

大體分為幾個步驟：

往本應為空的容器節點內部注入骨架屏的 HTML。
骨架屏為了盡快展現，要求快速和簡單，所以骨架屏多數使用靜態的圖片。而且把圖片編譯成 base64 編碼格式可以節省網絡請求，使得骨架屏更快展現，更加有效。

<html>
 <head>
 <style>
 .skeleton-wrapper {
 // styles
 }
 </style>
 <!-- 聲明 meta 或者引入其他 CSS -->
 </head>
 <body>
 <div id="app">
 <div class="skeleton-wrapper">
 <img src="data:image/svg+xml;base64,XXXXXX">
 </div>
 </div>
 <!-- 引用 JS -->
 </body>
</html>

在執行 JS 開始真正內容的渲染之前，清空骨架屏 HTML
以 Vue 為例，即在 mount 之前清空內容即可。

let app = new Vue({...})
let container = document.querySelector('#app')
if (container) {
 container.innerHTML = ''
}
app.$mount(container)

僅此兩步，并不牽涉多么復雜的機制和高端的 API，因此非常容易應用，趕快用起來！

示例

我編寫了一個示例，用于快速展現骨架屏的效果，代碼在此。

index.html
默認包含了骨架屏，并且內聯了樣式（以 <style> 標簽添加在頭部）。
render.js
它負責創建 DOM 元素并添加到 <body> 上，渲染頁面實際的內容，用來模擬常見的前端渲染模式。
index.css
頁面實際內容的樣式表，不包含骨架屏的樣式。

代碼的三個文件各司其職，配合上面的實現思路，應該還是很好理解的。可以在這里查看效果。

因為這個示例的邏輯太過簡單，而實際的前端渲染框架復雜得多，包含的功能也不單純是渲染，還有狀態管理，路由管理，虛擬 DOM 等等，所以文件大小和執行時間都更大更長。我們在查看例子的時候，把網絡調成 "Fast 3G" 或者 "Slow 3G" 能夠稍微真實一些。

但匪夷所思的是，對著這個地址刷新試幾次，我也基本看不到骨架屏（骨架屏的內容是一個居中的藍色方形圖片，外加一條白色橫線反復側滑的高亮動畫）。是我們的實現思路有問題嗎？

瀏覽器的奧秘：減少重排

為了排除肉眼的遺漏和干擾，我們用 Chrome Dev Tools 的 Performance 工具來記錄剛才發生了什么，截圖如下：（截圖時的網絡設置為 "Fast 3G"）

我們可以很明顯地看到 3 個時間點：

1、HTML 加載完成了。瀏覽器在解析 HTML 的同時，發現了它需要引用的 2 個外部資源 index.js 和 index.css，于是發送網絡請求去獲取。

2、獲取成功后，執行 JS 并注冊 CSS 的規則。

3、JS 一執行，很自然的渲染出了實際的內容，并應用了樣式規則（隨機顏色的橫條）。

我們的骨架屏呢？按照預想，骨架屏應該出現在 1 和 2 之間，也就是在獲取 JS 和 CSS 的同時，就應該渲染骨架屏了。這也是我們當時把骨架屏的 HTML 注入到 index.html，還把 CSS 從 index.css 中分離出來的良苦用心，然而瀏覽器并不買賬。

這其實和瀏覽器的渲染順序有關。

相信大家都整理過行李箱。我們在整理行李箱時，會根據每個行李的大小合理安排，大的和小的配合，填滿一層再放上面一層。現在突然有人跑來跟你說，你的電腦不用帶了，你要多帶兩件衣服，你不能帶那么多瓶礦泉水。除了想打他之外，為了重新整理行李箱，必然需要把整理好的行李拿出來再重新放。在瀏覽器中這個過程叫做重排 (reflow)，而那個餿主意就是新加載的 CSS。顯而易見，重排的開銷是很大的。

熟能生巧，箱子理多了，就能想出解決辦法。既然每個 CSS 文件加載都可能觸發重繪，那我能不能等所有 CSS 加載完了一起渲染呢？正是基于這一點，瀏覽器會等 HTML 中所有的 CSS 都加載完，注冊完，一起應用樣式，力求一次排列完成工作，不要反復重排。看起來瀏覽器的設計者經常出差，因為這是一個很正確的優化思路，但應用在骨架屏上就出了問題。

我們為了盡早展現骨架屏，把骨架屏的樣式從 index.css 分離出來。但瀏覽器不知道，它以為骨架屏的 HTML 還依賴 index.css，所以必須等它加載完。而它加載完之后，render.js 也差不多加載完開始執行了，于是骨架屏的 HTML 又被替換了，自然就看不到了。而且在等待 JS, CSS 加載的時候依然是個白屏，骨架屏的效果大打折扣。

所以我們要做的是告訴瀏覽器，你放心大膽的先畫骨架屏，它和后面的 index.css 是無關的。那怎么告訴它呢？

告訴瀏覽器先渲染骨架屏

我們在引用 CSS 時，會使用 <link rel="stylesheet" href="xxxx> 這樣的語法。但實際上，瀏覽器還提供了其他一些機制確保（后續）頁面的性能，我們稱之為 preload，中文叫預加載。具體來說，使用 <link rel="preload" href="xxxx">，提前把后續要使用的資源先聲明一下。在瀏覽器空閑的時候會提前加載并放入緩存。之后再使用就可以節省一個網絡請求。

這看似無關的技術，在這里將起到很大的作用，因為預加載的資源是不會影響當前頁面的。

我們可以通過這種方式，告訴瀏覽器：先不要管 index.css，直接畫骨架屏。之后 index.css加載回來之后，再應用這個樣式。具體來說代碼如下：

<link rel="preload" href="index.css" as="style" onload="this.rel='stylesheet'">

方法的核心是通過改變 rel 可以讓瀏覽器重新界定 <link> 標簽的角色，從預加載變成當頁樣式。（另外也有文章采用修改 media 的方法，但瀏覽器支持度較低，這里不作展開了。我把文章列在最后了）這樣的話，瀏覽器在 CSS 尚未獲取完成時，會先渲染骨架屏（因為此時的 CSS 還是 preload，也就是后續使用的，并不妨礙當前頁面）。而當 CSS 加載完成并修改了自己的 rel之后，瀏覽器重新應用樣式，目的達成。

不得不考慮的注意點

事實上，并不是把 rel="stylesheet" 改成 rel="preload" 就完事兒了。在真正應用到生產環境之前，我們還有很多事情要考慮。

兼容性考慮

首先，在 <link> 內部我們使用了 onload，也就是使用了 JS。為了應對用戶的瀏覽器沒有開啟腳本功能的情況，我們需要添加一個 fallback。（不過這點對于單頁應用來說可能也無所謂，因為如果沒有腳本，那頁面實際內容也渲染不出來的）

<noscript><link rel="stylesheet" href="index.css"></noscript>

其次，rel="preload" 并不是沒有兼容性問題。對于不支持 preload 的瀏覽器，我們可以添加一些 polyfill 代碼（來使所有瀏覽器獲得一致的效果。

<script>
/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
(function(){ ... }());
</script>

polyfill 的壓縮代碼可以參見 Lavas 的 SPA 模板第 29 行。

加載順序

不同于傳統頁面，我們的實際 DOM 是通過 render.js 生成的。所以如果 JS 先于 CSS 執行，那將會發生跳動。（因為先渲染了實際內容卻沒有樣式，而后樣式加載，頁面出現很明顯的變化）所以這里我們需要嚴格控制 CSS 早于渲染。

<link rel="preload" href="index.css" as="style" onload="this.rel='stylesheet';window.STYLE_READY=true;window.mountApp && window.mountApp()">

JS 對外暴露一個 mountApp 方法用于渲染頁面（其實是模擬 Vue 的 mount）

// render.js
function mountApp() {
 // 方法內部就是把實際內容添加到 <body> 上面
}
// 本來直接調用方法完成渲染
// mountApp()
// 改成掛到 window 由 CSS 來調用
window.mountApp = mountApp()
// 如果 JS 晚于 CSS 加載完成，那直接執行渲染。
if (window.STYLE_READY) {
 mountApp()
}

如果 CSS 更快加載完成，那么通過設置 window.STYLE_READY 允許 JS 加載完成后直接執行；而如果 JS 更快，則先不自己執行，而是把機會留給 CSS 的 onload。

清空 onload

loadCSS 的開發者提出，某些瀏覽器會在 rel 改變時重新出發 onload，導致后面的邏輯走了兩次。為了消除這個影響，我們再在 onload 里面添加一句 this.onload=null。

最終的 CSS 引用方式

<link rel="preload" href="index.css" as="style" onload="this.onload=null;this.rel='stylesheet';window.STYLE_READY=true;window.mountApp && window.mountApp()">
<!-- 為了方便閱讀，折行重復一遍 -->
<!-- this.onload=null -->
<!-- this.rel='stylesheet' -->
<!-- window.STYLE_READY=true -->
<!-- window.mountApp && window.mountApp() -->

修改后的效果

修改后的代碼在這里，訪問地址在這里。（為了簡便，我省去了處理兼容性的代碼，即 <noscript> 和 preload polyfill）

Performance 截圖如下：（依然采用了 "Fast 3G" 的網絡設置）

這次在 render.js 和 index.css 還在加載的時候頁面已經呈現出骨架屏的內容，實際肉眼也可以觀測到。在截圖的情況下，骨架屏的展現大約持續了 300ms，占據整個網絡請求的大約一半時間。

至于說為什么不是 HTML 加載完成立馬展現骨架屏，而是還要等大約 300ms 才展現，從圖上看是瀏覽器 ParseHTML 所花費的時間，可能在 Dev Tools 打開的情況下計算資源有限，不過可優化空間已經不大。（可能簡化骨架屏的結構能起一些作用吧）

多骨架屏的支持

一般來說一個站點的所有頁面不太可能是同一種展示類型。例如說首頁和內部頁面就展示風格而言會很有區別，另外例如列表頁和搜索頁比較接近（可能都有列表展示），但和詳情頁（可能是商品，服務，個人信息，博客文章等等）就會很不相同。但單頁應用的 index.html 只有一個，所有的變化都源自前端渲染框架在容器節點內部進行改變。所以直接將骨架屏注入到 index.html中會導致所有的頁面都用同一個骨架屏，那就很難達成“和實際內容結構類似”的目標了，骨架屏就退化為 Loading 了。

為了要支持多種骨架屏，我們需要在 index.html 里面進行判斷邏輯（獨立于主體 JS 之外），具體來說：

1、把所有種類的骨架屏的 HTML 和樣式全部寫入 index.html

2、在 index.html 底下新增內聯的腳本 <script>，根據當前路由判斷應該展示哪一個骨架屏

這樣會導致 index.html 體積變大一點，但整體感覺依然是收益大于付出，我認為是值得的。

后記

這個優化點最早由我的前同事 xiaop 同學在開發 Lavas 的 SPA 模板中發現并完成的，Issue 記錄在此。我在他的基礎上，做了一個分離 Lavas 和 Vue 環境并且更直白的例子，讓截圖也盡可能易于理解，方便閱讀。在此非常感謝他的工作！

另外骨架屏的編寫我全部采用的是純粹的手寫 HTML 和 CSS，不止展現邏輯，包括開發流程也是獨立于單頁應用其他常規頁面的。當然這可能給開發者帶來一點不便，所以這時候需要推出 xiaop 同學的利器：vue-skeleton-webpack-plugin https://github.com/lavas-project/vue-skeleton-webpack-plugin。它的作用是把骨架屏本身也當成一個 Vue 組件，配上單獨的路由規則來統一在 Vue 項目中的開發體驗，最后使用 webpack 在打包構建的時候加以區分并注入，對于使用 Vue + webpack 開發的同學來說可以一試。

參考文章

讓骨架屏更快渲染 https://zhuanlan.zhihu.com/p/34550387- xiaop 同學原作
Loading CSS without blocking render https://keithclark.co.uk/articles/loading-css-without-blocking-render/- 使用修改 media 的方式達成目的。
filamentgroup/loadCSS https://github.com/filamentgroup/loadCSS - 同樣使用修改 rel 的方式，并提供了 preload polyfill

轉自作者作者：小蘑菇小哥https://zhuanlan.zhihu.com/p/48601348

言

在前端開發的世界里，JavaScript如同魔法師手中的魔杖，而DOM（Document Object Model）則是施展魔法的舞臺。掌握DOM，意味著能夠動態地改變網頁的結構、樣式和行為，為用戶帶來豐富的交互體驗。本文旨在帶你深入了解DOM，從其基本概念出發，直至實戰應用，幫助你成為前端領域的“魔法師”。

技術概述

定義DOM

DOM是一種樹狀結構模型，用于表示HTML或XML文檔的結構。它將文檔視為一個由節點組成的樹，每個節點都是一個對象，可以是元素節點、屬性節點、文本節點等。DOM允許JavaScript讀取和修改頁面的內容和布局。

核心特性與優勢

可編程性：DOM提供了API，讓開發者能夠通過腳本動態地訪問和修改文檔。
兼容性：所有現代瀏覽器均支持DOM標準。
靈活性：能夠創建、讀取、更新或刪除節點，以及處理事件和樣式。

代碼示例

// 獲取元素節點
const element = document.getElementById('myElement');
// 修改內容
element.textContent = 'Hello, DOM!';

技術細節

DOM結構解析

DOM樹的根節點通常是<html>元素，下面掛載著<head>和<body>等子節點。每個節點都有自己的屬性和方法，如appendChild()、removeChild()等，用于操作DOM結構。

難點剖析

性能考量：頻繁的DOM操作可能導致頁面重繪和回流，影響性能。
異步處理：DOM操作往往與事件監聽器或AJAX請求結合，需要理解異步編程。

實戰應用

場景：動態加載內容

假設我們要在用戶滾動頁面時動態加載更多數據。

window.addEventListener('scroll', function() {
  if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
    loadMoreData();
  }
});

function loadMoreData() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      data.forEach(item => {
        const newNode = document.createElement('div');
        newNode.textContent = item.title;
        document.getElementById('content').appendChild(newNode);
      });
    });
}

優化與改進

性能瓶頸分析

減少重繪和回流：批量操作DOM，利用文檔片段DocumentFragment。
緩存查詢結果：避免重復使用getElementById或querySelector。

代碼示例

const fragment = document.createDocumentFragment();
data.forEach(item => {
  const newNode = document.createElement('div');
  newNode.textContent = item.title;
  fragment.appendChild(newNode);
});
document.getElementById('content').appendChild(fragment);

常見問題

如何高效選擇元素？

使用ID選擇器最快，其次是類選擇器，避免使用過于復雜的選擇器鏈。

如何避免DOM操作引起的性能下降？

使用requestAnimationFrame進行動畫和DOM更新。
在隱藏元素中進行DOM操作，完成后顯示元素。

總結與展望

DOM作為JavaScript與HTML文檔交互的橋梁，其重要性不言而喻。掌握DOM，意味著能夠靈活地控制網頁的表現，提升用戶體驗。隨著Web組件、Shadow DOM等新技術的出現，DOM的未來充滿無限可能，期待你在前端領域施展更多的魔法，創造更多精彩的應用。

在線咨詢

上一篇：1-html基本知識
下一篇：學做html5課件手機瀏覽不喜勿噴

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

七小時帶你入門HTML+CSS網頁設計，知識準備與開發工具（一）

言

技術概述

定義DOM

核心特性與優勢

代碼示例

技術細節

DOM結構解析

難點剖析

實戰應用

場景：動態加載內容

優化與改進

性能瓶頸分析

代碼示例

常見問題

如何高效選擇元素？

如何避免DOM操作引起的性能下降？

總結與展望

您的項目需求