摘要：可能一些有心的開發(fā)者會(huì)把的寫的語(yǔ)義明白些，比如導(dǎo)航欄的用，邊欄的用。
0. HTML5中最看重的理念“語(yǔ)義化”相比HTML有什么區(qū)別？
在之前翻譯的《如何寫出高效率的HTML》一文中提到了一些關(guān)于語(yǔ)義化標(biāo)簽的相關(guān)內(nèi)容，這里搜集整理了一些語(yǔ)義化標(biāo)簽方面的問(wèn)題和解答，以供大家參考。
簡(jiǎn)單來(lái)說(shuō)就是：描述內(nèi)容的含義(meaning)
比如說(shuō)
標(biāo)簽就是段落的意思，在HTML5中所有的標(biāo)簽都有它書面上的語(yǔ)義。而沒有語(yǔ)義的標(biāo)簽在HTML中有，在HTML5中就沒有了，比如"塊級(jí)元素" 與"行內(nèi)元素" 變成了“外圍內(nèi)容” 與“短語(yǔ)內(nèi)容” 。"語(yǔ)義" 與"顯示" 分離，HTML5代碼中出現(xiàn)的標(biāo)簽都是讓開發(fā)人員或?yàn)g覽器一看就知道是干什么用的東西，至于顯示效果那是CSS3（Cascading Style Sheet）需要干的事情，所以在HTML5中這個(gè)兩個(gè)好基友終于距離產(chǎn)生了美。
可以提升可訪問(wèn)性與互操作性（兼容性會(huì)更好）；
改進(jìn)搜索引擎的優(yōu)化；
一般來(lái)說(shuō)可以讓HTML文件更??；
讓代碼更好唯護(hù)，與CSS3的關(guān)系更和諧。
1. HTML5中的
第一，對(duì)這個(gè)幾個(gè)標(biāo)簽的理解：
HTML5的設(shè)計(jì)者們可以說(shuō)是用心良苦呀，他們認(rèn)真分析HTML4.0中出來(lái)的問(wèn)題，也就是當(dāng)下最流行的寫頁(yè)面的方式就是"DIV+CSS" ，我們也不難發(fā)現(xiàn)只要用到這個(gè)就可以把頁(yè)面寫即簡(jiǎn)單又漂亮。沒有繁瑣的標(biāo)簽在里面，需要什么功能就去加標(biāo)簽就可以了。
而是什么呢？這個(gè)我們下一個(gè)問(wèn)題詳細(xì)說(shuō)明。問(wèn)題的關(guān)鍵在于
沒有任何的語(yǔ)義，也就是說(shuō)他要干的事是什么全憑開發(fā)者說(shuō)了算。這就造成了嚴(yán)重的開發(fā)規(guī)范不統(tǒng)一，也就是說(shuō)頁(yè)面的導(dǎo)航欄是
，頁(yè)面的邊欄也是
，唯一區(qū)分它們的就是
id ?？赡芤恍┯行牡拈_發(fā)者會(huì)把
的
id 寫的語(yǔ)義明白些，比如：導(dǎo)航欄的
id 用
，邊欄的
id 用
。這樣的寫法對(duì)其他的開發(fā)者看來(lái)還是很好的，因?yàn)榭吹?b>id就可以知道這個(gè)
是干什么用的了。但是還是有一大部分的開發(fā)者會(huì)這么寫，如：導(dǎo)航欄的
id 用
div1 ，邊欄的
id 用
div2 ，這樣的寫法對(duì)用戶來(lái)說(shuō)的可能沒有什么區(qū)別，因?yàn)殚_發(fā)者知道他們都代表什么，而對(duì)其他的開發(fā)者來(lái)說(shuō)這真的是滅頂之災(zāi)，用英文來(lái)說(shuō)就是“reading the fucking code”，而對(duì)開發(fā)者本身可能時(shí)間一長(zhǎng)也不知道是什么意思了，但是下次開發(fā)的時(shí)候他們一定還有人是這么干的；
回到正題，經(jīng)過(guò)上面的介紹大家也許已經(jīng)知道為什么在HTML5引用上面的標(biāo)簽了吧，就是為了解決開發(fā)規(guī)范不統(tǒng)一的問(wèn)題同時(shí)也為了增強(qiáng)語(yǔ)義，有人也許會(huì)問(wèn)為什么HTML5為什么那么在意語(yǔ)義？用了上面的標(biāo)簽可以說(shuō)帶來(lái)什么好處呢？這個(gè)答案用一個(gè)非常簡(jiǎn)單的話來(lái)說(shuō)的那就是：為了統(tǒng)一規(guī)范與新功能的出現(xiàn)。
他們這些標(biāo)簽功能就是代替功能中的一部分，他們沒有任何的默認(rèn)樣式，除了會(huì)讓文本另起一行外；
第二，這幾個(gè)標(biāo)簽的語(yǔ)義與用法：
特別提示：
HTML5規(guī)范不推薦對(duì)有輔助性的頁(yè)腳鏈接用
HTML5中不允許將
特別提示：
同樣不能用在
他與
特別提示：
如果使用多個(gè)
如果是與文章的主要內(nèi)容有關(guān)系的圖像需要用
特別提示：
頁(yè)腳并不一定是要位于所在元素的末尾，不過(guò)通常是這樣的；
他不可以放在標(biāo)簽中，也不可以相互嵌套，或是在
2. HTML5通用的容器、
在HTML5中的生存含義？
這個(gè)標(biāo)簽在很久很久以前就已經(jīng)出現(xiàn)在HTML中了，他的全拼是（division）。而在HTML5中的很多的新標(biāo)簽都是他的功能的統(tǒng)一定義而已，因?yàn)?b>
本身沒有任何的語(yǔ)義，但是可以對(duì)他增加CSS樣式，這樣就可以很好的為頁(yè)面做出一些我們理想中的效果。那么在HTML5為什么他還存在呢？那就是因?yàn)?，在某些時(shí)候你會(huì)發(fā)現(xiàn)你用HTML5中的任何一個(gè)標(biāo)簽都不合適你現(xiàn)在需要的語(yǔ)義，所以在這個(gè)時(shí)候就需要用到
這個(gè)標(biāo)簽了。既然說(shuō)到
，那么也要說(shuō)說(shuō)與他相對(duì)應(yīng)的
這個(gè)標(biāo)簽，他也是一個(gè)沒有任何語(yǔ)義的標(biāo)簽，起到的功能與作用是和
一樣的，只不過(guò)用法不一樣：
是塊級(jí)的無(wú)語(yǔ)義容器，
是短語(yǔ)的無(wú)語(yǔ)義容器。
的用法相信朋友們用的一定比我熟悉，所以這里關(guān)于他的用法就不多說(shuō)了，只是針對(duì)在HTML5中對(duì)
的使用我提幾點(diǎn)建議：
如果你覺得用HTML5中的新的標(biāo)簽比用合適就一定要用新的標(biāo)簽，因?yàn)?b>
沒有任何的語(yǔ)義，這個(gè)是HTML5所不倡導(dǎo)的；
如果效果需要的話可以在HTML5新標(biāo)簽的外面加一個(gè)標(biāo)簽，這樣對(duì)HTML中的語(yǔ)義不會(huì)產(chǎn)生太大的影響。
3. 元素title屬性對(duì)語(yǔ)義的重要性是什么？
title 屬性這個(gè)剛一看會(huì)不會(huì)想到</b>標(biāo)簽？但是不要弄到錯(cuò)了，他們是完全不同的東西。平時(shí)在我們開發(fā)的時(shí)候很少會(huì)用到這個(gè)屬性，首先說(shuō)一下它是干什么的吧，其實(shí)他就是一個(gè)具有提示作用的屬性，對(duì)于屏幕閱讀器來(lái)說(shuō)可以為用戶朗讀文本，所以正確的使用可以提升頁(yè)面的訪問(wèn)性。</p>
<b>4. HTML5中的新標(biāo)簽對(duì)于寫文本啟到一些重要影響的標(biāo)簽有哪些？</b>
<p>在寫這個(gè)問(wèn)題的答案之前先說(shuō)說(shuō)關(guān)于這些標(biāo)簽的理解與用法：</p>
<pre>
<p>明確html5的核心思想就是語(yǔ)義，所以不管是什么標(biāo)簽就看表達(dá)的意思，而不是看展現(xiàn)的效果；</p>
<p>關(guān)于文本的相關(guān)標(biāo)簽可以適當(dāng)?shù)南胂蟪墒钦Z(yǔ)文中的標(biāo)點(diǎn)符號(hào)這樣可以方便記意與運(yùn)用；</p>
</pre>
<p>明白上面的兩點(diǎn)我們?cè)趤?lái)說(shuō)這些新的標(biāo)簽的語(yǔ)義與用法吧：<br><b><address></b>、<b><figure></b>、<b><time></b>這三個(gè)標(biāo)簽下一個(gè)問(wèn)題中詳細(xì)說(shuō)這里就先不說(shuō)了；<br><b><strong></b>、<b><em></b>這個(gè)兩個(gè)標(biāo)簽在HTML4.0中就已經(jīng)有了，但是在這里還是要說(shuō)一下，因?yàn)樵谝郧翱赡芎苌儆玫剿鼈円驗(yàn)楹苌儆腥巳プ⒁庹Z(yǔ)義；</p>
<p>
<b><strong></b>表示的是重要的文本（默認(rèn)為粗體顯示）——重點(diǎn)是語(yǔ)義上的表達(dá)而不是展現(xiàn)的效果這個(gè)需要記住哦</p>
<p>
<b><em></b>表示的是強(qiáng)調(diào)的文本（默認(rèn)為斜體）</p>
<p><b><mark></b>標(biāo)簽是HTML5中的新元素，用來(lái)突出顯示文本，它的效果就像是用熒光筆給重點(diǎn)的語(yǔ)句做標(biāo)記一樣；<br><b><span></b>標(biāo)簽這個(gè)也是在HTML中就已經(jīng)有的了，以前的文章也大概的提過(guò)一下但是沒有詳細(xì)的說(shuō)明，下面就詳細(xì)的說(shuō)明一下：</p>
<p>
<b><span></b>沒有任何的語(yǔ)義，所以正確的使用方式是需要在沒有其它合適有標(biāo)簽的時(shí)候才可以用它；</p>
<p>它是短語(yǔ)級(jí)別的標(biāo)簽所以不會(huì)另起一行；</p>
<p>同<b><div></b>一樣在一定的情況下可以添加<b><span></b>標(biāo)簽利用微格式來(lái)增加語(yǔ)義；</p>
<p>一般的情況下需要用CSS來(lái)控制它的顯示樣式因?yàn)樗鼪]有樣式的展現(xiàn)樣式；</p>
<p><b><wbr></b>一個(gè)與<b><br></b>很像的新標(biāo)簽，區(qū)別在于它不會(huì)強(qiáng)制換行；<br><b><ruby></b>、<b><rp></b>、<b><rt></b>這幾個(gè)標(biāo)簽就像是語(yǔ)文中的音標(biāo)一樣；<br><b><meter></b>可以用它做一些測(cè)量結(jié)果的顯示與投票結(jié)果的顯示（現(xiàn)在的問(wèn)題是瀏覽器對(duì)它的支持不好）；<br><b><progress></b>同樣的一個(gè)進(jìn)度條的顯示，可以用做一些很好的與用戶交互的效果，問(wèn)題是瀏覽器的兼容現(xiàn)在也不好。</p>
<b>5. HTML5中<b><address></b>、<b><figure></b>、<b><time></b>標(biāo)簽的正確用法與注意事項(xiàng)有哪些是你不知道的?</b>
<p><b><address></b>這個(gè)標(biāo)簽是新的，所以用他的人很少。至于正確的用法當(dāng)然也很少有人去研究它，下面簡(jiǎn)單的總結(jié)一下：</p>
<p>
<b><address></b>是用來(lái)定義與HTML頁(yè)面或頁(yè)面一部分有關(guān)的作者、相關(guān)人員或組織的聯(lián)系信息，通常位于頁(yè)面底部或相關(guān)部分內(nèi)；</p>
<p>大多數(shù)時(shí)候，聯(lián)系信息是作者的電子郵件或是指向聯(lián)系信息頁(yè)的鏈接，這個(gè)是正確的，不能用來(lái)標(biāo)記“聯(lián)系我們”中的辦公地點(diǎn)，這是錯(cuò)誤的用法；</p>
<p>提供的信息要準(zhǔn)確，不是說(shuō)電子郵件的地址的正確性，而是說(shuō)需要對(duì)應(yīng)上提供信息的人，如果一個(gè)頁(yè)面中有好多相關(guān)的人，那么提供信息的時(shí)候一定要確定信息準(zhǔn)確性，不要張冠李戴；</p>
<p>
<b><address></b>標(biāo)簽中不能有<b><h1></b>~<b><h6></b>、<b><article></b>、<b><address></b>、<b><aside></b>、<b><footer></b>、<b><header></b>、<b><hgroup></b>、<b><nav></b>、<b><section></b>等標(biāo)簽；</p>
<p><b><figure></b>這個(gè)元素是用來(lái)引入圖表、圖形、照片等，對(duì)應(yīng)的場(chǎng)景就是像是雜志中的圖片一樣，在HTML5之前是沒有一個(gè)專門的標(biāo)簽來(lái)做這個(gè)事的，之前如果實(shí)現(xiàn)這個(gè)功能就是用沒有語(yǔ)義的<b><div></b>標(biāo)簽；</p>
<pre>
<p>用法提示：<br>
1. <b><figure></b>元素可以包含多個(gè)內(nèi)容塊，但是只能有一個(gè)<b><figcaption></b>（可以理解成給圖表加標(biāo)題）標(biāo)簽；<br>
2. 可以用<b><h1></b>~<b><h6></b>來(lái)給<b><figure></b>增加標(biāo)題；<br>
3. <b><figcaption></b>不能多帶帶出現(xiàn)，需要有配套的內(nèi)容一起出現(xiàn)。</p>
</pre>
<p><b><time></b>可以通過(guò)這個(gè)標(biāo)簽標(biāo)記一個(gè)具體的時(shí)間或日期，應(yīng)用場(chǎng)景通常就是一篇文章的發(fā)表時(shí)間。</p>
<pre>
<p>需要注意的是：<br>
1. <b>datetime</b>中的時(shí)間最好與<b><time></b>標(biāo)簽中的文本元素日期一樣，寫法可以不一樣；<br>
2. 如果這個(gè)時(shí)間是代表整個(gè)文章或是頁(yè)面的時(shí)間需要添加<b>pubdate</b>屬性；<br>
3. 不要在<b><time></b>標(biāo)簽中使用不確切的時(shí)間如：“今天中午”、“上周末”；<br>
4. 如果 使用<b>pubdate</b>屬性需要注意的是要在同一個(gè)父標(biāo)簽下面不要出現(xiàn)張冠李戴的問(wèn)題；<br>
5. <b><time></b>標(biāo)簽不能在嵌套另一個(gè)<b><time></b>標(biāo)簽；<br>
6. <b>datatime</b>中的時(shí)間格式需要是標(biāo)準(zhǔn)的機(jī)器可能的時(shí)間 如:YYYY-MM-DDThh:mm:ss</p>
</pre>
<p>其實(shí)作為新的標(biāo)簽，它們的用法還有很多，這里只是說(shuō)了一些最基礎(chǔ)的東西，不過(guò)我認(rèn)為用會(huì)上面所有的東西就可以說(shuō)是入門了。</p>
<b>5. 關(guān)于<b><em></b>、<b><strong></b>與<b><b></b>、<b><i></b>的前世今生？</b>
<p>各位開發(fā)過(guò)HTML的朋友都知道<b><em></b>與<b><i></b>、<b><strong></b>與<b><b></b>它們的展現(xiàn)形式一樣的，一個(gè)是斜體一個(gè)是粗體，那么它們?cè)贖TML5中是怎么平相處的呢？下面我們來(lái)重點(diǎn)講一下<b><b></b>、<b><i></b>的前世今生：</p>
<pre>
<p>在很早以前，互聯(lián)網(wǎng)那時(shí)還沒有一個(gè)叫作CSS的東西出現(xiàn)的時(shí)候，為了區(qū)分文本中的重點(diǎn)與特殊的含意的文字<b><b></b>、<b><i></b>這對(duì)兄弟出現(xiàn)了。在它們的幫助下，頁(yè)面的文字與用戶之間的交互得到了提升。<br>
然而好景不長(zhǎng)，在互聯(lián)網(wǎng)飛速發(fā)展的情況下，很快出現(xiàn)一個(gè)叫CSS的東西，它的責(zé)任就是用來(lái)控制頁(yè)面的表現(xiàn)形式的，當(dāng)然也包括<b><b></b>、<b><i></b>所表現(xiàn)的形式，所以在HTML4.0與XHTML1中就有開發(fā)人員建議廢棄<b><b></b>、<b><i></b>，取面代之的就是<b><strong></b>、<b><em></b>+CSS，因?yàn)樗麄冇姓Z(yǔ)義性可以更好的與用戶交互?？墒菃?wèn)題并沒有就此結(jié)束，因?yàn)樵陂_發(fā)的時(shí)候在一些情況下發(fā)現(xiàn)用<b><strong></b>、<b><em></b>總是不能很的好的表示語(yǔ)義，為此，在HTML5中<b><b></b>、<b><i></b>又以修改后的面貌展現(xiàn)給我們了，所以在HTML5中又重新啟用了<b><b></b>、<b><i></b>這對(duì)兄弟。</p>
</pre>
<p>那么具體在HTML5中什么時(shí)候用它們呢？<br><b><b></b>標(biāo)簽表示出于實(shí)用的目的提醒讀者注意的一塊文字，不傳達(dá)任何額外的重要性，也不表示其它的語(yǔ)義和語(yǔ)氣，用于：關(guān)鍵詞，產(chǎn)品名，操作指令等等；<br><b><i></b>標(biāo)簽表示一塊不同于其它文字的文字，具有不同的語(yǔ)態(tài)或語(yǔ)氣，用于：分類名稱，技術(shù)術(shù)語(yǔ)，外語(yǔ)中的慣用詞等等。</p>
<b>6. 如何使用ARIA提升可訪問(wèn)性？</b>
<p>語(yǔ)義真的有那么重要么？通過(guò)語(yǔ)義又怎么提高訪問(wèn)性與增加SEO的搜索的呢？因?yàn)楝F(xiàn)在一些SEO與瀏覽器或是屏幕閱讀器（一個(gè)給殘障人士用的文章閱讀器）都在根據(jù)HTML5的新標(biāo)準(zhǔn)做一些新的功能，他們會(huì)跟具新的語(yǔ)義直接與自身的功能相對(duì)應(yīng)。如果網(wǎng)頁(yè)的開發(fā)者也是這么做的，那么你的網(wǎng)站的應(yīng)用性會(huì)大大的增加。<br>
上面又強(qiáng)調(diào)了一下語(yǔ)義的重要性，下面告訴大家一個(gè)更好的增強(qiáng)語(yǔ)義的小竅門，一定要好好看哦，因?yàn)檫@個(gè)小竅門朋友們不一定知道的：</p>
<p>概念介紹：<em>WAI-ARIA(Web Accessibility Initiative"s Accessible Rich Internet Applications)</em>無(wú)障礙網(wǎng)頁(yè)倡議之可訪問(wèn)的富互聯(lián)網(wǎng)應(yīng)用，簡(jiǎn)稱ARIA，他就是一種技術(shù)規(guī)范。他在HTML提供的語(yǔ)義的基礎(chǔ)之上，他會(huì)使用屬性來(lái)填補(bǔ)一些語(yǔ)義上的空白。</p>
<p>ARIA的用法：</p>
<p>正確運(yùn)用ARIA中的地標(biāo)角色：<br><br>
<p>role ="banner"(橫幅)</p>
<p>role="navigation"(導(dǎo)航)</p>
<p>role="main"(主體)</p>
<p>role="complementary"(補(bǔ)充性內(nèi)容)</p>
<p>role="contentinfo"(內(nèi)容信息)<br>
> 小提示：地標(biāo)角色只是ARIA規(guī)范中的一種，如果你感興趣可以去官網(wǎng)閱讀一下（地址：http://www.w3.org/TR/wai-aria/ ）</p>
</p>
<p>將屏幕閱讀器測(cè)試列入你的日常開發(fā)中；（因?yàn)樗亲钅苤苯臃从吵瞿愕木W(wǎng)站語(yǔ)義寫的好不好的東西）；</p>
<p>正確的為標(biāo)簽制定<b>id</b>與類（語(yǔ)義性一定要明顯）；</p>
<p>正確使用<b>class</b>類以及他提供的微格式；</p>
<p>關(guān)于<b>class</b>的微格式，因?yàn)橛泻芏嗳硕贾阑蚴钦J(rèn)為<b>class</b>的屬性是只能為一組元素應(yīng)用CSS樣式，其實(shí)并不是這樣的，其實(shí)他還可以在不引用額外的標(biāo)簽下來(lái)增強(qiáng)語(yǔ)義，這就是微格式，微格式是使用約定的<b>class</b>名稱來(lái)標(biāo)示一塊HTML從而來(lái)增強(qiáng)與應(yīng)用程序、智能搜索與搜索機(jī)器人的交互。關(guān)于微格式的使用可以看看這個(gè)網(wǎng)址：http://microformats.org</p>
<b>7. 你想到過(guò)網(wǎng)頁(yè)文件的命名會(huì)影響你網(wǎng)站的體驗(yàn)么？</b>
<p>這個(gè)一聽第一感覺就是不靠譜，一個(gè)文件的名字還會(huì)影響到網(wǎng)站的體驗(yàn)？<br>
正確的答案確實(shí)是：<strong><em>是的！</em></strong><br>
如：文件名： <em>Html_First_Blog.htm</em> 與 <em>html-first-blog.html</em><br>
這個(gè)兩個(gè)文件名不管是在用戶的體驗(yàn)上與搜索引擎上都第二個(gè)完勝第一個(gè)。是不是有人會(huì)問(wèn)為什么 ？？<br>
下面我就說(shuō)一下有如下幾點(diǎn)是需要我們注意的：</p>
<p>文件名需要用小寫字母：<br>
應(yīng)用場(chǎng)景就是最簡(jiǎn)單的輸入地址吧，你認(rèn)為下面哪種寫起來(lái)更方便，這個(gè)請(qǐng)自己體會(huì)吧：<br><br>
<p>http://192.168.0.1/TestHtml/The_First/Html5.html</p>
<p>http://192.168.0.1/testhtml/the-first/html5.html</p>
</p>
<p>用短橫線分隔單詞：<br>
大家一定會(huì)認(rèn)為，用"_"挺好，其實(shí)這是做C開發(fā)時(shí)候的寫法，也可以說(shuō)是習(xí)慣，但是在網(wǎng)站中“-”是搜索引擎更喜歡的style；</p>
<p>使用標(biāo)準(zhǔn)的擴(kuò)展名：<br>
現(xiàn)在用好多的網(wǎng)站都是用.htm的擴(kuò)展名，這個(gè)瀏覽器也不會(huì)報(bào)錯(cuò)，但是標(biāo)準(zhǔn)的擴(kuò)展名就是.html的所以大家以后寫的時(shí)候就不要省時(shí)間少寫一個(gè)字母“l(fā)”了。</p>
<p>記住以上幾點(diǎn)才是正確的寫網(wǎng)頁(yè)文件的命名方法哦，不要把寫其它語(yǔ)言的方法放進(jìn)來(lái)。</p>
<b>參考文章：</b>
<pre>
<p>http://blog.csdn.net/lihui130135/article/details/45033967<br>http://blog.csdn.net/lihui130135/article/details/45150501<br>http://blog.csdn.net/lihui130135/article/details/44748415</p>
</pre>
</div>
<div id="qoyqs8suu2u" class="mt-64 tags-seach" >
<div id="qoyqs8suu2u" class="tags-info">
<a style="width:120px;" title="云服務(wù)器" href="http://systransis.cn/site/active/kuaijiesale.html?ytag=seo">云服務(wù)器</a>
<a style="width:120px;" title="GPU云服務(wù)器" href="http://systransis.cn/site/product/gpu.html">GPU云服務(wù)器</a>
<a style="width:120px;" title="深入理解系列" href="http://systransis.cn/yun/tag/shenrulijiexilie/">深入理解系列</a>
<a style="width:120px;" title="深入理解linux" href="http://systransis.cn/yun/tag/shenrulijielinux/">深入理解linux</a>
<a style="width:120px;" title="深入理解webrtc" href="http://systransis.cn/yun/tag/shenrulijiewebrtc/">深入理解webrtc</a>
<a style="width:120px;" title="深入理解python" href="http://systransis.cn/yun/tag/shenrulijiepython/">深入理解python</a>
</div>
</div>
<div id="qoyqs8suu2u" 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://systransis.cn/yun/49586.html</p>
</div>
<ul class="pre-next-page">
<li id="qoyqs8suu2u" class="ellipsis"><a class="hpf" href="http://systransis.cn/yun/49585.html">上一篇：多說(shuō)自定義CSS動(dòng)感頭像和多說(shuō)評(píng)論顯示User Agent的那些小事</a></li>
<li id="qoyqs8suu2u" class="ellipsis"><a class="hpf" href="http://systransis.cn/yun/49587.html">下一篇：如何做好移動(dòng)端的響應(yīng)式設(shè)計(jì)：Viewport控制</a></li>
</ul>
</div>
<div id="qoyqs8suu2u" 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="qoyqs8suu2u" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/111019.html"><b>[ 學(xué)習(xí)路線 ] 學(xué)完這些去阿里！GOGOGO</b></a></h2>
<p class="ellipsis2 good">摘要：以下知識(shí)點(diǎn)是前輩師兄總結(jié)基礎(chǔ)語(yǔ)義化標(biāo)簽引進(jìn)了一些新的標(biāo)簽，特別注意等，注意的標(biāo)題結(jié)構(gòu)理解瀏覽器解析的過(guò)程，理解的樹形結(jié)構(gòu)，及相應(yīng)理解標(biāo)簽在各個(gè)瀏覽器上的默認(rèn)樣式代理樣式，理解中的重置樣式表的概念理解等功能性標(biāo)簽理解標(biāo)簽，理解文件提交過(guò)程推薦
以下知識(shí)點(diǎn)是前輩師兄總結(jié)
1、HTML/HTML5基礎(chǔ)：
1.0、語(yǔ)義化H5標(biāo)簽1.1、H5引進(jìn)了一些新的標(biāo)簽，特別注意article...</p>
<div id="qoyqs8suu2u" class="com_white-left-info">
<div id="qoyqs8suu2u" class="com_white-left-infol">
<a href="http://systransis.cn/yun/u-1272.html"><img src="http://systransis.cn/yun/data/avatar/000/00/12/small_000001272.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">zhaochunqi</span></a>
<time datetime="">2019-08-28 18:06</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="qoyqs8suu2u" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/85548.html"><b>[ 學(xué)習(xí)路線 ] 學(xué)完這些去阿里！GOGOGO</b></a></h2>
<p class="ellipsis2 good">摘要：以下知識(shí)點(diǎn)是前輩師兄總結(jié)基礎(chǔ)語(yǔ)義化標(biāo)簽引進(jìn)了一些新的標(biāo)簽，特別注意等，注意的標(biāo)題結(jié)構(gòu)理解瀏覽器解析的過(guò)程，理解的樹形結(jié)構(gòu)，及相應(yīng)理解標(biāo)簽在各個(gè)瀏覽器上的默認(rèn)樣式代理樣式，理解中的重置樣式表的概念理解等功能性標(biāo)簽理解標(biāo)簽，理解文件提交過(guò)程推薦
以下知識(shí)點(diǎn)是前輩師兄總結(jié)
1、HTML/HTML5基礎(chǔ)：
1.0、語(yǔ)義化H5標(biāo)簽1.1、H5引進(jìn)了一些新的標(biāo)簽，特別注意article...</p>
<div id="qoyqs8suu2u" class="com_white-left-info">
<div id="qoyqs8suu2u" class="com_white-left-infol">
<a href="http://systransis.cn/yun/u-1407.html"><img src="http://systransis.cn/yun/data/avatar/000/00/14/small_000001407.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">learn_shifeng</span></a>
<time datetime="">2019-08-21 10:27</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="qoyqs8suu2u" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/115207.html"><b>前端技術(shù) 博客文章、書籍 積累</b></a></h2>
<p class="ellipsis2 good">摘要：好多編輯器例如等都支持這樣的語(yǔ)法來(lái)快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計(jì)怎樣進(jìn)行
書籍
《JavaScriptDOM編程藝術(shù)》《JavaScript高級(jí)程序設(shè)計(jì)》《JavaScript框架設(shè)計(jì)》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語(yǔ)言精粹（修訂版）》《JavaScript設(shè)計(jì)模式》《J...</p>
<div id="qoyqs8suu2u" class="com_white-left-info">
<div id="qoyqs8suu2u" class="com_white-left-infol">
<a href="http://systransis.cn/yun/u-356.html"><img src="http://systransis.cn/yun/data/avatar/000/00/03/small_000000356.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">LiangJ</span></a>
<time datetime="">2019-08-30 12: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="qoyqs8suu2u" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://systransis.cn/yun/79267.html"><b>前端技術(shù) 博客文章、書籍 積累</b></a></h2>
<p class="ellipsis2 good">摘要：好多編輯器例如等都支持這樣的語(yǔ)法來(lái)快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計(jì)怎樣進(jìn)行
書籍
《JavaScriptDOM編程藝術(shù)》《JavaScript高級(jí)程序設(shè)計(jì)》《JavaScript框架設(shè)計(jì)》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語(yǔ)言精粹（修訂版）》《JavaScript設(shè)計(jì)模式》《J...</p>
<div id="qoyqs8suu2u" class="com_white-left-info">
<div id="qoyqs8suu2u" class="com_white-left-infol">
<a href="http://systransis.cn/yun/u-269.html"><img src="http://systransis.cn/yun/data/avatar/000/00/02/small_000000269.jpg" alt=""><span id="qoyqs8suu2u" class="layui-hide64">codercao</span></a>
<time datetime="">2019-08-19 18:10</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="qoyqs8suu2u" class="topicone-box-wangeditor">
<h3 class="top-com-title mb-64"><span>發(fā)表評(píng)論</span></h3>
<div id="qoyqs8suu2u" class="xcp-publish-main flex_box_zd">
<div id="qoyqs8suu2u" class="unlogin-pinglun-box">
<a href="javascript:login()" class="grad">登陸后可評(píng)論</a>
</div> </div>
</div>
<div id="qoyqs8suu2u" class="site-box-content">
<div id="qoyqs8suu2u" class="site-content-title">
<h3 class="top-com-title mb-64"><span>0條評(píng)論</span></h3>
</div>
<div id="qoyqs8suu2u" class="pages"></ul></div>
</div>
</div>
<div id="qoyqs8suu2u" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right">
<div id="qoyqs8suu2u" class="">
<div id="qoyqs8suu2u" class="com_layuiright-box user-msgbox">
<a href="http://systransis.cn/yun/u-95.html"><img src="http://systransis.cn/yun/data/avatar/000/00/00/small_000000095.jpg" alt=""></a>
<h3><a href="http://systransis.cn/yun/u-95.html" rel="nofollow">scq000</a></h3>
<h6>男<span>|</span>高級(jí)講師</h6>
<div id="qoyqs8suu2u" class="flex_box_zd user-msgbox-atten">
<a href="javascript:attentto_user(95)" id="attenttouser_95" class="grad follow-btn notfollow attention">我要關(guān)注</a>
<a href="javascript:login()" title="發(fā)私信" >我要私信</a>
</div>
<div id="qoyqs8suu2u" class="user-msgbox-list flex_box_zd">
<h3 class="hpf">TA的文章</h3>
<a href="http://systransis.cn/yun/ut-95.html" class="box_hxjz">閱讀更多</a>
</div>
<ul class="user-msgbox-ul">
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/123016.html">SBT30100VDC-ASEMI低壓降肖特基二極管SBT30100VDC</a></h3>
<p>閱讀 2438<span>·</span>2021-11-11 16:54</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/121071.html">python-mqtt自動(dòng)化測(cè)試</a></h3>
<p>閱讀 2675<span>·</span>2021-09-26 09:47</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/119552.html">周文康的大一Python學(xué)習(xí)心得體會(huì)</a></h3>
<p>閱讀 4014<span>·</span>2021-09-08 09:36</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/117699.html">JimCloud-五一大促，香港美國(guó)物理機(jī)五折優(yōu)惠！400/月起 JimCloud云主機(jī)五折起!35</a></h3>
<p>閱讀 2761<span>·</span>2021-07-25 21:37</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/116972.html">WebWork（在主線程創(chuàng)建子進(jìn)程）</a></h3>
<p>閱讀 948<span>·</span>2019-08-30 15:54</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/115970.html">被遺忘的CSS</a></h3>
<p>閱讀 2563<span>·</span>2019-08-30 14:22</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/115657.html">教你實(shí)現(xiàn)首行及首列固定 Table</a></h3>
<p>閱讀 3274<span>·</span>2019-08-30 13:57</p></li>
<li><h3 class="ellipsis"><a href="http://systransis.cn/yun/114228.html">如何解決滾動(dòng)條scrollbar出現(xiàn)造成的頁(yè)面寬度被擠壓的問(wèn)題？</a></h3>
<p>閱讀 2681<span>·</span>2019-08-29 17:17</p></li>
</ul>
</div>
<!-- 文章詳情右側(cè)廣告-->
<div id="qoyqs8suu2u" class="com_layuiright-box">
<h6 class="top-com-title"><span>最新活動(dòng)</span></h6>
<div id="qoyqs8suu2u" class="com_adbox">
<div id="qoyqs8suu2u" class="layui-carousel" id="right-item">
<div carousel-item>
<div>
<a href="http://systransis.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow">
<img src="http://systransis.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服務(wù)器">
</a>
</div>
<div>
<a href="http://systransis.cn/site/product/gpu.html" rel="nofollow">
<img src="http://systransis.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務(wù)器">
</a>
</div>
</div>
</div>
</div> <!-- banner結(jié)束 -->
<div id="qoyqs8suu2u" class="adhtml">
</div>
<script>
$(function(){
$.ajax({
type: "GET",
url:"http://systransis.cn/yun/ad/getad/1.html",
cache: false,
success: function(text){
$(".adhtml").html(text);
}
});
})
</script> </div> </div>
</div>
</div>
</div>
</section>
<!-- wap拉出按鈕 -->
<div id="qoyqs8suu2u" class="site-tree-mobile layui-hide">
<i class="layui-icon layui-icon-spread-left"></i>
</div>
<!-- wap遮罩層 -->
<div id="qoyqs8suu2u" class="site-mobile-shade"></div>
<!--付費(fèi)閱讀 -->
<div class="qoyqs8suu2u" id="payread">
<div id="qoyqs8suu2u" class="layui-form-item">閱讀需要支付1元查看</div>
<div id="qoyqs8suu2u" 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://systransis.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
<script src="http://systransis.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script>
<script src="http://systransis.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://systransis.cn/yun/index.php?topic/ajaxhassupport/" + tid,
cache: false,
success: function(hassupport){
if (hassupport != '1'){
$.ajax({
type: "GET",
cache:false,
url: "http://systransis.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ù)的類型 POST GET
type:"POST",
//提交的網(wǎng)址
url:"http://systransis.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="qoyqs8suu2u" class="layui-container">
<div id="qoyqs8suu2u" class="flex_box_zd">
<div id="qoyqs8suu2u" class="left-footer">
<h6><a href="http://systransis.cn/"><img src="http://systransis.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （優(yōu)刻得科技股份有限公司）"></a></h6>
<p>UCloud （優(yōu)刻得科技股份有限公司）是中立、安全的云計(jì)算服務(wù)平臺(tái)，堅(jiān)持中立，不涉足客戶業(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ù)需求，提供公有云、混合云、私有云、專有云在內(nèi)的綜合性行業(yè)解決方案。</p>
</div>
<div id="qoyqs8suu2u" class="right-footer layui-hidemd">
<ul class="flex_box_zd">
<li>
<h6>UCloud與云服務(wù)</h6>
<p><a href="http://systransis.cn/site/about/intro/">公司介紹</a></p>
<p><a >加入我們</a></p>
<p><a href="http://systransis.cn/site/ucan/onlineclass/">UCan線上公開課</a></p>
<p><a href="http://systransis.cn/site/solutions.html" >行業(yè)解決方案</a></p> <p><a href="http://systransis.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 >工廠仿真軟件</a></p> <p><a >Pinex</a></p> <p><a >AI繪畫</a></p>
</li>
<li>
<h6>社區(qū)欄目</h6>
<p><a href="http://systransis.cn/yun/column/index.html">專欄文章</a></p>
<p><a href="http://systransis.cn/yun/udata/">專題地圖</a></p> </li>
<li>
<h6>常見問(wèn)題</h6>
<p><a href="http://systransis.cn/site/ucsafe/notice.html" >安全中心</a></p>
<p><a href="http://systransis.cn/site/about/news/recent/" >新聞動(dòng)態(tài)</a></p>
<p><a href="http://systransis.cn/site/about/news/report/">媒體動(dòng)態(tài)</a></p> <p><a href="http://systransis.cn/site/cases.html">客戶案例</a></p>
<p><a href="http://systransis.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="qoyqs8suu2u" class="copyright">Copyright ? 2012-2023 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://systransis.cn/" title="成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费">成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费</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="oykqs" class="pl_css_ganrao" style="display: none;"><pre id="oykqs"></pre><delect id="oykqs"></delect><abbr id="oykqs"></abbr><small id="oykqs"></small><small id="oykqs"></small><samp id="oykqs"></samp><li id="oykqs"></li><menu id="oykqs"></menu><em id="oykqs"></em><li id="oykqs"></li><th id="oykqs"></th><tfoot id="oykqs"></tfoot><small id="oykqs"><option id="oykqs"><delect id="oykqs"></delect></option></small><option id="oykqs"></option><menu id="oykqs"><noscript id="oykqs"><acronym id="oykqs"></acronym></noscript></menu><abbr id="oykqs"></abbr><noframes id="oykqs"></noframes><sup id="oykqs"></sup><code id="oykqs"></code><blockquote id="oykqs"></blockquote><tbody id="oykqs"></tbody><fieldset id="oykqs"><menu id="oykqs"><noscript id="oykqs"></noscript></menu></fieldset><tbody id="oykqs"></tbody><del id="oykqs"></del><del id="oykqs"></del><button id="oykqs"><samp id="oykqs"><tbody id="oykqs"></tbody></samp></button><acronym id="oykqs"></acronym><del id="oykqs"></del><sup id="oykqs"></sup><rt id="oykqs"><code id="oykqs"><noframes id="oykqs"></noframes></code></rt><tr id="oykqs"><pre id="oykqs"><xmp id="oykqs"></xmp></pre></tr><menu id="oykqs"></menu><ul id="oykqs"><sup id="oykqs"><center id="oykqs"></center></sup></ul><input id="oykqs"></input><bdo id="oykqs"><option id="oykqs"><kbd id="oykqs"></kbd></option></bdo><button id="oykqs"><samp id="oykqs"><tbody id="oykqs"></tbody></samp></button><button id="oykqs"></button><th id="oykqs"><s id="oykqs"><li id="oykqs"></li></s></th><tbody id="oykqs"></tbody><td id="oykqs"></td><th id="oykqs"></th><object id="oykqs"></object><abbr id="oykqs"></abbr><blockquote id="oykqs"></blockquote><menu id="oykqs"></menu><del id="oykqs"></del><sup id="oykqs"><dd id="oykqs"><strong id="oykqs"></strong></dd></sup><bdo id="oykqs"></bdo><noframes id="oykqs"></noframes><li id="oykqs"></li><rt id="oykqs"><code id="oykqs"><noframes id="oykqs"></noframes></code></rt><samp id="oykqs"></samp><abbr id="oykqs"></abbr><bdo id="oykqs"></bdo><center id="oykqs"></center><noframes id="oykqs"></noframes><abbr id="oykqs"></abbr><nav id="oykqs"><abbr id="oykqs"><button id="oykqs"></button></abbr></nav><object id="oykqs"></object><menu id="oykqs"><noscript id="oykqs"><pre id="oykqs"></pre></noscript></menu><em id="oykqs"></em><source id="oykqs"><code id="oykqs"><optgroup id="oykqs"></optgroup></code></source><blockquote id="oykqs"></blockquote><li id="oykqs"></li><code id="oykqs"></code><li id="oykqs"></li><pre id="oykqs"></pre><abbr id="oykqs"></abbr><dd id="oykqs"></dd><table id="oykqs"></table><input id="oykqs"></input><table id="oykqs"></table><rt id="oykqs"></rt><button id="oykqs"></button><input id="oykqs"></input><samp id="oykqs"><th id="oykqs"><s id="oykqs"></s></th></samp><kbd id="oykqs"><pre id="oykqs"><td id="oykqs"></td></pre></kbd><del id="oykqs"><dfn id="oykqs"><center id="oykqs"></center></dfn></del><tbody id="oykqs"></tbody><th id="oykqs"></th><tfoot id="oykqs"></tfoot><source id="oykqs"></source><bdo id="oykqs"></bdo><blockquote id="oykqs"><strike id="oykqs"><input id="oykqs"></input></strike></blockquote><wbr id="oykqs"></wbr><menu id="oykqs"></menu><code id="oykqs"></code><noframes id="oykqs"></noframes><samp id="oykqs"></samp><button id="oykqs"></button><pre id="oykqs"><xmp id="oykqs"><fieldset id="oykqs"></fieldset></xmp></pre><blockquote id="oykqs"><strike id="oykqs"><rt id="oykqs"></rt></strike></blockquote><td id="oykqs"></td><code id="oykqs"></code><tbody id="oykqs"></tbody><object id="oykqs"></object><dl id="oykqs"></dl><bdo id="oykqs"></bdo><strong id="oykqs"></strong><input id="oykqs"><code id="oykqs"><em id="oykqs"></em></code></input><sup id="oykqs"></sup><xmp id="oykqs"></xmp><noframes id="oykqs"></noframes><th id="oykqs"></th><table id="oykqs"><tr id="oykqs"><acronym id="oykqs"></acronym></tr></table><cite id="oykqs"></cite><strike id="oykqs"></strike><rt id="oykqs"><code id="oykqs"><noframes id="oykqs"></noframes></code></rt><noframes id="oykqs"></noframes><source id="oykqs"></source><object id="oykqs"></object><abbr id="oykqs"><kbd id="oykqs"><tr id="oykqs"></tr></kbd></abbr><button id="oykqs"><samp id="oykqs"><tbody id="oykqs"></tbody></samp></button><dd id="oykqs"></dd><th id="oykqs"><object id="oykqs"><small id="oykqs"></small></object></th><source id="oykqs"></source><dl id="oykqs"><nav id="oykqs"><li id="oykqs"></li></nav></dl><small id="oykqs"><option id="oykqs"><kbd id="oykqs"></kbd></option></small><blockquote id="oykqs"></blockquote><th id="oykqs"><nav id="oykqs"><small id="oykqs"></small></nav></th><center id="oykqs"><center id="oykqs"><th id="oykqs"></th></center></center><code id="oykqs"></code><optgroup id="oykqs"><ul id="oykqs"><center id="oykqs"></center></ul></optgroup><td id="oykqs"></td><delect id="oykqs"></delect><small id="oykqs"></small><em id="oykqs"><blockquote id="oykqs"><dfn id="oykqs"></dfn></blockquote></em><blockquote id="oykqs"><strike id="oykqs"><input id="oykqs"></input></strike></blockquote><s id="oykqs"><small id="oykqs"><option id="oykqs"></option></small></s><tbody id="oykqs"></tbody><del id="oykqs"></del><center id="oykqs"><strong id="oykqs"><optgroup id="oykqs"></optgroup></strong></center><table id="oykqs"><tr id="oykqs"><acronym id="oykqs"></acronym></tr></table><samp id="oykqs"></samp><option id="oykqs"><dd id="oykqs"><th id="oykqs"></th></dd></option><nav id="oykqs"></nav><noscript id="oykqs"></noscript><center id="oykqs"></center><nav id="oykqs"></nav><samp id="oykqs"></samp><wbr id="oykqs"></wbr><strike id="oykqs"></strike><pre id="oykqs"><wbr id="oykqs"><cite id="oykqs"></cite></wbr></pre><abbr id="oykqs"></abbr><xmp id="oykqs"></xmp><fieldset id="oykqs"><menu id="oykqs"><tbody id="oykqs"></tbody></menu></fieldset><ul id="oykqs"><dfn id="oykqs"><rt id="oykqs"></rt></dfn></ul><delect id="oykqs"></delect><th id="oykqs"></th><blockquote id="oykqs"></blockquote></div>
<script src="http://systransis.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>
