HTML
1. html이란
웹 페이지를 생성하기 위한 표준 마크업 언어인 Hypertext Markup Language
2. HTML과 XHML의 차이점
HTML은 WEB 웹 페이지 디자인을 기반으로 한 언어이고, XHTML은 XML을 기반으로 한 마크업 언어입니다.
3. HTML 의미론에 대한 이해를 간략하게 설명하십시오.
콘텐츠 구조에 따라 브라우저 및 검색 엔진의 분석을 보다 용이하게 할 수 있는 적절한 레이블 코드 의미 체계를 선택합니다. 시맨틱이 필요한 이유. css 없이 페이지를 더 잘 표시할 수 있고 사진의 제목 속성 등과 같은 사용자 경험을 향상시켜 SEO에 도움이 되고 개발자가 읽기에 편리합니다.
4. 브라우저 페이지의 세 계층은 무엇이며, 무엇이고, 기능은 무엇입니까?브라우저 페이지는
구조 계층, 프레젠테이션 계층 및 동작 계층의 세 계층으로 나뉘며 html, css 및 js 기능에 해당합니다
.
5. Doctype의 역할은 무엇입니까? 엄격 모드와 무차별 모드의 차이점은 무엇입니까?
사용자는 문서를 선언하고 페이지를 구문 분석하는 데 사용할 문서 표준을 브라우저에 알려줍니다.
Strict 모드: 일반 모드라고도 하는 브라우저는 지원되는 가장 높은 모드인 promiscuous 모드에서 문서를 렌더링합니다.
이전 브라우저의 동작을 보다 느슨한 이전 버전과 호환되는 모드로 시뮬레이션하여 사이트가 실행되지 않도록 합니다.
혼합 모드는 어떤 상황에서 Doctype이 존재하지 않거나 형식이 올바르지 않으면 혼합 모드가 나타납니다.
6. Quirks 모드란 무엇입니까? 표준 모드와 차이점은 무엇입니까?
ie6 이전에는 DTD가 선언되지 않은 경우 브라우저는 순방향 호환이 가능하며 이전 레이아웃 방법인 Quirks 모드를 채택합니다.
차이점: 상자 모델: 표준 모드에서 상자 모델의 너비는 값 너비이고 높이는 값 높이입니다.쿼크 모드에서 상자의 너비에는 패딩과 테두리도 포함됩니다.부모 요소에 대한 백분율 높이를 설정한 후 자식 요소에 대한 백분율 높이 설정도 적용되지 않으며 쿼크 모드 에서
적용됩니다.
7. 페이지에서 스타일을 가져올 때 링크와 @import를 사용하는 것의 차이점은 무엇입니까?
- css를 로드하는 것 외에도 링크 태그는 RSS 및 ref 연결 속성을 정의할 수도 있습니다. @import는 css만 로드할 수 있습니다.
- 로드 순서: 링크 태그는 페이지가 렌더링될 때 로드될 수 있으며 @import는 페이지가 로드되기 전에 렌더링될 때까지 기다려야 합니다.
- 호환성 문제: 링크는 html 태그이며 호환성 문제가 없습니다. @import는 css2.1에서 제안하며 ie 이상이 호환되어야 합니다.
- js 사용 문제: 링크로 도입된 css는 js를 사용하여 스타일을 수정할 수 있지만 @import로 도입된 css는 수정할 수 없습니다.
8. 인라인 요소는 무엇입니까? 블록 수준 요소는 무엇입니까? 빈(void) 요소는 무엇입니까?
인라인 요소: ab span select 입력 lable
블록 수준 요소: div table p th tr td ol ul li h1-h6
빈 요소: br hr
9. 브라우저 커널에 대한 이해도를 알려주세요.
주로 렌더링 엔진과 js 엔진
렌더링 엔진으로 주로 웹 페이지의 콘텐츠 html 또는 xml을 가져오고 페이지 렌더링을 위해 css를 추가합니다.컴퓨터 웹 페이지 형식으로 브라우저나 프린터에 입력하세요.브라우저마다 다른 커널과 다른 렌더링 효과가 있습니다.
js 엔진: 웹 페이지의 상호 작용 및 애니메이션 효과와 비즈니스 코드 실행을 담당합니다.
처음에는 엔진 간의 구분이 명확하지 않았고 js 엔진은 점점 더 독립적이 되었습니다.나중에 커널은 렌더링 엔진이 되는 경향이 있었습니다.
10. 일반적인 브라우저 커널은 무엇입니까?
웹킷: 이전 버전의 크롬 및 사프리아에서 일반적으로 사용됨,
Trident: 일명 IE 커널로 주로 IE 재사용에 사용됨, Baidu 브라우저 및 호환 모드의 일부 브라우저
presto: 주로 세계에서 가장 빠른 렌더링 엔진으로 인식되는 Opera 브라우저에서 사용됨. 그러나 2013년 이후 Opera는 Google 진영에 합류하여 Presto
Blink를 포기했습니다. Google과 Opera Software 대표가 개발한 브라우저 조판 엔진인 Chrome 및 Opera
Gecko: 대표 Firefox Firefox
11. 제목과 h1, b와 strong, i와 em의 차이점은 무엇입니까?
제목과 h1 제목의 차이점은
브라우저 탭 바에 표시되는 웹 페이지의 제목으로 검색 엔진과 사용자에게
웹 사이트의 테마를 직접 알려줍니다.
b와 strong b의 차이점
: 텍스트를 볼드하게 만드는 데 사용되는 엔티티 태그
strong: 텍스트의 톤을 강화하는 데 사용되는 논리적 태그
차이점:
b 태그는 물리적 의미는 없지만 텍스트에 볼드 효과만 부여합니다
. 제안: CSS3 규격을 준수하기 위해서는 b는 최대한 적게 사용
하고 대신 strong을 사용
i와 em의 차이점 i
: 글꼴을 기울게 만드는 엔티티 레이블
em: 텍스트의 역할을 강조하는 논리 레이블. 기본 강조 스타일은 css를 사용하여 수정할 수 있습니다.
12. iframe의 단점은 무엇인가요?
페이지 onload 이벤트를 차단하는 것은
SEO에 도움이 되지 않으며 장치 호환성이 좋지 않습니다
.iframe과 홈페이지는 링크 풀을 공유합니다.브라우저는 동일한 연결 수에 제한이 있으므로 페이지의 병렬 로드에 영향을 미칩니다. (해법은 iframe의 src를 동적으로 수정한 다음 메인 페이지가 로드된 후 동적으로 값을 할당한 다음 로드하는 것임)
iframe은 http 요청을 증가시킬 것이므로 대형 웹사이트에는 권장하지 않음
13. Page Visibility API는 어디에 사용할 수 있습니까?
document.visibilityState
에는 세 가지 상태
표시
페이지 콘텐츠가 적어도 부분적으로 표시될 수 있습니다. 사실상 이는 페이지가 최소화되지 않은 창의 전경 탭임을 의미합니다.
숨김:
페이지 콘텐츠가 사용자에게 표시되지 않습니다. 실제로 이것은 문서가 배경 탭 또는 최소화된 창의 일부이거나 OS 화면 잠금이 활성화되어 있음을 의미합니다.
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
})
브라우저가 여러 페이지를 열고 현재 페이지에 있지 않은 경우 페이지가 백그라운드 상태인지 장치 잠금 화면 상태인지 또는 최소화 상태인지 알 수 있습니다.
14. 다른 브라우저의 Quirksmode 및 CSSCompat 모드에서 동일한 효과를 유지할 수 있는 테두리를 사용하지 않고 1px 높이의 선 그리기를 실현합니다.
<div style="width: 100%;height: 1px;"></div>
HTML5
1. html5의 새로운 기능은 무엇이며 어떤 요소가 제거되었나요? HTML5 새 태그의 브라우저 호환성 문제를 어떻게 처리합니까? HTML과 HTML5를 구별하는 방법은 무엇입니까?
HTML5의 새로운 기능
1. 시맨틱 태그: 헤더. 보행인. 탐색 부분. 기사
2. 그리기: 캔버스
3. 미디어 재생: 비디오 오디오
4. 지리적 위치: 지리적 위치(geolocation)
5. 로컬 저장소: localStorage .sessionStorage
6. 양식 컨트롤: 캘린더, 날짜, 시간, 이메일, URL, 검색 등 크게
제거되었습니다 .
센터. 폰트. 액자. 애플릿. 등. 탭
호환성
최신 버전의 Safari, Chrome, Firefox 및 Opera는 특정 HTML5 기능을 지원합니다. Internet Explorer 9는 특정 HTML5 기능을 지원합니다.
브라우저 호환성 문제 처리
(1) 문서를 사용하여 태그 만들기
태그를 사용하여 IE9에서 html을 로드하는 js를 판단합니다. ie6에서 letkillie6.zh_CN.pack.js를 로드합니다.
(2) html5shim을 사용합니다. 다음 코드를 호출합니다.
1.<!--[if lt IE 9]>
2.<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
3.<![endif]-->
b）使用kill IE6: 在</body>之前调用以下代码：
1.<!--[if lte IE 6]>
2.<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
3.<![endif]-->
html5 구분
<!doctype> 문은 HTML5 문서의 첫 번째 줄에 있어야 하며 html 문은 비교적 깁니다.
후속 업데이트 ---------