學習web前端常用知識點的詳細介紹

1、常見的區塊級元素 內嵌元素

p -最常用的區塊級元素

     dl - 和dt-dd 搭配使用的區塊級元素

     form - 互動表

     h1 -h6- 大標題

     hr - 水平分隔線

##  ## #     p - 段落

##     ul - 無序列表

     fieldset - 表單欄位集

     colgroup-col - 表單欄位組

 td  表格及行-單元格

     pre - 格式化文字

 a –超連結（錨點）

     br - 更換文字

##   ##     br - 換行

##   

     em - 強調

     img - 圖片

     input - 輸入方塊

     label - 表，定義內文內區塊

     strong - 粗體強調

#     sub - 下標

     

#  與中標線文字方塊

     u - 底線

     select - 項目選擇

2、實現文字三點的幾個條件

text-overflow

##屬性

僅為：當文字溢出時是否顯示省略標記，並不具備其它的樣式屬性定義，要實現溢出時產生省略號的效果還需定義：

#1、容器寬度：

width：value;（px、%，都可以）2、強製文字在一行內顯示:white-space

：nowrap;

3、溢出內容為隱藏：overflow：hidden;

4、溢出文字顯示省略號：text-overflow：ellipsis;

註：必須是單行文字才能設定本文溢位！ ！ ！

IE6+；chrome1.0+；safari3.1+（firefox,opera暫不支援）

3、垂直居中的幾個條件

設定一個元素在一個容器中垂直居中，必須更改預設的

display

屬性值為inline-block;

並加上同級元素（標尺）（同級元素[標尺]樣式設定為

vertical-align

:middle;width:0;

height:100%;display:inline-block;） 。

三個條件：

1：必須為容器（父元素）加上text-align:center;

2:必須給予當前元素轉成行內塊元素（display:inline-block;）再給目前元素加上vertical-align:middle;

3：在目前元素的後面（沒有回車）加上同級元素span ;並對span進行vertical-align:middle;width:0;height:100%;display:inline-block

4、置換元素與非置換元素

#置換元素與非置換元素

a) 置換元素：瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。 例如：瀏覽器會根據標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果查看(x)html程式碼，則看不到圖片的實際內容；標籤的type屬性來決定要顯示輸入框，還是單選按鈕等。 (x)html中的、、、<select>都是置換元素。這些元素往往沒有實際的內容，就是一個空元素。 </p> <p style="text-align: left;">置換元素在其顯示中產生了框，這也就是有的內聯元素（img,input）能夠設定寬高的原因。 </p> <p style="text-align: left;">b) 不可替換元素（非置換元素）：(x)html 的大多數元素是不可替換元素，即其內容直接表現給使用者端（如瀏覽器）。 </p> <p style="text-align: left;">5、什麼是精靈圖？優勢是什麼？ </p> <p style="text-align: left;">圖片整合，將小的單張背景圖整合到一張大的背景圖上。 </p> <p style="text-align: left;">圖片整合的優勢： 1）透過圖片整合來減少對伺服器的請求次數，從而提高 頁面的載入速度。 2）透過整合圖片來減少圖片的體積。 </p> <p style="text-align: left;">6、什麼是<a href="http://www.php.cn/code/5005.html" target="_blank">css層疊</a>樣式表？優先權演算法如何計算？ </p> <p style="text-align: left;">a.重要性和來源的優先權排序從低到高是：</p> <p style="text-align: left;">1）瀏覽器預設樣式</p> <p style="text-align: left;">2）<a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>/ id.....選擇器的權重</p> <p style="text-align: left;">3）行間樣式</p> <p style="text-align: left;">4）內聯或外聯（書寫順序）</p> <p style="text-align: left;">5）!important 最高的</p> <p style="text-align: left;">7、display:none與<a href="http://www.php.cn/wiki/929.html" target="_blank">visibility</a>:hidden的區別</p> <p style="text-align: left;">前者：隱藏不佔位 後者：隱藏但是佔位置</p> <p style="text-align: left;">8、 <a href="http://www.php.cn/code/6440.html" target="_blank">清除浮動</a>的幾種方式</p> <p style="text-align: left;">hack1：為父元素加入宣告overflow:hidden;</p> <p style="text-align: left;">hack2:   為父元素加height</p> <p style="text-align: left;">#hack3:在浮動元素下方添加空p,並給該元素添加        聲明：p{clear:both; height:0; overflow:hidden;}</p> <p style="text-align: left;">#hack4:萬能清除浮動法p:after{content:“. 」;clear:both;display:block;height:0;overflow:hidden;  visibility:hidden;}</p> <p style="text-align: left;">9、哪些屬性可以繼承？ </p> <p style="text-align: left;">1）文字相關：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text -transform、word-spacing</p> <p style="text-align: left;">2）清單相關：list-style-image、list-style-position、list-style-type、list-style</p> <p style="text-align: left;">3）顏色相關：color </p> <p style="text-align: left;">4）透明度（子元素會繼承祖元素的opacity，但無法改變）</p> <p style="text-align: left;">註：font-size繼承的是父元素的大小，而不是比例。 line-height當父元素是百分比或px值得時候，子元素跟父元素相同，當父元素是normal或數字的時候，子元素的line-height是子元素的字體大小乘以數字。 </p> <p style="text-align: left;">10、定位的方式</p> <p style="text-align: left;">position屬性值：<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>，relative，absolute，fixed</p> <p style="text-align: left;">1）static</p> <p style="text-align: left;">static是預設值，元素位於文件流程中，正常顯示，忽略元素的<a href="http://www.php.cn/wiki/904.html" target="_blank">top</a>，<a href="http://www.php.cn/wiki/906.html" target="_blank">bottom</a>#，<a href="http://www.php.cn/wiki/907.html" target="_blank">left</a>，<a href="http://www.php.cn/wiki/905.html" target="_blank">right</a>#。 <a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a>屬性始終為0.</p> <p style="text-align: left;">2）relative</p> <p style="text-align: left;">相對定位，保留元素在文件流中佔用的位置和尺寸，由left/right/top /bottom幾個屬性決定相對移動的距離，原來的位置保留</p> <p style="text-align: left;">3）absolute</p> <p style="text-align: left;"><a href="http://www.php.cn/code/6074.html" target="_blank">絕對定位</a>，將物件從文檔流中脫離出來，使用left /right/top/bottom等屬性相對其最接近的一個並有定位設定的父元素進行絕對定位；如果沒有，則依據body物件</p> <p style="text-align: left;">4）fixed</p> <p style="text-align: left;">fixed和absolute差不多，但是他相對的是視窗的左上角，不會跟隨文件滾動。但如果在多frame頁裡面，他相對的是所在frame的左上角，而不是瀏覽器左上角。 </p> <p style="text-align: left;">11、link和@import區別？ </p> <p style="text-align: left;">1、老祖宗的差別。 link屬於XHTML標籤，而@import完全是CSS提供的一種方式。 </p> <p style="text-align: left;">2、link標籤除了可以載入CSS外，還可以做很多其它的事情，例如定義<a href="http://www.php.cn/wiki/1541.html" target="_blank">RSS</a>，定義rel連接屬性等，@import就只能載入CSS了</p> <p style="text-align: left;">3、載入順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面全部被下載完再被加載。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍）</p> <p style="text-align: left;">4、相容性的差異。由於@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題</p> <p style="text-align: left;">5、使用dom控制樣式時的差別。使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的</p> <p style="text-align: left;">#12、定位的屬性值都有哪些？每個值得意思？ </p> <p style="text-align: left;">各屬性值的功能：</p> <p style="text-align: left;">static：預設值。位置設定為 static 的元素會正常顯示，它總是會處於文件流給予的位置（static 元素會忽略任何 top、bottom、left 或 right 聲明）。 </p> <p style="text-align: left;">absolute：相對於父級元素的絕對定位，s浮出、脫離佈局流，它不佔據空間，就是我們所說的層，其位置相對於最近的已定位父元素而言的位置，可直接指定「left」、「top」、「right」 以及「bottom」 屬性。若父級都沒有定位，則以html（根元素）。 (層疊的順序z-index:value)</p> <p style="text-align: left;">relative：是相對於預設位置的偏移定位，透過設定left、top、right、bottom值可將其移至相對於其正常位置的地方（相對於自己的開始的位置發生的位置上的移動，【不會破壞正常的佈局流】</p> <p style="text-align: left;">fixed：相對瀏覽器的絕對定位，是相對於瀏覽器視窗的指定座標進行定位。 ##html5</p> <p style="text-align: left;">新增<a href="http://www.php.cn/wiki/1118.html" target="_blank">的標籤15個</a><a href="http://www.php.cn/php/php-tp-append.html" target="_blank">header nav footer </a>main</p> aside article section figure datalist video audio fieldest  legend  label caption<p style="text-align: left;"><a href="http://www.php.cn/wiki/646.html" target="_blank"></a></p> <p style="text-align: left;"></p> <p style="text-align: left;"></p> <p style="text-align: left;"><a href="http://www.php.cn/wiki/931.html" target="_blank"></a></p> <p style="text-align: left;"><a href="http://www.php.cn/wiki/919.html" target="_blank"></a></p> <p style="text-align: left;"></p> <p style="text-align: left;"></p> <p style="text-align: left;"><a href="http://www.php.cn/code/7955.html" target="_blank"></a></p> <p style="text-align: left;"></p> <p style="text-align: left;"></p> <p style="text-align: left;"></p> <p style="text-align: left;"></p> <p style="text-align: left;"></p> <p style="text-align: left;"></p>##################################################################################################################' #14、一、BFC是什麼？ margin###重疊（放在兩個BFC裡）######3、根元素、 ###float###屬性不為none、 position為absolute或fixed、 display為inline-block，table- cell，table-caption，flex，inline-flex、 overflow不為visible######15、.px，em，rem，pt的區別######1）px其實就是像素，用px設定字體大小時，比較穩定且精確######但是這種方法存在一個問題，當使用者在瀏覽器中瀏覽我們製作的web頁面時，如果對瀏覽器進行了縮放，這時會使我們的web###頁面佈局###被打破。因此，這時就提出了使用「em」來定義web頁面的字體。 ######2）em就是根據基準來縮放字體的大小######em是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小######3）rem是相對於根元素字體大小來顯示的######rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值######4）pt的大小等於1英吋的1/72######磅：他是作為文字的一種計量單位###<p style="text-align: left;">This measurement method comes from a print-design background and is most suitable for media, but it is also widely used in monitors</p> <p style="text-align: left;">16. What are the methods to achieve vertical + horizontal centering? </p> <p style="text-align: left;">1.p{width:200px;height:200px;<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin :auto;}</p> <p style="text-align: left;">2, p{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px; }</p> <p style="text-align: left;">17. Progressive enhancement and graceful degradation</p> <p style="text-align: left;">Progressive enhancement: Build pages for low-version browsers to ensure the most basic functions, and then perform effects and interactions for advanced browsers Wait for improvements and additional functions to achieve a better user experience. </p> <p style="text-align: left;">Graceful degradation: Build complete functions from the beginning, and then make them compatible with lower version browsers</p> <p style="text-align: left;">18. What are the css selectors? </p> <p style="text-align: left;">1) Wildcard selector *</p> <p style="text-align: left;">2) Type selector/element selector a</p> <p style="text-align: left;">3) Attribute selector input[type="button"]</p> <p style="text-align: left;">4) Contains selector p .code a</p> <p style="text-align: left;">5) Sub-object selector ul.test>li</p> <p style="text-align: left;">6) ID selector </p> <p style="text-align: left;">#7) Class selection Symbol .</p> <p style="text-align: left;">8) Group selector body,ul,li</p> <p style="text-align: left;">9)<a href="http://www.php.cn/code/6014.html" target="_blank">Pseudo class</a> and pseudo object selector p<a href="http://www.php.cn/wiki/970.html" target="_blank">:first-letter</a> a<a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a></p> <p style="text-align: left;">10) Adjacent selector li+li</p> <p style="text-align: left;">19, the difference between animation and transition</p> <p style="text-align: left;">The same point: they are all following Time changes an element's attribute value. </p> <p style="text-align: left;">Differences: Transition needs to trigger an event (hover event or click event, etc.) to change its </p> <p style="text-align: left;">css properties over time; animation can also be used without triggering any events. Explicitly change the element's CSS attribute value over time to achieve an <a href="http://www.php.cn/code/9595.html" target="_blank">animation</a> effect. CSS3 animation requires clear animation attribute values. </p> <p style="text-align: left;">20. What are the standard <a href="http://www.php.cn/code/6444.html" target="_blank">box model</a> and the weird box model. The difference between the two, how to implement the weird box model, and the standard sum model</p> <p style="text-align: left;">Standard box model: content+border+<a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a> </p> <p style="text-align: left;">Weird box model: content</p> <p style="text-align: left;">When calculating the width of the box, one adds border and padding and the other does not.</p> <p style="text-align: left;">Weird box model implementation: box-sizing:border-box</p> <p style="text-align: left;">Standard box model: box-sizing: content-box</p> <p style="text-align: left;">21. How to center an element up, down, left, and right within the parent element</p> <p style="text-align: left;">css: </p> <p style="text-align: left;">.box{display:flex;width:800px;height:300px ;justify-content:center}</p> <p style="text-align: left;">.box p{align-self:center}</p> <p style="text-align: left;">html:</p> <p style="text-align: left;"><p class="box"></p> <p style="text-align: left;"> <p></p></p> <p style="text-align: left;"></p></p> <p style="text-align: left;">22. What are the commonly used formats for video and audio?</p> <p style="text-align: left;"> For video: video /ogg video/mp4 video/webm for <a href="http://www.php.cn/code/6093.html" target="_blank">audio</a>: audio/ogg audio/mpeg</p> <p style="text-align: left;">23. Briefly explain the attributes and attribute values ​​of <a href="http://www.php.cn/code/10723.html" target="_blank">flexible box model</a> (Write out at least 6 attributes) </p> <p style="text-align: left;">display:flex;</p> <p style="text-align: left;">flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>:</p> <p style="text-align: left;">justify-content:</p> <p style="text-align: left;"> align-items:</p> <p style="text-align: left;">align-self:</p> <p style="text-align: left;">align-content:</p> <p style="text-align: left;">flex-wrap:</p> <p style="text-align: left;">23. Briefly introduce linear gradient and path Usage of gradient and repeated gradient</p> <p style="text-align: left;">Linear gradient: linear-gradient()</p> <p style="text-align: left;">Radial gradient: radial-gradient()</p> <p style="text-align: left;"> Repeating linear gradient: repeating-linear-gradient()</p> <p style="text-align: left;"> Repeating radial gradient: repeating-radial-gradient()</p> <p style="text-align: left;">24. Briefly introduce the usage of animation</p> <p style="text-align: left;">animation consists of two parts: animation: animation name animation execution time animation type animation delay time animation repetition number animation direction; @<a href="http://www.php.cn/wiki/1051.html" target="_blank">key</a>frames Animation name</p> <p style="text-align: left;">25. Several main attributes and attribute values ​​​​of css3D</p> <p style="text-align: left;">1. Depth of field: perspactive:number; If the object you want to see is larger, then set the value smaller , if you want to see the object smaller, set the value larger</p> <p style="text-align: left;">2. 3D stage: transform-style:preserve-3d;</p> <p style="text-align: left;">3. translateZ() rotateZ() scaleZ()</p> <p style="text-align: left;">26. Main attributes in 2D</p> <p style="text-align: left;">transform:translate() rotate() skew() scale()</p> <p style="text-align: left;">transform-origin:</p> <p style="text-align: left;">27. Briefly introduce the attributes and attribute values ​​of transition animation</p> <p style="text-align: left;">transition: attribute name (you can use <a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a>) animation execution time animation type animation delay time</p> <p style="text-align: left;">28. New <a href="http://www.php.cn/code/6021.html" target="_blank"> background attributes in css3</a></p> <p style="text-align: left;"><a href="http://www.php.cn/code/865.html" target="_blank">background-origin</a>: background origin</p> <p style="text-align: left;"><a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>:Background cropping</p> <p style="text-align: left;"><a href="http://www.php.cn/code/872.html" target="_blank">background-size</a>:<a href="http://www.php.cn/code/8294.html" target="_blank">The size of the background image</a></p> <p style="text-align: left;">The following are the three values ​​​​of background-size</p> <p style="text-align: left;">length</p> <p style="text-align: left;">Specifies the size of the background image. The first value is width, the second value is height. </p> <p style="text-align: left;">Percentage(%)</p> <p style="text-align: left;">Set the background image size as a percentage</p> <p style="text-align: left;">cover</p> <p style="text-align: left;">Expand the background image to a large enough size so that the background image is completely Cover the background area</p> <p style="text-align: left;">29, write the core of the five major browsers and their representative works</p> <p style="text-align: left;">*Trident: IE, Maxthon, Tencent, Theworld, 360 Browser </p> <p style="text-align: left;">*Gecko:: The representative work Mozilla Firefox is an open source project </p> <p style="text-align: left;">*Webkit: The representative work Safari and Chrome are an open source project. </p> <p style="text-align: left;">*Presto: Representative work Opera, Presto is a browser layout engine developed by Opera Software. It is also recognized as the fastest rendering engine in the world. </p> <p style="text-align: left;">*Blink: Browser layout engine developed by Google and Opera Software, released in April 2013. </p> <p style="text-align: left;">30. Write down several common bugs and solutions in IE6 (at least 4 types)</p> <p style="text-align: left;">1) The picture has a border BUG Solution: Add border:0; or border:0 to the picture none;</p> <p style="text-align: left;">2. Double floating direction (double margin) Solution: display:inline</p> <p style="text-align: left;">3. Default height (IE6, IE7) Solution: Add declaration to element: font-size :0; Option 2: Add a statement to the element: overflow:hidden;</p> <p style="text-align: left;">4. The default sizes of button elements are different. Option: Use a tag to simulate </p> <p style="text-align: left;">31. IE’s <a href="http://www.php.cn/code/120.html" target="_blank"> filter </a>What? </p> <p style="text-align: left;">1, _ Underline attribute filter</p> <p style="text-align: left;">2, \9: IE version recognition; other browsers do not recognize syntax: selector {attribute: attribute value\9;}</p> <p style="text-align: left;">3. \0: Recognized by IE8 and above; not recognized by other browsers. Syntax: selector {attribute: attribute value\0;}</p> <p style="text-align: left;">32. Element height collapse solutions (at least 4 types )</p> <p style="text-align: left;">hack1: Add the declaration overflow:hidden to the parent element;</p> <p style="text-align: left;">hack2: Add height to the parent element</p> <p style="text-align: left;">hack3: Add an empty p below the floating element, and give the Element addition Declaration: p{clear:both; height:0; overflow:hidden;}</p> <p style="text-align: left;">hack4: Universal clear floating method p:after{content: ".";clear:both;display:block;height :0;overflow:hidden; visibility:hidden;}</p><p>以上是學習web前端常用知識點的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>陳述：</span><div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="使用bootstrap IE8相容性處理的方法" href="http://m.php.cn/zh-tw/faq/358069.html">使用bootstrap IE8相容性處理的方法</a></span><span>下一篇：<a class="dBlack" title="使用bootstrap IE8相容性處理的方法" href="http://m.php.cn/zh-tw/faq/358073.html">使用bootstrap IE8相容性處理的方法</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="http://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh-tw/faq/1796679336.html" title="我們如何消除觸控設備按鈕上的黏滯懸停效應？" class="aBlack">我們如何消除觸控設備按鈕上的黏滯懸停效應？</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/1796679341.html" title="無論內容大小如何，如何在 CSS 網格中實現等寬列？" class="aBlack">無論內容大小如何，如何在 CSS 網格中實現等寬列？</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/1796679352.html" title="如何在不使用「background-size: cover」的情況下擴展 Mobile Safari 中的背景映像？" class="aBlack">如何在不使用「background-size: cover」的情況下擴展 Mobile Safari 中的背景映像？</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/1796679373.html" title="您應該使用 PHP 隱藏 Div 元素嗎？" class="aBlack">您應該使用 PHP 隱藏 Div 元素嗎？</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/1796679374.html" title="可以將多個 :before 偽元素套用到單一元素嗎？" class="aBlack">可以將多個 :before 偽元素套用到單一元素嗎？</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/zh-tw/"><b class="icon1"></b><p>首頁</p></a></li><li><a href="http://m.php.cn/zh-tw/course.html"><b class="icon2"></b><p>課程</p></a></li><li><a href="http://m.php.cn/zh-tw/wenda.html"><b class="icon4"></b><p>問答</p></a></li><li><a href="http://m.php.cn/zh-tw/login"><b class="icon5"></b><p>我的</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/zh-tw/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/zh-tw/"><b class="icon1"></b><span>首頁</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/course.html"><b class="icon2"></b><span>課程</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/wenda.html"><b class="icon4"></b><span>問答</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/dic.html"><b class="icon6"></b><span>詞典</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/xiazai/"><b class="icon8"></b><span>下載</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/faq/zt" title="專題"><b class="icon12"></b><span>專題</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/zh-tw/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/" >首頁</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/article.html" class="hover">文章</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/wenda.html" >問答</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/course.html" >課程</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/faq/zt" >專題</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/xiazai" >下載</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/game" >遊戲</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/dic.html" >詞典</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>