HTML5_html5 튜토리얼 팁에서 메타 속성을 사용하는 방법
- WBOY원래의
- 2016-05-16 15:45:551697검색
메타 속성은 HTML에서 매우 중요한 위치를 차지합니다. 예: 검색 엔진을 위한 SEO, 문서의 문자 인코딩, 새로 고침 캐시 설정 등 일부 웹 페이지에서는 메타를 사용하지 않을 수도 있지만 일반 군인으로서 우리는 여전히 메타의 일부 속성을 이해하고 능숙하게 사용할 수 있어야 합니다.
1. 문서에 사용된 문자 인코딩을 선언합니다
XML/HTML 코드클립보드에 콘텐츠 복사
- <메타 문자 집합='utf-8'>
2. 문서의 호환성 모드를 선언합니다
XML/HTML 코드클립보드에 콘텐츠 복사
- <메타 http-equiv="X-UA -호환 가능" 콘텐츠="IE=edge" /> IE에 현재 사용 가능한 최고 모드로 콘텐츠를 표시하도록 지시합니다.
- <메타 http-equiv=" " />는 IE에 > 지시문을 사용하여 콘텐츠 렌더링 방법을 결정하도록 지시합니다. 표준 모드 명령은 IE7 표준 모드에서 표시되고, Quirks 모드 명령은 IE5 모드에서 표시됩니다. 3. SEO 최적화 XML/HTML 코드
- 클립보드에 콘텐츠 복사
메타 이름
=
- "설명" 내용="150자 이내" />페이지 설명 <메타 이름 =
- "키워드" 콘텐츠="html5, css3, 키워드"/>페이지 키워드 <메타 이름 =
- "저자" 콘텐츠="매직 인" />웹 작성자 정의 <메타 이름 =
- "로봇" 콘텐츠="index,follow" />웹 검색 엔진 색인 방법을 정의합니다. Robotterms는 영어 쉼표 ","로 구분된 값 집합입니다. 일반적으로 none, noindex, nofollow, all, index 및 follow 값을 갖습니다.
4. 모바일 장치용 뷰포트 추가
XML/HTML 코드클립보드에 콘텐츠 복사- <메타 이름 ="뷰포트" 콘텐츠 ="width=device-width, 초기-규모=1, 최대-규모=1, 최소-규모=1, 사용자- 확장 가능=아니요">
- 콘텐츠 매개변수 설명:
- 너비 표시 영역 너비(값/장치 너비)
- 높이 뷰포트 높이(값/장치 높이)
- 초기 스케일 초기 스케일링 비율
- maximum-scale 최대 줌 비율
- 최소 배율 최소 확대 비율
- user-scalable 사용자 확장 허용 여부(예/아니요)
- minimal-ui iOS 7.1 베타 2에는 페이지가 로드될 때 상단 및 하단 상태 표시줄을 최소화할 수 있는 새로운 속성이 있습니다. 이는 부울 값이며 다음과 같이 직접 작성할 수 있습니다.
- <메타 이름="뷰포트" 콘텐츠="width=device-width,initial-scale=1,minimal-ui"> ;
5. iOS 기기
XML/HTML 코드클립보드에 콘텐츠 복사- <메타 이름="apple-mobile-web -app-title" 콘텐츠="제목">에 추가됨 홈 화면 뒤의 제목(iOS 6의 새로운 기능)
- <메타 이름="apple- mobile-web-app-capable" 콘텐츠="예" / >WebApp 전체 화면 모드 활성화 여부
- <메타 이름="apple- mobile-web-app-status-bar-style" 콘텐츠="검은색 반투명" />상태 표시줄 배경색 설정
- "apple-mobile-web-app-capable" content="yes"인 경우에만 적용됩니다.
- 콘텐츠 매개변수:
- 기본 기본값입니다.
- 검정색 상태 표시줄의 배경이 검정색입니다.
- 검정-반투명 상태 표시줄의 배경은 검정이며 반투명합니다.
- 기본값 또는 검정색으로 설정하면 웹페이지 콘텐츠가 상태 표시줄 하단부터 시작됩니다.
- 검정 반투명으로 설정하면 웹 콘텐츠가 전체 화면을 채우고 상단이 상태 표시줄에 의해 가려집니다.
6. iOS 아이콘 상대 매개변수
XML/HTML 코드클립보드에 콘텐츠 복사- apple-touch-icon 사진은 자동으로 둥근 모서리와 하이라이트로 처리됩니다.
- apple-touch-icon-precomposed는 시스템이 자동으로 효과를 추가하는 것을 금지하고 원본 디자인을 직접 표시합니다.
- <링크 rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />iPhone 및 iTouch(기본 57x57 픽셀)에는 이 있어야 합니다.
- <링크 rel="apple- 터치 아이콘 사전 구성" 크기="72x72" href="/apple-touch-icon-72x72-precomposed.png" />iPad, 72x72픽셀 , 가질 수는 없지만 가지고있는 것이 좋습니다
- <링크 rel="apple- 터치 아이콘 사전 구성" 크기="114x114" href="/apple-touch-icon-114x114-precomposed.png" />Retina iPhone 및 Retina iTouch, 114x114픽셀, 선택 사항이지만 권장됨
- <링크 rel="apple- 터치 아이콘 사전 구성" 크기="144x144" href="/apple-touch-icon-144x144-precomposed.png" />Retina iPad, 144x144 픽셀은 선택사항이지만 모든 사람이 을 사용하는 것이 좋습니다.
- <메타 이름="apple- mobile-web-app-title" 콘텐츠="제목">제목 길이를 한자 6자로 제한하는 것이 가장 좋습니다. 매우 긴 내용은 숨겨지고 홈 화면 뒤에 제목에 추가됩니다(iOS 6의 새로운 기능)
7.iOS 시작 화면
XML/HTML 코드클립보드에 콘텐츠 복사- iPad 시작 화면에는 상태 표시줄 영역이 포함되지 않습니다.
- iPad 세로 화면 768 x 1004(표준 해상도)
- <링크 rel="apple- touch-startup-image" 크기="768x1004" href="/splash-screen-768x1004.png" />iPad 세로 화면 1536x2008(Retina)
- <링크 rel="apple- touch-startup-image" 크기="1536x2008" href="/splash-screen-1536x2008.png" />iPad 가로 화면 1024x748(표준 해상도)
- <링크 rel="apple- touch-startup-image" 크기="1024x748" href="/Default-Portrait-1024x748.png" />iPad 가로 모드 2048x1496(Retina)
- <링크 rel="apple- touch-startup-image" 크기="2048x1496" href="/splash-screen-2048x1496.png" />
- iPhone 및 iPod touch의 시작 화면에는 상태 표시줄 영역이 포함되어 있습니다.
- iPhone/iPod Touch 세로 화면 320x480(표준 해상도)
- <링크 rel="apple- touch-startup-image" href="/splash-screen-320x480.png" />iPhone/iPod Touch 세로 화면 640x960(Retina)
- <링크 rel="apple- touch-startup-image" 크기="640x960" href="/splash-screen-640x960.png" />iPhone 5/iPod Touch 5 세로 화면 640x1136(레티나)
- <링크 rel="apple- touch-startup-image" 크기="640x1136" href="/splash-screen-640x1136.png" />
- <링크 rel="apple- touch-startup-image" href="Startup.png" / > 사용자가 홈 화면 아이콘을 클릭하여 WebApp을 열면 시스템은 시작 화면을 표시합니다. 설정되지 않은 경우 시스템은 기본적으로 웹사이트의 홈 페이지 스크린샷을 표시합니다. 물론 이 경험은 별로 좋지 않습니다
8, 윈도우 8
XML/HTML 코드클립보드에 콘텐츠 복사- <메타 이름="msapplication-TileColor" 콘텐츠="#000"/> Windows 8 타일 색상
- <메타 이름="msapplication- TileImage" content="icon.png"/>Windows 8 타일 아이콘
9. 자주 사용되지 않음
XML/HTML 코드클립보드에 콘텐츠 복사- <링크 rel="대체" 유형="application/rss xml" 제목="RSS" href="/rss.xml" />RSS 구독 추가
- <링크 rel="바로가기 아이콘 " 유형="이미지/ico" href="/favicon.ico" />파비콘 아이콘 추가
- <메타 이름="형식- 감지" 콘텐츠="telephone=no" />숫자인식을 전화번호로 자동인식 금지
- <메타 이름="형식- 감지" 콘텐츠="email=no" />안드로이드가 이메일을 인식하지 못하게 합니다
- <메타 이름="렌더러" content="webkit">360 브라우저의 속도 모드 활성화 (웹킷)
- <메타 http-equiv=" " >호환 모드를 사용하는 IE 피하기 <메타 이름 =
- "HandheldFriendly" content="true">주로 휴대용 장치에 최적화됨 BlackBerry와 같은 뷰포트를 인식하지 못하는 일부 오래된 브라우저 <메타 이름 =
- "MobileOptimized" 콘텐츠="320">Microsoft의 기존 브라우저 <메타 이름 =
- "x5- 방향" 콘텐츠="인물">QQ 강제 세로 화면
- <메타 이름="full- screen" content="yes">UC 강제 전체 화면
- <메타 이름="x5- fullscreen" content="true">QQ 강제 전체 화면
- <메타 이름="browsermode" 콘텐츠="application">UC 애플리케이션 모드
- <메타 이름="x5- 페이지 모드" 콘텐츠="앱">QQ 애플리케이션 모드
- <메타 http-equiv=" 캐시 제어" 콘텐츠="no-siteapp" /> 바이두 트랜스코딩은 금지되어 있습니다
- <메타 이름="msapplication- 탭 강조 표시" 콘텐츠="아니요">Windows Phone 클릭 하이라이트 없음
- <메타 이름="키워드" 콘텐츠="" /> 키 단어
- <메타 이름="설명" 콘텐츠="" /> 설명
- <메타 이름="제목" 콘텐츠="" /> 제목
- <메타 이름="저자" 콘텐츠="-06" /> 작가
- <메타 이름="저작권" 콘텐츠="" />회사
- <메타 http-equiv=" X-ua 호환 " 콘텐츠 = " Ie = Edge, Chrome = 1 " & gt; IE 브라우저는 가장 진보된 커널을 사용하여 페이지를 렌더링하고 Chrome 프레임워크를 사용하는 페이지는 웹킷 커널을 사용하도록 합니다.
- <메타 이름="apple- mobile-web-app-capable" 콘텐츠="예"> IOS6 전체 화면
- <메타 이름="모바일- 웹 앱 가능" 콘텐츠="예"> Chrome 높은 버전 전체 화면
- <메타 이름="렌더러" 콘텐츠="webkit"> 360 듀얼 코어 브라우저 사용 웹킷 커널 렌더링 페이지
- <메타 이름="apple- itunes-app" 콘텐츠="app-id=myAppStoreID, 제휴-데이터=myAffiliateData, app-argument=myURL"> 스마트 앱 배너 추가 스마트 앱 배너(iOS 6 Safari)
10. SNS 소셜태그
XML/HTML 코드클립보드에 콘텐츠 복사- <메타 속성="og:type" 콘텐츠="유형" />
- <메타 속성="og: url" 콘텐츠="URL 주소" />
- <메타 속성="og: 제목" 내용="제목" />
- <메타 속성="og: 이미지" 콘텐츠="이미지" />
- <메타 속성="og: 설명" 콘텐츠="설명" />
11. IE 브라우저를 결정하는 조건부 주석
XML/HTML 코드클립보드에 콘텐츠 복사- ![endif]-->
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.