HTML 5 일반적인 면접 질문-HTML 튜토리얼-php.cn

1. 공통 블록 수준 요소 인라인 요소 p - 가장 일반적으로 사용되는 블록 수준 요소 dl - dt-dd 형식과 함께 사용되는 블록 수준 요소 형식 - 대화식 형식 h1 -h6- 제목 hr - 가로 구분선 ol – 순서 지정 목록 p - 단락 ul - 순서가 지정되지 않은 목록 fieldset - 양식 필드 세트 colgroup-col - 양식 열 그룹화 요소 table-tr-td 테이블 및 행-셀 미리 서식이 지정된 텍스트 a – 하이퍼링크(앵커) br - 줄 바꿈 i - 기울임꼴 em - 강조 img - 그림 입력 - 입력 상자 레이블 - 양식 레이블 범위 - 일반적으로 사용되는 인라인 컨테이너, 텍스트 블록 정의 Strong - 굵은 강조 sub - 아래 첨자 sup - 위 첨자 textarea - 여러 줄 텍스트 입력 상자 u - 밑줄 선택 - 프로젝트 선택 2. 여러 줄 텍스트의 3가지 text-overflow 속성 을 구현하기 위한 조건은 텍스트가 넘칠 때 생략 표시를 표시할지 여부와 다른 스타일 속성 정의를 갖지 않는 것입니다. 오버플로 시 타원 생성 효과를 정의해야 합니다.
1. 컨테이너 너비: 너비: 값(px, %, 둘 다 허용됨)
2. line: white-space : nowrap;
3. 오버플로 내용이 숨겨짐:overflow:hidden;
4. 오버플로 텍스트는 줄임표를 표시합니다: text-overflow: ellipsis; 이 기사의 오버플로를 설정하려면 한 줄의 텍스트여야 합니다! ! !

IE6+;
chrsafari3.1+(firefox, Opera는 아직 지원되지 않음)
3. 🎜>컨테이너의 세로 중앙에 요소를 설정하려면 기본
display
속성 값을 inline-block
으로 변경하고 형제 요소(ruler)(형제 요소[ruler])를 추가해야 합니다. 스타일 세로 정렬:middle;width:0;
높이:100%;display:inline-block;)으로 설정합니다. 세 가지 조건: 1:
text-align
:center를 사용하여 컨테이너(상위 요소)를 추가해야 합니다.
2: 현재 요소를 인라인으로 변환해야 합니다. 블록 요소(display:inline-block;) 그런 다음 현재 요소에 수직 정렬:중간;3을 추가합니다. 현재 요소 뒤에 형제 요소 범위를 추가하고(캐리지 리턴 없이) 범위에 대해 수직 정렬을 수행합니다. middle;width:0;height:100%;display:inline-block
4. 대체 요소와 비대체 요소

대체 요소와 비대체 요소

a) 대체 요소: 브라우저는 태그와 속성을 기반으로 요소의 특정 표시 내용을 결정합니다. 예를 들어, 브라우저는 이미지 정보를 읽고 태그의 src 속성 값을 기반으로 표시하지만 (x)html 코드를 보면 이미지의 실제 내용을 볼 수 없습니다. 태그 속성의 유형에 따라 입력 상자 또는
라디오 버튼
등을 표시할지 여부가 결정됩니다. (x), ,

, <select>는 모두 대체 요소입니다. 이러한 요소에는 실제 콘텐츠가 없는 경우가 많습니다. 즉, 빈 요소입니다. <br><a href="http://www.php.cn/code/5979.html" target="_blank">대체 요소는 디스플레이에 상자를 생성하므로 일부 인라인 요소(img, input)가 너비와 높이를 설정할 수 있습니다. </a><br>b) 대체할 수 없는 요소(대체할 수 없는 요소): (x) html의 대부분의 요소는 대체할 수 없는 요소입니다. 즉, 해당 내용이 사용자(예: 브라우저)에게 직접 표시됩니다. <br><br>5. 스프라이트 맵이란 무엇인가요? 장점은 무엇입니까? <br><br>이미지 통합, 작은 단일 배경 이미지를 하나의 큰 배경 이미지로 통합합니다. <br><br>이미지 통합의 장점: 1) 이미지 통합을 통해 서버로의 요청 횟수를 줄여 페이지 로딩 속도를 향상시킵니다. 2) 사진을 통합하여 크기를 줄입니다. <br><br>6. <br>css 캐스케이딩 <br> 스타일시트란 무엇인가요? <br>우선순위<a href="http://www.php.cn/code/5005.html" target="_blank">알고리즘은 어떻게 계산되나요? </a><a href="http://www.php.cn/code/6066.html" target="_blank">a. 중요도와 소스의 우선순위는 다음과 같습니다. </a>1) 브라우저 기본 스타일 <br>2) <br>class<br>/id.... 선택기 가중치 <br>3) 인라인 스타일 <a href="http://www.php.cn/wiki/164.html" target="_blank">4) 인라인 또는 외부(쓰기 순서) </a>5) !important 최고 <br><br><br>7. 디스플레이의 차이점:없음과 <a href="http://www.php.cn/wiki/929.html" target="_blank">가시성</a>:숨김<br><br>전자: 숨겨졌지만 공간을 차지하지 않음, 후자: 숨겨졌지만 공간을 차지함<br><br>8 . <a href="http://www.php.cn/code/6337.html" target="_blank">float 지우기</a><br><br>hack1: 상위 요소에 Overflow:hidden 선언을 추가합니다.<br><br>hack2: 상위 요소에 높이를 추가합니다<br><br>hack3: 부동 요소 p 아래에 공백을 추가하고 요소에 선언을 추가합니다. p{<a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>:both height:0; Overflow:hidden;}<br><br>hack4: universalclear float 메소드 p<a href="http://www.php.cn/wiki/978.html" target="_blank">:after</a>{content:“.”;clear:both;display:block;height:0;overflow:hidden; visible:hidden;}<br><br>9. <a href="http://www.php.cn/code/6064.html" target="_blank">상속</a>되겠습니까? <br><br>1) 텍스트 관련: <a href="http://www.php.cn/wiki/804.html" target="_blank">글꼴군</a>, <a href="http://www.php.cn/wiki/807.html" target="_blank">글꼴 크기</a>, <a href="http://www.php.cn/wiki/826.html" target="_blank">글꼴 스타일</a>, <a href="http://www.php.cn/wiki/862.html" target="_blank">글꼴 변형</a> , <a href="http://www.php.cn/wiki/858.html" target="_blank">글꼴 두께</a>, 글꼴, <a href="http://www.php.cn/wiki/865.html" target="_blank">문자 간격</a>, <a href="http://www.php.cn/wiki/864.html" target="_blank">줄 높이</a>, text-align, <a href="http://www.php.cn/wiki/867.html" target="_blank">텍스트 들여쓰기</a>, <a href="http://www.php.cn/wiki/863.html" target="_blank"> text-transform</a>, <a href="http://www.php.cn/wiki/866.html" target="_blank">word-spacing</a><br>2) 목록 관련: <a href="http://www.php.cn/wiki/954.html" target="_blank">list-style</a>-image, <a href="http://www.php.cn/wiki/955.html" target="_blank">list-style-position</a>, <a href="http://www.php.cn/wiki/956.html" target="_blank">list-style-type</a>, list-style<br>3) 색상 관련: 색상<br>4) 투명도(하위 요소는 상위 요소의 불투명도를 상속하지만 변경할 수 없음)<br>참고: 글꼴 크기 상속되는 것은 비율이 아니라 상위 요소의 크기입니다. line-height 상위 요소가 백분율 또는 px 값인 경우 하위 요소는 상위 요소와 동일합니다. 상위 요소가 일반 또는 숫자인 경우 하위 요소의 줄 높이는 하위 요소의 글꼴 크기입니다. 요소에 숫자를 곱합니다. <br><br>10. 위치 지정 방법 <br><br>위치 속성 값: <a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>,relative,absolute,fixed<br>1)static<br>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입니다.<br>2) 상대<br> 상대 위치 지정, 왼쪽/오른쪽/상단/에 의해 결정되는 문서 흐름의 요소가 차지하는 위치와 크기를 유지합니다. 하단 속성 상대 이동 거리, 원래 위치 유지<br>3) 절대<br><a href="http://www.php.cn/code/6074.html" target="_blank">절대 위치</a>, 문서 흐름에서 <a href="http://www.php.cn/wiki/60.html" target="_blank">객체</a>를 분리, 왼쪽/오른쪽/상단/사용 하단 다른 속성은 위치 지정 설정이 있는 가장 가까운 상위 요소를 기준으로 절대적으로 배치됩니다. 그렇지 않은 경우 본문 개체를 기준으로 합니다. <br> 4) 고정 <br> 고정은 절대와 유사하지만 왼쪽 상단을 기준으로 합니다. 창의 모서리는 문서 스크롤을 따르지 않습니다. 그러나 다중 프레임 페이지에 있는 경우 브라우저의 왼쪽 위 모서리가 아닌 프레임의 왼쪽 위 모서리를 기준으로 합니다. <br><br>11.링크와 @import의 차이점은 무엇인가요? <br><br>1. 조상의 차이. Link는 X<a href="http://www.php.cn/code/427.html" target="_blank">HTML 태그</a>에 속하며, @import는 전적으로 CSS에서 제공하는 메소드입니다. <br><br>2. 링크 태그는 CSS 로드 외에도 <a href="http://www.php.cn/wiki/1541.html" target="_blank">RSS</a> 정의, rel 연결 속성 정의 등 다양한 작업을 수행할 수 있습니다. @import는 CSS만 로드할 수 있습니다<br><br>3. 로딩 순서의 차이. 페이지가 로드되면(즉, 뷰어가 볼 때) 링크<a href="http://www.php.cn/wiki/231.html" target="_blank"></a>에서 참조하는 CSS가 동시에 로드되는 반면, @import에서 참조하는 CSS는 페이지가 완전히 다운로드될 때까지 기다립니다. 로드되기 전에. 그래서 가끔 @import가 CSS를 로드하는 페이지를 탐색할 때 스타일이 없는 경우가 있습니다(깜빡거림만 있을 뿐입니다) <br><br> 4. 호환성의 차이. @import는 CSS2.1에서 제안되었기 때문에 기존 브라우저에서는 지원하지 않습니다. @import는 IE5 이상에서만 인식이 가능하지만 링크 태그에는 이런 문제가 없습니다<br><br> 5. dom을 사용할 때의 차이점 스타일을 제어합니다. <a href="http://www.php.cn/code/7565.html" target="_blank">에서 스타일을 변경하기 위해 dom을 제어하기 위해 javascript </a>를 사용할 때 @import는 dom <br><br><br>에서 제어할 수 없기 때문에 link 태그만 사용할 수 있습니다.12. 포지셔닝의 속성값은 무엇인가요? 각각의 가치가 있나요? <br><br>각 속성 값의 기능: <br><br>정적: 기본값. 위치가 정적으로 설정된 요소는 일반적으로 항상 문서 흐름에 의해 지정된 위치에 표시됩니다(정적 요소는 위쪽, 아래쪽, 왼쪽 또는 오른쪽 선언을 무시합니다). <br><br>절대: 상위 요소를 기준으로 한 절대 위치 지정, s는 레이아웃 흐름에서 벗어나 공간을 차지하지 않습니다. 레이어라고 부르는 위치는 가장 가까운 위치에 있는 상위 요소 위치를 기준으로 합니다. "왼쪽", "상단", "오른쪽" 및 "하단" 속성을 직접 지정할 수 있습니다. 상위 요소가 배치되지 않은 경우 html(루트 요소)이 사용됩니다. (스태킹 순서 z-index: 값) <br><br>relative: 기본 위치를 기준으로 한 오프셋 위치 지정으로 왼쪽, 위쪽, 오른쪽 및 오른쪽을 설정하여 일반 위치를 기준으로 위치를 이동할 수 있습니다. (자체 시작 위치를 기준으로 이동, [일반 레이아웃 흐름을 방해하지 않음] <br><br>고정: 브라우저를 기준으로 절대 위치 지정, 브라우저 창의 지정된 좌표를 기준으로 위치 지정. 이 요소는 "left", "top", "right" 및 "bottom" 속성으로 지정할 수 있습니다. <br><br>13. html5.<a href="http://www.php.cn/php/php-tp-append.html" target="_blank"></a><br><br><a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a>er nav footer <a href="http://www.php.cn/wiki/646.html" target="_blank">main</a> 기사 섹션 그림 데이터 목록 비디오 오디오 fieldest 범례 레이블 캡션<br>에 15개의 새 태그가 추가되었습니다. <br>14. BFC란 무엇인가요? <br><br>1. 블록 수준 서식 컨텍스트<br>2. 적응형 2열 레이아웃, 세로 방향 방지 <a href="http://www.php.cn/wiki/931.html" target="_blank"> margin</a>겹침(두 개의 BFC에 넣음) <br>3. 루트 요소, <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a> 속성이 없음이 아니고 위치가 절대 또는 고정이며 표시가 인라인 블록, 테이블 셀, 테이블 캡션입니다. , flex, inline-flex,overflow는 보이지 않습니다<br><br><br>15. .px, em, rem, pt의 차이점<br><br>1) px는 실제로는 픽셀이므로 px를 사용하세요. 글꼴 설정 비교적 안정적이고 정확하지만 <br> 이 방법에는 문제가 있습니다. 브라우저에서 만든 웹 페이지를 사용자가 탐색할 때 브라우저를 확대하면 웹이 축소됩니다 <a href="http://www.php.cn/code/7955.html" target="_blank"> 페이지 레이아웃 </a>이 깨졌습니다. 따라서 웹페이지의 글꼴을 정의하기 위해 "em"을 사용하는 것이 제안되었습니다. <br>2) em은 기준선을 기준으로 글꼴 크기를 조정합니다. <br>em은 상위 요소를 기준으로 글꼴 크기를 설정하므로 요소를 설정하려면 해당 상위 요소를 알아야 할 수도 있습니다. size <br>3) rem은 루트 요소의 글꼴 크기에 상대적으로 표시됩니다. <br>rem은 루트 요소 <html>에 상대적입니다. 즉, 루트 요소의 참조 값만 결정하면 됩니다. <br> 4) pt의 크기는 1인치의 1/72와 같습니다<br>포인트: 텍스트의 측정 단위입니다<br>이 측정 방법은 인쇄 디자인 배경에서 나온 측정 방식으로 미디어에 가장 적합하지만 모니터에도 많이 사용됩니다<br><br>16. 수직+수평 센터링을 구현하는 방법은 무엇인가요? <br><br>1.p{너비:200px;높이:200px;<a href="http://www.php.cn/wiki/892.html" target="_blank">배경</a>:#f00;위치:고정;왼쪽:0;오른쪽:0;상단:0;하단:0;여백 :auto;}<br><br>2.p{너비:200px;높이:200px;배경:#f00;위치:고정;왼쪽:50%;상단:50%;여백:-100px 0 0 -100px; }<br><br>17. 점진적인 향상과 점진적인 저하<br><br>점진적인 향상: 낮은 버전의 브라우저용 페이지를 구축하여 가장 기본적인 기능을 보장한 다음 고급 브라우저용 효과 및 상호 작용을 수행합니다. 더 나은 사용자 경험을 달성하기 위한 추가 기능. <br><br>우아한 성능 저하: 처음부터 완전한 기능을 구축한 다음 하위 버전 브라우저와 호환되게 만듭니다<br><br><br>18. <br><br>1) 와일드카드 선택기 *<br>2) 유형 선택기/요소 선택기 a<br>3) 속성 선택기 input[type="button"]4) 포함 선택기 p .code a<br>5) 하위 개체 선택기                                                                                                                                            a <br> 9) <br> 의사 클래스 <br> 및 의사 객체 선택기 p<br>:first-letter<a href="http://www.php.cn/code/6014.html" target="_blank"> a</a>:hover<a href="http://www.php.cn/wiki/970.html" target="_blank"></a>10) 인접 선택자 li+li<a href="http://www.php.cn/wiki/966.html" target="_blank"> </a>19. 애니메이션과 전환의 차이점 <br>같은 점: 둘 다 시간이 지남에 따라 요소의 속성 값을 변경합니다. <br><br>차이점: 전환은 시간이 지남에 따라 <a href="http://www.php.cn/php/php-tp-incident.html" target="_blank"></a>css 속성을 변경하기 전에 <br> 이벤트 <br>(호버 이벤트 또는 클릭 이벤트 등)를 트리거해야 합니다. 애니메이션은 이벤트를 트리거하지 않고도 사용할 수도 있습니다. . <a href="http://www.php.cn/code/9595.html" target="_blank">애니메이션</a> 효과를 얻으려면 시간이 지남에 따라 요소의 CSS 속성 값을 명시적으로 변경하세요. CSS3 애니메이션에는 명확한 애니메이션 속성 값이 필요합니다. <br><br>20. 표준 <a href="http://www.php.cn/code/6444.html" target="_blank">박스 모델</a>과 이상한 박스 모델은 무엇인가요? 둘의 차이점, 이상한 상자 모델 구현 방법, 표준 및 모델 <br><br> 표준 상자 모델: 내용+테두리+<a href="http://www.php.cn/wiki/948.html" target="_blank">패딩</a>                      상자 너비를 계산할 때 테두리와 패딩이 추가되지 않고 다른 하나는 추가되지 않습니다. <br><br>이상한 상자 모델 구현: box-sizing:border-box<br>표준 상자 모델: box-sizing:content-box<br> <br><br>21 . 상위 요소 내에서 요소를 위, 아래, 왼쪽, 오른쪽 가운데에 배치하는 방법 <br><br>1.<br>css: <br>.box{display:flex;width:800px;height:<br> 300<br>px;그냥<br>if<a href="http://www.php.cn/code/4221.html" target="_blank">y-content:center}</a>.box p{align-self:center}<a href="http://www.php.cn/wiki/109.html" target="_blank"></a>html:<br><p class= " box"> 800px;height:800px;justify-content:center;align-items:center;}<br/>html:<br/><p class="box"><br>  <p></ p><br></p><br><br>22. 비디오와 오디오에 일반적으로 사용되는 형식은 무엇인가요? 오디오<br>: audio/ogg audio/mpeg<br><br>23. <br>유연한 상자 모델<br>의 속성 및 속성 값(6개 이상의 속성 작성)<br><br>display:flex;<br>flex-<br>direction<br>:<a href="http://www.php.cn/code/6707.html" target="_blank">justify-content:</a>align-items:<a href="http://www.php.cn/code/6093.html" target="_blank">align-self:</a>align-content:<br>flex -wrap:<br><a href="http://www.php.cn/code/10723.html" target="_blank">23 선형 그래디언트, 방사형의 사용법을 간략하게 소개합니다. 그라디언트 및 반복 그라디언트</a><br>선형 그라디언트: 선형-그라디언트()<br>방사형 그라디언트: 방사형-그라디언트()<br> 선형 그라디언트 반복: Repeating-linear-gradient()<a href="http://www.php.cn/wiki/873.html" target="_blank"> 방사형 그라디언트 반복: Repeating-Radial-Gradient()</a><br> 24. 애니메이션의 사용법을 간단히 소개<br><br>애니메이션은 두 부분으로 구성됩니다. 애니메이션: 애니메이션 이름 애니메이션 실행 시간 애니메이션 유형 애니메이션 지연 시간 애니메이션 반복 횟수 애니메이션 방향 ; @<br>key<br>프레임 애니메이션 이름<br><br> 25. css3D의 주요 속성 및 속성 값 <br> 1. 심도: perspactive:number; , 개체를 더 작게 보려면 값을 더 크게 설정하세요. <br> <br>2. 3D 스테이지: 변환 스타일:preserve-3d;<br><br>3. RotateZ() scaleZ()<br><br>26. 2D의 여러 주요 속성<br><br>transform:translate() Rotate() Skew() scale()<a href="http://www.php.cn/wiki/1051.html" target="_blank">transform-origin:</a><br>27. 전환 애니메이션의 속성과 속성값을 간략히 소개<br><br>전환:속성 이름(<br>모두<br> 사용 가능) 애니메이션 실행 시간 애니메이션 유형 애니메이션 지연 시간 <br><br>28. css3의 새로운 <br>배경 속성 <br><br><br><br>Background-Origin<br>: 배경 원점<br><br>Background-clip<br>: 배경 자르기 <a href="http://www.php.cn/wiki/1483.html" target="_blank"></a>배경 크기<br>:<br>배경 이미지<a href="http://www.php.cn/code/6021.html" target="_blank">크기</a>다음은 배경 크기<br><br>길이<a href="http://www.php.cn/code/865.html" target="_blank">의 세 가지 값입니다. 배경 이미지의 크기를 지정합니다. 첫 번째 값은 너비이고 두 번째 값은 높이입니다. </a><br>백분율(%)<a href="http://www.php.cn/code/868.html" target="_blank">배경 이미지 크기를 백분율로 설정</a><br>표지<a href="http://www.php.cn/code/872.html" target="_blank">배경 이미지가 배경 영역을 완전히 덮을 수 있도록 배경 이미지를 충분히 크게 확장합니다. </a> <a href="http://www.php.cn/code/8294.html" target="_blank"></a><br>29. 5대 브라우저의 핵심과 대표작을 작성하세요 <br><br>*Trident: IE, Maxthon, Tencent, Theworld, 360 Browser <br><br>*Gecko:: 대표작 Mozilla Firefox는 오픈소스입니다 <br><br>*Webkit: 대표작 Safari와 Chrome은 오픈소스 프로젝트입니다. <br><br>*Presto: 대표작 Opera, Presto는 Opera Software에서 개발한 브라우저 레이아웃 엔진입니다. 또한 세계에서 가장 빠른 렌더링 엔진으로 인정받고 있습니다. <br><br>*Blink: Google과 Opera Software가 개발한 브라우저 레이아웃 엔진으로 2013년 4월에 출시되었습니다. <br><br>30. IE6의 몇 가지 일반적인 버그와 해결책을 적습니다(4개 이상) <br><br>1) 그림에 테두리가 있습니다. BUG 해결 방법: 그림에 border:0 또는 border:0을 추가하세요. none;<br><br>2. 이중 부동(이중 여백) 해결책: 표시: inline<br><br>3. 기본 높이(IE6, IE7) 해결책: 요소에 선언 추가: 글꼴 크기:0; 2: 요소에 명령문 추가:overflow:hidden;<br><br>4. 버튼 요소의 기본 크기가 다릅니다. 옵션: <br><br> IE의 <a href="http://www.php.cn/code/120.html" target="_blank"> 필터를 시뮬레이션하려면 태그를 사용하세요. </a>무엇이 있나요? <br><br>1. _ 밑줄 속성 필터 <br>2.9: IE 버전 인식; 구문: selector {속성: 속성 값 9;}<br>3.</article><p>위 내용은 HTML 5 일반적인 면접 질문의 상세 내용입니다. 자세한 내용은 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="CSS 여러 줄 줄임표 호환 작성 방법" href="http://m.php.cn/ko/faq/359949.html">CSS 여러 줄 줄임표 호환 작성 방법</a></span><span>다음 기사：<a class="dBlack" title="CSS 여러 줄 줄임표 호환 작성 방법" href="http://m.php.cn/ko/faq/359951.html">CSS 여러 줄 줄임표 호환 작성 방법</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/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/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/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/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai"  >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/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:setlang('zh-tw');" class="language course-right-orders chooselan "  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:;" class="language course-right-orders chooselan chooselanguage"  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><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>