나는 모든 사람들이 HTML과 CSS를 알고, HTML 구조와 CSS 성능의 분리를 알고 있으며, HTML의 의미를 알고 있다고 생각합니다. 이들은 최근 몇 년 동안 인기있는 키워드입니다. Semantic HTML은 1 년 또는 2 년 전에 중국에서만 찾았습니다. 지금 그룹에서 이야기중인 HTML 구조를보십시오. HTML 구조에 대한 인터뷰 질문, 시맨틱 HTML은 큰 부분을 차지합니다. 그렇다면 Semantic HTML을 사용하는 이유는 무엇입니까? 시맨틱 HTML의 이점은 무엇입니까?
HTML은 웹 페이지 문서의 내용의 컨텍스트 구조와 의미를 제공합니다. HTML 자체는 그것을 표현하지 않습니다. 예를 들어, <H1>은 대담하고 글꼴 크기는 2EM, 대담하다는 것을 알 수 있습니다. <strong>은 대담합니다. 이것이 HTML의 표현이라고 생각하지 마십시오. 이것들은 실제로 HTML의 기본 CSS 스타일이므로 HTML이 페이지의 성능과 관련이 없다는 것을 알아야합니다. CSS의 문제입니다. 페이지에서 HTML의 역할은 구조와 의미입니다. 평신도의 용어로는 내용을 나누는 것입니다. 여기에 배치 된 것과 우리가 넣은 것.
시맨틱 HTML 구조는 먼저 HTML 구조를 강조해야합니다.HTML 구조는 페이지의 골격입니다. 페이지는 집과 같습니다. HTML 구조는 강철 강화 콘크리트의 벽입니다. 집에 강철 강화 콘크리트의 벽이 없으면 벽돌이 많으며 사람이나 일에 살 수 없습니다. CSS는 장식 소재, 통나무 바닥, 대리석, 페인트이며 집을 꾸미는 데 사용됩니다. CSS의 힘에 대해 더 많이 말할 필요가 없습니다. CSS에 HTML 구조가 없으면 실제 사용 가치없이 함께 페인트 된 목재 보드 더미가됩니다. CSS는 (x) HTML 문서에 전적으로 의존합니다. CSS의 전체 힘을 최대한 활용하려면 깨끗하고 구조화 된 컨텐츠와 HTML을 제공해야합니다. HTML은 인터넷에서 하이퍼 텍스트를 게시하는 일반적인 용어입니다 ... HTML은 태그를 사용하여 텍스트를 구조화합니다 ( http://www.w3.org/markup/ ).
시맨틱 HTML 구조를 작성하는 방법?HTML은 텍스트 내용 구조와 의미 (또는 의미론)를 보충하는 방법입니다. 이 줄은 제목 이며이 줄은 단락을 형성합니다. 이 텍스트는 항목 목록 이며이 텍스트는 인터넷의 다른 파일에 연결되는 하이퍼 링크입니다. HTML은 우리에게 말해서는 안된다는 점은 주목할 가치가 있습니다.이 텍스트는 파란색 이며이 텍스트는 빨간색입니다. 내용 의이 부분은 가장 올바른 열 이며이 줄은 이탤릭체입니다. 이러한 성능 관련 정보는 CSS의 작업입니다. 프론트 엔드 개발을 수행 할 때 기억하십시오. 시맨틱 태그를 언급 할 때 HTML이라고 부르는 것은 프레젠테이션 정보와 완전히 분리되어야하며, 그 안에있는 태그는 모두 의미 적으로 문서의 구조를 정의해야합니다.
시맨틱 HTML 구조는 실제로 매우 간단합니다. 먼저 HTML에서 각 태그의 의미를 마스터하십시오. <div>는 컨테이너입니다. <strong>은 강조됩니다. <ul> <li>는 정렬되지 않은 목록 등입니다. 내용을 볼 때 태그가 더 잘 설명 할 수있는 태그에 대해 생각하고 태그가 무엇이든 사용하십시오.
시맨틱 HTML 구조의 이점은 무엇입니까?우리는 <header> 및 <fumer>와 같은 새로 추가 된 HTML5의 태그가 더 강력한 시맨틱 HTML 구조를 향해 발전하고 있음을 알고 있습니다. XHTML2는 이와 관련하여 HTML5만큼 진행되지 않았으며, 이는 또한 XHTML2의 사망의 원인이기도합니다. 이것은 또한 시맨틱 HTML 구조가 HTML의 개발 경향이라는 것을 보여줍니다.
1. 페이지가 제거되거나 스타일이 손실되면 페이지에 명확한 구조를 줄 수 있습니다.HTML 자체는 자체적으로 표현되지 않습니다. 예를 들어, <H1>은 대담하고 글꼴 크기가 2EM, 굵게 표시됩니다. <strong>은 대담합니다. 이것이 HTML의 표현이라고 생각하지 마십시오. 이것들은 실제로 HTML의 기본 CSS 스타일이므로 스타일을 제거하거나 잃어버린 스타일을 제거 할 수 있습니다. 페이지가 명확한 구조가 시맨틱 HTML 구조의 장점이 아니지만 브라우저는 기본 스타일을 가지고 있습니다. 기본 스타일의 목적은 또한 HTML의 의미를 더 잘 표현하는 것입니다. 브라우저의 기본 스타일과 시맨틱 HTML 구조는 분리 할 수 없다고 말할 수 있습니다.
2. 스크린 리더 (방문자가 시각적으로 손상된 경우)는 마크 업에 따라 웹 페이지를 완전히 읽습니다 .예를 들어, 시맨틱 마커를 사용하는 경우 화면 리더는 전체 발음을 발음하는 대신 단어를 하나씩 철자합니다.
3. PDA, 휴대폰 및 기타 장치는 일반 컴퓨터 브라우저와 같은 웹 페이지를 렌더링하지 못할 수 있습니다 (일반적으로 이러한 장치는 CSS를 지원하기 때문에).시맨틱 태그를 사용하면 이러한 장치가 웹 페이지를 의미있는 방식으로 렌더링 할 수 있습니다. 이상적으로는 장치를 시청하는 작업은 장치 자체의 조건에 따라 웹 페이지를 렌더링하는 것입니다.
시맨틱 마킹은 장치에 필요한 관련 정보를 제공하여 가능한 모든 디스플레이 상황 (향후 기존 또는 새 장치 포함)을 고려할 수 있도록 제거합니다. 예를 들어, 전화는 굵게 표시된 제목으로 표시된 텍스트 단락을 만들 수 있습니다. 핸드 헬드 컴퓨터는 더 큰 글꼴로 표시 할 수 있습니다. 어느 쪽이든, 일단 텍스트를 제목으로 표시하면 독자가 자체 조건에 따라 페이지를 적절하게 표시 할 수 있습니다.
4. 검색 엔진 크롤러는 또한 태그에 의존하여 개별 키워드의 컨텍스트와 가중치를 결정합니다.과거에는 검색 엔진 크롤러가 웹 사이트 방문자라고 생각하지 않았지만 실제로는 실제로 매우 귀중한 사용자입니다. 그것들이 없으면 검색 엔진은 웹 사이트를 색인화 할 수 없으며 평균 사용자는 방문하기가 매우 어렵습니다.
5. 크롤러가 크롤러에 대해 이해하기 쉬운 지 여부는 크롤러가 표현에 사용되는 마커를 크게 무시하고 의미 론적 마커에만 초점을 맞추기 때문입니다.따라서 페이지 파일의 제목이 대신 표시되면 페이지가 검색 결과의 낮은 위치에있을 수 있습니다. 사용 편의성을 향상시키는 것 외에도 시맨틱 태깅은 CSS 및 JavaScript의 올바른 사용에 도움이됩니다. 자체는 페이지의 스타일과 동작을 적용 할 수있는 많은 고리를 제공하기 때문입니다.
SEO는 주로 웹 사이트의 내용 및 외부 링크에 따라 다릅니다.
6. 팀 개발 및 유지 보수가 쉽습니다W3C는 우리에게 좋은 표준을 설정합니다. 팀의 모든 사람들은이 표준을 따르며, 이는 많은 차별화 된 것들을 줄이고 개발 및 유지 보수를 촉진하며 개발 효율성을 향상 시키며 모듈 식 개발을 실현할 수 있습니다 .
다른 의견이 있으면 추가하십시오. 논의 할 메시지를 남겨주세요.
Gui Ge, Milk Tea, Xiaozhi, Stealing Rice, Caspar 및 CSS Forest Group에 감사드립니다.