HTML 5 디자인 원칙 소개-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML 5 디자인 원칙 소개

Feb 01, 2021 pm 02:14 PM

디자인 원칙

HTML 5 디자인 원칙 소개

소개:

HTML5는 웹 콘텐츠를 구성하기 위한 언어 설명 방법입니다. HTML5는 인터넷의 차세대 표준이자 인터넷 콘텐츠를 구성하고 표현하기 위한 언어 방법입니다. 인터넷의 핵심 기술 중 하나로 간주됩니다. HTML은 1990년에 만들어졌고 HTML4는 1997년에 인터넷 표준이 되어 인터넷 응용 프로그램 개발에 널리 사용됩니다.

사실 html5는 w3c에서 직접 공식화한 것이 아닙니다. w3c의 방향은 html5가 아닌 xhtml2입니다. xhtml2가 현실과 동떨어져 실행에 옮기지 못하자 w3c 워킹그룹은 연구 방향을 html5로 바꿨다. xhtml2가 왜 실현되지 않았습니까? 유명한 Burstahl의 법칙인 디자인 원칙을 위반하기 때문에 보낼 때는 신중해야 합니다. html5 디자인 프로세스에서는 일련의 원칙을 따랐으며 이를 통해 html5가 빠르게 홍보될 수 있었습니다. 이 기사에서는 html5에 이어 5가지 디자인 원칙을 소개합니다.

불필요한 복잡성 방지

html4

&lt;!DOCTYPE html PUBLIC &quot;-//W3C/DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;

로그인 후 복사

html5

&lt;!DOCTYPE html&gt;

로그인 후 복사

html4

&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
　　html5
&lt;meta charset=&quot;utf-8&quot;&gt;

로그인 후 복사

기존 콘텐츠 지원

다음 네 가지 코드는 xhtml에서 첫 번째 부분만 단락이 정확하고 html5에서는 모든 것이 정확합니다

&lt;img src=&quot;foo&quot; alt=&quot;bar&quot; /&gt;
&lt;p class=&quot;foo&quot;&gt;Hello world&lt;/p&gt;
 
&lt;img src=&quot;foo&quot; alt=&quot;bar&quot;&gt;
&lt;p class=&quot;foo&quot;&gt;Hello world
 
&lt;IMG SRC=&quot;foo&quot; ALT=&quot;bar&quot;&gt;
&lt;P CLASS=&quot;foo&quot;&gt;Hello world&lt;/P&gt;
 
&lt;img src=foo alt=bar&gt;
&lt;p class=foo&gt;Hello world&lt;/p&gt;

로그인 후 복사

(학습 동영상 공유: html 동영상 튜토리얼)

실생활 문제 해결

html4에서는 두 개의 블록 수준 요소도 동일한 링크 주소를 가지며 인라인 요소는 블록 수준 요소를 포함할 수 없기 때문에 별도로 작성해야 합니다

&lt;h2&gt;&lt;a href=&quot;/path/to/resource&quot;&gt;Headline text&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;/path/to/resource&quot;&gt;Paragraph text.&lt;/a&gt;&lt;/p&gt;

로그인 후 복사

그리고 HTML5에서는 콘텐츠 모델을 사용하기 때문에 <a> 요소에 블록 수준 요소도 포함될 수 있습니다

&lt;a href=&quot;/path/to/resource&quot;&gt;
    &lt;h2&gt;Headline text&lt;/h2&gt;
    &lt;p&gt;Paragraph text.&lt;/p&gt;
&lt;/a&gt;

로그인 후 복사

콘텐츠 모델

html5 새로운 콘텐츠 모델(콘텐츠 분할)을 나타내는 섹션, 기사, 옆 및 탐색을 포함한 여러 가지 새로운 요소를 추가합니다. 사람들은 과거에 페이지의 콘텐츠를 구성하기 위해 div를 사용해 왔지만 다른 유사한 요소와 마찬가지로 div 자체에는 의미가 없습니다. 그러나 섹션, 기사, 옆 및 탐색은 실제로 명확하게 알려줍니다. 이 섹션은 문서 내의 다른 문서와 같습니다. 이러한 요소 내에 있는 모든 콘텐츠에는 자체 요약, 제목, 바닥글이 있을 수 있습니다.

원활한 저하

브라우저가 인식할 수 없는 유형 값을 발견하면 유형 값을 텍스트로 해석합니다

input type=&quot;number&quot;
input type=&quot;search&quot;
input type=&quot;range&quot;
input type=&quot;email&quot;
input type=&quot;date&quot;
input type=&quot;url&quot;

로그인 후 복사

관련 권장 사항: html5 튜토리얼

위 내용은 HTML 5 디자인 원칙 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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