예전에는 HTML 표준이 움직이는 대상이었을 때 <p> 태그를 올바르게 종료했는지 또는 서식 규칙을 스타일 코드와 별도로 유지했는지 여부는 중요하지 않았습니다. 일치하지 않는 태그, 누락된 속성, 잘못 중첩된 요소 - 널리 채택된 표준의 부족으로 인해 이러한 실수가 발생하지만 대부분의 브라우저에는 이러한 실수를 방지하기 위한 지능이 내장되어 있기 때문에 대부분의 개발자는 이러한 실수의 존재를 전혀 인식하지 못할 것입니다. .
브라우저 자체가 이러한 오류를 수정하려고 시도한다고 해서 이러한 문제를 무시할 수 있다는 의미는 아닙니다. 웹 페이지가 모든 브라우저에서 일관되게 작동하려면 HTML이 W3C 표준에 정의된 규칙 및 구문과 완전히 일치해야 합니다. 온라인과 오프라인 모두에서 이 요구 사항을 충족할 수 있는 많은 도구가 있습니다. 그것들은 매우 멋진 HTML Tidy입니다.
HTML Tidy는 HTML 코드를 확인하고 W3C 게시 표준을 완전히 준수하지 않는 부분을 지적하도록 설계되었습니다. HTML 문이 포함된 문자열이나 HTML을 분석하는 데 사용할 수 있습니다. 코드가 관련 표준을 준수하도록 필요한 수정을 자동으로 수행할 수 있습니다.
설치하다
HTML Tidy는 무료이며 Windows, Macintosh 및 *NIX 플랫폼에서 실행할 수 있습니다. 바이너리 버전을 즉시 사용할 수 있습니다. *NIX 플랫폼을 실행하는 경우 소스 코드에서 직접 컴파일하고 설치하는 것이 좋습니다. 해야 할 일: 소스 파일을 임시 폴더로 추출하고 다음과 같이 기본 컴파일-설치 프로세스를 수행합니다.
쉘> cd /tmp/tidy/build/gmake
껍질>만들다
쉘> 설치하기
이 프로세스가 완료되면 /tmp/tidy/bin/tidy 폴더에서 Tidy의 컴파일된 바이너리 버전을 찾을 수 있습니다. 이 파일을 시스템 폴더 /usr/local/bin /에 복사하면 더 쉽게 액세스할 수 있습니다. . 이제 이 도구를 사용할 준비가 되었습니다.
기본 사용법
바이너리 버전이 설치되면 이를 즉시 사용하여 HTML 코드를 확인할 수 있습니다. 목록 A는 간단한 예를 보여줍니다.
목록 A:
쉘> tidy -e -q index.html
1행 열 1 - 경고: <!DOCTYPE> 선언이 누락되었습니다.
2행 1열 - 경고: '제목' 요소가 누락되었습니다.
4행 열 1 - 경고: <body> 독점 속성 leftmargin
6행 열 1 - 경고: <table> 독점 속성 높이
6행 열 1 - 경고: <table>에 요약 속성이 없습니다.
11행 37열 - 경고: <img>에 Alt 속성이 없습니다.
15행 열 1 - 경고: <table>에 요약 속성이 없습니다.
17행 50열 - 경고: <img>에 Alt 속성이 없습니다.
이 예에서 Tidy는 파일에서 8개의 잠재적 오류를 발견하고 각 오류에 대한 경고를 인쇄했습니다. 이러한 오류는 심각한 오류가 아니지만 코드의 일부가 매우 정확하지 않다는 경고일 뿐입니다.
명령줄에 -m(수정자) 옵션을 추가하면 원본 파일을 자동으로 수정할 수 있습니다.
쉘> tidy -m -q index.html
대규모 웹 사이트를 테스트해야 하는 경우 명령줄에서 와일드카드를 사용하여 폴더의 모든 파일(단지 하나가 아닌)을 테스트할 수 있습니다.
쉘> tidy -m -q *.html
Tidy가 수정된 웹 페이지를 새 파일에 쓰는 데 도움을 주도록 하려면(원본 파일을 덮어쓰지 않고) 다음 예와 같이 새 파일 이름과 함께 -output 옵션을 사용하세요.
쉘> tidy -output index.html.new -q index.html
-e("error") 옵션을 통해 나중에 검토할 수 있도록 모든 오류를 별도의 로그 파일에 출력할 수 있습니다.
쉘> tidy -f error.log index.html
또한 HTML 코드에 내장된 PHP, ASP 또는 JSP 코드가 포함된 경우 Tidy는 이를 무시하고 그대로 둡니다. 즉, 서버 측 스크립트에서 Tidy 도구를 실행하여 HTML 코드 부분을 확인할 수도 있습니다. 예:
쉘> tidy -e -q processor.php
인수를 추가하지 않고 프로그램 파일만 호출하여 Tidy 도구를 대화형으로 실행할 수도 있습니다. 이 예에서 Tidy는 콘솔의 입력을 기다리고 오류를 확인합니다.
목록 B
껍질> 깔끔하다
<html>
1행 열 1 - 경고: <!DOCTYPE> 선언이 누락되었습니다.
<머리>
<title>이것은 테스트입니다
</head>
3행 1열 - 경고: </head> 앞에 </title>이 없습니다.
<본문 왼쪽 여백=0>
<p>
이것은 잘못 종료된 단락입니다.
</body>
</html>
5행 열 1 - 경고: <body> 독점 속성 leftmargin
정보: 문서 내용은 HTML 독점처럼 보입니다.
경고 3개, 오류 0개가 발견되었습니다!
실시간 오류 경고를 제공하는 것 외에도 Tidy는 입력이 끝날 때 올바른 버전의 코드를 인쇄할 수도 있습니다.
<html>
<머리>
<메타 이름=생성기 콘텐츠=
Linux/x86용 HTML Tidy(2005년 9월 1일 버전), www.w3.org 참조>
<title>이것은 테스트입니다</title>
</head>
<본문 왼쪽 여백=0>
<p>잘못 끝난 단락입니다</p>
</body>
</html>
고급 애플리케이션
Tidy가 파일을 수정하는 방법을 제어할 수도 있습니다. 예를 들어 Tidy가 코드를 올바르게 다시 들여쓰도록 하려면 -i ("indent") 옵션을 추가하면 됩니다.
쉘> tidy -output new.html -i index.html
<font> 및 CSS 스타일 규칙과 관련된 기타 서식 요소를 바꾸려면 -c("clear") 옵션을 사용할 수 있습니다.
쉘> tidy -output new.html -c index.html
기본적으로 Tidy는 HTML 파일의 모든 태그와 속성에 소문자를 사용합니다. 대문자를 사용하려면 다음 예와 같이 -u("대문자") 옵션을 추가할 수 있습니다.
쉘> tidy -output new.html -c -u index.html
특정 줄 너비로 텍스트를 줄바꿈하려면 다음 예와 같이 지정된 줄 너비와 함께 -w("줄 바꿈") 옵션을 추가할 수 있습니다.
쉘> tidy -output new.html -w 40 index.html
-asxhtml 옵션을 추가하여 HTML 문서를 올바른 형식의 XHTML 문서로 변환할 수 있습니다.
쉘> tidy -output new.html -asxhtml index.html
-ashtml 옵션을 통해 반대 작업이 가능합니다:
쉘> tidy -output new.html -ashtml index.html
Tidy의 기본 옵션을 광범위하게 조정해야 하는 경우 프로그램을 호출할 때마다 참조할 수 있는 별도의 구성 파일에 이러한 옵션을 넣는 것이 가장 좋습니다. 목록 C는 구성 파일의 예를 보여줍니다.
목록 C:
bare: yes # 독점 HTML을 제거합니다
doctype: auto # 문서 유형을 설정합니다.
drop-empty-paras: yes # 빈 <p> 태그를 자동으로 삭제합니다.
fix-backslash: yes # URL에서 /로 대체
literal-attributes: yes # 속성 값에 공백을 유지합니다.
lower-literals: yes # 속성 값을 소문자로 변환
output-xhtml: yes # 유효한 XHTML 출력을 생성합니다.
quote-ampersand: yes # &를 &로 교체
quote-marks: yes # 다음으로 교체
Repeat-attributes: keep-last # 중복된 속성 중 마지막 속성을 사용합니다.
indent: yes # 자동으로 코드 들여쓰기
indent-spaces: 2 # 들여쓰기할 공백 수
Wrap-php: 아니오 # PHP 태그에 포함된 텍스트 줄 바꿈
char-encoding: ascii # 사용할 문자 인코딩
tidy-mark: no # 수정된 코드에서 Tidy 메타 정보를 생략합니다.
파일을 구성할 때 명령줄에 -config 옵션을 추가하여 Tidy에게 이러한 설정을 사용하도록 지시할 수 있습니다.
쉘> tidy -output a.html -configconfig.tidy index.html
-help-config 옵션을 사용하여 구성 옵션 목록을 얻을 수 있습니다.
쉘> tidy -help-config...quote-ampersand 부울 y/n,
예/아니요, t/f, 참/거짓, 1/0따옴표 부울 y/n,
예/아니요, t/f, 참/거짓, 1/0quote-nbsp 부울 y/n,
예/아니요, t/f, 참/거짓, 1/0반복 속성, 유지 우선,
keep-lastreplace-color 부울 y/n, 예/아니요,
t/f, true/false, 1/0show-body-only 부울 y/n,
예/아니요, t/f, 참/거짓, 1/0...
또는 -show-config 옵션을 사용하여 현재 구성 설정의 스냅샷을 확인하세요.
쉘> tidy -show-config...show-body-only
부울 noshow-errors 정수
6show-warnings 부울 yes슬라이드 스타일
Stringsplit 부울 아니요...
마지막으로 -h 옵션을 사용하여 명령줄에서 도움말을 얻을 수 있습니다.
쉘> 깔끔한 -h
지금은 이것이 전부입니다. 귀하의 사이트가 W3C 게시 표준을 완벽하게 준수하도록 돕는 데 있어 Tidy가 매우 유용한 도구임을 알게 되실 것입니다. 이 가이드의 요점은 HTML Tidy 도구를 조작하는 방법에 대한 아이디어를 제공할 것입니다. 코드를 작성하고 이 도구를 보다 효율적으로 사용하는 데도 도움이 됩니다.