【新聞推薦系統】(task4)前端基礎

網友投稿 652 2025-03-31

學習總結

（1）task4主要是前后端基礎及交互（前端、flask、后端請求邏輯）。

（2）Web前端網頁：由文字、圖像、超鏈接、音頻、視頻以及Flash等元素構成；Web標準有三層結構，分別是結構（HTML）、表現（CSS）和行為（JS）。結構類似人的身體，表現類似人的著裝，行為類似人的行為動作。

（3）可以參考《南昌大學—網頁設計與開發》和《北林—web前端開發》課程。

（4）Vue：可以自底向上逐層應用，其核心庫只關注圖層，還便于與第三方庫或有項目整合，完全能夠為復雜的單頁應用提供驅動。

文章目錄

學習總結

零、云端全棧介紹

一、Web前端

1.1 什么是Web

1.2 Web 標準構成

1.2.1 HTML（超文本標記語言）

（1）超文本的含義

（2）語法骨架格式

（3）HTML的發展

1.2.2 CSS（CSS樣式表or層疊樣式表）

（1）CSS 規則

（2）語法格式

（3）CSS的三種寫法

1.2.3 JS（JavaScript腳本語言）

（1）JS的組成

（2）書寫位置

Reference

零、云端全棧介紹

在python體系下的云端全棧的架構圖如下，在我們的新聞推薦系統中使用的后端web框架是flask。

一、Web前端

Web前端網頁主要由文字、圖像和超鏈接等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等。

1.1 什么是Web

Web（World Wide Web）即全球廣域網，也稱為萬維網，它是一種基于超文本和HTTP的、全球性的、動態交互的、跨平臺的分布式圖形信息系統。

是建立在Internet上的一種網絡服務，

為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面

，其中的文檔及超級鏈接將Internet上的信息節點組織成一個互為關聯的網狀結構。

Web前端主要是通HTML，CSSJS，ajax，DOM等前端技術,實現網站在客服端的正確顯示及交互功能。

1.2 Web 標準構成

主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。

結構標準：結構用于對網頁元素進行整理和分類，對于網頁來說最重要的一部分。通過對語義的分析，可以對其劃分結構。具有了結構的內容，將更容易閱讀.

表現標準：表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS 。為了讓網頁能展現出靈活多樣的顯示效果.

行為標準：行為是指網頁模型的定義及交互的編寫。使用戶對網頁進行操作，網頁可以做出響應性的變化。

總的來說，

Web標準有三層結構，分別是結構（HTML）、表現（CSS）和行為（JS）。

結構類似人的身體，表現類似人的著裝，行為類似人的行為動作

理想狀態下，他們三層都是獨立的，放到不同的文件里面

1.2.1 HTML（超文本標記語言）

HTML 指的是超文本標記語言 (Hyper Text Markup Language)是用來描述網頁的一種語言。

HTML

不是一種編程語言，而是一種標記語言

(markup language)

標記語言是一套標記標簽 (markup tag)

超越文本限制：可以加入圖片、聲音、動畫、多媒體等內容

超級鏈接文本：可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接。

我的第一個頁面

一個一級標題

一個段落。

聲明為 HTML5 文檔

元素是 HTML 頁面的根元素

元素包含了文檔的元（meta）數據

定義網頁編碼格式

元素描述了文檔的標題</p><p><body> 元素包含了可見的頁面內容</p><p><h1> 元素定義一個標題</p><p><p> 元素定義一個段落</p><p>參考鏈接：</p><p>https://www.runoob.com/html/html-tutorial.html</p><p>https://www.w3school.com.cn/html/index.asp</p><p>? Web 1.0: HTML+CSS 基本的網頁展示</p><p>? Web 2.0: Ajax+JS+XML 高效的數據表達</p><p>? Web 3.0: HTML5+CSS3 Web自適應和普適應用</p><p>1.2.2 CSS（CSS樣式表or層疊樣式表）</p><p>CSS(Cascading Style Sheets) ，通常稱為CSS樣式表或層疊樣式表（級聯樣式表）</p><p>CSS主要用于設置 HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。</p><p>CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。</p><p>選擇器：需要改變樣式的 HTML 元素。</p><p>聲明：由一個屬性和一個值組成。聲明之間用分號結束。</p><p>屬性：希望設置的樣式屬性。每個屬性有一個值。屬性和值用冒號分開。</p><p><標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名></p><p>1</p><p>例如：</p><p><style> /*選擇器{屬性:值；}*/ p { color:#06C; font-size:14px; } /*文字的顏色是藍色*/ h4 { color:#900; } h1 { color:#090; font-size:16px; } body { background:url(bg2.jpg); } </style></p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>參考鏈接：</p><p>https://www.runoob.com/css/css-tutorial.html</p><p>https://www.w3school.com.cn/css/index.asp</p><p>行內模式：在標簽的style屬性中書寫</p><p>（下圖源自北理工慕課《python云端系統開發入門》）</p><p>頁內模式：在HTML網頁中使用獨立的<style>標簽書寫</p><p>（下圖源自北理工慕課《python云端系統開發入門》）</p><p>外部模式：單獨在CSS文件中書寫</p><p>其中的demo.css文件：</p><p>1.2.3 JS（JavaScript<a target="_blank" href="http://m.bai1xia.com/news/tags-4614.html"style="font-weight:bold;">腳本語言</a>）</p><p>JS (JavaScript)是 Web 的<a target="_blank" href="http://m.bai1xia.com/news/tags-2000.html"style="font-weight:bold;">編程語言</a>，是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發的腳本語言，常常用來給HTML網頁添加動態效果，從而實現人機交互的網頁</p><p>腳本語言不需要編譯，在運行過程中由 js 解釋器(js引擎)逐行來進行解釋并執行</p><p>ECMAScript：是由ECMA 國際（原歐洲計算機制造商協會）進行標準化的一門編程語言，在萬維網上應用廣泛，它往往被稱為 JavaScript或 JScript，但實際上后兩者是 ECMAScript 語言的實現和擴展。</p><p>DOM：文檔對象模型（DocumentObject Model，簡稱DOM），是W3C組織推薦的處理可擴展標記語言的標準編程接口。通過 DOM 提供的接口可以對頁面上的各種元素進行操作（大小、位置、顏色等）</p><p>BOM：瀏覽器對象模型(Browser Object Model，簡稱BOM) 是指瀏覽器對象模型，它提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。通過BOM可以操作瀏覽器窗口，比如彈出框、控制瀏覽器跳轉、獲取分辨率等。</p><p>1.行內式</p><p><input type="button" value="點我試試" onclick="alert('Hello World')" /></p><p>1</p><p>可以將單行或少量 JS 代碼寫在HTML標簽的事件屬性中（以 on 開頭的屬性），如：onclick；</p><p>可讀性差，在HTML中編寫JS大量代碼時，不方便閱讀；</p><p>引號易錯，引號多層嵌套匹配時，非常容易弄混；</p><p>2.內嵌式</p><p><script> alert('Hello World~!'); </script></p><p>1</p><p>2</p><p>3</p><p>可以將多行JS代碼寫到 script 標簽中</p><p style="text-align:center"><img src="http://m.bai1xia.com/news/zb_users/cache/ly_autoimg/m/MTEzMDk.jpg" alt="【新聞推薦系統】(task4)前端基礎" title="【新聞推薦系統】(task4)前端基礎" /></p><p>3.外部JS文件</p><p><script src="myScript.js"></script></p><p>1</p><p>//myScript.js文件內容 function myFunction() { document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數"; }</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>利于HTML頁面代碼結構化，把大段 JS代碼獨立到 HTML 頁面之外，既美觀，也方便文件級別的復用</p><p>引用外部 JS文件的 script 標簽中間不可以寫代碼</p><p>適合于JS 代碼量比較大的情況</p><p>參考鏈接：</p><p>https://www.runoob.com/js/js-tutorial.html</p><p>https://www.w3school.com.cn/js/index.asp</p><p>Reference</p><p>（1）datawhale notebook</p><p>（2）Vue全家桶介紹</p><p>HTML web前端推薦系統</p><p> <strong>版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。</strong> </p><p> <strong>版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。</strong> </p></div> <div id="y2skwas" class="article_footer clear"> <div id="ou0cacu" class="fr tag">標簽：<a href="http://m.bai1xia.com/news/tags-4614.html">腳本語言</a> <a href="http://m.bai1xia.com/news/tags-4644.html">信息系統</a> <a href="http://m.bai1xia.com/news/tags-2000.html">編程語言</a> </div> <div id="a2sc0mg" class="bdsharebuttonbox fl share"> <div id="wqcc0qi" class="share-widget fl"> <div id="20kssia" class="social-share" data-sites="wechat,weibo, qq, qzone"></div> </div> </div> </div>  <div id="uo2qcg0" class="post-navigation clear"> <div id="wcaaoem" class="post-previous fl"> <span>上一篇:</span><a href="http://m.bai1xia.com/news/post/51981.html">如何在wps表中標記特定數字（wps怎么上角標數字）</a> </div> <div id="0igscoc" class="post-next fr"> <span>下一篇:</span><a href="http://m.bai1xia.com/news/post/133545.html">易語言<a target="_blank" href="http://m.bai1xia.com/news/tags-3485.html"style="font-weight:bold;">excel</a><a target="_blank" href="http://m.bai1xia.com/news/tags-766.html"style="font-weight:bold;">程序</a>下新建全局變量步驟介紹</a> </div> </div> </div> <div id="2somim0" class="related_article"> <div id="imi2ycu" class="box_title clear"> <span><i class="icon fa fa-paper-plane"></i>相關文章</span> </div> <div id="uyiqask" class="related_list clear"> <article class="fl"> <div id="0cqame0" class="related_img"><a href="http://m.bai1xia.com/news/post/14747.html"><img src="http://m.bai1xia.com/news/zb_users/upload/2023/08/wenzhangerweima.jpg"></a></div> <div id="kok2cs0" class="related_detail"> <h3><a href="http://m.bai1xia.com/news/post/14747.html" title="【TensorFlow】01 TensorFlow簡介與Python基礎">【TensorFlow】01 TensorFlow簡介與Python基礎</a></h3> <div id="wc2cm2q" class="meta"> <span><i class="fa fa-eye"></i>652</span> <span><i class="fa fa-clock-o"></i>2025-03-31</span> </div> </div> </article> <article class="fl"> <div id="ogcawqy" class="related_img"><a href="http://m.bai1xia.com/news/post/8564.html"><img src="http://m.bai1xia.com/news/zb_users/upload/2023/08/wenzhangerweima.jpg"></a></div> <div id="2gq0s0c" class="related_detail"> <h3><a href="http://m.bai1xia.com/news/post/8564.html" title="RPA 實戰：讓小姐姐填滿你的硬盤(上)">RPA 實戰：讓小姐姐填滿你的硬盤(上)</a></h3> <div id="ciug2gk" class="meta"> <span><i class="fa fa-eye"></i>652</span> <span><i class="fa fa-clock-o"></i>2025-03-31</span> </div> </div> </article> <article class="fl"> <div id="s2mi00o" class="related_img"><a href="http://m.bai1xia.com/news/post/16439.html"><img src="http://m.bai1xia.com/news/zb_users/upload/2023/08/wenzhangerweima.jpg"></a></div> <div id="2eokgkc" class="related_detail"> <h3><a href="http://m.bai1xia.com/news/post/16439.html" title="[華為云在線課程][Shell腳本編程基礎][第二章Shell腳本語言的基本用法][1基本結構][學習筆記]">[華為云在線課程][Shell腳本編程基礎][第二章Shell腳本語言的基本用法][1基本結構][學習筆記]</a></h3> <div id="0kiug0o" class="meta"> <span><i class="fa fa-eye"></i>652</span> <span><i class="fa fa-clock-o"></i>2025-03-31</span> </div> </div> </article> </div> </div>  </div> </div> <div id="imk2ewc" class="sidebar"> <div class="kqqako2" id="推薦文章" class="part clear 推薦文章"> <div id="0kwuqum" class="top"> <h3 class="title">推薦文章</h3> </div> <div id="u2yiswc" class="side 推薦文章"><ul><ul class="hot_posts"> <li><h4><a href="http://m.bai1xia.com/news/post/132763.html" title="企業生產管理是什么，企業生產管理軟件">企業生產管理是什么，企業生產管理軟件</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/136160.html" title="盤點進銷存軟件排行榜前十名">進盤點進銷存軟件排行榜前十名</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132779.html" title="進銷存系統哪個簡單好用？進銷存系統優點">進銷存系統哪個簡單好用？進銷存系統優點</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/133648.html" title="工廠生產管理（工廠生產管理流程及制度）">工廠生產管理（工廠生產管理流程及制度）</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132780.html" title="生產管理軟件，機械制造業生產管理，制造業生產過程管理軟件">生產管理軟件，機械制造業生產管理，制造業生產過程管理軟件</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132776.html" title="進銷存軟件和ERP有什么區別？進銷存與erp軟件理解">進銷存軟件和ERP有什么區別？進銷存與erp軟件理解</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132974.html" title="進銷存如何進行庫存管理">進銷存如何進行庫存管理</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132269.html" title="excel銷售訂單管理系統（銷售訂單錄入系統）">如何利用excel制作銷售訂單管理系統？</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/136946.html" title="數據庫訂單管理系統有哪些功能？數據庫訂單管理系統怎么設計？">數據庫訂單管理系統有哪些功能？數據庫訂單管理系統怎么設計？</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132312.html" title="數據庫訂單管理系統（訂單系統數據流圖）">什么是數據庫管理系統？</a></h4></li></ul></ul></div> </div> <div class="meokg0m" id="divPrevious" class="part clear previous"> <div id="wo0aioe" class="top"> <h3 class="title">最近發表</h3> </div> <div id="io20sw0" class="side divPrevious"><ul><li><a title="寵物集市-寵物集市華東、華南、華北排行榜一覽表" href="http://m.bai1xia.com/news/post/157796.html">寵物集市-寵物集市華東、華南、華北排行榜一覽表</a></li> <li><a title="京寵展-2025年時間表" href="http://m.bai1xia.com/news/post/157795.html">京寵展-2025年時間表</a></li> <li><a title="寵物集市在深圳哪里有?時間地址最新消息" href="http://m.bai1xia.com/news/post/157794.html">寵物集市在深圳哪里有?時間地址最新消息</a></li> <li><a title="亞洲寵物展2025年展會介紹" href="http://m.bai1xia.com/news/post/157793.html">亞洲寵物展2025年展會介紹</a></li> <li><a title="京寵展信息指南" href="http://m.bai1xia.com/news/post/157792.html">京寵展信息指南</a></li> <li><a title="寵物展會2025年時間表" href="http://m.bai1xia.com/news/post/157791.html">寵物展會2025年時間表</a></li> <li><a title="亞寵展、全球寵物產業風向標——亞洲寵物展覽會深度解析" href="http://m.bai1xia.com/news/post/157790.html">亞寵展、全球寵物產業風向標——亞洲寵物展覽會深度解析</a></li> <li><a title="2025年亞洲寵物展覽會、京寵展有哪些亮點" href="http://m.bai1xia.com/news/post/157789.html">2025年亞洲寵物展覽會、京寵展有哪些亮點</a></li> <li><a title="<a target="_blank" href="http://m.bai1xia.com/news/tags-10262.html"style="font-weight:bold;">wps</a>演示添加自定義按鈕<a target="_blank" href="http://m.bai1xia.com/news/tags-823.html"style="font-weight:bold;">設置</a>動作改變按順序播放" href="http://m.bai1xia.com/news/post/118206.html"><a target="_blank" href="http://m.bai1xia.com/news/tags-10262.html"style="font-weight:bold;">wps</a>演示添加自定義按鈕<a target="_blank" href="http://m.bai1xia.com/news/tags-823.html"style="font-weight:bold;">設置</a>動作改變按順序播放</a></li> <li><a title="如何將<a target="_blank" href="http://m.bai1xia.com/news/tags-13007.html"style="font-weight:bold;">WPS</a>行中的文本調整到行中" href="http://m.bai1xia.com/news/post/119027.html">如何將<a target="_blank" href="http://m.bai1xia.com/news/tags-13007.html"style="font-weight:bold;">WPS</a>行中的文本調整到行中</a></li> </ul></div> </div> <div class="a2useim" id="sidebar_ad" class="part clear sidebar_ad"> <div id="kawuquk" class="part sidebar_ad"></div> </div> <div class="aqec2uy" id="hot_posts" class="part clear hot_posts"> <div id="k0mwuyw" class="top"> <h3 class="title">熱評文章</h3> </div> <ul class="hot_posts"><li><h4><a href="http://m.bai1xia.com/news/post/104011.html" title="<a target="_blank" href="http://m.bai1xia.com/news/tags-10179.html"style="font-weight:bold;">零代碼</a>開發是什么？2022<a target="_blank" href="http://m.bai1xia.com/news/tags-1.html"style="font-weight:bold;">低代碼</a>平臺排行榜">零代碼開發是什么？2022低代碼平臺排行榜</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/131019.html" title="智能<a target="_blank" href="http://m.bai1xia.com/news/tags-14329.html"style="font-weight:bold;">進銷存庫存管理</a><a target="_blank" href="http://m.bai1xia.com/news/tags-56.html"style="font-weight:bold;">系統</a>（智慧進銷存）">智能進銷存庫存管理系統（智慧進銷存）</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/73907.html" title="<a target="_blank" href="http://m.bai1xia.com/news/tags-14095.html"style="font-weight:bold;">在線文檔</a>哪家強？8款在線文檔編輯軟件推薦">在線文檔哪家強？8款在線文檔編輯軟件推薦</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/102663.html" title="WPS2016怎么繪制簡單的價格表?">WPS2016怎么繪制簡單的價格表?</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/143685.html" title="定制家居數字化管理模式：提升品質、智能化和個性化的未來">定制家居數字化管理模式：提升品質、智能化和個性化的未</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/144333.html" title="智能定制家居管理系統：重新定義家庭生活方式">智能定制家居管理系統：重新定義家庭生活方式</a></h4></li></ul> </div> <div class="uyi2ycs" id="divLinkage" class="part clear link"> <div id="u0omyq0" class="top"> <h3 class="title">友情鏈接</h3> </div> <div id="mqoawcs" class="side divLinkage"><ul><li id="qeoao02" class="link-item"><a href="http://m.bai1xia.com/" target="_blank" title="伙伴云">伙伴云</a></li><li id="gmyyi2k" class="link-item"><a href="http://m.bai1xia.com/news/category-19.html" title="進銷存管理">進銷存管理</a></li><li id="komgogy" class="link-item"><a href="http://m.bai1xia.com/news/category-3.html" title="低代碼">低代碼</a></li><li id="q0migmg" class="link-item"><a href="http://m.bai1xia.com/news/tags-12.html" target="_blank" title="Excel表格">Excel表格</a></li><li id="smmky2u" class="link-item"><a title="誠鼎網">誠鼎網</a></li><li id="kqc0a0c" class="link-item"><a title="FinClip">FinClip</a></li><li id="ico2iwo" class="link-item"><a title="海特貝利常識網">海特貝利常識網</a></li></ul></div> </div> </div> </div> </section> </div> <footer class="p-footer"> <div id="osc22q0" class="contant_box"> <div id="c2scqic" class="discover_tmt"> <h5 class="" style="font-size: 1px; color: white;">伙伴云</h5> <div id="s00a0y0" class="text_box"> <a title="toB數字化營銷SEO" style="font-size: 1px; color: white;">加搜toBSEO</a> <a title="小程序工具" style="font-size: 1px; color: white;">前端框架</a> <a title="小紅書營銷攻略" style="font-size: 1px; color: white;">小紅書營銷攻略</a> <a title="衍因科技" style="font-size: 1px; color: white;">衍因科技</a> <a title="FinClip 技術文檔" style="font-size: 1px; color: white;">小程序容器幫助中心</a> <a title="小程序開發行業洞察" style="font-size: 1px; color: white;">小程序開發行業洞察</a> <a title="全面預算管理資訊" style="font-size: 1px; color: white;">全面預算管理資訊</a> <a title="企微SCRM客戶管理干貨" style="font-size: 1px; color: white;">企微SCRM客戶管理干貨</a> <a title="3D視覺相機資訊" style="font-size: 1px; color: white;">3D視覺相機資訊</a> <a title="創冷科技無電制冷" style="font-size: 1px; color: #22292D;">創冷科技無電制冷</a> <a title="協作機器人資訊" style="font-size: 1px; color: #22292D;">協作機器人資訊</a> </div> </div> <div id="mguiu2e" class="collaboration_box"> </div> <div id="cuugcsy" class="we_img_box clear"> <div id="wokgeia" class="img_box"> <img src="http://m.bai1xia.com/news/zb_users/theme/zblog5_news/image/ewm.png" alt="" class="hover_tmt"> </div> </div> </div> <p class="info"> <a target="_blank" rel="nofollow">京ICP備12038259號</a> <span> <a href="#"></a></span> </p> </footer> <div class="0iw0ekq" id="backtop" class="backtop"> <div id="2wu0cia" class="bt-box top"> <i class="fa fa-angle-up fa-2x"></i> </div> </div> <script charset="UTF-8" src="http://m.bai1xia.com/assets/js/sensorsdata.1.22.2.min.js"></script> <script charset="UTF-8"> var sensors = window['sensorsDataAnalytic201505']; sensors.init({ server_url: 'https://saapi.huoban.com/sa?project=production', heatmap:{scroll_notice_map:'not_collect'}, use_client_time:true, send_type:'beacon' }); sensors.quick('autoTrack'); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6444c045836d6bf27124085a4f62c2a8"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (()=>{const e="https://analyze.jiasou.cc/api/v1/page_view/report/",n="9fe06d4884e0461caaa1de5651164d43";let t=null;const o=new Proxy({},{get:(e,n)=>localStorage.getItem(window.btoa(n)),set:(e,n,t)=>!!t&&(localStorage.setItem(window.btoa(n),t),!0)});new Promise((t=>{if(o.fingerprint)t();else{const a=function(){var e={};if(e.userAgent=navigator.userAgent||"",e.plugins=[],navigator.plugins&&navigator.plugins.length>0)for(var n=0;n<navigator.plugins.length;n++){var t={name:navigator.plugins[n].name||"",filename:navigator.plugins[n].filename||"",description:navigator.plugins[n].description||""};e.plugins.push(t)}e.languages=navigator.languages||[navigator.language||""],e.timezone=(new Date).getTimezoneOffset(),e.screenResolution={width:window.screen.width||0,height:window.screen.height||0,pixelDepth:window.screen.pixelDepth||0,colorDepth:window.screen.colorDepth||0};var o=document.createElement("canvas").getContext("2d"),a=[],i=["monospace","sans-serif","serif"];for(n=0;n<i.length;n++){var r=i[n];o.font="12px "+r,o.measureText("abcdefghijklmnopqrstuvwxyz0123456789").width>0&&a.push(r)}return e.fonts=a,e.cookieEnabled=navigator.cookieEnabled||!1,e.localStorage=void 0!==window.localStorage,e.sessionStorage=void 0!==window.sessionStorage,e.doNotTrack="1"===navigator.doNotTrack||"1"===window.doNotTrack||"1"===navigator.msDoNotTrack||"yes"===navigator.doNotTrack,e}();fetch(`${e}u/`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:n,f:window.btoa(JSON.stringify(a))})}).then((e=>{console.debug("browser fingerprint sent"),200===e.status&&e.json().then((e=>{console.debug("browser fingerprint received",e),o.fingerprint=e.fp,t()}))}))}})).then((()=>{e&&o.fingerprint&&fetch(e+`?${new URLSearchParams({token:n}).toString()}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({c:window.btoa(JSON.stringify({u:o.fingerprint,l:window.location.href,r:document.referrer}))})}).then((e=>{200==e.status&&e.json().then((e=>{e.track_id&&(t=e.track_id)}))}))})),window.addEventListener("beforeunload",(async n=>{t&&fetch(e+`?${new URLSearchParams({track_id:t}).toString()}`,{method:"GET",headers:{"Content-Type":"text/plain"},keepalive:!0}),n.returnValue=""}))})(); </script><script language="javascript" src="http://m.bai1xia.com/news/zb_users/plugin/ZF_ad/js/index.js?id=943"></script> <script language="javascript" src="http://m.bai1xia.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://m.bai1xia.com/" title="日本亚洲中午字幕乱码">日本亚洲中午字幕乱码</a> <div class="friend-links"> </div> </div> </footer> <a href="http://" target="_blank">yy6080久久亚洲精品</a>| <a href="http://" target="_blank">亚洲精品美女久久7777777 </a>| <a href="http://" target="_blank">亚洲AV色香蕉一区二区</a>| <a href="http://" target="_blank">国产亚洲精品久久久久秋霞 </a>| <a href="http://" target="_blank">亚洲国产一区国产亚洲</a>| <a href="http://" target="_blank">亚洲精品你懂的在线观看</a>| <a href="http://" target="_blank">a级亚洲片精品久久久久久久</a>| <a href="http://" target="_blank">亚洲乱亚洲乱少妇无码</a>| <a href="http://" target="_blank">人人狠狠综合久久亚洲高清</a>| <a href="http://" target="_blank">WWW亚洲色大成网络.COM</a>| <a href="http://" target="_blank">国产成人精品日本亚洲语音</a>| <a href="http://" target="_blank">久久精品国产亚洲AV未满十八</a>| <a href="http://" target="_blank">亚洲色大成网站www永久男同 </a>| <a href="http://" target="_blank">亚洲日本久久一区二区va</a>| <a href="http://" target="_blank">亚洲国产精品美女</a>| <a href="http://" target="_blank">亚洲av乱码一区二区三区香蕉</a>| <a href="http://" target="_blank">亚洲一级片在线播放</a>| <a href="http://" target="_blank">亚洲自国产拍揄拍</a>| <a href="http://" target="_blank">自拍偷区亚洲国内自拍</a>| <a href="http://" target="_blank">亚洲一卡一卡二新区无人区</a>| <a href="http://" target="_blank">亚洲精品亚洲人成在线</a>| <a href="http://" target="_blank">国产精品亚洲专区无码不卡</a>| <a href="http://" target="_blank">亚洲精品人成无码中文毛片</a>| <a href="http://" target="_blank">国产偷国产偷亚洲清高动态图</a>| <a href="http://" target="_blank">亚洲精品夜夜夜妓女网</a>| <a href="http://" target="_blank">亚洲AV第一页国产精品</a>| <a href="http://" target="_blank">亚洲美女视频一区</a>| <a href="http://" target="_blank">亚洲一级免费毛片</a>| <a href="http://" target="_blank">亚洲日产乱码一二三区别</a>| <a href="http://" target="_blank">久久久久久久久无码精品亚洲日韩</a>| <a href="http://" target="_blank">女bbbbxxxx另类亚洲</a>| <a href="http://" target="_blank">亚洲色图综合在线</a>| <a href="http://" target="_blank">精品国产亚洲一区二区三区</a>| <a href="http://" target="_blank">亚洲AV日韩AV高潮无码专区</a>| <a href="http://" target="_blank">亚洲狠狠狠一区二区三区</a>| <a href="http://" target="_blank">亚洲精品456人成在线</a>| <a href="http://" target="_blank">亚洲av日韩专区在线观看</a>| <a href="http://" target="_blank">亚洲日韩涩涩成人午夜私人影院</a>| <a href="http://" target="_blank">国产亚洲无线码一区二区</a>| <a href="http://" target="_blank">中文字幕亚洲免费无线观看日本 </a>| <a href="http://" target="_blank">亚洲明星合成图综合区在线</a>| <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="ukawq" class="pl_css_ganrao" style="display: none;"><del id="ukawq"></del><cite id="ukawq"></cite><kbd id="ukawq"></kbd><th id="ukawq"><s id="ukawq"><small id="ukawq"></small></s></th><dfn id="ukawq"></dfn><tr id="ukawq"></tr><acronym id="ukawq"></acronym><option id="ukawq"></option><strong id="ukawq"></strong><li id="ukawq"></li><small id="ukawq"></small><tr id="ukawq"><pre id="ukawq"><xmp id="ukawq"></xmp></pre></tr><code id="ukawq"></code><pre id="ukawq"></pre><acronym id="ukawq"></acronym><cite id="ukawq"></cite><noscript id="ukawq"></noscript><bdo id="ukawq"></bdo><optgroup id="ukawq"><abbr id="ukawq"><button id="ukawq"></button></abbr></optgroup><acronym id="ukawq"></acronym><xmp id="ukawq"></xmp><strike id="ukawq"><menu id="ukawq"><noscript id="ukawq"></noscript></menu></strike><li id="ukawq"></li><center id="ukawq"></center><cite id="ukawq"></cite><pre id="ukawq"><xmp id="ukawq"><tfoot id="ukawq"></tfoot></xmp></pre><xmp id="ukawq"></xmp><fieldset id="ukawq"><menu id="ukawq"><noscript id="ukawq"></noscript></menu></fieldset><xmp id="ukawq"></xmp><code id="ukawq"></code><option id="ukawq"></option><li id="ukawq"></li><button id="ukawq"><delect id="ukawq"><tbody id="ukawq"></tbody></delect></button><xmp id="ukawq"><tfoot id="ukawq"><input id="ukawq"></input></tfoot></xmp><menu id="ukawq"></menu><center id="ukawq"></center><table id="ukawq"><tr id="ukawq"><acronym id="ukawq"></acronym></tr></table><cite id="ukawq"></cite><tbody id="ukawq"></tbody><fieldset id="ukawq"></fieldset><dd id="ukawq"><th id="ukawq"><object id="ukawq"></object></th></dd><dfn id="ukawq"></dfn><sup id="ukawq"><center id="ukawq"><dl id="ukawq"></dl></center></sup><em id="ukawq"></em><abbr id="ukawq"><center id="ukawq"><dd id="ukawq"></dd></center></abbr><source id="ukawq"></source><noscript id="ukawq"></noscript><center id="ukawq"></center><del id="ukawq"></del><pre id="ukawq"><td id="ukawq"><fieldset id="ukawq"></fieldset></td></pre><table id="ukawq"></table><button id="ukawq"></button><noframes id="ukawq"></noframes><button id="ukawq"></button><pre id="ukawq"><xmp id="ukawq"><fieldset id="ukawq"></fieldset></xmp></pre><del id="ukawq"></del><menu id="ukawq"></menu><wbr id="ukawq"><fieldset id="ukawq"><table id="ukawq"></table></fieldset></wbr><object id="ukawq"></object><sup id="ukawq"><center id="ukawq"><dl id="ukawq"></dl></center></sup><acronym id="ukawq"></acronym><nav id="ukawq"><small id="ukawq"><button id="ukawq"></button></small></nav><kbd id="ukawq"></kbd><tfoot id="ukawq"></tfoot><s id="ukawq"></s><center id="ukawq"></center><tr id="ukawq"><pre id="ukawq"><xmp id="ukawq"></xmp></pre></tr><input id="ukawq"></input><dd id="ukawq"></dd><rt id="ukawq"></rt><strong id="ukawq"></strong><abbr id="ukawq"></abbr><option id="ukawq"></option><noframes id="ukawq"></noframes><li id="ukawq"></li><center id="ukawq"></center><center id="ukawq"></center><del id="ukawq"></del><dl id="ukawq"></dl><pre id="ukawq"></pre><nav id="ukawq"><abbr id="ukawq"><center id="ukawq"></center></abbr></nav><dl id="ukawq"><optgroup id="ukawq"><abbr id="ukawq"></abbr></optgroup></dl><samp id="ukawq"></samp><blockquote id="ukawq"></blockquote><menu id="ukawq"></menu><center id="ukawq"></center><optgroup id="ukawq"><abbr id="ukawq"><center id="ukawq"></center></abbr></optgroup><noscript id="ukawq"></noscript><noscript id="ukawq"></noscript><rt id="ukawq"><code id="ukawq"><noframes id="ukawq"></noframes></code></rt><noframes id="ukawq"></noframes><delect id="ukawq"></delect><pre id="ukawq"><xmp id="ukawq"><fieldset id="ukawq"></fieldset></xmp></pre><strike id="ukawq"></strike><dd id="ukawq"><tbody id="ukawq"><object id="ukawq"></object></tbody></dd><menu id="ukawq"></menu><strong id="ukawq"></strong><menu id="ukawq"><tr id="ukawq"><pre id="ukawq"></pre></tr></menu><delect id="ukawq"></delect><abbr id="ukawq"></abbr><tr id="ukawq"></tr><code id="ukawq"><noframes id="ukawq"><ul id="ukawq"></ul></noframes></code><tfoot id="ukawq"></tfoot><td id="ukawq"></td><cite id="ukawq"></cite><optgroup id="ukawq"></optgroup><th id="ukawq"><s id="ukawq"><small id="ukawq"></small></s></th><strong id="ukawq"></strong><input id="ukawq"></input><button id="ukawq"></button><noscript id="ukawq"></noscript><bdo id="ukawq"></bdo><pre id="ukawq"><td id="ukawq"><strike id="ukawq"></strike></td></pre><center id="ukawq"></center><strong id="ukawq"></strong><s id="ukawq"></s><noframes id="ukawq"></noframes><cite id="ukawq"></cite><wbr id="ukawq"></wbr><source id="ukawq"></source><tr id="ukawq"></tr><noframes id="ukawq"></noframes><blockquote id="ukawq"><tfoot id="ukawq"><rt id="ukawq"></rt></tfoot></blockquote><pre id="ukawq"></pre><blockquote id="ukawq"></blockquote><pre id="ukawq"></pre><strike id="ukawq"><rt id="ukawq"><tbody id="ukawq"></tbody></rt></strike><noframes id="ukawq"></noframes><xmp id="ukawq"></xmp><noscript id="ukawq"><em id="ukawq"><blockquote id="ukawq"></blockquote></em></noscript><code id="ukawq"><noframes id="ukawq"><ul id="ukawq"></ul></noframes></code><wbr id="ukawq"><cite id="ukawq"><table id="ukawq"></table></cite></wbr><code id="ukawq"></code><th id="ukawq"></th><samp id="ukawq"><tr id="ukawq"><s id="ukawq"></s></tr></samp><bdo id="ukawq"></bdo><samp id="ukawq"></samp><tbody id="ukawq"><em id="ukawq"><del id="ukawq"></del></em></tbody><source id="ukawq"><strong id="ukawq"><optgroup id="ukawq"></optgroup></strong></source><center id="ukawq"></center><small id="ukawq"></small><abbr id="ukawq"></abbr><option id="ukawq"><dd id="ukawq"><dl id="ukawq"></dl></dd></option><fieldset id="ukawq"></fieldset><abbr id="ukawq"></abbr><dl id="ukawq"><nav id="ukawq"><li id="ukawq"></li></nav></dl><li id="ukawq"></li><acronym id="ukawq"></acronym><bdo id="ukawq"></bdo><code id="ukawq"></code></div> </html>