HTML 초보자를 위한 15가지 모범 사례_HTML/Xhtml_웹 페이지 제작

다음은 HTML 초보자를 위한 30가지 모범 사례이며 참고용으로 모든 사람과 공유됩니다. 구체적인 내용은 다음과 같습니다

1. 라벨을 닫아두세요

과거에는 다음과 유사한 코드를 자주 봤습니다. (주석: 이게 얼마나 오래전 일이었는지...)

XML/HTML 코드클립보드에 콘텐츠 복사

1. <li>여기에 텍스트가 있습니다.
2. <li>여기에 새로운 텍스트가 있습니다. <
3. 리>알겠습니다. 외부 패키지의 UL/OL 라벨이 누락되어 있고(의도한 것인지 의도하지 않은 것인지는 누가 알겠습니까?) LI 라벨도 닫혀 있는 것을 잊었습니다. 오늘날의 기준으로 볼 때 이는 분명히 나쁜 관행이므로 100% 피해야 합니다. 어쨌든 태그를 닫아 두세요. 그렇지 않으면 html 태그를 확인할 때 문제가 발생할 수 있습니다.

더 나은 방법

XML/HTML 코드

클립보드에 콘텐츠 복사

<

ul
1. >  <
2. li>여기에 텍스트가 있습니다. 리>  <
3. li>여기에 새로운 텍스트가 있습니다. 리>  <
4. 리>알겠습니다. 리> 
5. ul>  2. 올바른 문서 유형을 선언하세요

저자는 이전에 많은 CSS 포럼에 가입했습니다. 사용자가 문제에 직면할 때마다 먼저 두 가지 작업을 수행하도록 조언합니다.

1. CSS 파일을 확인하여 오류가 없는지 확인하세요.

2. 올바른 doctype이 추가되었는지 확인

DOCTYPE은 HTML 태그 앞에 나타납니다. 이는 페이지에 HTML, XHTML 또는 둘 모두가 포함되어 있는지 여부를 브라우저에 알려 브라우저가 이를 올바르게 구문 분석할 수 있도록 합니다.

일반적으로 선택할 수 있는 문서 유형은 4가지가 있습니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

1. >  
2.   
3.   
4. >  
5.   
6.   
7. >  
8.   
9.   
10. >  
11.   

이용법은 서로 다릅니다.览器会使用普일반적인방법式解析这种声明，所以더 많은 사람들이 HTML4.01을 사용하고 있습니다.明。

3.永远不要使用内联样式

当你는 埋头写代码时，可能会经常顺手或偷懒的加上一点行内css代码，就image这样：

XML/HTML 코드复复内容到剪贴板

1. <p style="색상: 빨간색;" >이 텍스트를 빨간색으로 만들어서 눈에 띄고 사람들의 주목을 끌 수 있도록 하겠습니다! p>     

这样看起来即方便又没有问题。

지금은 你写代码时，지금은 内容结构完成成之前最好不要加入样式代码。

这样的编码方式就 Image 打游击, 是一种很山寨的做法.——Chris Coyier

외부 사이트에서 더 좋은 방법을 찾아보세요.

광고

XML/HTML 코드复复内容到剪贴板

1. #someElement > p {     
2.   색상: 빨간색;     
3. }  

4.将所有외부css文件放入head标签内

리학적으로 머리를 써서 머리를 써보세요.染速島。

雅虎的开发过程中，我们发现，inhead标签中引入样式表，会加快网页加载速島，因为这样可以使页face逐步渲染。 —— ySlow团队

XML/HTML 코드复复内容到剪贴板

1. <머리>     
2. <제목>내가 좋아하는 옥수수 종류제목>     
3. <링크 rel="스타일시트"  유형="text/css" 미디어 ="화면" href="path/to/file.css" />     
4. <링크 rel="스타일시트"  유형="text/css" 미디어 ="화면" href="path/to/anotherFile.css" />     
5. 머리>    

5.javascript文件放재底부

要记住一个原则，就是让页면은 以最快的速島呈现에서 사용户면앞입니다. 더 많은 것을 즐겨보세요. 。

JS文件只是要实现某些功能，（比如点击按钮事件），那就放心은body底部引入它，这绝对是最佳的方법。

광고

JavaScript 코드复复内容到剪贴板

1. 그리고 이제 제가 가장 좋아하는 옥수수 종류를 알게 되셨네요. 

        
2. "text/javascript" src="path/to/file.js">     
3. "text/javascript" src="path/to/anotherFile.js">     
4.      
5.     

6.永远不要使用内联javascript。现在不是1996年了!

더 많은 연도가 있기 전에, 还存은 一种这样의 방식으로, 就是直接将JS代码加入到HTML标签中。讲，一个“onclick”事件是附加재 标签더 이상, 其效果等同于一些JS代码。不需要讨论多多,不常不应该使用这样的方式,应该把代码转移到一个외부 JS文件中,然使用“ 리스너/attachEvent”加入事件监听器。或者使用jquery를 사용하여 "클릭" 방법을 사용하세요.

JavaScript 코드复复内容到剪贴板

1. $('a#moreCornInfoLink').click(기능() { 
2. Alert('옥수수에 대해 더 알고 싶으세요?');
})

7. 개발하면서 확인

웹페이지 제작을 이제 막 시작하신 분이라면 웹 개발자 툴바를 다운받으실 것을 적극 권장합니다. (크롬 사용자는 앱스토어에서 직접 검색하시기 바랍니다. 즉, 사용하지 못할 수도 있습니다.) 코딩 과정 중 언제든지 "HTML 표준 검증"과 "CSS 표준 검증"을 사용하세요. CSS가 배우기 매우 쉬운 언어라고 생각한다면, 그것은 당신을 죽일 것입니다. 느슨한 코드는 페이지를 허점과 지속적인 문제로 가득 차게 만들 것입니다. 좋은 방법은 확인하고 확인하고 다시 확인하는 것입니다.

8. 파이어버그 다운로드

Firebug는 의심할 여지 없이 웹 개발을 위한 최고의 플러그인입니다. JavaScript를 디버깅할 수 있을 뿐만 아니라 페이지 태그의 속성과 위치를 직관적으로 이해할 수 있게 해줍니다. 더 이상 고민하지 말고 다운로드하세요!

9. 방화범을 사용하세요

저자의 관찰에 따르면 대부분의 사용자는 Firebug 기능의 20%만 사용하는데 이는 정말 낭비입니다. 이 도구를 체계적으로 배우려면 몇 시간을 투자하는 것이 좋을 것입니다. 절반만 사용하면 두 배의 결과를 얻을 수 있다고 믿습니다. 노력.

10. 태그 이름은 소문자로 유지하세요

이론적으로 html은 대소문자를 구분하지 않으므로 원하는 대로 작성할 수 있습니다. 예를 들면 다음과 같습니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

1. <DIV> 
2. <P>옥수수에 관한 흥미로운 사실이 있습니다. < /피> 
3. DIV>

하지만 이렇게 쓰지 않는 것이 가장 좋습니다. 더 큰 글자를 입력해도 코드가 보기 흉해집니다.

제안

XML/HTML 코드

클립보드에 콘텐츠 복사

1. <div> 
　
2. <p>옥수수에 관한 흥미로운 사실이 있습니다. < /피> 
3. div> 

11. H1-H6 태그를 사용하세요

웹페이지에서는 6개의 태그를 모두 사용하는 것이 좋습니다. 대부분의 사람들은 처음 4개만 사용하지만 가장 많이 사용되는 H는 기기 친화성, 검색 엔진 친화성, 등. 모든 P 태그를 H6으로 교체하는 것이 좋습니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

1. <h1>정말 중요한 옥수수 사실입니다h1> 
2. <h6>여기에는 작지만 중요한 옥수수 사실이 있습니다. h6>

12.순서가 지정되지 않은 목록(UL)을 사용하여 탐색 메뉴 래핑

일반적으로 웹사이트에는 탐색 메뉴가 있으며 다음과 같이 정의할 수 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. <div id="nav" > 
2. <a href="#" >홈 아> 
3. <a href="#" >소개> >
4. <a href="#" >연락처 a> 
5. div>

아름다운 코드를 작성하고 싶다면 이 방법을 사용하지 않는 것이 가장 좋습니다.

UL 레이아웃 탐색 메뉴를 사용하는 이유는 무엇입니까? ——UL은 정의 목록을 위해 태어났기 때문입니다

다음과 같이 정의하는 것이 가장 좋습니다.

XML/HTML 코드

클립보드에 콘텐츠 복사

1. <ul id="nav" > 
2. <리><아 href="#">홈 아>리> 
3. <리><아 href="#">정보 아>리> 
4. <리><아 href="#">연락처 아>리> 
5. ul> 

15. IE 대처 방법 배우기

IE는 항상 프런트엔드 개발자에게 악몽이었습니다!

CSS 스타일 시트가 기본적으로 완성된 경우 IE용으로 별도의 스타일 시트를 만들 수 있으며 이는 IE에만 ​​적용됩니다.

CSS 코드클립보드에 콘텐츠 복사

이 코드의 의미는 다음과 같습니다. 이 코드는 사용자의 브라우저가 IE6 이하인 경우에만 적용됩니다. IE7을 포함하려면 "[if lt IE 7]"을 "[if lte IE 7]"로 변경하세요.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

본 웹사이트의 성명

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