前端面試題：瀏覽器如何解析HTML文件？

覽器解析HTML文件的過程是網(wǎng)頁呈現(xiàn)的關(guān)鍵步驟之一。具體介紹如下：

HTML文檔的接收和預(yù)處理

網(wǎng)絡(luò)請求處理：當(dāng)用戶輸入URL或點擊鏈接時，瀏覽器發(fā)起HTTP請求，服務(wù)器響應(yīng)并返回HTML文件。此過程中，瀏覽器需要處理DNS查詢、建立TCP連接等底層網(wǎng)絡(luò)通信操作。
預(yù)解析優(yōu)化：為了提高性能，現(xiàn)代瀏覽器在主線程解析HTML之前會啟動一個預(yù)解析線程，提前下載HTML中鏈接的外部CSS和JS文件。這一步驟確保了后續(xù)渲染過程的順暢進(jìn)行。

解析為DOM樹

詞法分析和句法分析：瀏覽器的HTML解析器通過詞法分析將HTML文本標(biāo)記轉(zhuǎn)化為符號序列，然后通過句法分析器按照HTML規(guī)范構(gòu)建出DOM樹。每個節(jié)點代表一個HTML元素，形成了多層次的樹狀結(jié)構(gòu)。
生成對象接口：生成的DOM樹是頁面元素的結(jié)構(gòu)化表示，提供了操作頁面元素的接口，如JavaScript可以通過DOM API來動態(tài)修改頁面內(nèi)容和結(jié)構(gòu)。

CSS解析與CSSOM樹構(gòu)建

CSS文件加載與解析：瀏覽器解析HTML文件中的<link>標(biāo)簽引入的外部CSS文件和<style>標(biāo)簽中的內(nèi)聯(lián)CSS，生成CSSOM樹。CSSOM樹反映了CSS樣式的層級和繼承關(guān)系。
CSS屬性計算：包括層疊、繼承等，確保每個元素對應(yīng)的樣式能夠被準(zhǔn)確計算。這些計算過程為后續(xù)的布局提供必要的樣式信息。

JavaScript加載與執(zhí)行

阻塞式加載：當(dāng)解析器遇到<script>標(biāo)簽時，它會停止HTML的解析，轉(zhuǎn)而先加載并執(zhí)行JavaScript代碼。這是因為JS可能會修改DOM結(jié)構(gòu)或CSSOM樹，從而影響已解析的部分。
異步和延遲加載：為了不影響頁面的初步渲染，可以采用async或defer屬性來異步加載JS文件，這樣可以在后臺進(jìn)行JS的加載和執(zhí)行，而不阻塞HTML解析。

渲染樹的構(gòu)建

合并DOM樹和CSSOM樹：有了DOM樹和CSSOM樹后，瀏覽器將它們組合成渲染樹，這個樹只包含顯示界面所需的DOM節(jié)點及對應(yīng)的樣式信息。
不可見元素的排除：渲染樹會忽略例如<head>、<meta>等不可見元素，只關(guān)注<body>內(nèi)的可視化內(nèi)容。

布局計算（Layout）

元素位置和尺寸確定：瀏覽器從渲染樹根節(jié)點開始，遞歸地計算每個節(jié)點的精確位置和尺寸，這個過程也被稱為“回流”或“重排”，是后續(xù)繪制的基礎(chǔ)。
布局過程的優(yōu)化：現(xiàn)代瀏覽器會盡量優(yōu)化布局過程，例如通過流式布局的方式減少重復(fù)計算，確保高效地完成布局任務(wù)。

繪制（Paint）

像素級繪制：繪制是一個將布局計算后的各元素繪制成像素點的過程。這包括文本、顏色、邊框、陰影以及替換元素的繪制。
層次化的繪制：為了高效地更新局部內(nèi)容，瀏覽器會將頁面分成若干層次（Layer），對每一層分別進(jìn)行繪制，這樣只需更新變化的部分。

因此，我們開發(fā)中要注意以下幾點：

避免過度使用全局腳本：盡量減少使用全局腳本或者將它們放在文檔底部，以減少對HTML解析的阻塞。
合理組織CSS和使用CSS預(yù)處理器：合理組織CSS文件的結(jié)構(gòu)和覆蓋規(guī)則，利用CSS預(yù)處理器進(jìn)行模塊化管理。
利用瀏覽器緩存機(jī)制：通過設(shè)置合理的緩存策略，減少重復(fù)加載相同資源，提升二次訪問的體驗。
優(yōu)化圖片和多媒體資源：適當(dāng)壓縮圖片和優(yōu)化多媒體資源的加載，減少網(wǎng)絡(luò)傳輸時間和渲染負(fù)擔(dān)。

綜上所述，瀏覽器解析HTML文件是一個復(fù)雜而高度優(yōu)化的過程，涉及從網(wǎng)絡(luò)獲取HTML文檔到最終將其渲染到屏幕上的多個步驟。開發(fā)者需要深入理解這些步驟，以優(yōu)化網(wǎng)頁性能和用戶體驗。通過合理組織HTML結(jié)構(gòu)、優(yōu)化資源加載順序、減少不必要的DOM操作和合理安排CSS和JavaScript的加載與執(zhí)行，可以顯著提升頁面加載速度和運行效率。

言

我們經(jīng)常使用CSS，但是卻不怎么了解CSS，本文主要對vertical-align、BFC、position中開發(fā)過程不怎么注意的特性進(jìn)行簡要總結(jié)，從本文中，你將了解到以下內(nèi)容：

vertical-align為何時靈時不靈
BFC是什么？有何作用
絕對定位的奇淫技巧

CSS特性

vertical-align為什么時靈時不靈

生效條件

只能應(yīng)用在display為inline、inline-block、inline-table、table-cell上。

有個高頻面試題，“如何使一個不定寬高div垂直水平居中？”，有的萌新竟然回答用vertical-align: middle。這個回答是減分的，至少在某種程度上給人一種感覺CSS基礎(chǔ)比較薄弱。

內(nèi)聯(lián)元素垂直居中對齊

開發(fā)中會遇到用字幕x代替關(guān)閉icon，用...顯示溢出或者加載中。但是會發(fā)現(xiàn)字母x、省略號并沒有與文本垂直方向居中對齊，這是因為文本默認(rèn)是基線對齊，x、省略號默認(rèn)底部在基線處。如下圖所示：

如下，為文本對齊demo:

<div class="container">
  <span>你好，世界</span>
  <span class="more">...</span>
</div>

實際顯示效果如下：

如果要實現(xiàn)垂直居中，利用vertical-align，搭配line-height即可，vertical-align不僅可以設(shè)置middle/top/bottom/baseline...關(guān)鍵字，也可以設(shè)置常用的度量單位，正負(fù)值均可，使用比較靈活。為什么要給.more設(shè)置line-height屬性呢？其實是因為line-height屬性可以繼承，如果不縮小.more的行高，就會撐大父元素的尺寸。

<style>
  .container{
    font-size: 64px;
    line-height: 64px;
  }
  .more{
    line-height: 16px;
    vertical-align: 16px;
  }
</style>

BFC究竟有什么作用

什么是BFC

BFC全稱block formatting context，即“塊狀格式化上下文”，與外界元素相對獨立的一片區(qū)域，具有以下特性：

計算BFC高度時，浮動元素也參與計算
屬于同一BFC容器的元素垂直方向的margin會合并
BFC容器是獨立容器，不會影響外部元素的布局

利用BFC的特性，我們可以實現(xiàn)以下功能：

清除浮動
防止垂直方向margin合并
實現(xiàn)多欄彈性布局

BFC的生效條件

以下CSS屬性會觸發(fā)元素生成BFC結(jié)界:

根元素（<html>）
浮動元素（元素的 float 不是 none）
絕對定位元素（元素的 position 為 absolute 或 fixed）
行內(nèi)塊元素（元素的 display 為 inline-block）
表格單元格（元素的 display 為 table-cell，HTML表格單元格默認(rèn)為該值）
表格標(biāo)題（元素的 display 為 table-caption，HTML表格標(biāo)題默認(rèn)為該值）
匿名表格單元格元素（元素的 display 為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別- 是HTML table、row、tbody、thead、tfoot 的默認(rèn)屬性）或 inline-table）
overflow 計算值(Computed)不為 visible 地塊元素
display 值為 flow-root 的元素
contain 值為 layout、content 或 paint 的元素
彈性元素（display 為 flex 或 inline-flex 元素的直接子元素）
網(wǎng)格元素（display 為 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
column-span 為 all 的元素始終會創(chuàng)建一個新的BFc

BFC使用案例

清除浮動

<style>
  .container{
    /* overflow: hidden; */
    /* position: absolute; */
    /* float: left; */
  }
  .left{
    float: left;
    width: 200px;
    height: 200px;
  }
</style>
<div class="container">
  <div class="left"></div>
</div>

以上代碼，container容器高度為0，因為子元素left浮動。我們只需要把container容器轉(zhuǎn)成BFC容器，即可清楚浮動，注釋的幾種方法都可以。

防止垂直方向margin合并

<style>
  .blue, .red-inner {
    height: 50px;
    margin: 10px 0;
  }

  .blue {
    background: blue;
  }

  .red-outer {
    overflow: hidden;
    background: red;
  }
</style>
<div class="blue"></div>
<div class="red-outer">
  <div class="red-inner">red inner</div>
</div>

自適應(yīng)布局

左側(cè)固定，右側(cè)自適應(yīng)。

<style>
  .left{
    height: 200px;
    width: 200px;
    float: left;
    background-color: burlywood;
  }
  .right{
    height: 200px;
    margin-left: 200px;
    background-color: cadetblue;
  }
</style>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

絕對定位還能玩出什么花樣

簡介

絕對定位使用場景非常多。絕對定位元素脫離文檔流，相對于最近的非 static 祖先元素定位，可以利用left/right/top/bottom定位元素位置。我們通常都是設(shè)置垂直方向與水平方向的的位置，如果四個方向都不設(shè)置或者四個方向都設(shè)置會出現(xiàn)什么彩蛋呢？下文會給出揭曉。

left/top/right/bottom都有值的定位

當(dāng)對立位置（left與right，top與bottom）都設(shè)置值且元素沒用固定寬高

此時元素的寬高是根據(jù)元素位置決定的，張鑫旭大佬在《CSS世界》中定義為格式化寬高，如下代碼，最終box-item的寬高計算為：width = 200 - 50 -50 = 100px;width = 200 - 50 -50 = 100px;

<style>
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: bisque;
  }
  .box-item{
    position: absolute;
    left: 50px;
    right: 50px;
    top: 50px;
    bottom: 50px;
    background-color: coral;
  }
</style>
 <div class="box">
    <div class="box-item"></div>
  </div>

這種行為特性對于我們做自適應(yīng)布局非常有用，而且兼容性非常好，比如我們要做左側(cè)固定寬度，右側(cè)自適應(yīng)，除了以上BFC的寫法，我們還可以采用以下方法：

<style>
  .container{
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    right: 0;
  }
  .left{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    background-color: burlywood;
  }
  .right{
    position: absolute;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: cadetblue;
  }
</style>
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

當(dāng)對立位置都設(shè)置了值且元素設(shè)置了固定寬高

這個時候你會發(fā)現(xiàn)，元素的寬高時以width/height為準(zhǔn)，上述說的格式化寬度、高度并沒有生效。這是因為在高度計算過程中，元素的內(nèi)部尺寸優(yōu)先級大于外部尺寸，width/height影響的是元素內(nèi)部尺寸，絕對定位影響的是外部尺寸，當(dāng)元素絕對定位四個方向都設(shè)置值，此時外部尺寸會被內(nèi)部尺寸覆蓋，導(dǎo)致實際元素寬度是width/height的值。

我們經(jīng)常用margin: 0 auto;實現(xiàn)元素水平居中，但是不定寬高元素垂直水平居中就有些麻煩。但是有個神奇的現(xiàn)象，絕對定位配合margin: auto;，可以實現(xiàn)元素垂直水平居中，如下所示：

<style>
  .box{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px;
    background-color: bisque;
  }
  .box-item{
    position: absolute;
    margin: auto;
    width: 50px;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: coral;
  }
</style>
<div class="box">
  <div class="box-item"></div>
</div>

出現(xiàn)這種現(xiàn)象是因為margin:auto本質(zhì)上是平分元素剩余可用空間，塊級元素一般是水平方向自動充滿，垂直方向順序排列。平常我們用margin: 0 auto;之所以能夠使塊級元素水平居中，是因為水平方向元素存在剩余可用空間，而auto平分剩余可用空間，因此就產(chǎn)生居中效果。而垂直方向不存在剩余可用空間，因此無法垂直居中。
上述demo，box-item之所以能夠垂直居中，得益于top/bottom設(shè)置了值，使元素產(chǎn)生高度100%的外部尺寸，而width/height固定元素的內(nèi)部尺寸，使得 外部尺寸高度-內(nèi)部尺寸高度=元素剩余可用空間高度，而auto等分剩余可用空間，可以使元素達(dá)到垂直居中效果。可以嘗試調(diào)整四個方向的值，看看box-item位置是怎么移動的。

無依賴的絕對定位

當(dāng)絕對定位沒有設(shè)置四周定位尺寸時，會發(fā)生神奇的一幕，當(dāng)前元素沒有相對于最近的非 static 祖先元素定位，而是在當(dāng)前位置不變，并且當(dāng)前元素脫離文檔流，不占據(jù)頁面空間。這個特性某些情況下非常有用，比如給box-card加一個圖標(biāo)，借助無依賴定位 + padding/margin即可。寫法比較簡潔，建議嘗試一下。

小結(jié)

比起其他的開發(fā)語言，想要深入了解CSS，并不是一件容易事，大多數(shù)人都是停留在用的基礎(chǔ)上，知道這個屬性/方法，至于為什么會這樣了解較少。張鑫旭大佬CSS高度讓人嘆為觀止，繼續(xù)加油吧！！！

何保持頁面樣式基本不變的前提下將HTML頁面導(dǎo)出為PDF，下面提供一些示例代碼，純屬個人原創(chuàng)，如對你有幫助請記得加關(guān)注、加收藏、點贊、轉(zhuǎn)發(fā)、分享~謝謝~~

基本思路：保持頁面樣式基本不變，使用 `html2canvas` 將頁面轉(zhuǎn)換為圖片，然后再通過 `jspdf` 將圖片分頁導(dǎo)出為PDF文件（中間會遇到圖片或文字等內(nèi)容在分頁處被切割開的問題，如何解決了？詳見末尾干貨)

上基礎(chǔ)代碼：下面為項目中實際代碼截取

<div>
    <!-- 要打印的內(nèi)容區(qū) -->
    <div ref="contentRef">
        <div class="print-item print-out-flow">這是脫離文檔流的內(nèi)容區(qū)域</div>
        <div class="print-item">這是一行內(nèi)容，也是最小葉子元素內(nèi)容</div>
    </div>
    <!-- 打印內(nèi)容容器 -->
    <div ref="printContainerRef" class="print-container"></div>
</div>

/**
  * 1.使用一個隱藏div裝載有滾動條的div.innerHTML
  * 2.隱藏div使用position: absolute, z-index: -999, left: -9999px, width: 900px 控制讓用戶無感知
  * 3.根據(jù)需要覆寫隱藏div內(nèi)html樣式(例如textarea多行顯示有問題, 可以新增一個隱藏的div
  *    包裹textarea的綁定值, 然后在打印樣式中覆寫樣式, 隱藏textarea并顯示對應(yīng)div)
  */
handleExport() {
   // 下面是VUE組件內(nèi)獲取DOM元素代碼，將內(nèi)容放置到打印區(qū)（定義的隱藏DIV）中
    const contentRef = this.$refs.contentRef as HTMLElement;
    const printContainerRef = this.$refs.printContainerRef as HTMLElement;
    // 打印區(qū)的需額外處理絕對定位值, 調(diào)整使得第一個元素的.top值為0, 以便于頁面計算
    printContainerRef.innerHTML = contentRef.innerHTML;	
    
    // 所有葉子div元素加上 print-item 樣式名, 脫離文檔流的額外添加 print-out-flow
    handlePrintItem(printContainerRef);  // 解決多頁內(nèi)容可能被切割問題
    
    html2canvas(printContainerRef, {allowTaint: false, useCORS: true}).then((canvas: any) => {
      const contentHeight = canvas.height;
      const contentWidth = canvas.width;
      // pdf每頁顯示的內(nèi)容高度
      const pageHeight = contentWidth / 595.28 * 841.89;
      // 未生成pdf的頁面高度
      let offsetHeight = contentHeight;
      // 頁面偏移值
      let position = 0;
      // a4紙的尺寸[595.28, 841.89], canvas圖片按a4紙大小縮放后的寬高
      const imgWidth = 595.28;
      const imgHeight = 595.28 / contentWidth * contentHeight;

      const dataURL = canvas.toDataURL('image/jpeg', 1.0);
      const doc = new jsPDF('p', 'pt', 'a4');

      if (offsetHeight < pageHeight) {
        doc.addImage(dataURL, 'JPEG', 0, 0, imgWidth, imgHeight);
      } else {
        while (offsetHeight > 0) {
          doc.addImage(dataURL, 'JPEG', 0, position, imgWidth, imgHeight);
          offsetHeight -= pageHeight;
          position -= 841.89;

          if (offsetHeight > 0) {
            doc.addPage();
          }
        }
      }

      doc.save(this.generateReportFileName());
      printContainerRef.innerHTML = '';
    });
}

上干貨代碼：上面分頁導(dǎo)出PDF可能網(wǎng)上能看到類型代碼，但絕對找不到下面的代碼，純手搓解決分頁元素被切開問題（思路：獲取自身定位，如自己剛好在被分頁處，則加上一定的margin-top值將內(nèi)容向下移）

/** 
 * 處理打印元素項, 修復(fù)分頁后被切割的元素
 * @param printContainerRef 打印內(nèi)容div容器
 * @param itemClassName 打印最小元素標(biāo)識類名
 * @param outFlowClassName 脫離文檔流的元素標(biāo)識類名
 */
export function handlePrintItem(
  printContainerRef: HTMLElement,
  itemClassName: string = 'print-item',
  outFlowClassName: string = 'print-out-flow'
): void {
  const rootClientRect = printContainerRef.getBoundingClientRect();
  // 初始化頁面相關(guān)數(shù)據(jù)
  const totalHeight = rootClientRect.height;  // 內(nèi)容總高度
  const a4PageHeight = (printContainerRef.clientWidth / 595.28) * 841.89; // a4紙高度
  let pageNum = Math.ceil(totalHeight / a4PageHeight);  // 總頁數(shù)
  let addPageHeight = 0;  // 修正被分割元素而增加的頁面高度總和
  let currentPage = 1;  // 當(dāng)前正在處理切割的頁面
  const splitItemObj: { [key: number]: HTMLElement[] } = {};  // 內(nèi)容中各頁被切割元素存儲對象

  const printItemNodes: NodeListOf<HTMLElement> = printContainerRef.querySelectorAll(`.${itemClassName}`);
  for (let item of printItemNodes) {
    // 如果當(dāng)前頁已經(jīng)是最后一頁, 則中斷判斷
    if (currentPage >= pageNum) {
      break;
    }

    // 獲取元素絕對定位數(shù)據(jù)
    const clientRect = item.getBoundingClientRect();
    let top = clientRect.top;
    const selfHeight = clientRect.height;
    // 如果當(dāng)前元素距離頂部高度大于當(dāng)前頁面頁腳高度, 則開始判斷下一頁頁腳被切割元素
    if (top > currentPage * a4PageHeight) {
      // 換頁前修正上一頁被切割元素
      addPageHeight += fixSplitItems(currentPage, a4PageHeight, splitItemObj[currentPage], outFlowClassName);
      pageNum = Math.ceil((totalHeight + addPageHeight) / a4PageHeight);
      top = item.getBoundingClientRect().top;
      currentPage++;
    }
    // 如果元素剛好處于兩頁之間, 則記錄該元素
    if (top > (currentPage - 1) * a4PageHeight && top < currentPage * a4PageHeight && top + selfHeight > currentPage * a4PageHeight) {
      if (!splitItemObj[currentPage]) {
        splitItemObj[currentPage] = [];
      }
      splitItemObj[currentPage].unshift(item);
      // 如果當(dāng)前元素是最后一個元素, 則直接處理切割元素, 否則交由處理下一頁元素時再處理切割
      if (item === printItemNodes[printItemNodes.length - 1]) {
        fixSplitItems(currentPage, a4PageHeight, splitItemObj[currentPage], outFlowClassName);
      }
    }
  }
}

/**
  * 修復(fù)當(dāng)前頁所有被切割元素
  * @param currentPage 當(dāng)前頁
  * @param pageHeight 每頁高度
  * @param splitElementItems 當(dāng)前被切割元素數(shù)組
  * @param outFlowClassName 脫離文檔流的樣式類名
  */
function fixSplitItems(
  currentPage: number,
  pageHeight: number,
  splitElementItems: HTMLElement[],
  outFlowClassName: string
): number {
  if (!splitElementItems || !splitElementItems.length) {
    return 0;
  }

  const yMargin = 5;  // y方向距離頁眉的距離
  const splitItemsMinTop = getSplitItemsMinTop(splitElementItems);
  if (!splitItemsMinTop) {
    return 0;
  }

  let fixHeight = currentPage * pageHeight - splitItemsMinTop + yMargin;
  const outFlowElement = splitElementItems.find((item) => item.classList.contains(outFlowClassName));
  if (outFlowElement && outFlowElement.parentElement) {
    const parentPreviousElement = outFlowElement.parentElement.previousElementSibling as HTMLElement;
    fixHeight += getMarinTopNum(parentPreviousElement, outFlowElement.parentElement);
    outFlowElement.parentElement.style.marginTop = `${fixHeight}px`;
    return fixHeight;
  }

  splitElementItems.forEach((splitElement) => {
    splitElement.style.marginTop = `${fixHeight}px`;
  });
  return fixHeight;
}

/**
  * 獲取被切割元素數(shù)組中最小高度值（如一行有多個元素被切割，則選出距離頂部最小的高度值）
  * @param splitElementItems 當(dāng)前被切割元素數(shù)組
  */
function getSplitItemsMinTop(
  splitElementItems: HTMLElement[]
): number | undefined {
  // 獲取元素中最小top值作為基準(zhǔn)進(jìn)行修正
  let minTop: number | undefined;
  let minElement: HTMLElement | undefined;
  splitElementItems.forEach((splitElement) => {
    let top = splitElement.getBoundingClientRect().top;
    if (minTop) {
      minTop = top < minTop ? top : minTop;
      minElement = top < minTop ? splitElement : minElement;
    } else {
      minTop = top;
      minElement = splitElement;
    }
  });

  // 修正當(dāng)前節(jié)點及其前面同層級節(jié)點的margin值
  if (minTop && minElement) {
    const previousElement = splitElementItems[splitElementItems.length - 1].previousElementSibling as HTMLElement;
    minTop -= getMarinTopNum(previousElement, minElement);
  }
  return minTop;
}

/**
  * 通過前一個兄弟元素和元素自身的位置確認(rèn)一個距離頂部高度修正值
  * @param previousElement 前一個兄弟元素
  * @param curElement 當(dāng)前元素
  */
function getMarinTopNum(previousElement: HTMLElement, curElement: HTMLElement): number {
  let preMarginNum = 0;
  let curMarginNum = 0;
  if (previousElement) {
    // 獲取外聯(lián)樣式需要getComputedStyle(), 直接.style時對象的值都為空
    const previousMarginBottom = window.getComputedStyle(previousElement).marginBottom;
    preMarginNum = previousMarginBottom ? Number(previousMarginBottom.replace('px', '')) : 0;
  }
  const marginTop = window.getComputedStyle(curElement).marginTop;
  curMarginNum = marginTop ? Number(marginTop.replace('px', '')) : 0;
  return preMarginNum > curMarginNum ? preMarginNum : curMarginNum;
}

以上純原創(chuàng)！歡迎加關(guān)注、加收藏、點贊、轉(zhuǎn)發(fā)、分享（代碼閑聊站）~

在線咨詢

上一篇：來看看HTML5培訓(xùn)從入門到精通都學(xué)哪些
下一篇：css免費視頻教程，從實戰(zhàn)入門著手

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商