摘要：可能一些有心的開發(fā)者會把的寫的語義明白些，比如導(dǎo)航欄的用，邊欄的用。
0. HTML5中最看重的理念“語義化”相比HTML有什么區(qū)別？
在之前翻譯的《如何寫出高效率的HTML》一文中提到了一些關(guān)于語義化標(biāo)簽的相關(guān)內(nèi)容，這里搜集整理了一些語義化標(biāo)簽方面的問題和解答，以供大家參考。
簡單來說就是：描述內(nèi)容的含義(meaning)
比如說
標(biāo)簽就是段落的意思，在HTML5中所有的標(biāo)簽都有它書面上的語義。而沒有語義的標(biāo)簽在HTML中有，在HTML5中就沒有了，比如"塊級元素" 與"行內(nèi)元素" 變成了“外圍內(nèi)容” 與“短語內(nèi)容” 。"語義" 與"顯示" 分離，HTML5代碼中出現(xiàn)的標(biāo)簽都是讓開發(fā)人員或瀏覽器一看就知道是干什么用的東西，至于顯示效果那是CSS3（Cascading Style Sheet）需要干的事情，所以在HTML5中這個兩個好基友終于距離產(chǎn)生了美。
可以提升可訪問性與互操作性（兼容性會更好）；
改進(jìn)搜索引擎的優(yōu)化；
一般來說可以讓HTML文件更??；
讓代碼更好唯護(hù)，與CSS3的關(guān)系更和諧。
1. HTML5中的
第一，對這個幾個標(biāo)簽的理解：
HTML5的設(shè)計者們可以說是用心良苦呀，他們認(rèn)真分析HTML4.0中出來的問題，也就是當(dāng)下最流行的寫頁面的方式就是"DIV+CSS" ，我們也不難發(fā)現(xiàn)只要用到這個就可以把頁面寫即簡單又漂亮。沒有繁瑣的標(biāo)簽在里面，需要什么功能就去加標(biāo)簽就可以了。
而是什么呢？這個我們下一個問題詳細(xì)說明。問題的關(guān)鍵在于
沒有任何的語義，也就是說他要干的事是什么全憑開發(fā)者說了算。這就造成了嚴(yán)重的開發(fā)規(guī)范不統(tǒng)一，也就是說頁面的導(dǎo)航欄是
，頁面的邊欄也是
，唯一區(qū)分它們的就是
id ?？赡芤恍┯行牡拈_發(fā)者會把
的
id 寫的語義明白些，比如：導(dǎo)航欄的
id 用
，邊欄的
id 用
。這樣的寫法對其他的開發(fā)者看來還是很好的，因為看到
id 就可以知道這個
是干什么用的了。但是還是有一大部分的開發(fā)者會這么寫，如：導(dǎo)航欄的
id 用
div1 ，邊欄的
id 用
div2 ，這樣的寫法對用戶來說的可能沒有什么區(qū)別，因為開發(fā)者知道他們都代表什么，而對其他的開發(fā)者來說這真的是滅頂之災(zāi)，用英文來說就是“reading the fucking code”，而對開發(fā)者本身可能時間一長也不知道是什么意思了，但是下次開發(fā)的時候他們一定還有人是這么干的；
回到正題，經(jīng)過上面的介紹大家也許已經(jīng)知道為什么在HTML5引用上面的標(biāo)簽了吧，就是為了解決開發(fā)規(guī)范不統(tǒng)一的問題同時也為了增強(qiáng)語義，有人也許會問為什么HTML5為什么那么在意語義？用了上面的標(biāo)簽可以說帶來什么好處呢？這個答案用一個非常簡單的話來說的那就是：為了統(tǒng)一規(guī)范與新功能的出現(xiàn)。
他們這些標(biāo)簽功能就是代替功能中的一部分，他們沒有任何的默認(rèn)樣式，除了會讓文本另起一行外；
第二，這幾個標(biāo)簽的語義與用法：
特別提示：
HTML5規(guī)范不推薦對有輔助性的頁腳鏈接用
HTML5中不允許將
特別提示：
同樣不能用在
他與
特別提示：
如果使用多個
如果是與文章的主要內(nèi)容有關(guān)系的圖像需要用
特別提示：
頁腳并不一定是要位于所在元素的末尾，不過通常是這樣的；
他不可以放在標(biāo)簽中，也不可以相互嵌套，或是在
2. HTML5通用的容器、
在HTML5中的生存含義？
這個標(biāo)簽在很久很久以前就已經(jīng)出現(xiàn)在HTML中了，他的全拼是（division）。而在HTML5中的很多的新標(biāo)簽都是他的功能的統(tǒng)一定義而已，因為
本身沒有任何的語義，但是可以對他增加CSS樣式，這樣就可以很好的為頁面做出一些我們理想中的效果。那么在HTML5為什么他還存在呢？那就是因為，在某些時候你會發(fā)現(xiàn)你用HTML5中的任何一個標(biāo)簽都不合適你現(xiàn)在需要的語義，所以在這個時候就需要用到
這個標(biāo)簽了。既然說到
，那么也要說說與他相對應(yīng)的
這個標(biāo)簽，他也是一個沒有任何語義的標(biāo)簽，起到的功能與作用是和
一樣的，只不過用法不一樣：
是塊級的無語義容器，
是短語的無語義容器。
的用法相信朋友們用的一定比我熟悉，所以這里關(guān)于他的用法就不多說了，只是針對在HTML5中對
的使用我提幾點(diǎn)建議：
如果你覺得用HTML5中的新的標(biāo)簽比用合適就一定要用新的標(biāo)簽，因為
沒有任何的語義，這個是HTML5所不倡導(dǎo)的；
如果效果需要的話可以在HTML5新標(biāo)簽的外面加一個標(biāo)簽，這樣對HTML中的語義不會產(chǎn)生太大的影響。
3. 元素title屬性對語義的重要性是什么？
title 屬性這個剛一看會不會想到</b>標(biāo)簽？但是不要弄到錯了，他們是完全不同的東西。平時在我們開發(fā)的時候很少會用到這個屬性，首先說一下它是干什么的吧，其實他就是一個具有提示作用的屬性，對于屏幕閱讀器來說可以為用戶朗讀文本，所以正確的使用可以提升頁面的訪問性。</p>
<b>4. HTML5中的新標(biāo)簽對于寫文本啟到一些重要影響的標(biāo)簽有哪些？</b>
<p>在寫這個問題的答案之前先說說關(guān)于這些標(biāo)簽的理解與用法：</p>
<pre>
<p>明確html5的核心思想就是語義，所以不管是什么標(biāo)簽就看表達(dá)的意思，而不是看展現(xiàn)的效果；</p>
<p>關(guān)于文本的相關(guān)標(biāo)簽可以適當(dāng)?shù)南胂蟪墒钦Z文中的標(biāo)點(diǎn)符號這樣可以方便記意與運(yùn)用；</p>
</pre>
<p>明白上面的兩點(diǎn)我們在來說這些新的標(biāo)簽的語義與用法吧：<br><b><address></b>、<b><figure></b>、<b><time></b>這三個標(biāo)簽下一個問題中詳細(xì)說這里就先不說了；<br><b><strong></b>、<b><em></b>這個兩個標(biāo)簽在HTML4.0中就已經(jīng)有了，但是在這里還是要說一下，因為在以前可能很少用到它們因為很少有人去注意語義；</p>
<p>
<b><strong></b>表示的是重要的文本（默認(rèn)為粗體顯示）——重點(diǎn)是語義上的表達(dá)而不是展現(xiàn)的效果這個需要記住哦</p>
<p>
<b><em></b>表示的是強(qiáng)調(diào)的文本（默認(rèn)為斜體）</p>
<p><b><mark></b>標(biāo)簽是HTML5中的新元素，用來突出顯示文本，它的效果就像是用熒光筆給重點(diǎn)的語句做標(biāo)記一樣；<br><b><span></b>標(biāo)簽這個也是在HTML中就已經(jīng)有的了，以前的文章也大概的提過一下但是沒有詳細(xì)的說明，下面就詳細(xì)的說明一下：</p>
<p>
<b><span></b>沒有任何的語義，所以正確的使用方式是需要在沒有其它合適有標(biāo)簽的時候才可以用它；</p>
<p>它是短語級別的標(biāo)簽所以不會另起一行；</p>
<p>同<b><div></b>一樣在一定的情況下可以添加<b><span></b>標(biāo)簽利用微格式來增加語義；</p>
<p>一般的情況下需要用CSS來控制它的顯示樣式因為它沒有樣式的展現(xiàn)樣式；</p>
<p><b><wbr></b>一個與<b><br></b>很像的新標(biāo)簽，區(qū)別在于它不會強(qiáng)制換行；<br><b><ruby></b>、<b><rp></b>、<b><rt></b>這幾個標(biāo)簽就像是語文中的音標(biāo)一樣；<br><b><meter></b>可以用它做一些測量結(jié)果的顯示與投票結(jié)果的顯示（現(xiàn)在的問題是瀏覽器對它的支持不好）；<br><b><progress></b>同樣的一個進(jìn)度條的顯示，可以用做一些很好的與用戶交互的效果，問題是瀏覽器的兼容現(xiàn)在也不好。</p>
<b>5. HTML5中<b><address></b>、<b><figure></b>、<b><time></b>標(biāo)簽的正確用法與注意事項有哪些是你不知道的?</b>
<p><b><address></b>這個標(biāo)簽是新的，所以用他的人很少。至于正確的用法當(dāng)然也很少有人去研究它，下面簡單的總結(jié)一下：</p>
<p>
<b><address></b>是用來定義與HTML頁面或頁面一部分有關(guān)的作者、相關(guān)人員或組織的聯(lián)系信息，通常位于頁面底部或相關(guān)部分內(nèi)；</p>
<p>大多數(shù)時候，聯(lián)系信息是作者的電子郵件或是指向聯(lián)系信息頁的鏈接，這個是正確的，不能用來標(biāo)記“聯(lián)系我們”中的辦公地點(diǎn)，這是錯誤的用法；</p>
<p>提供的信息要準(zhǔn)確，不是說電子郵件的地址的正確性，而是說需要對應(yīng)上提供信息的人，如果一個頁面中有好多相關(guān)的人，那么提供信息的時候一定要確定信息準(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>這個元素是用來引入圖表、圖形、照片等，對應(yīng)的場景就是像是雜志中的圖片一樣，在HTML5之前是沒有一個專門的標(biāo)簽來做這個事的，之前如果實現(xiàn)這個功能就是用沒有語義的<b><div></b>標(biāo)簽；</p>
<pre>
<p>用法提示：<br>
1. <b><figure></b>元素可以包含多個內(nèi)容塊，但是只能有一個<b><figcaption></b>（可以理解成給圖表加標(biāo)題）標(biāo)簽；<br>
2. 可以用<b><h1></b>~<b><h6></b>來給<b><figure></b>增加標(biāo)題；<br>
3. <b><figcaption></b>不能多帶帶出現(xiàn)，需要有配套的內(nèi)容一起出現(xiàn)。</p>
</pre>
<p><b><time></b>可以通過這個標(biāo)簽標(biāo)記一個具體的時間或日期，應(yīng)用場景通常就是一篇文章的發(fā)表時間。</p>
<pre>
<p>需要注意的是：<br>
1. <b>datetime</b>中的時間最好與<b><time></b>標(biāo)簽中的文本元素日期一樣，寫法可以不一樣；<br>
2. 如果這個時間是代表整個文章或是頁面的時間需要添加<b>pubdate</b>屬性；<br>
3. 不要在<b><time></b>標(biāo)簽中使用不確切的時間如：“今天中午”、“上周末”；<br>
4. 如果 使用<b>pubdate</b>屬性需要注意的是要在同一個父標(biāo)簽下面不要出現(xiàn)張冠李戴的問題；<br>
5. <b><time></b>標(biāo)簽不能在嵌套另一個<b><time></b>標(biāo)簽；<br>
6. <b>datatime</b>中的時間格式需要是標(biāo)準(zhǔn)的機(jī)器可能的時間 如:YYYY-MM-DDThh:mm:ss</p>
</pre>
<p>其實作為新的標(biāo)簽，它們的用法還有很多，這里只是說了一些最基礎(chǔ)的東西，不過我認(rèn)為用會上面所有的東西就可以說是入門了。</p>
<b>5. 關(guān)于<b><em></b>、<b><strong></b>與<b><b></b>、<b><i></b>的前世今生？</b>
<p>各位開發(fā)過HTML的朋友都知道<b><em></b>與<b><i></b>、<b><strong></b>與<b><b></b>它們的展現(xiàn)形式一樣的，一個是斜體一個是粗體，那么它們在HTML5中是怎么平相處的呢？下面我們來重點(diǎn)講一下<b><b></b>、<b><i></b>的前世今生：</p>
<pre>
<p>在很早以前，互聯(lián)網(wǎng)那時還沒有一個叫作CSS的東西出現(xiàn)的時候，為了區(qū)分文本中的重點(diǎn)與特殊的含意的文字<b><b></b>、<b><i></b>這對兄弟出現(xiàn)了。在它們的幫助下，頁面的文字與用戶之間的交互得到了提升。<br>
然而好景不長，在互聯(lián)網(wǎng)飛速發(fā)展的情況下，很快出現(xiàn)一個叫CSS的東西，它的責(zé)任就是用來控制頁面的表現(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，因為他們有語義性可以更好的與用戶交互?？墒菃栴}并沒有就此結(jié)束，因為在開發(fā)的時候在一些情況下發(fā)現(xiàn)用<b><strong></b>、<b><em></b>總是不能很的好的表示語義，為此，在HTML5中<b><b></b>、<b><i></b>又以修改后的面貌展現(xiàn)給我們了，所以在HTML5中又重新啟用了<b><b></b>、<b><i></b>這對兄弟。</p>
</pre>
<p>那么具體在HTML5中什么時候用它們呢？<br><b><b></b>標(biāo)簽表示出于實用的目的提醒讀者注意的一塊文字，不傳達(dá)任何額外的重要性，也不表示其它的語義和語氣，用于：關(guān)鍵詞，產(chǎn)品名，操作指令等等；<br><b><i></b>標(biāo)簽表示一塊不同于其它文字的文字，具有不同的語態(tài)或語氣，用于：分類名稱，技術(shù)術(shù)語，外語中的慣用詞等等。</p>
<b>6. 如何使用ARIA提升可訪問性？</b>
<p>語義真的有那么重要么？通過語義又怎么提高訪問性與增加SEO的搜索的呢？因為現(xiàn)在一些SEO與瀏覽器或是屏幕閱讀器（一個給殘障人士用的文章閱讀器）都在根據(jù)HTML5的新標(biāo)準(zhǔn)做一些新的功能，他們會跟具新的語義直接與自身的功能相對應(yīng)。如果網(wǎng)頁的開發(fā)者也是這么做的，那么你的網(wǎng)站的應(yīng)用性會大大的增加。<br>
上面又強(qiáng)調(diào)了一下語義的重要性，下面告訴大家一個更好的增強(qiáng)語義的小竅門，一定要好好看哦，因為這個小竅門朋友們不一定知道的：</p>
<p>概念介紹：<em>WAI-ARIA(Web Accessibility Initiative"s Accessible Rich Internet Applications)</em>無障礙網(wǎng)頁倡議之可訪問的富互聯(lián)網(wǎng)應(yīng)用，簡稱ARIA，他就是一種技術(shù)規(guī)范。他在HTML提供的語義的基礎(chǔ)之上，他會使用屬性來填補(bǔ)一些語義上的空白。</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>將屏幕閱讀器測試列入你的日常開發(fā)中；（因為他是最能直接反映出你的網(wǎng)站語義寫的好不好的東西）；</p>
<p>正確的為標(biāo)簽制定<b>id</b>與類（語義性一定要明顯）；</p>
<p>正確使用<b>class</b>類以及他提供的微格式；</p>
<p>關(guān)于<b>class</b>的微格式，因為有很多人都知道或是認(rèn)為<b>class</b>的屬性是只能為一組元素應(yīng)用CSS樣式，其實并不是這樣的，其實他還可以在不引用額外的標(biāo)簽下來增強(qiáng)語義，這就是微格式，微格式是使用約定的<b>class</b>名稱來標(biāo)示一塊HTML從而來增強(qiáng)與應(yīng)用程序、智能搜索與搜索機(jī)器人的交互。關(guān)于微格式的使用可以看看這個網(wǎng)址：http://microformats.org</p>
<b>7. 你想到過網(wǎng)頁文件的命名會影響你網(wǎng)站的體驗么？</b>
<p>這個一聽第一感覺就是不靠譜，一個文件的名字還會影響到網(wǎng)站的體驗？<br>
正確的答案確實是：<strong><em>是的！</em></strong><br>
如：文件名： <em>Html_First_Blog.htm</em> 與 <em>html-first-blog.html</em><br>
這個兩個文件名不管是在用戶的體驗上與搜索引擎上都第二個完勝第一個。是不是有人會問為什么 ？？<br>
下面我就說一下有如下幾點(diǎn)是需要我們注意的：</p>
<p>文件名需要用小寫字母：<br>
應(yīng)用場景就是最簡單的輸入地址吧，你認(rèn)為下面哪種寫起來更方便，這個請自己體會吧：<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>
大家一定會認(rèn)為，用"_"挺好，其實這是做C開發(fā)時候的寫法，也可以說是習(xí)慣，但是在網(wǎng)站中“-”是搜索引擎更喜歡的style；</p>
<p>使用標(biāo)準(zhǔn)的擴(kuò)展名：<br>
現(xiàn)在用好多的網(wǎng)站都是用.htm的擴(kuò)展名，這個瀏覽器也不會報錯，但是標(biāo)準(zhǔn)的擴(kuò)展名就是.html的所以大家以后寫的時候就不要省時間少寫一個字母“l(fā)”了。</p>
<p>記住以上幾點(diǎn)才是正確的寫網(wǎng)頁文件的命名方法哦，不要把寫其它語言的方法放進(jìn)來。</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="dnkpnhlp" class="mt-64 tags-seach" >
<div id="dnkpnhlp" class="tags-info">
<a style="width:120px;" title="GPU云服務(wù)器" href="http://www.ezyhdfw.cn/site/product/gpu.html">GPU云服務(wù)器</a>
<a style="width:120px;" title="云服務(wù)器" href="http://www.ezyhdfw.cn/site/active/kuaijiesale.html?ytag=seo">云服務(wù)器</a>
<a style="width:120px;" title="深入理解系列" href="http://www.ezyhdfw.cn/yun/tag/shenrulijiexilie/">深入理解系列</a>
<a style="width:120px;" title="深入理解linux" href="http://www.ezyhdfw.cn/yun/tag/shenrulijielinux/">深入理解linux</a>
<a style="width:120px;" title="深入理解webrtc" href="http://www.ezyhdfw.cn/yun/tag/shenrulijiewebrtc/">深入理解webrtc</a>
<a style="width:120px;" title="深入理解python" href="http://www.ezyhdfw.cn/yun/tag/shenrulijiepython/">深入理解python</a>
</div>
</div>
<div id="dnkpnhlp" class="entry-copyright mb-30">
<p class="mb-15"> 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。</p>
<p>轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/49586.html</p>
</div>
<ul class="pre-next-page">
<li id="dnkpnhlp" class="ellipsis"><a class="hpf" href="http://www.ezyhdfw.cn/yun/49585.html">上一篇：多說自定義CSS動感頭像和多說評論顯示User Agent的那些小事</a></li>
<li id="dnkpnhlp" class="ellipsis"><a class="hpf" href="http://www.ezyhdfw.cn/yun/49587.html">下一篇：如何做好移動端的響應(yīng)式設(shè)計：Viewport控制</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/111019.html"><b>[ 學(xué)習(xí)路線 ] 學(xué)完這些去阿里！GOGOGO</b></a></h2>
<p class="ellipsis2 good">摘要：以下知識點(diǎn)是前輩師兄總結(jié)基礎(chǔ)語義化標(biāo)簽引進(jìn)了一些新的標(biāo)簽，特別注意等，注意的標(biāo)題結(jié)構(gòu)理解瀏覽器解析的過程，理解的樹形結(jié)構(gòu)，及相應(yīng)理解標(biāo)簽在各個瀏覽器上的默認(rèn)樣式代理樣式，理解中的重置樣式表的概念理解等功能性標(biāo)簽理解標(biāo)簽，理解文件提交過程推薦
以下知識點(diǎn)是前輩師兄總結(jié)
1、HTML/HTML5基礎(chǔ)：
1.0、語義化H5標(biāo)簽1.1、H5引進(jìn)了一些新的標(biāo)簽，特別注意article...</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-1272.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/12/small_000001272.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">zhaochunqi</span></a>
<time datetime="">2019-08-28 18:06</time>
<span><i class="fa fa-commenting"></i>評論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/85548.html"><b>[ 學(xué)習(xí)路線 ] 學(xué)完這些去阿里！GOGOGO</b></a></h2>
<p class="ellipsis2 good">摘要：以下知識點(diǎn)是前輩師兄總結(jié)基礎(chǔ)語義化標(biāo)簽引進(jìn)了一些新的標(biāo)簽，特別注意等，注意的標(biāo)題結(jié)構(gòu)理解瀏覽器解析的過程，理解的樹形結(jié)構(gòu)，及相應(yīng)理解標(biāo)簽在各個瀏覽器上的默認(rèn)樣式代理樣式，理解中的重置樣式表的概念理解等功能性標(biāo)簽理解標(biāo)簽，理解文件提交過程推薦
以下知識點(diǎn)是前輩師兄總結(jié)
1、HTML/HTML5基礎(chǔ)：
1.0、語義化H5標(biāo)簽1.1、H5引進(jìn)了一些新的標(biāo)簽，特別注意article...</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-1407.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/14/small_000001407.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">learn_shifeng</span></a>
<time datetime="">2019-08-21 10:27</time>
<span><i class="fa fa-commenting"></i>評論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/115207.html"><b>前端技術(shù) 博客文章、書籍 積累</b></a></h2>
<p class="ellipsis2 good">摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進(jìn)行
書籍
《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...</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-356.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/03/small_000000356.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">LiangJ</span></a>
<time datetime="">2019-08-30 12:58</time>
<span><i class="fa fa-commenting"></i>評論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/79267.html"><b>前端技術(shù) 博客文章、書籍 積累</b></a></h2>
<p class="ellipsis2 good">摘要：好多編輯器例如等都支持這樣的語法來快速的編寫代碼如何優(yōu)雅地使用把標(biāo)簽放在結(jié)束標(biāo)簽之后結(jié)束標(biāo)簽之前的差別什么是響應(yīng)式設(shè)計怎樣進(jìn)行
書籍
《JavaScriptDOM編程藝術(shù)》《JavaScript高級程序設(shè)計》《JavaScript框架設(shè)計》《JavaScript專家編程》《JavaScript Ninjia》《JavaScript語言精粹（修訂版）》《JavaScript設(shè)計模式》《J...</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-269.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/02/small_000000269.jpg" alt=""><span id="dnkpnhlp" class="layui-hide64">codercao</span></a>
<time datetime="">2019-08-19 18:10</time>
<span><i class="fa fa-commenting"></i>評論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ā)表評論</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">登陸后可評論</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條評論</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-95.html"><img src="http://www.ezyhdfw.cn/yun/data/avatar/000/00/00/small_000000095.jpg" alt=""></a>
<h3><a href="http://www.ezyhdfw.cn/yun/u-95.html" rel="nofollow">scq000</a></h3>
<h6>男<span>|</span>高級講師</h6>
<div id="dnkpnhlp" 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="dnkpnhlp" class="user-msgbox-list flex_box_zd">
<h3 class="hpf">TA的文章</h3>
<a href="http://www.ezyhdfw.cn/yun/ut-95.html" class="box_hxjz">閱讀更多</a>
</div>
<ul class="user-msgbox-ul">
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/123016.html">SBT30100VDC-ASEMI低壓降肖特基二極管SBT30100VDC</a></h3>
<p>閱讀 2570<span>·</span>2021-11-11 16:54</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/121071.html">python-mqtt自動化測試</a></h3>
<p>閱讀 2810<span>·</span>2021-09-26 09:47</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/119552.html">周文康的大一Python學(xué)習(xí)心得體會</a></h3>
<p>閱讀 4082<span>·</span>2021-09-08 09:36</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/117699.html">JimCloud-五一大促，香港美國物理機(jī)五折優(yōu)惠！400/月起 JimCloud云主機(jī)五折起!35</a></h3>
<p>閱讀 2851<span>·</span>2021-07-25 21:37</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/116972.html">WebWork（在主線程創(chuàng)建子進(jìn)程）</a></h3>
<p>閱讀 1001<span>·</span>2019-08-30 15:54</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/115970.html">被遺忘的CSS</a></h3>
<p>閱讀 2616<span>·</span>2019-08-30 14:22</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/115657.html">教你實現(xiàn)首行及首列固定 Table</a></h3>
<p>閱讀 3358<span>·</span>2019-08-30 13:57</p></li>
<li><h3 class="ellipsis"><a href="http://www.ezyhdfw.cn/yun/114228.html">如何解決滾動條scrollbar出現(xiàn)造成的頁面寬度被擠壓的問題？</a></h3>
<p>閱讀 2918<span>·</span>2019-08-29 17:17</p></li>
</ul>
</div>
<!-- 文章詳情右側(cè)廣告-->
<div id="dnkpnhlp" class="com_layuiright-box">
<h6 class="top-com-title"><span>最新活動</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')
});
}
// 舉報
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;
//加載評論
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("評論內(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)贊過");
}
}
});
});
function attenquestion(_tid,_rs){
$.ajax({
//提交數(shù)據(jù)的類型 POST GET
type:"POST",
//提交的網(wǎng)址
url:"http://www.ezyhdfw.cn/yun/favorite/topicadd.html",
//提交的數(shù)據(jù)
data:{tid:_tid,rs:_rs},
//返回數(shù)據(jù)的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//在請求之前調(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)用出錯執(zhí)行的函數(shù)
error: function(){
//請求出錯處理
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)刻得科技股份有限公司）是中立、安全的云計算服務(wù)平臺，堅持中立，不涉足客戶業(yè)務(wù)領(lǐng)域。公司自主研發(fā)IaaS、PaaS、大數(shù)據(jù)流通平臺、AI服務(wù)平臺等一系列云計算產(chǎn)品，并深入了解互聯(lián)網(wǎng)、傳統(tǒng)企業(yè)在不同場景下的業(yè)務(wù)需求，提供公有云、混合云、私有云、專有云在內(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線上公開課</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)品動態(tài)</a></p>
</li>
<li>
<h6>友情鏈接</h6> <p><a >GPU算力平臺</a></p> <p><a >UCloud私有云</a></p>
<p><a >SurferCloud</a></p> <p><a >工廠仿真軟件</a></p> <p><a >AI繪畫</a></p>
<p><a >Wavespeed AI</a></p>
</li>
<li>
<h6>社區(qū)欄目</h6>
<p><a href="http://www.ezyhdfw.cn/yun/column/index.html">專欄文章</a></p>
<p><a href="http://www.ezyhdfw.cn/yun/udata/">專題地圖</a></p> </li>
<li>
<h6>常見問題</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/" >新聞動態(tài)</a></p>
<p><a href="http://www.ezyhdfw.cn/site/about/news/report/">媒體動態(tài)</a></p> <p><a href="http://www.ezyhdfw.cn/site/cases.html">客戶案例</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號</a><i>｜</i><a rel="nofollow" ></a> 滬ICP備12020087號-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="v9v1z" class="pl_css_ganrao" style="display: none;"><dl id="v9v1z"></dl><legend id="v9v1z"><sup id="v9v1z"></sup></legend><u id="v9v1z"></u><rp id="v9v1z"></rp><sup id="v9v1z"><label id="v9v1z"><video id="v9v1z"><small id="v9v1z"></small></video></label></sup><nobr id="v9v1z"><em id="v9v1z"></em></nobr><legend id="v9v1z"></legend><thead id="v9v1z"><dl id="v9v1z"><small id="v9v1z"><th id="v9v1z"></th></small></dl></thead><dl id="v9v1z"><legend id="v9v1z"><dfn id="v9v1z"><u id="v9v1z"></u></dfn></legend></dl><progress id="v9v1z"><form id="v9v1z"><p id="v9v1z"><var id="v9v1z"></var></p></form></progress><th id="v9v1z"><b id="v9v1z"></b></th><span id="v9v1z"></span><optgroup id="v9v1z"><ruby id="v9v1z"></ruby></optgroup><listing id="v9v1z"></listing><mark id="v9v1z"><form id="v9v1z"><p id="v9v1z"><var id="v9v1z"></var></p></form></mark><strike id="v9v1z"><strong id="v9v1z"><meter id="v9v1z"><tt id="v9v1z"></tt></meter></strong></strike><sub id="v9v1z"><thead id="v9v1z"></thead></sub><span id="v9v1z"><strike id="v9v1z"></strike></span><meter id="v9v1z"><ol id="v9v1z"></ol></meter><dfn id="v9v1z"><u id="v9v1z"></u></dfn><pre id="v9v1z"></pre><i id="v9v1z"></i><optgroup id="v9v1z"></optgroup><strike id="v9v1z"><label id="v9v1z"><strong id="v9v1z"><track id="v9v1z"></track></strong></label></strike><mark id="v9v1z"></mark><u id="v9v1z"></u><form id="v9v1z"><rp id="v9v1z"></rp></form><strong id="v9v1z"></strong><small id="v9v1z"><output id="v9v1z"><span id="v9v1z"><thead id="v9v1z"></thead></span></output></small><strong id="v9v1z"><th id="v9v1z"><tt id="v9v1z"><progress id="v9v1z"></progress></tt></th></strong><thead id="v9v1z"></thead><pre id="v9v1z"></pre><legend id="v9v1z"><dfn id="v9v1z"><u id="v9v1z"><ins id="v9v1z"></ins></u></dfn></legend><small id="v9v1z"></small><dfn id="v9v1z"><u id="v9v1z"><ins id="v9v1z"><address id="v9v1z"></address></ins></u></dfn><strike id="v9v1z"><strong id="v9v1z"><optgroup id="v9v1z"><ruby id="v9v1z"></ruby></optgroup></strong></strike><span id="v9v1z"><i id="v9v1z"></i></span><pre id="v9v1z"></pre><label id="v9v1z"><video id="v9v1z"></video></label><ruby id="v9v1z"><thead id="v9v1z"><big id="v9v1z"><dl id="v9v1z"></dl></big></thead></ruby><em id="v9v1z"><meter id="v9v1z"></meter></em><ruby id="v9v1z"></ruby><rp id="v9v1z"></rp><optgroup id="v9v1z"><track id="v9v1z"><thead id="v9v1z"><progress id="v9v1z"></progress></thead></track></optgroup><output id="v9v1z"></output><rp id="v9v1z"></rp><span id="v9v1z"></span><sub id="v9v1z"><big id="v9v1z"><label id="v9v1z"><pre id="v9v1z"></pre></label></big></sub><font id="v9v1z"><div id="v9v1z"><ol id="v9v1z"><style id="v9v1z"></style></ol></div></font><p id="v9v1z"></p></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>
