HTML5(NEW ELEMENTS, SEMANTICS, MIGRATION)

2886 단어 tutorialwebdevhtmlbeginners
소개
이전 브라우저에서 올바른 동작을 보호하려면 이러한 HTML 요소에 대한 CSS 표시 속성을 '차단'으로 설정할 수 있습니다(웹 사이트에 HTML4 또는 이전 버전의 HTML이 있는 경우 사용됨).

HTML 의미론

📌저는 HTML 시맨틱 요소에 대해 배웠는데, 브라우저와 개발자 모두에게 의미를 명확하게 설명합니다.

📌비의미적 요소는 내용에 대해 아무 것도 말해주지 않습니다. <div> 및 <span> 와 같은 .

📌시맨틱 요소는 콘텐츠를 명확하게 정의합니다. <form> 및 <table> 와 같은 .
<section> 요소에 대해 배우면서 코드에 요소를 포함해야 하는지 정말 궁금했습니다. 그렇지 않기 때문에;

<body>
<section>
    <h1> Heading </h1>
    <p> Content </p>
</section>
</body>


동일;

<body>
    <h1> Heading </h1>
    <p> Content </p>
</body>


그들은 같은 결과를 내지 않을까요? 또는 <section>를 추가하여 더 '전문적'으로 보이도록 해야 합니다. 이것들은 내가 배울 때 내 머리를 통과하는 생각 중 일부입니다.

또한 HTML에 대한 w3 학교 자습서에서 '... IE9 및 이전 버전에서 지원되지 않음... 또는 ... Safari 또는 IE11 및 이전 버전에서 지원되지 않음'을 계속 추가했습니다. 초보자로서 그것은 '만약의 경우' 이러한 요소도 배워야 한다는 것을 의미합니까, 아니면 일부 웹 브라우저의 이전 버전에서 지원하지 않는 경우 그냥 건너뛰어야 합니까? 그럼 요점이 뭐야
사용/학습? 결국, 기술은 발전하고 있으며 개발자는 프로젝트에 항상 최신 정보를 사용하고 있습니다. 그렇다면 이러한 오래된 요소와 그 기능에 주의를 기울이는 것이 정말 중요할까요? (어쩌면 나는 그냥 게으르고 내가 배워야 할 대부분의 것들을 건너뛰는 방법을 찾고 있는 중일지도 모른다).

📌A<footer> 요소에는 일반적으로 문서 작성자, 저작권 정보, 사용 약관 링크 등이 포함됩니다.
하나의 문서에 둘 이상의 요소<footer>가 있을 수 있습니다.

📌<nav> 요소는 탐색 링크 세트를 정의합니다. 내 커피 웹사이트에 내비게이션 링크를 만들려고 했을 때(저는 배운 모든 것을 연습하기 위해 해당 사이트를 사용합니다) 'text-align' CSS 스타일을 사용하고 싶었던 것을 기억합니다. 내 링크에 글머리 기호가 표시되었습니다. 너무 답답했는데 이제는 사이트에 내비게이션 링크를 추가할 수 있어서 신이 납니다.

📌 문서의 모든 링크가 <nav> 요소 안에 있어야 하는 것은 아닙니다. 기본적으로 탐색 링크의 주요 블록에만 사용됩니다.

HTML4에서 HTML5로 마이그레이션하는 데 필요한 단계


  • doctype을 HTML5 doctype으로 변경합니다. <!DOCTYPE html>
  • 인코딩 정보를 변경하십시오. <meta charset="utf-8">
  • HTML5Shiv(버전 9 이전 Internet Explorer 버전에서 HTML 요소의 스타일 지정을 가능하게 하는 JavaScript 해결 방법)를 추가합니다.

    • 📌아직 자바스크립트를 다루지 않아서 자바스크립트에 익숙해지면 즐겨찾기 해두겠습니다.

    HTML5 시맨틱 요소에 대해 동일한 CSS 스타일로 대체합니다. HTML4를 사용하여 CSS에서 스타일을 지정했다면 즉

     div#menu ul li {

                          display:inline;
                          margin: 7px;
                       }


    될 것입니다;

    
    nav ul il {
        display:inline;
        margin: 7px;
        }


    📌오래된 HTML4 요소를 현재 요소로 교체하십시오.

    결론



    HTML에서 대부분의 기본 사항을 거의 완료했습니다. 다음 게시물은 CSS에 관한 것이어야 합니다. 내 커피 사이트(새 업데이트)에 nav 요소를 추가했습니다. 나중에 CSS와 JavaScript에 대한 심도 있는 지식을 얻을 수 있기를 기대합니다! 오늘은 여기까지입니다😊.
    postmaps.js: maxDataZoom
    최대 주파수 스택

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage