프런트엔드 개발자로서 다른 사람의 페이지를 탐색할 때 항상 습관적으로 그 페이지의 소스 코드를 확인합니다. 제가 직접 작성한 페이지를 포함해 대부분의 웹사이트 페이지에는 가장 많이 사용되는 레이아웃 요소가 없다는 것을 알게 되었습니다. 유일한 예외는div,p,span,ul,dl입니다.ol,li,dt,dd,strong,b 어떤 이펙트이던 간에 이런 요소들로 구성되어 있습니다. div、p、span、ul、dl、ol、li、dt、dd、strong、b，不管是什么样的效果都是由这些元素组成。
이미 9102이고, html5는 이미 상당히 성숙하고 표준적입니다. 레이아웃을 위해 html5에서 제공하는 의미 태그를 작성해 보는 것은 어떨까요? 개인적으로 우리가 레이아웃을 처음 배울 때는 위의 태그를 가장 많이 사용했기 때문이라고 생각합니다. 새로운 HTML5 태그가 나왔을 때 우리는 오랫동안 div 레이아웃을 사용했는데, 아마도 제대로 이해하지 못했을 것입니다. 이 태그의 적용 시나리오에서는 시간이 지나도 여전히 div 레이아웃을 사용하고 있습니다.
1.fieldset태그
태그는 양식 그룹화 태그로, 관련 콘텐츠로 양식 그룹을 그룹화할 수 있습니다.
1.1. 신청 시나리오 1 - 양식 그룹화양식에 작성할 정보가 많은 경우 ,
태그를 사용하면 관련 양식 항목을 함께 그룹화하여 양식을 더 쉽게 이해할 수 있을수록 방문자가 올바르게 작성할 가능성이 높아집니다.
기본 사용법 및 기본 효과:
로그인 후 복사
로그인 후 복사
아름다운 양식1.2. 적용 시나리오 2 - 기타 그룹
2.그림태그< /h2>는 요소를 결합하는 데 사용되며 일반적으로 사진, 비디오, 차트, 코드 등에 사용됩니다.2.1, 적용 시나리오 1 -그림태그와 그림이 혼합되어 있습니다
我们在每天早上 开始营业。
我在 有个约会。
로그인 후 복사
로그인 후 복사
2.2. 적용 시나리오 2 -그림< /code> 태그는 dt및dd태그와 함께 사용됩니다< img src=" https://img.php.cn/upload/image/413/360/263/159385435316415html5에서 일반적이지 않은 태그를 사용하는 방법은 무엇입니까?" title="159385435316415html5에서 일반적이지 않은 태그를 사용하는 방법은 무엇입니까?" alt="html5에서 일반적이지 않은 태그를 사용하는 방법은 무엇입니까?"/>
美女
四大美女
杨玉环是美女
凤姐也是美女
로그인 후 복사
로그인 후 복사
2.3. 적용 시나리오 3 -Figure태그는Figurecaption<과 함께 단독으로 사용됩니다. /code> 태그Figure태그를Figurecaption태그와 함께 단독으로 사용하면 유사한 특정 콘텐츠에 대한 설명을 얻을 수 있습니다. 다음에.
什么是html？
HTML称为超文本标记语言，是一种标识性的语言。
로그인 후 복사
로그인 후 복사
3.섹션태그
태그는 웹사이트나 애플리케이션 페이지의 콘텐츠를 섹션으로 나누는 데 사용됩니다섹션 요소는 일반적으로 콘텐츠와 제목으로 구성됩니다. 그러나 컨테이너에 직접 스타일을 지정해야 하는 경우 또는 스크립트를 통해 동작을 정의할 때는 div를 사용하는 것이 좋습니다.section 요소는 분할 또는 청크를 강조하고, 콘텐츠는 여러 단락이나 블록으로 나누어집니다. article 요소는 독립성을 강조하며, 콘텐츠는 독립적이고 완전합니다.제목 콘텐츠 영역 블록이 없습니다. 섹션을 사용하지 마십시오. 즉, 섹션에 h1-h6 태그가 있어야 합니다.포럼 게시물, 댓글 목록, 대화형 항목을 표시하는 데 사용할 수 있습니다. 페이지 모듈 위젯, 잡지나 신문의 기사, 국제 시사 섹션, 스포츠 섹션, 연예 섹션, 문학 섹션 등 섹션 제목이 있고 동일한 카테고리에 속하는 콘텐츠가 있는 섹션은 섹션을 사용할 수 있습니다.
4.aside태그
태그는 일반적으로 웹사이트의 현재 페이지 또는 보조 정보 부분을 나타냅니다.현재 페이지의 주요 콘텐츠와 관련된 광고, 탐색 바, 인용문, 사이드바 댓글및 주요 콘텐츠와 구별되는 기타 부분을 포함할 수 있는 기사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
