>  기사  >  웹 프론트엔드  >  Zen Coding 간단하고 빠른 HTML 글쓰기_HTML/Xhtml_웹페이지 제작

Zen Coding 간단하고 빠른 HTML 글쓰기_HTML/Xhtml_웹페이지 제작

WBOY
WBOY원래의
2016-05-16 16:41:331519검색

Zen Coding은 텍스트 편집기 플러그인입니다. Zen Coding을 사용하는 텍스트 편집기에서는 짧은 코드를 사용하여 일반 HTML 코드를 작성할 수 있습니다. 이 도구는 HTML 작성을 크게 단순화합니다.

예를 들어 다음 HTML 코드는

코드를 복사합니다.
코드는 다음과 같습니다.

< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
/title>
< ;meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
🎜>




Zen Coding을 사용하면 한 줄이면 충분합니다.




코드 복사
코드는 다음과 같습니다. html:xt> div#header>div#logo ul#nav>li.item-$*5>a

여기 온라인 데모가 있습니다(단축키가 작동하지 않습니다. 가능한 단축키 충돌을 확인하십시오. 예를 들어, 입력 Sogou에서 푸자는 "Ctrl"을 차지합니다.)

Zen Coding의 약어 규칙은 CSS 선택기와 다소 유사합니다.

  • id 및 클래스: 예를 들어 div#main.list.item은
  • 다른 속성은 다음과 같습니다: div[title], a[title="Hello world" rel], td[colspan=2]
  • 중복 요소: li*3은 3
  • 을 출력합니다.
  • 중복된 ​​요소 번호: li.list-$$*2는
  • < ; /li> 여러 개의 $를 합치면 앞의 $가 0으로 사용되어 숫자를 채웁니다.
  • 대괄호를 사용하여 다음을 그룹화할 수 있습니다. div#page>(div#header>ul#nav>li*4>a) (div#page>(h1>span) p*2) div#footer
  • 필터 지원, 다른 매개변수를 사용하면 완전히 다른 결과를 얻을 수 있습니다
  • 기타 주요 기능

HTML을 제외한 기본값/XML/XSL/CSS/HAML 약어인 Zen Coding은 코드 작성을 용이하게 하는 다른 기능도 제공합니다.

약어 줄 바꿈(약어로 줄 바꿈). 커서 위치나 텍스트 선택에 따라 코드 약어를 입력하면 원하는 최종 코드를 얻을 수 있습니다.



코드 복사코드는 다음과 같습니다.
방에 들어갑니다
연필을 손에 쥐고
누군가 벌거벗은 것을 보고
저 사람이 누구야?
너무 열심히 노력하는데
이해가 안 가네
집에 가면
여기서 무슨 일이 일어나고 있으니까
하지만 그게 뭔지는 모르잖아요
당신도 존스 씨?


"ul>를 사용하세요 ; li*>span"은 래핑 후 다음 코드를 얻습니다.



코드 복사
코드는 다음과 같습니다. :


  • 방으로 들어갑니다

  • 연필을 손에 들고

  • 누군가 벌거벗은 걸 봤어요

  • 그리고 저 사람은 누구죠?

  • 열심히 노력하시네요

  • 하지만 이해하지 못하는군요

  • 당신이 말하는 대로

  • 집에 도착하면

  • 여기서 무슨 일이 일어나고 있으니까요

  • 그러나 당신은 그것이 무엇인지 모릅니다

  • 존스 씨, 당신도 계십니까?



标签匹配(잔액 태그)

编辑点(수정점)

最后

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.