이전 페이지 소스 코드에서 나는 종종 그러한 진술을 보았습니다.
<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>저자는 이전에 많은 CSS 포럼에 가입했으며, 사용자가 문제를 일으키면 두 가지를 먼저 수행 할 것을 제안합니다.
일반적으로 선택할 수있는 4 가지 문서 유형이 있습니다 .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 표준을 사용하도록 선택합니다. 성명서를 선택하는 데는 결론은 실제로 자신에게 적합하지 않다는 것입니다. 따라서 프로젝트에 적합한 진술을 종합적으로 선택해야합니다.
코드를 작성 하느라 바쁘면, 다음과 같이 작은 내장 된 CSS 코드를 자연스럽게 또는 게으르게 추가 할 수 있습니다.
<p style=color: red;>武林网</p>이것은 편리하고 문제가 없지만 코드에 문제가 발생합니다.
코드 작성을 시작하면 컨텐츠 구조가 완료된 후 스타일 코드 추가를 시작하는 것이 가장 좋습니다.
이 인코딩 방법은 게릴라와 싸우는 것과 같습니다. 이것은 매우 카피 캣 접근 방식입니다. -Chris Coyier
더 나은 접근 방식은 스타일 시트 파일 에서이 P의 스타일을 정의하는 것입니다.
someElement > p {color: red;}이론적으로 CSS 스타일 시트를 어디에서나 소개 할 수 있지만 HTML 사양은 웹 페이지의 헤드 태그에이를 소개하는 것이 좋습니다. 이는 페이지의 렌더링 속도를 높일 수 있습니다.
Yahoo의 개발 과정에서 헤드 태그에 스타일 시트를 도입하면 웹 페이지의 로딩 속도가 빨라질 수 있습니다.
이를 통해 페이지를 단계별로 렌더링 할 수 있기 때문입니다. -이 슬로우 팀
<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>기억해야 할 원칙 중 하나는 페이지를 가능한 빨리 사용자 앞에 놓는 것입니다. 스크립트가로드되면 스크립트가 완전히로드 될 때까지 페이지가로드를 일시 중지합니다. 따라서 사용자에게 더 많은 시간을 낭비 할 것입니다.
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>몇 년 전, JS 코드를 HTML 태그에 직접 추가하는 방법이있었습니다. 특히 간단한 사진 앨범에서 매우 일반적입니다. 기본적으로 OnClick 이벤트는 태그에 첨부되며 그 효과는 일부 JS 코드와 동일합니다. 너무 많이 논의 할 필요가 없습니다.이 메소드를 사용해서는 안되며 코드는 외부 JS 파일로 전송 한 다음 시간 리스너에 addeventListener / 첨부 버전을 전송해야합니다. 또는 시계 방법을 사용해야하는 jQuery와 같은 프레임 워크를 사용하십시오.
$('a#moreCornInfoLink').click(function() {alert('Want to learn more about corn?');});많은 사람들이 표준 검증의 중요성과 가치를 실제로 이해하지 못합니다. 저자는이 문제를 블로그에서 자세히 분석했습니다. 한마디로, 표준 검증은 당신이 문제를 일으키는 것이 아닙니다.
웹 페이지 제작에서 방금 작동하기 시작한 경우이 웹 개발 도구 모음을 다운로드하고 인코딩 프로세스 중에 언제든지 HTML 표준 검증 및 CSS 표준 검증을 사용하는 것이 좋습니다. CSS가 학습하기 쉬운 언어라고 생각한다면, 죽게 만들 것입니다. 복잡한 코드는 페이지가 허점과 문제로 가득하게 만듭니다. 좋은 방법은 확인하고 확인한 다음 확인하는 것입니다.
Firebug는 웹 개발을위한 최고의 플러그인입니다. JavaScript를 디버깅 할뿐만 아니라 페이지 태그의 속성과 위치를 직관적으로 이해할 수 있습니다. 말할 것도없이, 다운로드!
저자의 관찰에 따르면, 대부분의 사용자는 FireBug 기능의 20% 만 사용하는데, 이는 실제로 폐기물입니다. 시스템 에서이 도구를 배우는 데 몇 시간을 소비 할 수도 있으며,이 도구가 절반의 노력으로 두 배의 결과를 얻을 것이라고 생각합니다.
Firebug 튜토리얼 :이론적으로, 당신은 다음과 같이 자연스럽게 마크를 쓸 수 있습니다.
<DIV><P>Here's an interesting fact about corn. </P></DIV>이런 식으로 쓰지 않는 것이 가장 좋습니다. 더 많은 편지를 넣는 것은 쓸모가 없으며 코드를 추악하게 만들 것입니다.
<div><p>Here's an interesting fact about corn. </p></div>저자는 웹 페이지 에서이 6 개의 태그를 모두 사용하는 것이 좋습니다. 대부분의 사람들은 처음 4 개만 사용하지만 가장 많이 사용되는 H는 장치 친화적, 검색 엔진 친화적 등과 같은 많은 이점이 있습니다. P 태그를 H6으로 대체 할 수도 있습니다.
오늘 저자는 트위터에서 토론을 시작했습니다. H1이 로고 나 기사 제목에 정의되면 80%의 사람들이 후자를 선택했습니다.
물론 사용 방법은 귀하의 요구에 따라 다르지만 블로그를 설정하면 기사 제목을 H1로 설정해야합니다.
지난 몇 년 동안 Yahoo의 팀은 프론트 엔드 개발에서 많은 훌륭한 작업을 해왔습니다. 얼마 전, 그들은 <웹 페이지를 분석하고 성적표를 반환하는 yslow라는 Firebug 확장을 출시 하여이 웹 페이지의 모든 측면을 신중하게 분석하고 개선이 필요한 영역을 제안합니다. 조금 가혹하지만 확실히 당신을 도울 것입니다. 적극 권장됩니다 -Yslow!
일반적으로 웹 사이트에는 탐색 메뉴가 있으므로 이러한 방식으로 정의 할 수 있습니다.
<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>IE는 항상 프론트 엔드 개발자에게 악몽이었습니다!
CSS 스타일 시트가 기본적으로 완료되면 IE에 대한 별도의 스타일 시트를 만들 수 있으며 IE에만 적용됩니다.
<!--[if lt IE 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->이 코드의 의미는 다음과 같습니다. 사용자의 브라우저가 IE6 이하 인 경우이 코드가 적용됩니다. IE7을 포함시키려면 [LT IE 7 인 경우] [IE 7 인 경우] 변경하십시오.
Windows 또는 Mac 사용자이든, 선택할 수있는 훌륭한 편집자가 많이 있습니다.
우리 대부분이 쓴 첫 번째 페이지를 되돌아 보면, 우리는 확실히 심각한 div disity를 찾을 것입니다. 일반적으로 초보자의 본능은 Div로 단락을 래핑 한 다음 포지셔닝을 제어하기 위해 더 많은 div를 넣는 것입니다. - 실제로 이것은 비효율적이고 유해한 접근법입니다.
웹 페이지를 작성한 후에는 요소 수를 최소화하려면 여러 번 다시 확인해야합니다.
UL 레이아웃을 사용할 수있는 경우 DIV를 사용하여 목록을 레이아웃하지 마십시오.
기사를 작성하는 열쇠가 페이지를 작성하는 것도이 표준을 따라야합니다.
이미지에 Alt 속성을 추가 할 때의 이점은 자명합니다. 이는 이미지를 비활성화하거나 특수 장치를 사용하여 Prince 정보에 액세스 할 수 있으며 이미지 검색 엔진에 친숙합니다.
Firefox는 이미지 Alt 속성 표시를 지원하지 않으며 제목 속성을 추가 할 수 있습니다.
<img src=cornImage.jpg alt=武林网title=武林网/>나는 종종 이른 아침까지 그것을 모르고 공부하고 일하며, 이것이 좋은 상황이라고 생각합니다.
내 ~ 하! 시간 (하늘의 빛이나 갑작스런 깨달음의 순간을 언급하는 순간)은 보통 늦은 밤에 발생합니다. 예를 들어,이 경우 JavaScript의 폐쇄 개념을 철저히 이해합니다. 그렇게 멋진 순간을 경험하지 않았다면 지금 시도하십시오!
우상을 모방하는 것보다 HTML을 더 빨리 배우는 데 도움이되는 것은 없습니다. 처음에, 우리 모두는 기꺼이 복사기를 만들고 천천히 우리 자신의 스타일을 개발해야했습니다. 좋아하는 웹 사이트 페이지의 코드를 조사하고 어떻게 구현 방법을 확인하십시오. 이것이 전문가를위한 유일한 방법입니다. 시도해야합니다. 참고 : 복사 및 복사가 아니라 코딩 스타일을 배우고 모방하십시오!
인터넷의 다양한 멋진 JavaScript 효과에주의하십시오. 플러그인을 사용하는 것처럼 보이면 소스 코드의 헤드 태그의 파일 이름을 기준으로 플러그인 이름을 찾은 다음 자신의 용도로 사용하는 법을 배울 수 있습니다.
이것은 다른 회사를위한 웹 사이트를 만들 때 특히 필요합니다. Blockquote 태그를 직접 사용하지 않습니까? 그러면 사용자가 사용할 수 있습니다. 직접 사용하지 않습니까? 사용자도 할 수도 있습니다. 시간을내어 UL, OL, P, H1-H6, Blockquotes 등과 같은 요소 스타일을 표시하는 페이지를 만들고 누락이 있는지 확인하십시오.
번역가 노트 : 원래 영어 제목은 트위터를 사용하고 있습니다
지금 웹 페이지에 무료로 추가 할 수있는 API가 많이 있으며 이러한 도구는 매우 강력합니다. 그것은 당신이 많은 영리한 기능을 구현하는 데 도움이 될 수 있으며, 더 중요한 것은 웹 사이트를 홍보하는 데 도움이 될 수 있습니다.
Photoshop은 프론트 엔드 엔지니어에게 중요한 도구입니다. 이미 HTML 및 CSS에 능숙하다면 Photoshop에 대해 자세히 알아볼 수 있습니다.
일부 HTML 태그는 거의 사용되지 않지만 여전히 이해해야합니다. 예를 들어, ABBR, 인용 등은 응급 상황의 경우이를 배워야합니다.
인터넷에는 많은 훌륭한 리소스가 있으며 커뮤니티에는 많은 전문가가 숨겨져 있습니다. 여기서 당신은 혼자서 배우고 숙련 된 개발자에게 물어볼 수 있습니다.
CSS 재설정도 CSS 재설정이므로 일부 HTML 태그 스타일 또는 기본 스타일을 재설정합니다.
또한 CSS 재설정을 사용해야하는지에 대한 치열한 논쟁이 있으며 저자는이를 권장합니다. 먼저 성숙한 CSS 재설정을 선택한 다음 천천히 자신에게 적합한 것으로 진화 할 수 있습니다.
간단히 말해서, 웹 요소를 가능한 한 많이 정렬해야합니다. 좋아하는 웹 사이트를 관찰 할 수 있으며 해당 로고, 제목, 차트 및 단락이 매우 깔끔하게 정확합니다. 그렇지 않으면 혼란스럽고 비전문가처럼 보일 것입니다.
이제 HTML, CSS 및 Photoshop Knowledge를 마스터 했으므로 PSD를 웹 페이지의 사진 및 배경으로 변환하는 방법도 배워야합니다. 다음은 두 가지 좋은 자습서입니다.
JavaScript와 CSS를위한 훌륭한 프레임 워크가 많이 있지만 초보자라면 서두르지 마십시오. CSS를 능숙하게 마스터 할 수 없다면 프레임 워크를 사용하면 지식 시스템이 혼동됩니다.
CSS 프레임 워크는 숙련 된 개발자를 위해 설계되어 많은 시간을 절약 할 수 있습니다.