찾다

집  >  기사  >  웹 프론트엔드  >  HTML5 메타 태그의 일부 응용 프로그램을 설명하는 예 _html5 튜토리얼 기술

HTML5 메타 태그의 일부 응용 프로그램을 설명하는 예 _html5 튜토리얼 기술

WBOY
WBOY원래의
2016-05-16 15:46:071914검색

HTML 4.01과 HTML 5 간의 메타 태그 사용의 주요 차이점:

HTML 5에서는 구성표 속성이 더 이상 지원되지 않습니다.

HTML 5에는 문자 세트 정의를 더 쉽게 해주는 새로운 charset 속성이 있습니다.

HTML 4.01에서는 다음과 같이 작성해야 합니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <메타 http-equiv="content-type " 콘텐츠="text/html; charset=ISO-8859-1">

HTML 5에서는 이것으로 충분합니다:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <메타 문자 집합="ISO-8859-1 "> 

예

검색 엔진용 키워드 정의:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <메타 이름="키워드" 콘텐츠="HTML, CSS, XML, XHTML, JavaScript" />

페이지 설명 정의:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <메타 이름="설명" 콘텐츠="무료 웹 기술 튜토리얼." />

최신 버전의 정의 페이지:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <메타 이름="개정" 내용="David, 2008/8/8/" />

5초마다 페이지 새로고침:

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <메타 http-equiv="새로 고침" 내용="5" />

속성
2015128114639927.png (639×396)

표준 속성

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, Registrationmark, tabindex, template, title 전체 설명을 보려면 HTML 5의 표준 속성을 방문하세요.

이벤트 속성

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover , onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload 전체 설명을 보려면 HTML 5의 이벤트 속성을 방문하세요.

예시

문서 설명

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <html>
  2. <머리>
  3. <메타 http-equiv=" 콘텐츠 유형" 콘텐츠="text/html; charset=gb2312" />
  4. <메타 이름="저자" 콘텐츠="w3school.com.cn">
  5. <메타 이름="수정됨" 내용="David Yang,8/1/07">
  6. <메타 이름="생성기" 콘텐츠="Dreamweaver 8.0en">
  7. 머리>
  8. <몸>
  9. <p>이 문서의 메타 속성은 작성자와 편집 소프트웨어를 식별합니다. p>
  10. 몸>
  11. html>

Meta 요소의 정보는 HTML 문서를 설명합니다.

문서 키워드

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <html>  
  2. <머리>  
  3. <메타 http-equiv=" 콘텐츠 유형" 콘텐츠="text/html;  charset=gb2312" />  
  4. <메타 이름="설명"  콘텐츠="HTML 예시">  
  5. <메타 이름="키워드"  콘텐츠="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">  
  6. 머리>  
  7. <몸>  
  8. <p>本文档的 meta 属性描述了该文档和它的关键词。 p>  
  9. 몸>  
  10. html>  

Meta 元素中的信息可以描述文档的关键词.

무거운 결정

XML/HTML 코드复复内容到剪贴板
  1. <html>  
  2. <머리>  
  3. <메타 http-equiv=" 콘텐츠 유형" 콘텐츠="text/html;  charset=gb2312" />  
  4. <메타 http-equiv=" 새로 고침" 콘텐츠="5;url=http://www.w3school.com.cn">  
  5. 머리>  
  6. <몸>  
  7. <피>  
  8. 对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn"> http://www.w3school.com.cn 아>  
  9. 피>  
  10. <p>您将재 5 秒内被중고정向到새로운지역址。p>  
  11. <p>如果超过 5 秒后您仍然看到本消息，请点击上面적적链接。p>  
  12. 몸>  
  13. html>  

这个例子演示: 에서 网址已经变更的情况下，将用户到另外一个地址。

移动前端开发中添加一些webkit专属的HTML5 홈페이지来。本文整理一些常用的meta标签。

XML/HTML 코드复复内容到剪贴板
  1. >
  2. <머리>
  4.  <메타 문자 집합='utf- 8'> 
    6. " X-ua 호환 "
  6. 콘텐츠 = " IE = Edge, Chrome = 1 "/& gt; 🎜>  <메타
  7. 이름="설명"
  8. 내용="150자 이내"/>  <메타
  9. 이름="키워드"
  10. 콘텐츠=""/>  <메타
  11. 이름="저자"
  12. 내용="이름, email@gmail.com"/>  <메타
  13. 이름="로봇"
  14. 콘텐츠="index,follow"/>
  15.  <메타 이름="뷰포트" 콘텐츠="초기 규모=1, 최대 규모=3, 최소 규모=1, 사용자 확장 가능=아니요 "> 
  19.  <메타 이름="apple- mobile-web-app-title" 콘텐츠="제목">
  21.  <메타 이름="apple- mobile-web-app-capable" 콘텐츠="예"/>
  24.  <메타 이름="apple- itunes-app" 콘텐츠="app-id=myAppStoreID, 제휴-데이터=myAffiliateData, app-argument=myURL"> 
  26.  <메타 이름="apple- mobile-web-app-status-bar-style" content="black"/>
  28.  <메타 이름="형식- 감지" 콘텐츠="telphone=no, email=no"/>
  31.  <메타 이름="렌더러" 콘텐츠="웹킷">
    33. " " >
  33. " 캐시 제어" 콘텐츠="no-siteapp" /> ;
    35.  
  35. <메타 이름="HandheldFriendly" 콘텐츠="참">
  36.  
    37. <
  37. 메타 이름="MobileOptimized" 콘텐츠="320">
  38.  
    39. <
  39. 메타 이름="화면- 방향" 내용="인물">
  40.  
    41. <
  41. 메타 이름="x5- 방향" 내용="인물">
  42.  
    43. <
  43. 메타 이름="full- 화면" 콘텐츠="예">
  45.  <메타 이름="x5- 전체 화면" 콘텐츠="참">
  47.  <메타 이름="browsermode" 콘텐츠="응용 프로그램">
  49.  <메타 이름="x5- 페이지 모드" 콘텐츠="앱">
  51.  <메타 이름="msapplication- 탭 강조 표시" 콘텐츠="아니요">
  53.  <링크 rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/> 
  55.  <링크 rel="apple- 터치 아이콘 사전 구성" 크기="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
  60.  <링크 rel="apple- touch-startup-image" 크기="768x1004" href="/splash-screen-768x1004.png"/>
  62.  <링크 rel="apple- touch-startup-image" 크기="1536x2008" href="/splash-screen-1536x2008.png"/>
  64.  <링크 rel="apple- touch-startup-image" 크기="1024x748" href="/Default-Portrait-1024x748.png"/>
  66.  <링크 rel="apple- touch-startup-image" 크기="2048x1496" href="/splash-screen-2048x1496.png"/>
  69.  <링크 rel="apple- touch-startup-image" href="/splash-screen-320x480.png"/> ;
  71.  <링크 rel="apple- touch-startup-image" 크기="640x960" href="/splash-screen-640x960.png"/> 
  73.  <링크 rel="apple- touch-startup-image" 크기="640x1136" href="/splash-screen-640x1136.png"/> 
  74.  
  78.  <메타 이름="msapplication- TileColor" 내용="#000"/>
  80.  <메타 이름="msapplication- TileImage" content="icon.png"/>
  83.  <링크 rel="대체" 유형="application/rss xml" 제목="RSS" href="/rss.xml"/ >
  85.  <링크 rel="바로가기 아이콘 " 유형="이미지/ico" href="/favicon.ico"/>
  90.  <메타 속성="og: 유형" 콘텐츠="유형" />
  91.  <메타 속성="og: url" 콘텐츠="URL 주소" />
  92.  <메타 속성="og: 제목" 내용="제목" />
  93.  <메타 속성="og: 이미지" 콘텐츠="이미지" />
  94.  <메타 속성="og: 설명" 콘텐츠="설명" />
  97.  <제목>제목제목>
  98. 머리>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5는 QR 코드 스캐닝 및 구문 분석 _html5 튜토리얼 기술을 구현합니다.다음 기사：HTML5는 QR 코드 스캐닝 및 구문 분석 _html5 튜토리얼 기술을 구현합니다.

관련 기사

더보기