doctype 은 compatModel 과 관련 이 있 습 니 다.
5801 단어 html
작성 자:zccst
doctype
1.엄격 한 모델 과 혼합 모델 의 구분?어떻게 이 두 가지 모델 을 촉발 합 니까?
HTML 4.01 과 XHTML 에는 각각 세 가지 성명 이 있다.HTML 5 중 하나 야.
1.과도 적(Transitional):요구 가 매우 느슨 하 다.
혼합 모드:브 라 우 저 는 XHTML 에 대한 분석 이 비교적 느슨 합 니 다.4.01 의 탭 을 사용 할 수 있 지만 XHTML 문법 에 맞 아야 합 니 다.
2.엄격 한(Strict):표현 층 의 표지 와 속성 을 사용 할 수 없습니다.예 를 들 어
엄격 한 모드:이 유형의 웹 페이지 를 사용 하면 브 라 우 저 분석 이 상대 적 으로 엄격 하고 스타일 을 표현 하 는 표지 와 속성 을 사용 할 수 없습니다.예 를 들 어 요소 에서 background-color 배경 색 속성 을 직접 사용 할 수 없습니다.
3.프레임 의(Frameset):프레임 페이지 디자인 에 사용 되 는 DTD
DOCTYPE 를 쓰 지 않 으 면 낮은 버 전의 ie 가 호 환 되 지 않 아 bug 가 생 길 수 있 습 니 다.
html 5 에서
2,document.document Element 와 document.body 의 차이
페이지 에 DTD 가 있 거나 DOCTYPE 가 지정 되 었 을 때 document.documentElement 를 사용 합 니 다.
페이지 에 DTD 가 없 거나 DOCTYPE 가 지정 되 지 않 았 을 때 document.body 를 사용 합 니 다.
IE 와 Firefox 에서 모두 그렇다.
호 환 을 위해 DTD 가 있 든 없 든 다음 코드 를 사용 할 수 있 습 니 다.
var scrollTop = window.pageYOffset // FF
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
document Element 와 body 에 대한 설명:
body 는 DOM 대상 의 body 서브 노드,즉 태그 입 니 다.
document Element 은 전체 노드 트 리 의 뿌리 노드 루트,즉 태그 입 니 다.
DOM 은 계층 의 모든 대상 을 노드 라 고 부 릅 니 다.바로 하나의 계층 구조 입 니 다.트 리 구조 로 이해 할 수 있 습 니 다.우리 의 디 렉 터 리 처럼 하나의 루트 디 렉 터 리,루트 디 렉 터 리 아래 에 하위 디 렉 터 리 가 있 고 하위 디 렉 터 리 아래 에 하위 디 렉 터 리 가 있 습 니 다.
HTML 하이퍼텍스트 태그 언어 를 예 로 들 면 전체 문서 의 하 나 는 DOM 에서 document.documentElement 를 사용 하여 접근 할 수 있 습 니 다.이것 이 바로 전체 노드 트 리 의 뿌리 노드 입 니 다.body 는 하위 노드 입 니 다.body 탭 에 접근 하려 면 스 크 립 트 에 document.body 라 고 써 야 합 니 다.
2,compatModel
document.copatMode 는 현재 브 라 우 저가 사용 하 는 렌 더 링 방식 을 판단 하 는 데 사 용 됩 니 다.
공식 설명:
BackCompat:표준 호 환 모드 가 종료 되 었 습 니 다.
CSS 1 Compat:표준 호 환 모드 가 열 립 니 다.
document.copatMode 가 BackCompat 와 같 을 때 브 라 우 저 클 라 이언 트 의 너비 document.body.clientWidth;
document.copatMode 가 CSS 1 Compat 와 같 을 때 브 라 우 저 클 라 이언 트 의 너비 document.documentElement.client Width.
우 리 는 document.copatMode 의 값 에 따라 문서 에 표준 성명 이 추가 되 었 는 지 여 부 를 판단 할 수 있 습 니 다.
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
면접 문제
트리거 표준 모드
1.DOCTYPE 성명 을 추가 합 니 다.예 를 들 어:
2.X-UA-Compatible 트리거 를 설정 합 니 다.
트리거 괴이 모드
1.doctype 선언 없 이 오래된 HTML 버 전 정의(HTML 4 이하,예 를 들 어 3.2)
2.XML 성명 을 추가 하면 ie6 에서 촉발 할 수 있 습 니 다.
< xml version="1.0" encoding="utf-8" >
..>
3.XML 성명 과 XHTML DOCTYPE 사이 에 HTML 주석 을 추가 하면 ie7 에서
5、놓다
X-UA-Compatible
X-UA-Compatible 은 IE>=8 만 인식 되 기 때문에 doctype 성명,X-UA-Compatible,호환성 보기 설정 으로 모드 를 바 꿀 수 있 습 니 다.
IE6/7 은 DOCTYPE 에 의 해 표준 이나 괴이 한 모델 을 바 꾸 었 다.이러한 저 버 전의 브 라 우 저 에서 의 표준 모델 과 비슷 하고'선진 적'브 라 우 저 에서 의 거의 표준 모델 에 가깝다.왜냐하면 그들 은 모두 CSS 2 규범 을 엄 격 히 따 르 지 않 았 기 때문이다.그리고 그들 역시 표준 모델 에서 각자 의 렌 더 링 은 차이 가 있다.차이 가 없 으 면 css hack 의 탄생 은 없 을 것 이다.
IE6-IE9 에서 괴이 한 모드 는 모두 IE 5.5 에 있다.
X-UA-Compatible 을 쓸 필요 가 없고 css 로 도 각 버 전의 IE 해석 이 다 를 수 있 습 니 다.
IE=(0<=값<7)-트리거 괴이 모드(페이지 에 DOCTYPE 가 있 든 없 든),주:이곳 의 괴이 모드 는 IE8 아래 와 약간 다 릅 니 다.테스트 결과"-",""이 두 개의 css hack 기 호 는 IE8 의 괴이 한 상황 에서 모두 식별 되 고 IE9 의 괴이 한 상황 에서'-'를 식별 하지 못 한다.
IE=7(7<=값<8)-IE7 표준 강제(페이지 에 DOCTYPE 가 있 든 없 든)
IE=8(8<=값<9)-강제 IE8 표준,doctype-IE8 사용 거의 표준 모드(또는 IE8 표준),doctype-IE8 표준 없 음
IE=EmulatIE 7,EmulatIE 8 은 위 IE8 과 같은 경우
IE=9,IE=Edge(값>=9)-doctype-거의 표준 모드(또는 IE9 표준)를 사용 합 니 다.IE8 과 마찬가지 로 doctype 으로 IE9 의 거의 표준 또는 IE9 표준 모드 를 선택 합 니 다.doctype-IE9 기준 이 없습니다.
IE=(값<0),IE=IE8,IE=IE7,IE=IE6,IE=a,IE=b,IE=bcd,IE=xxx 와 같이 믿 을 수 없 거나 X-UA-Compatible meta 를 태그 뒤에 쓰 는 경우 X-UA-Compatible 이 없 는 것 과 같 습 니 다.먼저'호환성 보기'를 판단 하고'호환성 보기'의 설정(doctype-IE7 기준,doctype-괴이 모드 없 음)이 있 습 니 다."호환성 보기"가 설정 되 어 있 지 않 습 니 다.DOCTYPE-doctype 을 따 르 고 doctype-괴이 한 모드 가 없습니다.
주 1:X-UA-Compatible 을또는
주 2:페이지,서버 HTTP Header 모두 X-UA-Compatible 의 경우,페이지 의 X-UA-Compatible 설정 을 사용 합 니 다.페이지 에 X-UA-Compatible 이 없어 야 HTTP Header 가 설정 한 값 을 사용 합 니 다.
주 3:거의 표준 모드 의 의미 와 트리거,아래 의"Almost Standards Mode"에 설명 이 있 습 니 다.
주 4:IE=xx 의 값,ie 는 xx 를 가장 가 까 운 값 으로 변환 하려 고 시도 합 니 다.예 를 들 어 IE=7.789->IE=7;5,6 사이 의->IE=5;8 보다 큰->IE=8.
주 5:IE=4,IE=3,IE=0.1,IE=-7 이것들 은 5 보다 작은 것 으로 IE=IE8,IE=IE7,IE=IE6,IE=a,IE=b,IE=bcd 를 포함 하여 X-UA-Compatible 과 똑 같이 떨어진다.X-UA-Compatible 이 잘못된 값 을 설정 한 것 으로 이해 되 기 때문에 여 기 를 건 너 뛰 었 습 니 다.
X-UA-Compatible 의 특수 표기 법
구 글 크롬 프레임 을 터치:
IE 의 X-UA-Compatible 과 혼합 할 수 있 습 니 다.예 를 들 어:
。
이렇게 쓰 는 장점:ie 가 가장 좋 은 렌 더 링 방식 으로 페이지 를 렌 더 링 할 수 있 습 니 다.
"IE=edge,chrome=1","chrome=1,IE=edge","chrome=1"로 쓸 수 있 습 니 다.IE=edge"。
