최근 저는 마이크로포맷에 대해 공부하고 있으며 학습 과정에서 많은 것을 얻었습니다. 여기에서 공유하고 소통을 환영합니다!
마이크로 형식의 장점:
공통 콘텐츠를 표시하기 위한 의미론적 HTML 및 CSS 클래스 이름입니다.
인간만이 이해할 수 있는 데이터를 기계가 읽고 이해할 수 있도록 하는 일련의 표준화된 방법입니다.
마이크로포맷을 사용하면 웹사이트의 콘텐츠를 다른 애플리케이션과 쉽게 통합할 수 있으므로 정보 활용도가 높아집니다.
hCalendar 마이크로포맷의 기본 규칙:
속성과 하위 속성은 클래스별로 설명됩니다.
특정 hCalendar 속성은 다음과 같은 iCalendar 속성 이름을 기반으로 합니다:vevent
속성 및 하위 속성 이름은 대소문자를 구분합니다.
"루트" 속성은 다른 속성과 결합될 수 없습니다. 예를 들어 <div class=vevent summary">는 유효하지 않습니다.
| <dl 클래스="vevent"> <dt>나의 개인 일정:</dt> <dd> <a href=" http://sports.163.com " class="summary"> <span class="category">수영</span></a></dd> <dt>활동 시간:</dt> <dd><abbr class="dtstart" title="2009-05-19T18:00:00">05-19</abbr>–<abbr class="dtend" title="2009-06-19T18:00: 00″>06-19</abbr>, <abbr class="duration" title="P4W">4주 동안 지속</abbr></dd> <dd class="vcard"> <a class="fn" href=" http://www.ued163.com > <span class="title">프론트엔드 개발</span> <span class="locality "> 광저우</span> <span class="org">UED163</span> <a href=" mailto:[email protected] " class="email"> [email protected]</a></ dd> </dl> <div 클래스="mytag"> <a href=" http://www.163.com/firefox/ " title="firefox" rel="tag"> 파이어폭스</a> <a href=" http://www.163.com/IE/ " title="IE" rel="tag"> IE</a> <a href=" http://www.163.com/safari/ " title="safari" rel="tag"> 사파리</a> <a href=" http://www.163.com/chrome/ " title="chrome" rel="tag"> 크롬</a> <a href=" http://www.163.com/oprea/ " title="oprea" rel="tag"> oprea</a> </div> <div class="copyright"> <a href=" http://www.ued163.com/ " rel="license"> 저작권: UED163</a></div> |
위의 데모는 비교적 기본적이고 이해하기 쉽기 때문에 한번 적용해 보시기 바랍니다.
이벤트 속성 설명:
이벤트 요약 요약 정보
카테고리 이벤트 유형
URL 이벤트 링크
dtstart 이벤트를 트리거하는 이벤트의 시작 시간/날짜
기간 이벤트 기간
기간 날짜/시간 정보 정의:
P2Y = 2년 지속
P10D = 10일 동안 지속됨
P3H = 3시간 지속
P2W = 2주간 지속
P8DT8H8M = 12일 8시간 8분 동안 지속됩니다.
vcard 연락처 정보:
fn 테이블 이름 속성 값
이메일 테이블 메일 속성 값
reg 속성 설명
내 태그: reg="tag"
저작권 사용권 rel 속성 설명: rel="license"
위의 코드는 다음과 같은 효과를 생성합니다.
마이크로포맷 플러그인 감지(현재는 Firefox 및 Safari만 해당):
파이어폭스:연산자,테일 내보내기
사파리:사파리 마이크로포맷
마이크로포맷 참조:
http://www.ablognotlimited.com/articles/getting-semantic-with-microformats-part-4-hcalendar/
http://microformats.org/
Dreamweaver 마이크로포맷 확장
http://www.Webstandards.org/action/dwtf/microformats/
원문: http://www.ued163.com/?p=459