HTML5를 시작하기 위한 디자인 원칙 분석

[소개] 이 글은 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 작성 방법:

代码如下	复制代码
一、DOCTYPE的写法： //HTML 4.01： //XHTML 1.0： //HTML5： //

//HTML 4.01:

//XHTML 1.0:

代码如下	复制代码
//HTML 4.01： //XHTML 1.0: //HTML5:

//

이 쓰기 방법은 브라우저의 표준 모드를 ​​실행합니다. 참고: Doctype은 브라우저용으로 작성되지 않고 유효성 검사기용으로 작성되었습니다. 유효성 검사기가 해당 문서 유형에 대해 내 문서의 유효성을 검사하도록 합니다. 2. 지정된 문서의 문자 인코딩을 작성하는 방법:

코드는 다음과 같습니다	코드 복사
//HTML 4.01: //XHTML 1.0://HTML5:

참고: 이 약칭은 최신 버전의 브라우저에만 적용되는 것이 아니라 오늘날 사람들이 여전히 사용하는 브라우저에도 유효합니다.
HTML5의 기타 간결한 작성 방법:

코드는 다음과 같습니다

코드 복사

代码如下	复制代码
//无需再写type="text/css"，否则那就是重复自己了 <script></script> //无需再写使用的脚本语言 type="text/javascript"HTML5设计原理二：支持已有的内容 Hello world Hello world Hello world Hello world

/ /더 이상 ="text/css" 유형을 작성할 필요가 없습니다. 그렇지 않으면 반복하게 됩니다.

<script></script>

//사용된 스크립트 언어를 작성할 필요가 없습니다. type= "text/javascript" HTML5 디자인 원칙 2: 기존 콘텐츠 지원

Hello world

代码如下	复制代码
//HTML 4.01 XHTML 1.0: Headline text Paragraph text. //HTML5: Headline text Paragraph text.

Hello world

Hello world

代码如下	复制代码
//HTML 4.01 XHTML 1.0: ... ... ... ... ... //HTML5: ... ... ... ... ...

Hello world< /p> 참고: HTML5는 기존의 다양한 느슨한 작성 방법을 지원합니다. JavaScript에서는 각 명령문 끝에 세미콜론을 추가할 수 있지만 JavaScript가 자동으로 세미콜론을 삽입하므로 필수는 아닙니다. JSlint는 실제로 JavaScript 코딩 스타일을 표준화하고 통합하는 훌륭한 도구입니다. 팀 프로젝트에 유용합니다. ------------------------------- ------ ----------HTML5 디자인 원칙 3: 실제 문제 해결전체 콘텐츠 블록에 대한 링크 추가(여러 블록 수준 요소 포함)

코드는 다음과 같습니다	코드 복사
//HTML 4.01 XHTML 1.0: 제목 텍스트 단락 텍스트.< /a> //HTML5: 제목 텍스트 단락 텍스트.

< /a>참고: 이런 방식은 사실 오래전부터 사용되어 왔습니다. 브라우저에는 존재하지만 예전에는 이렇게 쓰는 것이 불법이었는데 이제는 표준을 바꿔 이렇게 써도 됩니다. . ------------------------------- ------ ----------HTML5 디자인 원칙 4: 진실을 추구하고 실용적입니다 새로운 의미 요소에는 머리글, 바닥글, 섹션, 기사 등이 포함됩니다.

코드는 다음과 같습니다	코드 복사
//HTML 4.01 XHTML 1.0: ... ... < p id="main">... ... ... //HTML5: ... > ... ... ......

참고: 새로운 요소 섹션, 기사, 옆 및 탐색은 새로운 콘텐츠 모델, 즉 HTML의 전례 없는 콘텐츠 모델인 콘텐츠 분할을 나타냅니다.
새 요소를 클래스 대신 사용하는 것은 이러한 요소가 페이지에서 한 번만 사용되는 것이 아니라 여러 번 사용될 수 있고 중첩될 수 있기 때문에 더 가치가 있습니다.
가장 일반적인 섹션은 콘텐츠와 가장 관련성이 높은 섹션이라고 할 수 있습니다. 그리고 기사는 특별한 종류의 섹션입니다. 옆에는 특별 섹션이 있습니다. 마지막으로 Nav도 특별한 섹션입니다.
/

코드는 다음과 같습니다

코드 복사

代码如下	复制代码
/HTML 4.01 XHTML 1.0: ... ... ... ... //HTML5: ... ... ... ...

/HTML 4.01 XHTML 1.0:

...

...

...
< /p>

...

代码如下	复制代码
input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"

//HTML5:
< 섹션 클래스= "항목">

...

...< /footer>

...

代码如下	复制代码

...

참고: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!