> 웹 프론트엔드 > HTML 튜토리얼 > 올바른 HTML 태그를 선택하는 방법

올바른 HTML 태그를 선택하는 방법

php中世界最好的语言
풀어 주다: 2017-11-23 17:51:01
원래의
2756명이 탐색했습니다.

DIVCSS를 레이아웃할 때 직면하게 되는 한 가지 문제는 HTML 태그 레이아웃을 선택하는 방법입니다. 초보 CSS 사용자에게는 매우 간단하지만 CSS를 막 배웠거나 만들기 시작한 사용자에게는 보이지 않는 문제입니다. 그래서 오늘은 어떤 상황에서 어떤 라벨을 사용해야 하는지 정리해보겠습니다.

레이아웃을 할 때 항상 다양한 문제가 발생하므로 여기서는 HTML 태그 선택 방법을 간략하게 소개합니다.

1. 프레임 레이아웃(DIV 태그 사용)

웹 페이지에서는 프레임 레이아웃에 관계없이 일반적으로 DIV가 사용됩니다. DIV 상자의 크기 때문에 일반적으로 DIV 태그(

) 레이아웃을 사용합니다.

2. 목록 레이아웃 (ul li 태그 사용)

그림 목록과 기사 제목 목록을 접할 때 일반적으로 ul li 목록 태그를 사용하여 레이아웃을 만듭니다. 물론 이러한 태그를 사용할 때 설정하려면 레이아웃 효과를 얻으려면 CSS 스타일이 필요합니다. 이렇게 하면 프로그램이 데이터를 호출할 때 루프 내용을 더 쉽게 수행할 수 있습니다.

3. 제목 레이아웃(h1, h2, h3, h4 태그 사용)

독립적인 열 제목과 텍스트 태그가 있는 경우 일반적으로 h1, h2, h3, h4 제목 태그를 사용하여 레이아웃 내용에 계층 구조가 있어야 합니다. . 동시에 SEO를 고려하면 이러한 제목 태그를 적절하게 사용하면 순위를 최적화하는 데 도움이 됩니다.

4. 내용 독립적 스타일(span 사용)

텍스트에는 별도의 색상 값을 설정해야 하는 여러 텍스트가 있습니다. 이때 이러한 텍스트에 범위 태그를 추가하고 설정할 수 있습니다. 스팬 태그에 대해 별도의 클래스를 사용하거나 직접 CSS 스타일의 효과를 얻으려면 일반적으로 스팬이 레이아웃 프레임워크에서 거의 사용되지 않습니다.

5. 기능적 레이아웃(img, b, Strong, u, s 등의 태그)

웹페이지에서 매력적인 그림을 발견하면 Img 태그를 사용하세요. . 밑줄에는 u 태그를 사용할 수 있고, 줄을 통해 텍스트를 접할 때는 s 태그를 사용할 수 있습니다(삭제 줄). 때로는 CSS가 이러한 기능적 레이아웃을 구현하는 데 반드시 사용되는 것은 아닙니다. SEO 관점에서 볼 때 이러한 HTML 태그를 적절하게 선택하는 것이 더 좋습니다.

6. 단락(p 태그)

일반적으로 p 태그는 기사 단락에 사용됩니다. 즉, 각 단락의 시작 부분에는

기사 단락이 명확하다는 것입니다.

7. 수동 강제 줄바꿈 레이아웃(br 태그)

줄바꿈이 필요한 텍스트가 나타나면 br 태그, 즉 "
"를 사용하세요. 상자 라벨이 아닌 별도의 라벨이며 줄바꿈이 필요한 곳마다 br 태그를 사용하세요.

8 테이블 tr td 태그 레이아웃이 필요합니다. 이때는 div 태그보다 테이블 레이아웃을 사용하는 것이 좋습니다.

9. 양식 레이아웃(양식, 입력 등)

등록, 로그인, 데이터 입력 및 장소 제출 등 양식 레이아웃을 접할 때 모두 양식 태그를 사용합니다.

저희 소개를 통해 다들 이해하셨을 거라 믿습니다. 더 흥미로운 정보를 원하시면 PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요! .

관련 읽기:

div 플로팅 레이어와 기본 div 레이어 사이의 관계는 무엇입니까?

DIV에 어떤 CSS 속성 스타일이 설정되어 있는지 어떻게 알 수 있나요?

브라우저가 html5를 지원하는지 확인하는 방법

위 내용은 올바른 HTML 태그를 선택하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿