[소개] 이 글은 alimama의 ued에서 나온 디자인 컨셉에 관한 글입니다. 주로 제가 시작한 HTML5의 디자인 원칙을 다루고 있으니 필요한 친구들이 참고하면 될 것 같습니다. HTML5와 CSS3의 시대가 왔습니다. 새로운 2011 Taobao 홈페이지는 모두 HTML5를 사용했습니다.
이 기사는 alimama의 ued 디자인 개념에 대한 기사입니다. HTML5를 시작하는 디자인 원칙, 도움이 필요한 친구들이 참고할 수 있습니다.
HTML5와 CSS3의 시대가 도래했습니다. 새로운 2011 Taobao 홈페이지는 모두 HTML5를 사용했습니다. 변화를 수용하는 유일한 방법입니다. 기사 번역이 너무 좋네요. 다시 읽어보니 이해가 많이 된 것 같습니다. 다른 아동화 개발자들, 특히 프론트엔드 분들도 꼭 보시길 권합니다.
html4, xhtml1.0, xhtml2.0, html5의 관계를 이해했을 뿐만 아니라 HTML5가 등장한 이유도 이해함과 동시에 프로젝트에 HTML5 적용을 강화했습니다.
------------------------------- ------ ----------
유명한 아시모프의 3가지 법칙 로봇의:
로봇은 인간에게 해를 끼치거나 인간이 해를 입는 것을 지켜보거나 지켜서는 안 됩니다.
로봇은 제1법칙을 위반하지 않는 한 인간의 명령에 복종해야 합니다.
로봇은 첫 번째와 두 번째 법칙을 위반하지 않는 한 스스로를 방어해야 합니다.
------------------------------- ------ ----------
xhtml1과 동일한 점 .0 및 html4.0:
두 사양의 내용은 동일합니다.
용어는 동일합니다.
모든 요소는 동일합니다.
xhtml1.0 및 html4.0유일한 차이점:
XHTML 1.0에서는 XML 구문(엄격한 코딩 스타일)을 사용해야 합니다.
//모든 속성은 소문자를 사용해야 합니다.
//모든 요소도 소문자를 사용해야 합니다. letter;
/ /모든 속성 값은 따옴표로 묶어야 합니다.
//또한 닫는 태그를 사용해야 하며 img 및 br에는 자체 닫는 태그를 사용해야 한다는 점을 기억하세요.
XHTML 1.1과 xhtml1.0 사이의 유일한 변경 사항:
문서를 XML 문서로 표시
//XML 오류 처리 모델: 파서에서 오류가 발생하면 구문 분석이 중지됩니다.
//XML을 이해할 수 없는 브라우저의 경우 사용자는 이 웹페이지를 직접 볼 수 없습니다.
XHTML 2 기능(이 사양은 완전하지 않음):
여전히 XML 오류 처리 모델을 사용하므로 문서가 XML 문서 유형으로 전송되는지 확인해야 합니다.
의도적으로 더 이상 기존 버전과 호환되지 않습니다. 개발자와 브라우저 공급업체에서는 HTML을 절대 지원하지 않습니다.
매우 광범위하게 적용되는 디자인 원칙:
보낼 때는 신중해야 하며, 받을 때는 개방적이어야 합니다.
//전문가로서 문서를 보낼 때 우리는 보수적으로 노력하고 모범 사례를 사용하며 문서 형식이 올바른지 확인하려고 노력할 것입니다.
//그러나 브라우저의 관점에서 보면 모든 문서를 수신할 수 있도록 열려 있어야 합니다.
HTML5
1 웹 하이퍼텍스트는 2004년 W3C에서 완전히 분리된 응용 기술 워킹 그룹(Web Hypertext Application Technology Working Group, WHATWG)으로 설립되었습니다.
2. W3C는 WHATWG 작업 결과를 바탕으로 작업을 계속하기 위해 2007년 HTML5 워킹 그룹을 설립했습니다.
HTML5 디자인 원칙 1: 불필요한 복잡성을 피하세요
코드는 다음과 같습니다 | 코드 복사 | ||||||||
1. DOCTYPE 작성 방법:
| |||||||||
코드는 다음과 같습니다 | 코드 복사 | ||||||||
//HTML 4.01: //XHTML 1.0://HTML5: |
참고: 이 약칭은 최신 버전의 브라우저에만 적용되는 것이 아니라 오늘날 사람들이 여전히 사용하는 브라우저에도 유효합니다.
HTML5의 기타 간결한 작성 방법:
코드는 다음과 같습니다 | 코드 복사 | ||||||||||||
/ /더 이상 ="text/css" 유형을 작성할 필요가 없습니다. 그렇지 않으면 반복하게 됩니다. //사용된 스크립트 언어를 작성할 필요가 없습니다. type= "text/javascript" HTML5 디자인 원칙 2: 기존 콘텐츠 지원 Hello world
Hello world Hello world
|
//HTML5:
...
Hello world< /p> 참고: HTML5는 기존의 다양한 느슨한 작성 방법을 지원합니다. JavaScript에서는 각 명령문 끝에 세미콜론을 추가할 수 있지만 JavaScript가 자동으로 세미콜론을 삽입하므로 필수는 아닙니다. JSlint는 실제로 JavaScript 코딩 스타일을 표준화하고 통합하는 훌륭한 도구입니다. 팀 프로젝트에 유용합니다. ------------------------------- ------ ----------HTML5 디자인 원칙 3: 실제 문제 해결전체 콘텐츠 블록에 대한 링크 추가(여러 블록 수준 요소 포함)
코드는 다음과 같습니다 | 코드 복사 |
//HTML 4.01 XHTML 1.0:제목 텍스트//HTML5:제목 텍스트단락 텍스트. |
/a>참고: 이런 방식은 사실 오래전부터 사용되어 왔습니다. 브라우저에는 존재하지만 예전에는 이렇게 쓰는 것이 불법이었는데 이제는 표준을 바꿔 이렇게 써도 됩니다. . ------------------------------- ------ ----------HTML5 디자인 원칙 4: 진실을 추구하고 실용적입니다 새로운 의미 요소에는 머리글, 바닥글, 섹션, 기사 등이 포함됩니다.
코드는 다음과 같습니다 | 코드 복사 |
//HTML 4.01 XHTML 1.0: ... < p id="main">... //HTML5:... ... |
참고: 새로운 요소 섹션, 기사, 옆 및 탐색은 새로운 콘텐츠 모델, 즉 HTML의 전례 없는 콘텐츠 모델인 콘텐츠 분할을 나타냅니다.
새 요소를 클래스 대신 사용하는 것은 이러한 요소가 페이지에서 한 번만 사용되는 것이 아니라 여러 번 사용될 수 있고 중첩될 수 있기 때문에 더 가치가 있습니다.
가장 일반적인 섹션은 콘텐츠와 가장 관련성이 높은 섹션이라고 할 수 있습니다. 그리고 기사는 특별한 종류의 섹션입니다. 옆에는 특별 섹션이 있습니다. 마지막으로 Nav도 특별한 섹션입니다.
/
代码如下 | 复制代码 |
/HTML 4.01 XHTML 1.0: ...
... //HTML5: |
...
< /p>
...
代码如下 | 复制代码 |
input type="number" input type="search" input type="range" input type="email" input type="date" input type="url" |
//HTML5:
< 섹션 클래스= "항목">
참고: HTML5에서는 섹션, 기사, 옆에 관계없이 새 콘텐츠 블록을 만드는 한 , nav, 다른 요소인지 여부에 관계없이 H1을 사용할 수 있으며 이 블록의 제목이 전체 페이지에서 어떤 수준으로 순위가 지정되어야 하는지 걱정할 필요가 없습니다. 문제가 없습니다.
------------------------------- ------ ----------
HTML5 디자인 원칙 5: 부드러운 저하
점진적 향상의 반대 측면은 부드러운 저하입니다.
유형 속성을 사용하여 양식 향상:
코드 복사 | |
입력 유형="숫자"입력 유형="검색"입력 유형= "range" input type="email"input type="date"input type="url" |
비고 : 기존 브라우저는 이러한 새로운 유형 값을 이해할 수 없지만, 이해하지 못하는 유형 값을 보면 유형 값을 텍스트로 해석합니다. HTML5는 또한 텍스트 상자에 일부 텍스트를 미리 배치하는 데 사용되는 자리 표시자와 같은 입력 요소에 새로운 속성을 추가합니다. 구현하는 데 JavaScript가 필요하지 않으며 완벽합니다. ------------------------------- ------ ----------HTML5 비디오와 플래시 비교 비디오(비디오 요소):
코드는 다음과 같습니다. | 코드 복사 |
td> |
참고: HTML5인지 Flash인지 여부에 관계없이 두 가지를 모두 고려해야 합니다.브라우저가 비디오 요소를 지원하는 경우 , H264도 지원합니다. 말할 것도 없고 그냥 First video를 사용하세요. 브라우저가 비디오 요소와 Ogg를 지원하는 경우 두 번째 비디오를 사용하세요. 브라우저가 비디오 요소를 지원하지 않으면 Flash 비디오를 사용해 보세요. 브라우저가 동영상 요소를 지원하지 않고 플래시를 지원하지 않는 경우 다운로드 링크도 제공합니다. 또 다른 디자인 원칙인 Metcalfe의 법칙을 따르세요.
위 내용은 HTML5를 시작하기 위한 디자인 원칙 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!