摘要：可見(jiàn)對(duì)一個(gè)頁(yè)面正確渲染很重要。和標(biāo)簽對(duì)用于標(biāo)識(shí)頁(yè)面的頭部區(qū)域，和之間的內(nèi)容都屬于頭部區(qū)域中的內(nèi)容。是一個(gè)輔助性標(biāo)簽，對(duì)頁(yè)面可以進(jìn)行很多方面的特性的設(shè)置。當(dāng)頁(yè)面沒(méi)有設(shè)置字符集時(shí)，瀏覽器會(huì)使用默認(rèn)的字符編碼顯示。
往期回顧
在 1.2 節(jié)介紹 HTML 語(yǔ)言時(shí)講到：
HTML 是一種“超文本標(biāo)記語(yǔ)言”
它由許多 HTML 標(biāo)簽組成
注意：HTML 標(biāo)簽也稱(chēng)為元素
HTML 頁(yè)面
一個(gè)頁(yè)面的創(chuàng)建離不開(kāi) HTML 語(yǔ)言，每個(gè)頁(yè)面都是從搭建結(jié)構(gòu)開(kāi)始的，盡管頁(yè)面變得越來(lái)越復(fù)雜，但是其底層結(jié)構(gòu)依然會(huì)比較簡(jiǎn)單。本節(jié)將通過(guò)示例 1-1 所示的簡(jiǎn)單 HTML 頁(yè)面來(lái)詳細(xì)講解 HTML 頁(yè)面的基本結(jié)構(gòu)。
【示例 1-1】HTML 頁(yè)面基本結(jié)構(gòu)
上述代碼體現(xiàn)了 HTML 頁(yè)面的基本結(jié)構(gòu)，每個(gè)頁(yè)面都是由示例 1-1 所示的結(jié)構(gòu)開(kāi)始構(gòu)建的。
根據(jù)功能的不同，整個(gè) HTML 頁(yè)面在結(jié)構(gòu)上可以分成兩層：
一層是外層，由 和 標(biāo)簽對(duì)來(lái)標(biāo)識(shí)；
一層是內(nèi)層，用于實(shí)現(xiàn) HTML 頁(yè)面的各項(xiàng)功能；
根據(jù)實(shí)現(xiàn)功能的不同，又可以將內(nèi)層細(xì)分為兩個(gè)區(qū)域：即頭部區(qū)域和主體區(qū)域
頭部區(qū)域由
和 標(biāo)簽對(duì)標(biāo)識(shí)；
要在瀏覽器窗口顯示的內(nèi)容需要放在主體區(qū)域；
主體區(qū)域的標(biāo)識(shí)標(biāo)簽是
和
打開(kāi)任意一款編輯器，新建一個(gè) HTML 頁(yè)面，書(shū)寫(xiě)以上的 HTML 結(jié)構(gòu)代碼之后，以后綴名”.html”保存。然后用 Chorme 瀏覽器打開(kāi)該頁(yè)面，會(huì)發(fā)現(xiàn)頁(yè)面上一片空白，沒(méi)有任何內(nèi)容。這是因?yàn)槲覀冞€沒(méi)有在代碼的
標(biāo)簽中添加內(nèi)容。
在添加內(nèi)容之前先介紹一下結(jié)構(gòu)中所用到的各個(gè)標(biāo)簽的作用。
基本標(biāo)記標(biāo)簽
一 文檔類(lèi)型聲明
下面分別講解示例 1-1 中每一行代碼的含義及使用方法。
DOCTYPE 是 Document Type 的簡(jiǎn)寫(xiě)，用來(lái)告訴瀏覽器使用什么樣的 HTML 或 XHTML 規(guī)范來(lái)解析網(wǎng)
頁(yè)。解析規(guī)范由 DOCTYPE 定義的 DTD（文檔類(lèi)型定義）來(lái)指定，DTD 規(guī)定了使用通用標(biāo)簽語(yǔ)言的網(wǎng)頁(yè)語(yǔ)法。
需要注意的是：在 HTML 文檔中，DOCTYPE 應(yīng)該位于頁(yè)面的第一行。在 HTML5 以前，必須指定 DTD，例如下例代碼是 XTHML 的過(guò)渡類(lèi)型的文檔聲明：
在 HTML5 中，遵循“存在即合理”的原則，對(duì)規(guī)則的要求比較寬松，沒(méi)有指定 HTML 標(biāo)簽必須遵循的 DTD，因而簡(jiǎn)寫(xiě)成以下形式：
DOCTYPE 是不區(qū)分大小寫(xiě)的，所以也可以寫(xiě)成 ：
目前，瀏覽器對(duì)頁(yè)面的渲染有兩種模式：
怪異模式（瀏覽器使用自己的模式解析渲染頁(yè)面）
標(biāo)準(zhǔn)模式（瀏覽器使用 W3C 官方標(biāo)準(zhǔn)解析渲染頁(yè)面）
不同的渲染模式會(huì)影響到瀏覽器對(duì) CSS 代碼甚至 JavaScript 腳本的解析。
如果使用 DOCTYPE，瀏覽器將按標(biāo)準(zhǔn)模式解析渲染頁(yè)面，否則將按怪異模式解析渲染頁(yè)面。
使用怪異模式對(duì)運(yùn)行在 IE 低版本瀏覽器下的頁(yè)面影響很大?？梢?jiàn) DOCTYPE 對(duì)一個(gè)頁(yè)面正確渲染很重要。
二 開(kāi)始文檔實(shí)際 HTML 部分
標(biāo)簽是 HTML 頁(yè)面中所有標(biāo)簽的頂層標(biāo)簽，頁(yè)面中的所有標(biāo)簽必須放在 標(biāo)簽對(duì)之間
三 設(shè)置網(wǎng)頁(yè)文檔頭部信息
通常跟在 后面。
和 標(biāo)簽對(duì)用于標(biāo)識(shí) HTML 頁(yè)面的頭部區(qū)域， 和 之間的內(nèi)容都屬于頭部區(qū)域中的內(nèi)容。
這個(gè)區(qū)域主要用來(lái)設(shè)置一些與網(wǎng)頁(yè)相關(guān)的信息，如網(wǎng)頁(yè)標(biāo)題、字符集、網(wǎng)頁(yè)描述的信息等，設(shè)置的信息內(nèi)容一般不會(huì)顯示在瀏覽器窗口中。
四 網(wǎng)頁(yè)文檔的標(biāo)題
標(biāo)簽的作用有兩個(gè)：</p>
<p>一是設(shè)置網(wǎng)頁(yè)的標(biāo)題，以告訴訪(fǎng)客網(wǎng)頁(yè)的主題是什么，設(shè)置的標(biāo)題將出現(xiàn)在瀏覽器中的標(biāo)簽欄中，如圖 1-22 所示；</p>
<p>二是用于搜索引擎索引，作為搜索關(guān)鍵字以及搜索結(jié)果的標(biāo)題使用。</p>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbjNmW?w=901&h=536");</script></p>
<p>需要注意的是：搜索引擎會(huì)根據(jù) <title> 標(biāo)簽設(shè)置的內(nèi)容將網(wǎng)站或文章合理歸類(lèi)。所以標(biāo)題對(duì)一個(gè)網(wǎng)站或文章來(lái)說(shuō)特別重要。</p>
<p>此外，到目前為止，標(biāo)題標(biāo)簽是 SEO 中最為關(guān)鍵的優(yōu)化項(xiàng)目之一，一個(gè)合適的標(biāo)題可以使網(wǎng)站獲得更好的排名。</p>
<p>實(shí)踐證明，對(duì)標(biāo)題同時(shí)設(shè)置關(guān)鍵字時(shí)可以使網(wǎng)站獲得更靠前的排名。有關(guān) title 標(biāo)題對(duì)搜索影響的示例請(qǐng)參見(jiàn)示例 1-3。</p>
<p>為了讓訪(fǎng)客更好地了解網(wǎng)頁(yè)內(nèi)容以及使網(wǎng)站獲得更好的排名，每個(gè)頁(yè)面都應(yīng)該有一個(gè)簡(jiǎn)短的、描述性的、最好能帶上關(guān)鍵字的標(biāo)題，而且這個(gè)標(biāo)題在每個(gè)頁(yè)面應(yīng)該是唯一的。<br>標(biāo)題設(shè)置語(yǔ)法如下：</p>
<pre><title> 標(biāo)題內(nèi)容
示例代碼如下：
妙味課堂 -www.miaov.com
知識(shí)點(diǎn)拓展：什么是搜索引擎？
搜索引擎（Search Engine，SE）
是指根據(jù)一定的策略，運(yùn)用特定的計(jì)算機(jī)程序從互聯(lián)網(wǎng)上搜集信息，在對(duì)信息進(jìn)行組織和處理后，為用戶(hù)提供檢索服務(wù)，將用戶(hù)檢索相關(guān)的信息展示給用戶(hù)的系統(tǒng)。
通俗解釋?zhuān)?/p>
常用的百度搜索就是一種搜索引擎，它通過(guò)一些關(guān)鍵字迅速地找到用戶(hù)需要的資料。在搜索引擎中，用戶(hù)搜索的就是標(biāo)題，所以一個(gè)切合內(nèi)容的標(biāo)題是至關(guān)重要的。
為了界面的統(tǒng)一性，全文中的示例運(yùn)行結(jié)果截圖統(tǒng)一套用了妙味官方的網(wǎng)址：
www.miaov.com
各位讀者在各自的電腦中進(jìn)行這些示例文件時(shí)，在 Chrome 瀏覽器的地址欄中看到的 URL 將會(huì)是這樣的格式：
file:/// 文件保存路徑 /html 文件名
如將 html 文件 ex1-1.html 保存在 d:Weblesson1 路徑中；則訪(fǎng)問(wèn) ex1-1.html 時(shí)瀏覽器中顯示的 URL 將是：
file:///D:/Web/lesson1/ex1-1.html
五 定義文檔元數(shù)據(jù)
標(biāo)簽位于文檔的頭部，不包含任何文字內(nèi)容。 用來(lái)定義文檔的元數(shù)據(jù)，使用 “名稱(chēng) = 值”的形式來(lái)表示。
一般使用它來(lái)描述當(dāng)前頁(yè)面的特性，比如：文檔字符集、關(guān)鍵字、網(wǎng)頁(yè)描述信息、作者等內(nèi)容。
是一個(gè)輔助性標(biāo)簽，對(duì) HTML 頁(yè)面可以進(jìn)行很多方面的特性的設(shè)置。下面，主要介紹如何使用 來(lái)設(shè)置頁(yè)面字符集、關(guān)鍵字和描述信息。
①使用 設(shè)置頁(yè)面字符集
標(biāo)簽可以設(shè)置頁(yè)面內(nèi)容所使用的字符編碼，瀏覽器會(huì)據(jù)此來(lái)調(diào)用相應(yīng)的字符編碼顯示頁(yè)面內(nèi)容和標(biāo)題。當(dāng)頁(yè)面沒(méi)有設(shè)置字符集時(shí)，瀏覽器會(huì)使用默認(rèn)的字符編碼顯示。
簡(jiǎn)體中文操作系統(tǒng)下，IE 瀏覽器的默認(rèn)字符編碼是 GB2312，Chrome 瀏覽器默認(rèn)字符編碼是 GBK。所以當(dāng)頁(yè)面字符集設(shè)置不正確或沒(méi)有設(shè)置時(shí)，文檔的編碼和頁(yè)面內(nèi)容的編碼有可能不一致，此時(shí)將導(dǎo)致頁(yè)面內(nèi)容和標(biāo)題顯示亂碼。
在 HTML 頁(yè)面中，常用的字符編碼是“utf-8” “utf-8”又叫“萬(wàn)國(guó)碼”
它涵蓋了地球上幾乎所有地區(qū)的文字。我們也可以把它看成是一個(gè)世界語(yǔ)言的“翻譯官”。有了“utf-8”，你可以在 HTML
頁(yè)面上寫(xiě)中文、英文、韓文等語(yǔ)言的內(nèi)容。默認(rèn)情況下，HTML
文檔的編碼也是“utf-8”。這就使文檔編碼和頁(yè)面內(nèi)容的編碼保持了一致，這樣的頁(yè)面在世界上幾乎所有地區(qū)都能正常顯示。
標(biāo)簽設(shè)置字符集有兩種格式，一種是 HTML5 版本的格式，一種是 HTML5 以下版本的格式，基本語(yǔ)法如下。
HTML4/XHTML 設(shè)置格式：
HTML5 對(duì)字符集的設(shè)置作了簡(jiǎn)化，格式如下：
使用 設(shè)置頁(yè)面字符集的示例如下
【示例 1-2】HTML 頁(yè)面字符集設(shè)置
網(wǎng)頁(yè)字符集設(shè)置
妙味課堂－ www.miaov.com
上述代碼在 HTML 頁(yè)面的頭部區(qū)域使用 設(shè)置頁(yè)面的字符編碼為“utf-8”，在 Chrome 瀏覽器中運(yùn)行的結(jié)果如圖 1-23 所示。
將示例 1-2 中的 標(biāo)簽去掉后，再在 Chrome 瀏覽器中運(yùn)行，結(jié)果如圖 1-24 所示。
對(duì)比圖 1-23 和圖 1-24，可見(jiàn)頁(yè)面字符集設(shè)置的重要性。
②使用 設(shè)置關(guān)鍵字
關(guān)鍵字是為了便于搜索引擎搜索而設(shè)置的，用戶(hù)在網(wǎng)頁(yè)中是看不到關(guān)鍵字的。
它的作用主要體現(xiàn)在搜索引擎優(yōu)化。對(duì)于 SEO 優(yōu)化而言，關(guān)鍵字起到畫(huà)龍點(diǎn)睛的作用。
為提高網(wǎng)頁(yè)在搜索引擎中被搜索到的概率，可以設(shè)定多個(gè)與網(wǎng)頁(yè)主題相關(guān)的關(guān)鍵字。需注意的是，雖然設(shè)定多個(gè)關(guān)鍵字可提高被搜索到的幾率，但目前大多數(shù)的搜索引擎在檢索時(shí)都會(huì)限制關(guān)鍵字的數(shù)量，一般 10 個(gè)以?xún)?nèi)關(guān)鍵字比較合理，關(guān)鍵字多了會(huì)分散關(guān)鍵字優(yōu)化，反倒影響排名。
關(guān)鍵字設(shè)置語(yǔ)法如下：
語(yǔ)法說(shuō)明：關(guān)鍵字之間可以使用逗號(hào)，也可以使用空格等符號(hào)。示例代碼如下：
③使用 設(shè)置網(wǎng)頁(yè)描述信息
網(wǎng)頁(yè)的描述信息主要用于概述性地描述頁(yè)面的主要內(nèi)容，是對(duì)關(guān)鍵詞的補(bǔ)充性描述，當(dāng)描述信息包含部分關(guān)鍵字時(shí)，會(huì)作為搜索結(jié)果返回給用戶(hù)。
像關(guān)鍵字一樣，搜索引擎對(duì)描述信息的字?jǐn)?shù)也有限制，一般允許 70~100 字，所以描述信息的內(nèi)容應(yīng)盡量簡(jiǎn)明扼要。
描述信息設(shè)置語(yǔ)法如下：
示例代碼如下：
從
和 <meta> 兩個(gè)標(biāo)簽的介紹中，可以看到，標(biāo)題、網(wǎng)頁(yè)描述信息以及關(guān)鍵詞對(duì) SEO 有著很大的作用，搜索引擎之所以能搜到網(wǎng)站，全都是標(biāo)題、網(wǎng)頁(yè)描述信息和關(guān)鍵詞的功勞，所以我們必須做好標(biāo)題、描述標(biāo)簽、關(guān)鍵詞的設(shè)置與優(yōu)化。下面的示例演示了如何使用標(biāo)題、網(wǎng)頁(yè)描述信息和關(guān)鍵詞進(jìn)行網(wǎng)頁(yè)搜索。</p>
<p>【示例 1-3】使用標(biāo)題和網(wǎng)頁(yè)描述信息實(shí)現(xiàn)網(wǎng)頁(yè)的搜索。</p>
<pre><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content=" 妙味課堂是北京最資深的前端開(kāi)發(fā)培訓(xùn)機(jī)構(gòu)，妙味課堂擁有系統(tǒng)的 JavaScript、HTML5、CSS3、移動(dòng)開(kāi)發(fā)、遠(yuǎn)程培訓(xùn)等課程，并錄制成最系統(tǒng)的前端開(kāi)發(fā)視頻教程，妙味課堂推出的 VIP 前端學(xué)習(xí)平臺(tái)已經(jīng)成為學(xué)習(xí)氛圍最濃郁的前端學(xué)習(xí)圈 ">
<meta name="keywords" content="JavaScript 遠(yuǎn)程培訓(xùn) ,JS 遠(yuǎn)程培訓(xùn) ,JavaScript 培訓(xùn) ,JS 培訓(xùn) ,JavaScript
教程 ,HTML5 培訓(xùn) ,CSS3 培訓(xùn) , 北京前端培訓(xùn) , 移動(dòng)端培訓(xùn) , 北京移動(dòng)端培訓(xùn) , 北京 JS 培訓(xùn) , 北京 JavaScript 培訓(xùn) ,北京 HTML5 培訓(xùn) ">
<title> 首頁(yè)－妙味課堂 www.miaov.com
……
上述代碼中的標(biāo)題中帶有了關(guān)鍵字“妙味課堂”，所以當(dāng)用戶(hù)在百度搜索框中輸入“妙味課堂”時(shí)會(huì)搜索到妙味課堂頁(yè)面，同時(shí)在返回的搜索結(jié)果中，會(huì)以“首頁(yè)－妙味課堂 www.miaov.com”作為搜索結(jié)果的標(biāo)題，而返回的搜索結(jié)果描述信息則是上述代碼中設(shè)置的網(wǎng)頁(yè)描述信息，如圖 1-25 所示。
圖 1-25 是使用關(guān)鍵詞搜索信息，同樣可以搜索到圖 1-26 的結(jié)果，但排名沒(méi)有使用標(biāo)題中的關(guān)鍵字進(jìn)行搜索時(shí)靠前。
六 頁(yè)面主體內(nèi)容
body（身體，主體）代表了頁(yè)面的主體部分，它是放置頁(yè)面內(nèi)容的地方，所有需要在瀏覽器窗口中顯示的內(nèi)容都需要放置在
標(biāo)簽對(duì)之間。用戶(hù)可以通過(guò)瀏覽器看到寫(xiě)在 標(biāo)簽中的內(nèi)容。
【示例 1-4】
標(biāo)簽的使用
主體標(biāo)簽的使用示例
吼吼，好厲害，這是我們第一個(gè) HTML 頁(yè)面
當(dāng)打開(kāi)瀏覽器運(yùn)行上述代碼時(shí)就會(huì)發(fā)現(xiàn)，瀏覽器上會(huì)顯示書(shū)寫(xiě)的文本，如圖 1-27 所示。
以上就是 HTML 基本結(jié)構(gòu)中標(biāo)簽的含義及使用介紹，通過(guò)觀(guān)察這些基本的標(biāo)簽，可以總結(jié)出標(biāo)簽的一些特點(diǎn)，如下所述。
① 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 。
② 標(biāo)簽通常是成對(duì)出現(xiàn)的（稱(chēng)為雙標(biāo)簽），有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。開(kāi)始標(biāo)簽使用 < 標(biāo)簽名 > 表示，結(jié)束標(biāo)簽使用 表示，比如 。
③ 也有多帶帶呈現(xiàn)的標(biāo)簽（稱(chēng)為單標(biāo)簽），比如 。
④ 在開(kāi)始標(biāo)簽中可以包含若干個(gè)屬性。每個(gè)屬性使用：屬性名 =“屬性值”的格式進(jìn)行設(shè)置，結(jié)束標(biāo)簽不包含任何屬性。HTML 屬性表示標(biāo)簽所具有的一些特性。比如標(biāo)簽的形狀、顏色、用途等特性。比如 標(biāo)簽中的 charset="utf-8" “charset”就是標(biāo)簽的一個(gè)屬性，而“utf-8 ”則是它的值。
⑤ 如果是雙標(biāo)簽的話(huà)，內(nèi)容出現(xiàn)在兩個(gè)標(biāo)簽之間，比如
內(nèi)容 。
⑥ 如果是單標(biāo)簽的話(huà)，內(nèi)容在標(biāo)簽屬性中賦值，比如后面將學(xué)到的 img 圖片標(biāo)簽，圖片地址就出現(xiàn)在 src 屬性中：。
⑦ 標(biāo)簽不區(qū)分大小寫(xiě)，但是為了建立一個(gè)良好的編碼習(xí)慣，標(biāo)簽請(qǐng)使用小寫(xiě)。
根據(jù)上面總結(jié)的標(biāo)簽特點(diǎn)，可得到如下所示的標(biāo)簽設(shè)置格式：
雙標(biāo)簽：< 標(biāo)簽名稱(chēng) 屬性 1=" 屬性值 1" 屬性 2=" 屬性值 2" …> …
單標(biāo)簽：< 標(biāo)簽名稱(chēng) 屬性 1=" 屬性值 1" 屬性 2=" 屬性值 2" …/>
標(biāo)簽嵌套關(guān)系
在 HTML 結(jié)構(gòu)中，標(biāo)簽與標(biāo)簽之間只存在兩種關(guān)系：嵌套關(guān)系和并列關(guān)系。
01嵌套關(guān)系
嵌套關(guān)系又稱(chēng)為包含關(guān)系，可以通俗記憶為“父子級(jí)關(guān)系”。
在 1.4.1 小節(jié)中，我們發(fā)現(xiàn) 標(biāo)簽和
標(biāo)簽都存在 <head> 標(biāo)簽中，此時(shí) <head> 標(biāo)簽與 <meta><br>標(biāo)簽的關(guān)系以及 <head> 標(biāo)簽和 <title> 標(biāo)簽的關(guān)系，體現(xiàn)的就是嵌套關(guān)系也是父子級(jí)關(guān)系，如圖 1-28 所示。</p>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbjNut?w=600&h=464");</script></p>
<p><strong>02并列關(guān)系</strong></p>
<pre>并列關(guān)系也就是常說(shuō)的同級(jí)關(guān)系，也可以通俗記憶為“兄弟關(guān)系”。
</pre>
<p><meta> 標(biāo)簽和 <title> 標(biāo)簽都有一個(gè)共同的“父級(jí)”—— <head> 標(biāo)簽。所以 <meta> 標(biāo)簽和 <title> 標(biāo)簽的并列關(guān)系也叫作“兄弟關(guān)系”，如圖 1-29 所示。</p>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbjNuY?w=600&h=478");</script></p>
<p>這兩種關(guān)系在以后的示例中會(huì)經(jīng)常用到，大家一定要對(duì)這兩種關(guān)系有所了解。</p>
<p><strong>思考：</strong></p>
<p>在 HTML 基本結(jié)構(gòu)中還有哪些父子級(jí)關(guān)系和兄弟關(guān)系？</p>
</div>
<div id="dnkpnhlp" class="mt-64 tags-seach" >
<div id="dnkpnhlp" class="tags-info">
<a style="width:120px;" title="云服務(wù)器" href="http://www.ezyhdfw.cn/site/active/kuaijiesale.html?ytag=seo">云服務(wù)器</a>
<a style="width:120px;" title="GPU云服務(wù)器" href="http://www.ezyhdfw.cn/site/product/gpu.html">GPU云服務(wù)器</a>
<a style="width:120px;" title="html提交一個(gè)頁(yè)面" href="http://www.ezyhdfw.cn/yun/tag/htmltijiaoyigeyemian/">html提交一個(gè)頁(yè)面</a>
<a style="width:120px;" title="第一個(gè)數(shù)據(jù)" href="http://www.ezyhdfw.cn/yun/tag/diyigeshuju/">第一個(gè)數(shù)據(jù)</a>
<a style="width:120px;" title="第一個(gè)頂級(jí)域名" href="http://www.ezyhdfw.cn/yun/tag/diyigedingjiyuming/">第一個(gè)頂級(jí)域名</a>
<a style="width:120px;" title="php第一個(gè)字符" href="http://www.ezyhdfw.cn/yun/tag/phpdiyigezifu/">php第一個(gè)字符</a>
</div>
</div>
<div id="dnkpnhlp" class="entry-copyright mb-30">
<p class="mb-15"> 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。</p>
<p>轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108738.html</p>
</div>
<ul class="pre-next-page">
<li id="dnkpnhlp" class="ellipsis"><a class="hpf" href="http://www.ezyhdfw.cn/yun/108737.html">上一篇：原生js實(shí)現(xiàn)手機(jī)端導(dǎo)航滑動(dòng)效果</a></li>
<li id="dnkpnhlp" class="ellipsis"><a class="hpf" href="http://www.ezyhdfw.cn/yun/108739.html">下一篇：Wuss Weapp 微信小程序 UI 組件庫(kù)</a></li>
</ul>
</div>
<div id="dnkpnhlp" class="about_topicone-mid">
<h3 class="top-com-title mb-0"><span data-id="0">相關(guān)文章</span></h3>
<ul class="com_white-left-mid atricle-list-box">
<li>
<div id="dnkpnhlp" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/99449.html"><b><em>前端</em><em>修煉</em><em>の道</em> | <div> 標(biāo)簽簡(jiǎn)介</b></a></h2>
<p class="ellipsis2 good">摘要：標(biāo)簽是最基本的，同時(shí)也是最常用的標(biāo)簽。該標(biāo)簽是一個(gè)雙標(biāo)簽，出現(xiàn)在主體區(qū)域中，主要作為一個(gè)容器標(biāo)簽來(lái)使用，在標(biāo)簽中可以包含除之外的所有主體標(biāo)簽。因此，的主要作用就是用來(lái)對(duì)結(jié)構(gòu)進(jìn)行布局。示例標(biāo)簽的使用上述代碼中，分別創(chuàng)建了兩個(gè)塊級(jí)元素。
showImg(https://segmentfault.com/img/bVbj9Kn?w=900&h=383);
標(biāo)簽是最基本的，同時(shí)也是最常用的標(biāo)...</p>
<div id="dnkpnhlp" class="com_white-left-info">
<div id="dnkpnhlp" class="com_white-left-infol">
<a href="http://www.ezyhdfw.cn/yun/u-795.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/07/small_000000795.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">vvpale</span></a>
<time datetime="">2019-08-23 13:43</time>
<span><i class="fa fa-commenting"></i>評(píng)論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="dnkpnhlp" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/99037.html"><b><em>前端</em><em>修煉</em><em>の道</em> | 如何成為一名合格<em>前端</em>開(kāi)發(fā)工程師？</b></a></h2>
<p class="ellipsis2 good">摘要：上期回顧在上一節(jié)我們已了解前端開(kāi)發(fā)是做什么的，現(xiàn)在的問(wèn)題是，如何才能成為一名合格的前端開(kāi)發(fā)工程師相信這個(gè)問(wèn)題是大家比較關(guān)心的。
showImg(https://segmentfault.com/img/bVbi9ks?w=900&h=383);上期回顧
在上一節(jié)我們已了解前端開(kāi)發(fā)是做什么的，現(xiàn)在的問(wèn)題是，如何才能成為一名合格的前端開(kāi)發(fā)工程師？ 相信這個(gè)問(wèn)題是大家比較關(guān)心的。
前端開(kāi)發(fā)工...</p>
<div id="dnkpnhlp" class="com_white-left-info">
<div id="dnkpnhlp" class="com_white-left-infol">
<a href="http://www.ezyhdfw.cn/yun/u-500.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/05/small_000000500.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">Jackwoo</span></a>
<time datetime="">2019-08-23 12:50</time>
<span><i class="fa fa-commenting"></i>評(píng)論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="dnkpnhlp" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/99868.html"><b><em>前端</em><em>修煉</em> <em>の道</em> | 帶你走進(jìn)迷人的 CSS 世界</b></a></h2>
<p class="ellipsis2 good">摘要：每條屬性聲明實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)元素進(jìn)行某種特定格式的設(shè)置，由一個(gè)屬性和一個(gè)值組成，屬性和值之間使用冒號(hào)連接，不同聲明之間用分號(hào)分隔，所有屬性聲明放到一對(duì)大括號(hào)中。
showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383);
showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...</p>
<div id="dnkpnhlp" class="com_white-left-info">
<div id="dnkpnhlp" class="com_white-left-infol">
<a href="http://www.ezyhdfw.cn/yun/u-1684.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/16/small_000001684.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">shiweifu</span></a>
<time datetime="">2019-08-23 13:58</time>
<span><i class="fa fa-commenting"></i>評(píng)論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="dnkpnhlp" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/100457.html"><b><em>前端</em><em>修煉</em><em>の道</em> | 你知道哪些復(fù)合選擇器？</b></a></h2>
<p class="ellipsis2 good">摘要：后代選擇器后代選擇器又稱(chēng)包含選擇器，用于選擇指定元素的后代元素。這些選擇器既可以是基本選擇器，也可以是一個(gè)復(fù)合選擇器。注意元素選擇器及和屬性選擇器之間沒(méi)有空格。
showImg(https://segmentfault.com/img/bVblJEJ?w=900&h=383);
復(fù)合選擇器是通過(guò)基本選擇器進(jìn)行組合后構(gòu)成的，常用的復(fù)合選擇器有：
交集選擇器
并集選持器
后代選擇器
子元...</p>
<div id="dnkpnhlp" class="com_white-left-info">
<div id="dnkpnhlp" class="com_white-left-infol">
<a href="http://www.ezyhdfw.cn/yun/u-168.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/01/small_000000168.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">Java_oldboy</span></a>
<time datetime="">2019-08-23 14:20</time>
<span><i class="fa fa-commenting"></i>評(píng)論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="dnkpnhlp" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://www.ezyhdfw.cn/yun/75342.html"><b>2019 Java 全棧工程師進(jìn)階路線(xiàn)圖，一定要收藏</b></a></h2>
<p class="ellipsis2 good">摘要：結(jié)合我自己的經(jīng)驗(yàn)，我整理了一份全棧工程師進(jìn)階路線(xiàn)圖，給大家參考。乾坤大挪移第一層第一層心法，主要都是基本語(yǔ)法，程序設(shè)計(jì)入門(mén)，悟性高者十天半月可成，差一點(diǎn)的到個(gè)月也說(shuō)不準(zhǔn)。
技術(shù)更新日新月異，對(duì)于初入職場(chǎng)的同學(xué)來(lái)說(shuō)，經(jīng)常會(huì)困惑該往那個(gè)方向發(fā)展，這一點(diǎn)松哥是深有體會(huì)的。
我剛開(kāi)始學(xué)習(xí) Java 那會(huì)，最大的問(wèn)題就是不知道該學(xué)什么，以及學(xué)習(xí)的順序，我相信這也是很多初學(xué)者經(jīng)常面臨的問(wèn)題。?我...</p>
<div id="dnkpnhlp" class="com_white-left-info">
<div id="dnkpnhlp" class="com_white-left-infol">
<a href="http://www.ezyhdfw.cn/yun/u-328.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/03/small_000000328.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">wangdai</span></a>
<time datetime="">2019-08-16 18:34</time>
<span><i class="fa fa-commenting"></i>評(píng)論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="dnkpnhlp" class="topicone-box-wangeditor">
<h3 class="top-com-title mb-64"><span>發(fā)表評(píng)論</span></h3>
<div id="dnkpnhlp" class="xcp-publish-main flex_box_zd">
<div id="dnkpnhlp" class="unlogin-pinglun-box">
<a href="javascript:login()" class="grad">登陸后可評(píng)論</a>
</div> </div>
</div>
<div id="dnkpnhlp" class="site-box-content">
<div id="dnkpnhlp" class="site-content-title">
<h3 class="top-com-title mb-64"><span>0條評(píng)論</span></h3>
</div>
<div id="dnkpnhlp" class="pages"></ul></div>
</div>
</div>
<div id="dnkpnhlp" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right">
<div id="dnkpnhlp" class="">
<div id="dnkpnhlp" class="com_layuiright-box user-msgbox">
<a href="http://www.ezyhdfw.cn/yun/u-869.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/08/small_000000869.jpg" alt=""></a>
<h3><a href="http://www.ezyhdfw.cn/yun/u-869.html" rel="nofollow">JasonZhang</a></h3>
<h6>男<span>|</span>高級(jí)講師</h6>
<div id="dnkpnhlp" class="flex_box_zd user-msgbox-atten">
<a href="javascript:attentto_user(869)" id="attenttouser_869" class="grad follow-btn notfollow attention">我要關(guān)注</a>
<a href="javascript:login()" title="發(fā)私信" >我要私信</a>
</div>
<div id="dnkpnhlp" class="user-msgbox-list flex_box_zd">
<h3 class="hpf">TA的文章</h3>
<a href="http://www.ezyhdfw.cn/yun/ut-869.html" class="box_hxjz">閱讀更多</a>
</div>
<ul class="user-msgbox-ul">
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/123200.html">字節(jié)跳動(dòng)Python后端開(kāi)發(fā)崗，已拿offer</a></h3>
<p>閱讀 2308<span>·</span>2021-11-12 10:36</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/122930.html">UCloud雙11期間推薦新用戶(hù)達(dá)標(biāo)免費(fèi)送1年香港快杰型云服務(wù)器（2核4G2M）-老劉博客</a></h3>
<p>閱讀 2099<span>·</span>2021-11-09 09:49</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/122848.html">DogYun雙十一：動(dòng)態(tài)云主機(jī)6折,獨(dú)立服務(wù)器優(yōu)惠100元/月,充110送10元</a></h3>
<p>閱讀 2782<span>·</span>2021-11-04 16:12</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/122064.html">Namecheap：com/net注冊(cè)優(yōu)惠21%，多款域名年付0.99美元</a></h3>
<p>閱讀 1316<span>·</span>2021-10-09 09:57</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/114303.html">根據(jù)瀏覽器的工作原理整理前端知識(shí)體系</a></h3>
<p>閱讀 3383<span>·</span>2019-08-29 17:24</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/113167.html">webApp 頁(yè)面布局</a></h3>
<p>閱讀 2071<span>·</span>2019-08-29 15:12</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/112930.html">一個(gè)前端工作者的，這一年 ！</a></h3>
<p>閱讀 1450<span>·</span>2019-08-29 14:07</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/112218.html">手機(jī)端單行文字兩端對(duì)齊：用css偽類(lèi)實(shí)現(xiàn)</a></h3>
<p>閱讀 1439<span>·</span>2019-08-29 12:53</p></li>
</ul>
</div>
<!-- 文章詳情右側(cè)廣告-->
<div id="dnkpnhlp" class="com_layuiright-box">
<h6 class="top-com-title"><span>最新活動(dòng)</span></h6>
<div id="dnkpnhlp" class="com_adbox">
<div id="dnkpnhlp" class="layui-carousel" id="right-item">
<div carousel-item>
<div>
<a href="http://www.ezyhdfw.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow">
<img src="http://www.ezyhdfw.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服務(wù)器">
</a>
</div>
<div>
<a href="http://www.ezyhdfw.cn/site/product/gpu.html" rel="nofollow">
<img src="http://www.ezyhdfw.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務(wù)器">
</a>
</div>
</div>
</div>
</div> <!-- banner結(jié)束 -->
<div id="dnkpnhlp" class="adhtml">
</div>
<script>
$(function(){
$.ajax({
type: "GET",
url:"http://www.ezyhdfw.cn/yun/ad/getad/1.html",
cache: false,
success: function(text){
$(".adhtml").html(text);
}
});
})
</script> </div> </div>
</div>
</div>
</div>
</section>
<!-- wap拉出按鈕 -->
<div id="dnkpnhlp" class="site-tree-mobile layui-hide">
<i class="layui-icon layui-icon-spread-left"></i>
</div>
<!-- wap遮罩層 -->
<div id="dnkpnhlp" class="site-mobile-shade"></div>
<!--付費(fèi)閱讀 -->
<div class="dnkpnhlp" id="payread">
<div id="dnkpnhlp" class="layui-form-item">閱讀需要支付1元查看</div>
<div id="dnkpnhlp" class="layui-form-item"><button class="btn-right">支付并查看</button></div>
</div>
<script>
var prei=0;
$(".site-seo-depict pre").each(function(){
var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">','');
$(this).attr('data-clipboard-text',html).attr("id","pre"+prei);
$(this).html("").append("<code>"+html+"</code>");
prei++;
})
$(".site-seo-depict img").each(function(){
if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){
$(this).remove();
}
})
$("LINK[href*='style-49037e4d27.css']").remove();
$("LINK[href*='markdown_views-d7a94ec6ab.css']").remove();
layui.use(['jquery', 'layer','code'], function(){
$("pre").attr("class","layui-code");
$("pre").attr("lay-title","");
$("pre").attr("lay-skin","");
layui.code();
$(".layui-code-h3 a").attr("class","copycode").html("復(fù)制代碼 ").attr("onclick","copycode(this)");
});
function copycode(target){
var id=$(target).parent().parent().attr("id");
var clipboard = new ClipboardJS("#"+id);
clipboard.on('success', function(e) {
e.clearSelection();
alert("復(fù)制成功")
});
clipboard.on('error', function(e) {
alert("復(fù)制失敗")
});
}
//$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5));
</script>
<link rel="stylesheet" type="text/css" href="http://www.ezyhdfw.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
<script src="http://www.ezyhdfw.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script>
<script src="http://www.ezyhdfw.cn/yun/static/js/clipboard.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
function setcode(){
var _html='';
document.querySelectorAll('pre code').forEach((block) => {
var _tmptext=$.trim($(block).text());
if(_tmptext!=''){
_html=_html+_tmptext;
console.log(_html);
}
});
}
</script>
<script>
function payread(){
layer.open({
type: 1,
title:"付費(fèi)閱讀",
shadeClose: true,
content: $('#payread')
});
}
// 舉報(bào)
function jupao_tip(){
layer.open({
type: 1,
title:false,
shadeClose: true,
content: $('#jubao')
});
}
$(".getcommentlist").click(function(){
var _id=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
$("#articlecommentlist"+_id).toggleClass("hide");
var flag=$("#articlecommentlist"+_id).attr("dataflag");
if(flag==1){
flag=0;
}else{
flag=1;
//加載評(píng)論
loadarticlecommentlist(_id,_tid);
}
$("#articlecommentlist"+_id).attr("dataflag",flag);
})
$(".add-comment-btn").click(function(){
var _id=$(this).attr("dataid");
$(".formcomment"+_id).toggleClass("hide");
})
$(".btn-sendartcomment").click(function(){
var _aid=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
var _content=$.trim($(".commenttext"+_aid).val());
if(_content==''){
alert("評(píng)論內(nèi)容不能為空");
return false;
}
var touid=$("#btnsendcomment"+_aid).attr("touid");
if(touid==null){
touid=0;
}
addarticlecomment(_tid,_aid,_content,touid);
})
$(".button_agree").click(function(){
var supportobj = $(this);
var tid = $(this).attr("id");
$.ajax({
type: "GET",
url:"http://www.ezyhdfw.cn/yun/index.php?topic/ajaxhassupport/" + tid,
cache: false,
success: function(hassupport){
if (hassupport != '1'){
$.ajax({
type: "GET",
cache:false,
url: "http://www.ezyhdfw.cn/yun/index.php?topic/ajaxaddsupport/" + tid,
success: function(comments) {
supportobj.find("span").html(comments+"人贊");
}
});
}else{
alert("您已經(jīng)贊過(guò)");
}
}
});
});
function attenquestion(_tid,_rs){
$.ajax({
//提交數(shù)據(jù)的類(lèi)型 POST GET
type:"POST",
//提交的網(wǎng)址
url:"http://www.ezyhdfw.cn/yun/favorite/topicadd.html",
//提交的數(shù)據(jù)
data:{tid:_tid,rs:_rs},
//返回?cái)?shù)據(jù)的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//在請(qǐng)求之前調(diào)用的函數(shù)
beforeSend:function(){},
//成功返回之后調(diào)用的函數(shù)
success:function(data){
var data=eval("("+data+")");
console.log(data)
if(data.code==2000){
layer.msg(data.msg,function(){
if(data.rs==1){
//取消收藏
$(".layui-layer-tips").attr("data-tips","收藏文章");
$(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>');
}
if(data.rs==0){
//收藏成功
$(".layui-layer-tips").attr("data-tips","已收藏文章");
$(".layui-layer-tips").html('<i class="fa fa-heart"></i>')
}
})
}else{
layer.msg(data.msg)
}
} ,
//調(diào)用執(zhí)行后調(diào)用的函數(shù)
complete: function(XMLHttpRequest, textStatus){
postadopt=true;
},
//調(diào)用出錯(cuò)執(zhí)行的函數(shù)
error: function(){
//請(qǐng)求出錯(cuò)處理
postadopt=false;
}
});
}
</script>
<footer>
<div id="dnkpnhlp" class="layui-container">
<div id="dnkpnhlp" class="flex_box_zd">
<div id="dnkpnhlp" class="left-footer">
<h6><a href="http://www.ezyhdfw.cn/"><img src="http://www.ezyhdfw.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （優(yōu)刻得科技股份有限公司）"></a></h6>
<p>UCloud （優(yōu)刻得科技股份有限公司）是中立、安全的云計(jì)算服務(wù)平臺(tái)，堅(jiān)持中立，不涉足客戶(hù)業(yè)務(wù)領(lǐng)域。公司自主研發(fā)IaaS、PaaS、大數(shù)據(jù)流通平臺(tái)、AI服務(wù)平臺(tái)等一系列云計(jì)算產(chǎn)品，并深入了解互聯(lián)網(wǎng)、傳統(tǒng)企業(yè)在不同場(chǎng)景下的業(yè)務(wù)需求，提供公有云、混合云、私有云、專(zhuān)有云在內(nèi)的綜合性行業(yè)解決方案。</p>
</div>
<div id="dnkpnhlp" class="right-footer layui-hidemd">
<ul class="flex_box_zd">
<li>
<h6>UCloud與云服務(wù)</h6>
<p><a href="http://www.ezyhdfw.cn/site/about/intro/">公司介紹</a></p>
<p><a >加入我們</a></p>
<p><a href="http://www.ezyhdfw.cn/site/ucan/onlineclass/">UCan線(xiàn)上公開(kāi)課</a></p>
<p><a href="http://www.ezyhdfw.cn/site/solutions.html" >行業(yè)解決方案</a></p> <p><a href="http://www.ezyhdfw.cn/site/pro-notice/">產(chǎn)品動(dòng)態(tài)</a></p>
</li>
<li>
<h6>友情鏈接</h6> <p><a >GPU算力平臺(tái)</a></p> <p><a >UCloud私有云</a></p>
<p><a >SurferCloud</a></p> <p><a >工廠(chǎng)仿真軟件</a></p> <p><a >AI繪畫(huà)</a></p>
<p><a >Wavespeed AI</a></p>
</li>
<li>
<h6>社區(qū)欄目</h6>
<p><a href="http://www.ezyhdfw.cn/yun/column/index.html">專(zhuān)欄文章</a></p>
<p><a href="http://www.ezyhdfw.cn/yun/udata/">專(zhuān)題地圖</a></p> </li>
<li>
<h6>常見(jiàn)問(wèn)題</h6>
<p><a href="http://www.ezyhdfw.cn/site/ucsafe/notice.html" >安全中心</a></p>
<p><a href="http://www.ezyhdfw.cn/site/about/news/recent/" >新聞動(dòng)態(tài)</a></p>
<p><a href="http://www.ezyhdfw.cn/site/about/news/report/">媒體動(dòng)態(tài)</a></p> <p><a href="http://www.ezyhdfw.cn/site/cases.html">客戶(hù)案例</a></p>
<p><a href="http://www.ezyhdfw.cn/site/notice/">公告</a></p>
</li>
<li>
<span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="優(yōu)刻得"></span>
<p>掃掃了解更多</p></div>
</div>
<div id="dnkpnhlp" class="copyright">Copyright ? 2012-2025 UCloud 優(yōu)刻得科技股份有限公司<i>｜</i><a rel="nofollow" >滬公網(wǎng)安備 31011002000058號(hào)</a><i>｜</i><a rel="nofollow" ></a> 滬ICP備12020087號(hào)-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://#/hm.js?290c2650b305fc9fff0dbdcafe48b59d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DZSMXQ3P9N');
</script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></div>
</div>
</footer>
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.ezyhdfw.cn/" title="亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站
">亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站
</a>
<div class="friend-links">
</div>
</div>
</footer>
<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="dzxf1" class="pl_css_ganrao" style="display: none;"><thead id="dzxf1"></thead><span id="dzxf1"><style id="dzxf1"><kbd id="dzxf1"><tbody id="dzxf1"></tbody></kbd></style></span><tbody id="dzxf1"></tbody><legend id="dzxf1"><track id="dzxf1"><dfn id="dzxf1"><input id="dzxf1"></input></dfn></track></legend><kbd id="dzxf1"></kbd><optgroup id="dzxf1"><delect id="dzxf1"><p id="dzxf1"></p></delect></optgroup><rt id="dzxf1"><form id="dzxf1"><delect id="dzxf1"></delect></form></rt><tt id="dzxf1"></tt><sub id="dzxf1"><p id="dzxf1"></p></sub><style id="dzxf1"><ins id="dzxf1"><legend id="dzxf1"></legend></ins></style><optgroup id="dzxf1"></optgroup><wbr id="dzxf1"><strong id="dzxf1"></strong></wbr><label id="dzxf1"></label><meter id="dzxf1"><sup id="dzxf1"><option id="dzxf1"><form id="dzxf1"></form></option></sup></meter><acronym id="dzxf1"></acronym><label id="dzxf1"><mark id="dzxf1"></mark></label><sub id="dzxf1"></sub><nav id="dzxf1"></nav><em id="dzxf1"></em><legend id="dzxf1"><video id="dzxf1"><address id="dzxf1"><menu id="dzxf1"></menu></address></video></legend><legend id="dzxf1"></legend><cite id="dzxf1"><noframes id="dzxf1"><sub id="dzxf1"></sub></noframes></cite><dl id="dzxf1"><optgroup id="dzxf1"></optgroup></dl><span id="dzxf1"><optgroup id="dzxf1"><ins id="dzxf1"><th id="dzxf1"></th></ins></optgroup></span><i id="dzxf1"></i><s id="dzxf1"><abbr id="dzxf1"></abbr></s><ol id="dzxf1"><form id="dzxf1"><samp id="dzxf1"></samp></form></ol><wbr id="dzxf1"><strong id="dzxf1"></strong></wbr><form id="dzxf1"><progress id="dzxf1"><label id="dzxf1"><button id="dzxf1"></button></label></progress></form><thead id="dzxf1"><nobr id="dzxf1"><pre id="dzxf1"></pre></nobr></thead><label id="dzxf1"></label><th id="dzxf1"><thead id="dzxf1"><object id="dzxf1"></object></thead></th><mark id="dzxf1"><dl id="dzxf1"></dl></mark><noscript id="dzxf1"><meter id="dzxf1"></meter></noscript><optgroup id="dzxf1"></optgroup><track id="dzxf1"></track><wbr id="dzxf1"></wbr><dl id="dzxf1"><noframes id="dzxf1"><blockquote id="dzxf1"><p id="dzxf1"></p></blockquote></noframes></dl><legend id="dzxf1"><track id="dzxf1"></track></legend><ruby id="dzxf1"></ruby><span id="dzxf1"><optgroup id="dzxf1"><ins id="dzxf1"><legend id="dzxf1"></legend></ins></optgroup></span><table id="dzxf1"><font id="dzxf1"></font></table><dfn id="dzxf1"></dfn><nobr id="dzxf1"><samp id="dzxf1"></samp></nobr><label id="dzxf1"></label><xmp id="dzxf1"><style id="dzxf1"></style></xmp><label id="dzxf1"><ul id="dzxf1"></ul></label><dfn id="dzxf1"><em id="dzxf1"></em></dfn><bdo id="dzxf1"></bdo><optgroup id="dzxf1"><em id="dzxf1"></em></optgroup><rt id="dzxf1"><form id="dzxf1"><meter id="dzxf1"></meter></form></rt><ins id="dzxf1"></ins><form id="dzxf1"><progress id="dzxf1"></progress></form><tt id="dzxf1"></tt><noscript id="dzxf1"><pre id="dzxf1"><sup id="dzxf1"></sup></pre></noscript><i id="dzxf1"></i><span id="dzxf1"></span><abbr id="dzxf1"></abbr><kbd id="dzxf1"></kbd><menu id="dzxf1"></menu><thead id="dzxf1"><tbody id="dzxf1"><ins id="dzxf1"></ins></tbody></thead><td id="dzxf1"><label id="dzxf1"></label></td><option id="dzxf1"></option><dfn id="dzxf1"><strong id="dzxf1"></strong></dfn><dl id="dzxf1"><noframes id="dzxf1"><sub id="dzxf1"><p id="dzxf1"></p></sub></noframes></dl><video id="dzxf1"><tr id="dzxf1"><object id="dzxf1"></object></tr></video><thead id="dzxf1"></thead><tt id="dzxf1"><strike id="dzxf1"></strike></tt><dfn id="dzxf1"></dfn><ul id="dzxf1"></ul><object id="dzxf1"></object><sub id="dzxf1"></sub><pre id="dzxf1"><ul id="dzxf1"><big id="dzxf1"></big></ul></pre><legend id="dzxf1"><dfn id="dzxf1"><pre id="dzxf1"></pre></dfn></legend><dd id="dzxf1"><code id="dzxf1"></code></dd><address id="dzxf1"></address><option id="dzxf1"></option><p id="dzxf1"></p><menu id="dzxf1"><b id="dzxf1"><legend id="dzxf1"><small id="dzxf1"></small></legend></b></menu><form id="dzxf1"><pre id="dzxf1"><output id="dzxf1"><div id="dzxf1"></div></output></pre></form><li id="dzxf1"><menuitem id="dzxf1"><ol id="dzxf1"><nobr id="dzxf1"></nobr></ol></menuitem></li><form id="dzxf1"><input id="dzxf1"><small id="dzxf1"></small></input></form><rt id="dzxf1"><form id="dzxf1"></form></rt><table id="dzxf1"><delect id="dzxf1"><wbr id="dzxf1"></wbr></delect></table><progress id="dzxf1"><strong id="dzxf1"><ruby id="dzxf1"></ruby></strong></progress><legend id="dzxf1"></legend><strike id="dzxf1"></strike><button id="dzxf1"><div id="dzxf1"></div></button><menuitem id="dzxf1"><fieldset id="dzxf1"><th id="dzxf1"></th></fieldset></menuitem><tbody id="dzxf1"><sup id="dzxf1"><strike id="dzxf1"></strike></sup></tbody><optgroup id="dzxf1"></optgroup><em id="dzxf1"><p id="dzxf1"></p></em><small id="dzxf1"></small><form id="dzxf1"></form><cite id="dzxf1"></cite><listing id="dzxf1"><sup id="dzxf1"><rt id="dzxf1"></rt></sup></listing><sup id="dzxf1"><ol id="dzxf1"></ol></sup><var id="dzxf1"><acronym id="dzxf1"></acronym></var><form id="dzxf1"></form><tbody id="dzxf1"></tbody></div>
<script src="http://www.ezyhdfw.cn/yun/static/theme/ukd/js/common.js"></script>
<<script type="text/javascript">
$(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%");
</script>
</html> 