HTML 초보자를 위한 15가지 모범 사례
- 高洛峰원래의
- 2017-02-24 10:27:341324검색
다음은 HTML 초보자를 위한 30가지 모범 사례로, 참고용으로 모든 사람에게 공유되며, 구체적인 내용은 다음과 같습니다
1. 태그를 닫아 두세요
예전에 자주 본 내용은 다음과 같습니다. 유사한 다음 코드(주석: 얼마나 오래 전에 이 작업이 있었는지...):
<li>Some text here. <li>Some new text here. <li>You get the idea.
외부 패키지의 UL/OL 태그는 생략되었습니다(의도한 것인지 의도하지 않은 것인지는 누가 알겠습니까). LI 태그를 닫는 것을 잊지 마세요. 오늘날의 기준으로 볼 때 이는 분명히 나쁜 관행이므로 100% 피해야 합니다. 어쨌든 태그를 닫아 두세요. 그렇지 않으면 html 태그를 확인할 때 문제가 발생할 수 있습니다.
1. CSS 파일을 확인하여 오류가 없는지 확인하세요.
2. 올바른 doctype이 추가되었는지 확인하세요.
DOCTYPE은 HTML 태그 앞에 나타나서 페이지에 HTML, XHTML 또는 이 둘이 혼합되어 있는지 알려줍니다. 브라우저가 올바르게 구문 분석할 수 있습니다.
일반적으로 선택할 수 있는 문서 유형은 4가지가 있습니다.
<ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul>
어떤 문서 유형 선언을 사용할지에 대해 다양한 의견이 있었습니다. 일반적으로 가장 엄격한 선언을 사용하는 것이 최선의 선택이라고 간주되지만 연구에 따르면 대부분의 브라우저는 이 선언을 구문 분석하는 데 일반적인 방법을 사용하므로 많은 사람들이 HTML4.01 표준을 사용하기로 선택합니다. 명세서를 선택할 때 가장 중요한 점은 그것이 정말 자신에게 적합한지 여부이므로 종합적으로 고려하여 프로젝트에 적합한 명세서를 선택해야 합니다.
3. 인라인 스타일을 절대 사용하지 마세요
코드 작성에 몰두하다 보면 이런 식으로 인라인 CSS 코드를 가볍게 또는 게으르게 추가하는 경우가 많습니다
rree이것 같습니다 편리하고 문제가 없습니다. 그러나 이는 코딩 실습의 실수입니다.
코드 작성 시 콘텐츠 구조가 완성될 때까지 스타일 코드를 추가하지 않는 것이 가장 좋습니다.
이 코딩 방식은 마치 게릴라전과도 같으며, 매우 모방적인 접근 방식입니다. ——Chris Coyier
태그 부분을 완성한 후 외부 스타일 시트 파일에서 P 스타일을 정의하는 것이 더 나은 방법입니다.
권장
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
4. 모든 외부 CSS 파일을 head 태그 안에 넣으세요
이론적으로는 CSS 스타일 시트를 어디서든 도입할 수 있지만 HTML 사양에서는 head에 도입하는 것을 권장합니다. 웹페이지의 태그를 추가하면 페이지 렌더링 속도가 빨라질 수 있습니다.
Yahoo 개발 과정에서 헤드 태그에 스타일 시트를 도입하면 페이지가 점진적으로 렌더링되므로 웹페이지 로딩 속도가 빨라진다는 사실을 발견했습니다. —— ySlow Team
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>
5. 자바스크립트 파일은 하단에 배치합니다
기억해야 할 원칙 중 하나는 페이지가 사용자 앞에 최대한 빨리 나타나도록 하는 것입니다. 스크립트가 로드되면 스크립트가 완전히 로드되어 실행될 때까지 페이지 로드가 일시 중지됩니다. 따라서 사용자의 시간이 더 많이 낭비됩니다.
JS 파일이 특정 기능(예: 버튼 클릭 이벤트)만 구현해야 하는 경우 본문 하단에 자유롭게 소개하는 것이 가장 좋은 방법입니다.
권장
#someElement > p {
color: red;
}
6. 인라인 자바스크립트는 절대 사용하지 마세요. 이제 1996년이 아닙니다!
몇 년 전에도 JS 코드를 HTML 태그에 직접 추가하는 방법이 있었습니다. 이는 특히 단순한 사진 앨범에서 흔히 발생합니다. 기본적으로 "onclick" 이벤트가 태그에 첨부되며 그 효과는 일부 JS 코드와 동일합니다. 너무 많이 논의할 필요는 없습니다. 이 방법을 사용하면 안 됩니다. 코드를 외부 JS 파일로 전송한 다음 "addEventListener /attachEvent"를 사용하여 이벤트 리스너를 추가해야 합니다. 또는 jquery와 같은 프레임워크를 사용하면 "click" 메서드를 사용하면 됩니다.
rree7. 개발하면서 확인하세요
이제 웹페이지 제작을 시작하셨다면 웹 개발자 툴바를 다운로드하시길 권장합니다. (크롬 사용자는 앱스토어에서 검색해주세요.) 즉, 사용자는 오류가 발생할 수 있음) 코딩 과정 중 언제든지 "HTML 표준 유효성 검사" 및 "CSS 표준 유효성 검사"를 사용하십시오. CSS가 배우기 매우 쉬운 언어라고 생각한다면, 그것은 당신을 죽일 것입니다. 느슨한 코드는 페이지를 허점과 지속적인 문제로 가득 차게 만들 것입니다. 좋은 방법은 확인하고 확인하고 다시 확인하는 것입니다.
8. Firebug 다운로드
Firebug는 의심할 여지 없이 JavaScript를 디버깅할 수 있을 뿐만 아니라 페이지 태그의 속성과 위치를 직관적으로 이해할 수 있게 해줍니다. 더 이상 고민하지 말고 다운로드하세요!
9. Firebug 사용
저자의 관찰에 따르면 대부분의 사용자는 Firebug 기능의 20%만 사용하므로 시스템 학습에 몇 시간을 소비하는 것이 좋습니다. 이 도구는 절반의 노력으로 두 배의 결과를 얻는 데 확실히 도움이 될 것입니다.
10. 태그 이름을 소문자로 유지하세요.
이론적으로 html은 대소문자를 구분하지 않으므로 원하는 대로 작성할 수 있습니다. 예:
<head> <title>My Favorites Kinds of Corn</title> <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" /> <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" /> </head>
그러나 이것이 가장 좋습니다. 이렇게 쓰지 않으면 비용이 많이 듭니다. 더 큰 글자를 입력해도 소용이 없고 코드도 보기 흉해집니다.
권장
<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js"></script> <script type="text/javascript" src="path/to/anotherFile.js"></script> </body> </html>
11. H1-H6 태그를 사용하세요. 🎜>
웹 페이지에서 사용하는 것이 좋습니다. 6개 태그 중 대부분의 사람들이 처음 4개만 사용하지만 가장 많이 사용되는 H는 장치 친화성, 검색 엔진 친화성 등과 같은 많은 이점을 갖습니다. 모든 P 태그를 H6으로 교체하는 것이 좋습니다.rree
12. 순서가 지정되지 않은 목록(UL)을 사용하여 탐색 메뉴를 래핑합니다. 일반적으로 웹사이트에는 탐색 메뉴가 있으며 다음과 같이 정의할 수 있습니다.<div id="nav"> <a href="#">Home </a> <a href="#">About </a> <a href="#">Contact </a> </div>
如果你想书写优美的代码，那最好不要用这种方式。
为什么要用UL布局导航菜单？ ——因为UL生来就是为定义列表准备的
最好这样定义：
<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
15.学习如何应对IE
IE一直以来都是前端开发人员的噩梦！
如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]-->
这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。
以上就是本文的全部内容，希望对大家学习有所帮助。
更多HTML初学者适用的十五条最佳实践相关文章请关注PHP中文网！