1. HTML 태그를 꼭 닫아주세요
이전 페이지의 소스 코드에서 다음과 같은 문장을 자주 봤습니다.
<li>Some text here. <li>Some new text here. <li>You get the idea.
과거에는 이러한 닫히지 않는 HTML 태그를 허용할 수 있었지만 오늘날의 표준에 따르면 이는 매우 바람직하지 않으며 100% 피해야 합니다. HTML 태그를 닫아야 합니다. 그렇지 않으면 유효성 검사가 실패하고 예상치 못한 문제가 발생할 수 있습니다.
다음 형식을 사용하는 것이 가장 좋습니다.
<ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li> </ul>
2. 올바른 문서 유형(DocType)을 선언합니다.
작성자가 여러 항목을 추가했습니다. 사용자에게 문제가 발생하면 먼저 두 가지 작업을 수행하도록 조언하는 CSS 포럼:
DOCTYPE은 HTML 태그가 나타나기 전에 정의됩니다. 이는 페이지에 HTML, XHTML 또는 둘 모두가 포함되어 있는지 여부를 브라우저에 알려 브라우저가 올바르게 구문 분석할 수 있도록 합니다. 꼬리표.
일반적으로 네 가지 문서 유형 중에서 선택할 수 있습니다. :
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
어떤 문서 유형 선언을 사용할지에 대해 다양한 의견이 있었습니다. 일반적으로 가장 엄격한 선언을 사용하는 것이 최선의 선택이라고 간주되지만 연구에 따르면 대부분의 브라우저는 이 선언을 구문 분석하는 데 일반적인 방법을 사용하므로 많은 사람들이 HTML4.01 표준을 사용하기로 선택합니다. 명세서를 선택할 때 가장 중요한 점은 그것이 정말 자신에게 적합한지 여부이므로 종합적으로 고려하여 프로젝트에 적합한 명세서를 선택해야 합니다.
3. 임베디드 CSS 스타일을 사용하지 마세요
코드 작성에 몰두하다 보면 이렇게 약간의 임베디드 CSS 코드를 추가하는 경우가 많습니다. :
<p style="color: red;">脚本之家</p>
이 방법은 편리하고 문제가 없어 보일 수도 있지만 코드에 문제를 일으킬 수 있습니다.
코드 작성을 시작할 때는 콘텐츠 구조가 완성된 후에 스타일 코드 추가를 시작하는 것이 가장 좋습니다.
이 코딩 방식은 마치 게릴라전과도 같으며 매우 모방적인 접근 방식입니다. ——Chris Coyier
더 나은 접근 방식은 스타일 시트 파일에서 이 P의 스타일을 정의하는 것입니다:
someElement > p {
color: red;
}4. 모든 스타일 시트 파일
이론적으로는 CSS 스타일 시트를 어디에서나 도입할 수 있지만 HTML 사양에서는 페이지 렌더링 속도를 높일 수 있도록 웹 페이지의 head 태그에 도입하는 것을 권장합니다.
Yahoo 개발 과정에서 헤드 태그에 스타일 시트를 도입하면 웹페이지 로딩 속도가 빨라진다는 사실을 발견했습니다.
페이지가 점진적으로 렌더링될 수 있기 때문입니다. —— ySlow Team
<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>
5. 페이지 하단에 JavaScript 파일을 소개합니다.
기억해야 할 한 가지 원칙은 페이지를 다음과 같이 실행하는 것입니다. 가능한 한 빨리 사용자에게 표시됩니다. 스크립트를 로드할 때 스크립트가 완전히 로드될 때까지 페이지 로드가 일시 중지됩니다. 따라서 사용자의 더 많은 시간을 낭비하게 됩니다.
JS 파일이 특정 기능(예: 버튼 클릭 이벤트)만 구현해야 하는 경우 본문 하단에 자유롭게 소개하는 것이 가장 좋은 방법입니다.
예:
<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>
6. 임베디드 JavaScript를 사용하지 마세요. 지금은 21세기입니다!
몇 년 전에는 HTML 태그에 JS 코드를 직접 추가하는 방법이 있었습니다. 이는 특히 단순한 사진 앨범에서 흔히 발생합니다. 본질적으로 " 레이블에서 그 효과는 일부 JS 코드와 동일합니다. 너무 많이 논의할 필요는 없습니다. 이 방법을 사용하면 안 됩니다. 코드를 외부 JS 파일로 전송한 다음 " addEventListener/attachEvent"를 사용하여 시간 리스너를 추가합니다. 또는 "시계" 메서드를 사용해야 하는 jQuery와 같은 프레임워크를 사용합니다.
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});7. 표준화 개발 중 언제든지 검증
표준 검증의 의미와 가치를 제대로 이해하지 못하는 사람들이 많습니다. 저자는 이 문제를 한마디로 여러분을 위한 것이지 여러분을 위한 것이 아닙니다.
이제 막 웹 페이지를 만들기 시작했다면 이 웹 개발 툴바를 다운로드하고 "HTML 표준"을 사용하는 것이 좋습니다. " 코딩 과정 중 언제든지. 유효성 검사" 및 "CSS 표준 유효성 검사". CSS가 언어를 배우기 매우 쉽다고 생각한다면 느슨한 코드로 인해 페이지가 허점과 문제로 가득 차게 될 것입니다. good 방법은 - 확인하고, 확인하고, 다시 확인하는 것입니다.
8. Firebug 다운로드
Firebug는 의심할 여지 없이 웹 개발을 위한 최고의 플러그인일 수는 없습니다. JavaScript를 디버그할 뿐만 아니라 페이지 태그의 속성과 위치를 직관적으로 이해할 수 있습니다.
Firebug 공식 홈페이지: https://getfirebug.com/
참고: Firebug 공식 웹사이트에서는 Firebug의 지속적인 개발, 업데이트 및 유지 관리를 중단한다고 발표했으며 모든 사람이 Firefox에 내장된 도구인 DevTools를 사용하도록 초대했습니다.
相关推荐：<Firebug Alternatives: 10 Best JavaScript Debugging Tools>(Firebug替代品:10个最好的JavaScript调试工具)
9. 使用 Firefox 内置工具 DevTools！
DevTools下载地址：https://developer.mozilla.org/en-US/docs/Tools
10. 使用小写的标记
理论上讲，你可以像这样随性的书写标记：
<DIV> <P>Here's an interesting fact about corn. </P> </DIV>
最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看，这样子就很好：
<div> <p>Here's an interesting fact about corn. </p> </div>
11.使用H1-H6标签
笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。
12. 如果是博客，那把H1留给文章标题
今天笔者在Twitter上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。
当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(SEO)是非常有好处的。
13. 下载ySlow
在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的<网页，并返回 一个“成绩单”，上面细致分析了这个网页的方方面面，提出需要改进的地方，虽然它有点苛刻，但它绝对会对你有所帮助，强烈推荐 ySlow！
14. 使用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]”。
16. 使用一个好的代码编辑器
不论你是Windows还是Mac用户，这里都有很多优秀的编辑器供你选择：
17. 压缩前端代码！
18. 缩减，缩减，缩减
回望我们大多数人写的第一个页面，一定会发现严重的 “DIV癖”( divitis )，通常初学者的本能就是把一个段落用DIV包起来，然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。
网页写完后，一定要多次回头检查，尽量的减少元素的数量。
能用UL布局的列表就不要用一个个的DIV去布局。
正如写文章的关键是“缩减，缩减，缩减”一样，写页面也要遵循这个标准。
19. 为所有的图片加上Alt属性
为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。
Firefox不支持显示图像Alt属性，可以加入title属性：
<img src="cornImage.jpg" alt="脚本之家" title="脚本之家" />
20. 学会熬夜
我经常不知不觉的学习工作到凌晨，我认为这是个很好的状况。
我的“啊～哈！”时间（ “AH-HA” moments，指柳暗花明或豁然开朗的时刻）通常都发生在深夜，比如我彻底理解JavaScript的“闭包”概念，就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻，那就马上试试吧！
21. 查看源代码
당신의 우상을 모방하는 것보다 HTML을 더 빨리 배우는 데 도움이 되는 것은 없습니다. 처음에는 우리 모두 기꺼이 복사기가 되어야 했고, 점차 우리 자신만의 스타일을 발전시켜야 했습니다. 즐겨찾는 웹사이트 페이지의 코드를 연구하고 구현 방법을 확인하세요. 이것이 마스터를 위한 유일한 방법이므로 시도해야 합니다. 참고: 표절하거나 복사하지 말고 코딩 스타일을 배우고 모방하세요!
인터넷에 있는 다양한 멋진 JavaScript 효과에 주목하세요. 플러그인이 사용된 것처럼 보이면 해당 플러그인의 head 태그에서 파일 이름을 기준으로 플러그인 이름을 찾을 수 있습니다. 소스 코드를 작성한 다음 이를 사용하는 방법을 배울 수 있습니다.
22. 모든 요소에 대한 스타일을 정의합니다
다른 회사 웹사이트를 만들 때 특히 필요합니다. 인용부호 태그를 직접 사용하지 않으시나요? 그러면 사용자는 사용할 수 있는데 본인은 OL을 사용하지 않나요? 사용자도 그럴 수 있습니다. ul, ol, p, h1-h6, blockquotes 등 요소의 스타일을 표시하는 페이지를 만들고 누락된 것이 있는지 확인하는 시간을 가지십시오.
23. 제3자 서비스 이용하기
번역자 주: 원래 영어 제목은 "트위터 사용하기"입니다.
트위터에는 인기 있는 서비스가 많이 있습니다. 웹 페이지에 추가되는 무료 API에 사용할 수 있는 인터넷 도구는 매우 강력합니다. 이는 많은 영리한 기능을 구현하는 데 도움이 될 수 있으며, 더 중요하게는 웹사이트를 홍보하는 데 도움이 될 수 있습니다.
24. Photoshop 배우기
Photoshop은 프론트엔드 엔지니어에게 중요한 도구입니다. 이미 HTML과 CSS에 능숙하다면, 포토샵.
Psdtuts에는 많은 영어 보석 튜토리얼이 있습니다: 비디오 섹션
Lynda.com에도 많은 튜토리얼이 있지만 비용을 지불해야 합니다. $25 USD
Photoshop 튜토리얼 시리즈가 짜증나네요
몇 시간 동안 Photoshop 단축키 조작을 배워보세요
25. 모든 HTML 태그 알아보기
일부 HTML 태그는 거의 사용되지 않지만 알고 있어야 합니다. 예를 들어 "abbr", "cite" 등은 필요할 경우를 대비하여 익혀야 합니다.
26. 커뮤니티 토론에 참여하세요
인터넷에는 훌륭한 리소스가 많고 커뮤니티에는 숨겨진 마스터도 많이 있습니다. 연구하거나 숙련된 개발자에게 조언을 구하세요.
27. CSS Reset 사용
Css Reset은 일부 HTML 태그 스타일 또는 기본 스타일을 재설정하는 Reset Css이기도 합니다.
CSS Reset을 사용해야 하는지에 대해 인터넷 상에서도 치열한 논쟁이 벌어지고 있는데, 저자는 사용을 권장합니다. 먼저 일부 성숙한 CSS 재설정을 선택한 다음 천천히 자신에게 적합한 것으로 발전시킬 수 있습니다.
28. 요소 정렬
간단히 말하면 웹 요소를 최대한 정렬해야 합니다. 즐겨찾는 웹사이트를 관찰할 수 있으며 로고, 제목, 차트 및 문단이 매우 깔끔해야 합니다. 그렇지 않으면 혼란스럽고 비전문적으로 보일 것입니다.
29. PSD 슬라이싱 정보
이제 HTML, CSS 및 Photoshop에 대한 지식을 익혔으므로 PSD를 그림으로 변환하고 웹 페이지의 이미지에는 아래 두 가지 유용한 튜토리얼이 있습니다.
30. 프레임워크를 무작위로 사용하지 마세요
Javascript와 CSS 모두에 훌륭한 프레임워크가 많이 있지만 초보자라면 서두르지 마세요. 아직 CSS에 능숙하지 않다면 프레임워크를 사용하면 지식 시스템이 혼란스러워질 것입니다.
CSS 프레임워크는 숙련된 개발자를 위해 설계되었으므로 시간을 많이 절약할 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
