整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          C# 將Html轉(zhuǎn)為Word

          C# 將Html轉(zhuǎn)為Word

          文分享以C#程序代碼為例,實(shí)現(xiàn)將Html文件轉(zhuǎn)換Word文檔的方法。在實(shí)際轉(zhuǎn)換場(chǎng)景中可參考本文的方法,轉(zhuǎn)換前,請(qǐng)按照如下方法引用Word API的dll文件到Visual Studio。安裝時(shí),可通過(guò)以下2種方法:

          1.通過(guò)NuGet安裝dll(2種方法)

          1.1 可以在Visual Studio中打開(kāi)“解決方案資源管理器”,鼠標(biāo)右鍵點(diǎn)擊“引用”,“管理NuGet包”,然后搜索“Free Spire.Doc”,點(diǎn)擊“安裝”。等待程序安裝完成。

          1.2 將以下內(nèi)容復(fù)制到PM控制臺(tái)安裝:

          Install-Package FreeSpire.Doc -Version 10.2

          2.手動(dòng)添加dll引用

          可通過(guò)手動(dòng)下載包到本地,然后解壓,找到BIN文件夾下的Spire.Doc.dll。然后在Visual Studio中打開(kāi)“解決方案資源管理器”,鼠標(biāo)右鍵點(diǎn)擊“引用”,“添加引用”,將本地路徑BIN文件夾下的dll文件添加引用至程序。


          完成引用后,編輯如下代碼實(shí)現(xiàn)格式轉(zhuǎn)換:

          C#

          using Spire.Doc;
          
          namespace HTMLtoWord
          {
              class Program
              {
                  static void Main(string[] args)
                  {
                      //創(chuàng)建 Document 對(duì)象
                      Document document=new Document();
          
                      //加載HTML文件
                      document.LoadFromFile("test.html");
          
                      //將HTML文件轉(zhuǎn)為Word并保存
                      document.SaveToFile("HtmltoWord.docx", FileFormat.Docx2013);
                      System.Diagnostics.Process.Start("HtmltoWord.docx");
                  }
              }
          }

          轉(zhuǎn)換效果:

          —END—

          前面一篇文章:「高頻面試題」瀏覽器從輸入url到頁(yè)面展示中間發(fā)生了什么 中,我們有對(duì)瀏覽器的渲染流程做了一個(gè)概括性的介紹,今天這篇文章我們將深入學(xué)習(xí)這部分內(nèi)容。

          對(duì)于很多前端開(kāi)發(fā)來(lái)說(shuō),平常做工主要專注于業(yè)務(wù)開(kāi)發(fā),對(duì)瀏覽器的渲染階段可能不是很了解。實(shí)際上這個(gè)階段很重要,了解瀏覽器的渲染過(guò)程,能讓我們知道我們寫(xiě)的HTML、CSS、JS代碼是如何被解析,并最終渲染成一個(gè)頁(yè)面的,在頁(yè)面性能優(yōu)化的時(shí)候有相應(yīng)的解決思路。

          我們先來(lái)看一個(gè)問(wèn)題:

          HTML、CSS、JS文件在瀏覽器中是如何轉(zhuǎn)化成頁(yè)面的?

          如果你回答不上來(lái),那就往下看吧。

          按照渲染的時(shí)間順序,渲染過(guò)程可以分為下面幾個(gè)子階段:構(gòu)建DOM樹(shù)、樣式計(jì)算、布局階段、分層、柵格化和合成顯示。

          下面詳細(xì)看下每個(gè)階段都做了哪些事情。

          1. 構(gòu)建DOM樹(shù)

          HTML文檔描述一個(gè)頁(yè)面的結(jié)構(gòu),但是瀏覽器無(wú)法直接理解和使用HTML,所以需要通過(guò)HTML解析器將HTML轉(zhuǎn)換成瀏覽器能夠理解的結(jié)構(gòu)——DOM樹(shù)。

          HTML文檔中所有內(nèi)容皆為節(jié)點(diǎn),各節(jié)點(diǎn)之間有層級(jí)關(guān)系,彼此相連,構(gòu)成DOM樹(shù)。

          構(gòu)建過(guò)程:讀取HTML文檔的字節(jié)(Bytes),將字節(jié)轉(zhuǎn)換成字符(Chars),依據(jù)字符確定標(biāo)簽(Tokens),將標(biāo)簽轉(zhuǎn)換成節(jié)點(diǎn)(Nodes),以節(jié)點(diǎn)為基準(zhǔn)構(gòu)建DOM樹(shù)。參考下圖:

          打開(kāi)Chrome的開(kāi)發(fā)者工具,在控制臺(tái)輸入 document 后回車,就能看到一個(gè)完整的DOM樹(shù)結(jié)構(gòu),如下圖所示:

          在控制臺(tái)打印出來(lái)的DOM結(jié)構(gòu)和HTML內(nèi)容幾乎一樣,但和HTML不同的是,DOM是保存在內(nèi)存中的樹(shù)狀結(jié)構(gòu),可以通過(guò)JavaScript來(lái)查詢或修改其內(nèi)容。

          2. 樣式計(jì)算

          樣式計(jì)算這個(gè)階段,是為了計(jì)算出DOM節(jié)點(diǎn)中每個(gè)元素的表現(xiàn)樣式。

          2.1 解析CSS

          CSS樣式可以通過(guò)下面三種方式引入:

          • 通過(guò)link引用外部的CSS文件
          • style 標(biāo)簽內(nèi)的CSS
          • 元素的style屬性內(nèi)嵌的CSS

          和HTML一樣,瀏覽器無(wú)法直接理解純文本的CSS樣式,需要通過(guò)CSS解析器將CSS解析成 styleSheets 結(jié)構(gòu),也就是我們常說(shuō)的 CSSOM樹(shù)。

          styleSheets結(jié)構(gòu)同樣具備查詢和修改功能:

          document.styleSheets

          2.2 屬性值標(biāo)準(zhǔn)化

          屬性值標(biāo)準(zhǔn)化看字面意思有點(diǎn)不好理解,我們通過(guò)下面一個(gè)例子來(lái)看看什么是屬性值標(biāo)準(zhǔn)化:

          在寫(xiě)CSS樣式的時(shí)候,我們?cè)谠O(shè)置color屬性值的時(shí)候,經(jīng)常會(huì)用white、red等,但是這種值瀏覽器的渲染引擎不容易理解,所以需要將所有值轉(zhuǎn)換成渲染引擎容易理解的、標(biāo)準(zhǔn)化的計(jì)算值,這個(gè)過(guò)程就是屬性值標(biāo)準(zhǔn)化。

          white標(biāo)準(zhǔn)化后的值為 rgb(255, 255, 255)

          2.3 計(jì)算DOM樹(shù)中每個(gè)節(jié)點(diǎn)的樣式

          完成樣式的屬性值標(biāo)準(zhǔn)化后,就需要計(jì)算每個(gè)節(jié)點(diǎn)的樣式屬性,這個(gè)階段CSS有兩個(gè)規(guī)則我們需要清楚:

          • 繼承規(guī)則:每個(gè)DOM節(jié)點(diǎn)都包含有父節(jié)點(diǎn)的樣式
          • 層疊規(guī)則:層疊是CSS的一個(gè)基本特征,是一個(gè)定義了如何合并來(lái)自多個(gè)源的屬性值的算法。

          樣式計(jì)算階段是為了計(jì)算出DOM節(jié)點(diǎn)中每個(gè)元素的具體樣式,在計(jì)算過(guò)程中需要遵守CSS的繼承和層疊兩個(gè)規(guī)則。

          該階段最終輸出的內(nèi)容是每個(gè)DOM節(jié)點(diǎn)的樣式,并被保存在 ComputedStyle 的結(jié)構(gòu)中。

          3. 布局階段

          經(jīng)過(guò)上面的兩個(gè)步驟,我們已經(jīng)拿到了DOM樹(shù)和DOM樹(shù)中元素的樣式,接下來(lái)需要計(jì)算DOM樹(shù)中可見(jiàn)元素的幾何位置,這個(gè)計(jì)算過(guò)程就是布局。

          3.1 創(chuàng)建布局樹(shù)

          在DOM樹(shù)中包含了一些不可見(jiàn)的元素,例如 head 標(biāo)簽,設(shè)置了 display:none 屬性的元素,所以我們需要額外構(gòu)建一棵只包含可見(jiàn)元素的布局樹(shù)。

          構(gòu)建過(guò)程:從DOM樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷,將所有可見(jiàn)的節(jié)點(diǎn)加到布局樹(shù)中,忽略不可見(jiàn)的節(jié)點(diǎn)。

          3.2 布局計(jì)算

          到這里我們就有了一棵構(gòu)建好的布局樹(shù),就可以開(kāi)始計(jì)算布局樹(shù)節(jié)點(diǎn)的坐標(biāo)位置了。從根節(jié)點(diǎn)開(kāi)始遍歷,結(jié)合上面計(jì)算得到的樣式,確定每個(gè)節(jié)點(diǎn)對(duì)象在頁(yè)面上的具體大小和位置,將這些信息保存在布局樹(shù)中。

          布局階段的輸出是一個(gè)盒子模型,它會(huì)精確地捕獲每個(gè)元素在屏幕內(nèi)的確切位置與大小。

          4. 分層

          現(xiàn)在我們已經(jīng)有了布局樹(shù),也知道了每個(gè)元素的具體位置信息,但是還不能開(kāi)始繪制頁(yè)面,因?yàn)轫?yè)面中會(huì)有像3D變換、頁(yè)面滾動(dòng)、或者用 z-index 進(jìn)行z軸排序等復(fù)雜效果,為了更方便實(shí)現(xiàn)這些效果,渲染引擎還需要為特定的節(jié)點(diǎn)生成專用的圖層,并生成一棵對(duì)應(yīng)的圖層樹(shù)(LayerTree)。

          在Chrome瀏覽器中,我們可以打開(kāi)開(kāi)發(fā)者工具,選擇 Elements-Layers 標(biāo)簽,就可以看到頁(yè)面的分層情況,如下圖所示:

          瀏覽器的頁(yè)面實(shí)際上被分成了很多圖層,這些圖層疊加后合成了最終的頁(yè)面。

          到這里,我們構(gòu)建了兩棵樹(shù):布局樹(shù)和圖層樹(shù)。下面我們來(lái)看下這兩棵樹(shù)之間的關(guān)系:

          正常情況下,并不是布局樹(shù)的每個(gè)節(jié)點(diǎn)都包含一個(gè)圖層,如果一個(gè)節(jié)點(diǎn)沒(méi)有對(duì)應(yīng)的圖層,那么這個(gè)節(jié)點(diǎn)就從屬于父節(jié)點(diǎn)的圖層。

          那節(jié)點(diǎn)要滿足什么條件才會(huì)被提升為一個(gè)單獨(dú)的圖層?只要滿足下面其中一個(gè)條件即可:

          • 擁有層疊上下文屬性的元素會(huì)被提升為單獨(dú)的一個(gè)圖層
          • 需要剪裁(clip)的地方也會(huì)被創(chuàng)建為圖層。

          5. 圖層繪制

          構(gòu)建好圖層樹(shù)之后,渲染引擎就會(huì)對(duì)圖層樹(shù)中的每個(gè)圖層進(jìn)行繪制。

          渲染引擎實(shí)現(xiàn)圖層繪制,會(huì)把一個(gè)圖層的繪制拆分成很多小的繪制指令,然后將這些指令按照順序組成一個(gè)繪制列表。

          6. 柵格化(raster)操作

          繪制一個(gè)圖層時(shí)會(huì)生成一個(gè)繪制列表,這只是用來(lái)記錄繪制順序和繪制指令的列表,實(shí)際上繪制操作是由渲染引擎中的合成線程來(lái)完成的。

          通過(guò)下圖來(lái)看下渲染主線程和合成線程之間的關(guān)系:

          當(dāng)圖層的繪制列表準(zhǔn)備好后,主線程會(huì)把該繪制列表提交給合成線程,合成線程開(kāi)始工作。

          首先合成線程會(huì)將圖層劃分為圖塊(tile),圖塊大小通常是 256256 或者 512512。

          然后合成線程會(huì)按照視口附近的圖塊來(lái)優(yōu)先生成位圖,實(shí)際生成位圖的操作是由柵格化來(lái)執(zhí)行的。所謂柵格化,是指將圖塊轉(zhuǎn)換為位圖。而圖塊是柵格化執(zhí)行的最小單位。渲染進(jìn)程維護(hù)了一個(gè)柵格化的線程池,所有的圖塊柵格化都是在線程池內(nèi)執(zhí)行的,運(yùn)行方式如下圖所示:

          7. 合成和顯示

          一旦所有圖塊都被光柵化,合成線程就會(huì)生成一個(gè)繪制圖塊的命令——“DrawQuad”,然后將該命令提交給瀏覽器進(jìn)程。

          瀏覽器進(jìn)程里面有一個(gè)名字叫做 viz 的組件,用來(lái)接收合成線程發(fā)過(guò)來(lái)的 DrawQuad 命令,然后根據(jù)命令執(zhí)行。 DrawQuad 命令,將其頁(yè)面內(nèi)容繪制到內(nèi)存中,最后再將內(nèi)存顯示在屏幕上。

          多年開(kāi)發(fā)老碼農(nóng)福利贈(zèng)送:網(wǎng)頁(yè)制作,網(wǎng)站開(kāi)發(fā),web前端開(kāi)發(fā),從最零基礎(chǔ)開(kāi)始的的HTML+CSS+JavaScript。jQuery,Vue、React、Ajax,node,angular框架等到移動(dòng)端小程序項(xiàng)目實(shí)戰(zhàn)【視頻+工具+電子書(shū)+系統(tǒng)路線圖】都有整理,需要的伙伴可以私信我,發(fā)送“前端”等3秒后就可以獲取領(lǐng)取地址,送給每一位對(duì)編程感興趣的小伙伴

          8. 總結(jié)

          一個(gè)完整的渲染流程可以總結(jié)如下:

          • 1、渲染進(jìn)程將HTML內(nèi)容轉(zhuǎn)換為瀏覽器能夠讀懂的DOM樹(shù)結(jié)構(gòu)。
          • 2、渲染引擎將CSS樣式表轉(zhuǎn)化為瀏覽器可以理解的styleSheets,計(jì)算出DOM節(jié)點(diǎn)的樣式。
          • 3、創(chuàng)建布局樹(shù),并計(jì)算所需元素的布局信息。
          • 4、對(duì)布局樹(shù)進(jìn)行分層,并生成分層樹(shù)。
          • 5、為每個(gè)圖層生成繪制列表,并將其提交到合成線程。
          • 6、合成線程將圖層分圖塊,并柵格化將圖塊轉(zhuǎn)換成位圖。
          • 7、合成線程發(fā)送繪制圖塊命令給瀏覽器進(jìn)程。瀏覽器進(jìn)程根據(jù)指令生成頁(yè)面,并顯示到顯示器上。

          渲染過(guò)程中還有兩個(gè)我們經(jīng)常聽(tīng)到的概念:重排和重繪。在這篇文章中就不細(xì)說(shuō)了,下一篇文章再詳細(xì)介紹。

          用js工具wordexport將頁(yè)面導(dǎo)出為Word文檔

          最近工作方面接到新需求,要將頁(yè)面中的person信息導(dǎo)出為Word。

          網(wǎng)上查了查,部分都是從JS入手。

          親自試用了一些JS工具,發(fā)現(xiàn)稂莠不齊。

          不過(guò)最終還是找到了一個(gè)中意的"flower"-->wordexport.js。

          導(dǎo)出效果還是不錯(cuò)的,詳情見(jiàn)下方。

          目的:

          一方面向大家推薦,另一方面希望大家可以不吝賜教,推薦一些更為好用的工具。

          案例:

          測(cè)試案例的結(jié)構(gòu),比較簡(jiǎn)單。

          (1) 下載必須的js文件

          下面給出GitHub的下載地址

          https://github.com/eligrey/FileSaver.js/

          https://github.com/markswindoll/jQuery-Word-Export

          (2) 導(dǎo)入js文件

          一共需要導(dǎo)入3個(gè)js文件

          后者依賴于jQuery的jquery.min.js

          (3) 把需要導(dǎo)出的person信息放到div中

          <div id="printTab">

          <table>.......</table>

          </div>

          (4) 創(chuàng)建一個(gè)導(dǎo)出的按鈕

          <button type="button" onClick="exportWord()" style="float: left;margin-left: 15px">

          導(dǎo)出Word

          </button>

          (5) 導(dǎo)出Word事件

          <script type="text/javascript">

          function exportWord(){

          $("#printTab").wordExport("odysee");

          }

          </script>

          補(bǔ)充:

          $("#printTab").wordExport("odysee");

          這里的odysee為導(dǎo)出的Word的名字。

          如果不傳入默認(rèn)為jQuery-Word-Export

          其實(shí)可以打開(kāi)源碼開(kāi)一下。

          如下圖:

          (6) 測(cè)試

          點(diǎn)擊導(dǎo)出Word按鈕

          打開(kāi)odysee文檔

          效果還是可以接受的

          總結(jié):

          從網(wǎng)上找了幾個(gè)js工具,發(fā)現(xiàn)還是這個(gè)比較好用些。

          同時(shí)希望大家可以不吝賜教,多多推薦一些更為好用的工具。

          下面貼出word.html源碼(如果大家想要原文件請(qǐng)留言或私信)

          ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

          <html>

          <head>

          <title>人員信息</title>

          <script type="text/javascript" src="./jquery.min.js"></script>

          <script type="text/javascript" src="./FileSaver.js"></script>

          <script type="text/javascript" src="./jquery.wordexport.js"></script>

          <script type="text/javascript">

          function exportWord(){

          $("#printTab").wordExport("odysee");

          }

          </script>

          </head>

          <body>

          <div style="height:40px">

          <button type="button" onClick="exportWord()" style="float: left;margin-left: 15px">

          導(dǎo)出Word

          </button>

          </div>

          <!-- 打印表 -->

          <div id="printTab">

          <div align="center">

          <div style="height:40px;font-size:20pt;font-family:Simsun;margin-top: 22px">

          <label><font >odysee</font></label>

          </div>

          <table cellspacing=0 cellpadding=0 style='border-color:black; border-style:solid; BORDER-COLLAPSE:collapse;border:none;table-layout:fixed;word-break:break-all;'>

          <tr>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;height:50px;width:60px; border:black 0.5pt solid;overflow:hidden;'>姓 名</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:90px; border:black 0.5pt solid;overflow:hidden;'>odysee</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:60px; border:black 0.5pt solid;overflow:hidden;'>性 別</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:110px; border:black 0.5pt solid;overflow:hidden;'>♂</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:75px; border:black 0.5pt solid;overflow:hidden;'>出生年月</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:110px; border:black 0.5pt solid;overflow:hidden;'>2019-6-13</td>

          </tr>

          <tr>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;height:50px;border:black 0.5pt solid;overflow:hidden;'>民 族</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>Linux</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>籍 貫</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>home/odysee/</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>出生地</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>Centos7</td>

          </tr>

          <tr>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;height:50px;border:black 0.5pt solid;overflow:hidden;'>入 學(xué)<br/>時(shí) 間</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>2017</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>參加工<br/>作時(shí)間</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>2018</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>健康狀況</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>開(kāi)機(jī)中...</td>

          </tr>

          <tr>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;height:50px;border:black 0.5pt solid;overflow:hidden;'>電 話</td>

          <td style='font-family: "Simsun";font-size: 13pt;text-align: center;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;border:black 0.5pt solid;overflow:hidden;' colspan="2" >call me odysee</td>

          <td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>郵 箱</td>

          <td style='font-family: "Simsun";font-size: 13pt;text-align: center;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;border:black 0.5pt solid;overflow:hidden;' colspan="2" >I am in toutiao</td>

          </tr>

          </table>

          </div>

          </div>

          </div>

          </body>

          </html>


          主站蜘蛛池模板: 国产一区二区在线|播放| 少妇人妻精品一区二区三区| 果冻传媒董小宛一区二区| 久久精品动漫一区二区三区| 亚洲精品精华液一区二区 | 色偷偷久久一区二区三区| 中文字幕精品一区二区| 亚洲一区二区三区在线播放| 国产精品高清一区二区三区| 国产精品日韩欧美一区二区三区| 色屁屁一区二区三区视频国产| 精品日韩在线视频一区二区三区| 精品性影院一区二区三区内射| 日韩精品免费一区二区三区| 国产丝袜视频一区二区三区| 加勒比无码一区二区三区| 日韩精品无码视频一区二区蜜桃| 日韩人妻无码一区二区三区久久 | 日韩精品午夜视频一区二区三区| 亚洲国产一区视频| 国产精品美女一区二区三区| 激情一区二区三区| 久久精品无码一区二区日韩AV| 在线播放一区二区| 亚洲高清毛片一区二区| 一区二区在线播放视频| 一区二区三区在线观看中文字幕| 亚洲一区二区三区四区在线观看| 国产一区二区三区播放| 国产天堂在线一区二区三区| 国产伦精品一区二区| 乱人伦一区二区三区| 色一乱一伦一区一直爽| 无码人妻精品一区二区三18禁| 亚洲一区二区女搞男| 香蕉视频一区二区三区| 亚洲国产精品一区二区第一页免| 加勒比精品久久一区二区三区| 国产精品av一区二区三区不卡蜜| 亚洲一区二区无码偷拍| 国产精品制服丝袜一区|