HTML+CSS 명명 규칙 소개

HTML+CSS 명명 규칙

콘텐츠가 많은 HTML 페이지에서는 다양한 프레임을 디자인한 다음 이러한 다양한 프레임과 콘텐츠를 분류하고 해당 이름을 지정하여 구조를 만들어야 합니다. 웹 페이지가 더욱 명확해지며 업무 편의성도 제공됩니다. 많은 초보 친구들이 HTML 파일을 디자인할 때 자신의 아이디어에 따라 간단한 이름만 부여할 수도 있습니다. 그러나 무작정 무작위로 이름을 부여하면 팀원들이 이해하기 어려울 뿐만 아니라 라벨이 혼란스러워질 수도 있습니다. 이는 코드 유지 관리를 매우 어렵게 만들고 관리에 매우 불리하게 만듭니다. 따라서 전체 웹사이트나 별도의 HTML 페이지를 디자인할 때는 좋은 명명 규칙을 세워야 합니다. 이 글에서는 주로 HTML 태그 이름 지정을 포함하는 CSS 이름 지정 규칙을 설명합니다.

파일 이름은 반드시 영문자로 시작해야 합니다. 일반적인 명명 규칙은 내용의 분류와 프레임의 유형에 따라 영어 단어로 변환하여 이름을 지정하는 것입니다. 즉, 이 div는 탐색 표시줄입니다. 모든 단어는 소문자를 사용해야 하며 이름에는 숫자나 밑줄을 사용할 수 있습니다. 예: div="main_piclist"(메인 콘텐츠 아래의 그림 목록을 나타냄), div= "nav_bg.jpg"(탐색 모음의 배경 이미지를 나타냄)를 사용할 수도 있습니다. 대시는 이름을 연결합니다. 예: div="main-left"(왼쪽 콘텐츠의 레이아웃을 나타냄) All. 이름은 한자를 사용하지 않도록 노력해야 하며, 가장 이해하기 쉬운 의미를 얻기 위해 최소한의 문자를 사용해야 합니다. 읽어서 이해할 수 있는 경우가 아니면 축약하지 마십시오.

HTML 태그 이름 지정/CSS 표준화된 이름 지정 목록

페이지 구조 이름 지정

1. 페이지: 가장 바깥쪽 레이어에 사용되는 전체 페이지를 나타냅니다.

2. wrap: 코트, 모든 요소를 ​​함께 감싸는 주변 패키지, 가장 바깥쪽 레이어에 사용

3. wrapper: 페이지 주변 장치 제어 전체 레이아웃 너비, 가장 바깥쪽 레이어에 사용

4. container: 전체 컨테이너, 가장 바깥쪽 레이어에 사용

5. head, header: 헤더 영역, 헤더에 사용

6. nav: 탐색 모음

7. content: 콘텐츠, 웹사이트에서 가장 중요한 콘텐츠 영역, 웹 페이지에 사용 중앙 body

8. main: 웹 사이트의 주요 영역(가장 중요한 위치를 나타냄), 중앙 본문 콘텐츠에 사용됨

9. column: 열

10. sidebar: 사이드바

11. foot, footer: 바닥글 , 바닥글. 웹사이트의 일부 추가 정보 배치 영역(또는 저작권이라는 이름)은 하단에 사용됩니다.

Navigation naming

1. nav, navbar, 네비게이션, nav-wrapper: 네비게이션 바 또는 네비게이션 패키지, 수평 네비게이션을 나타냄

2. topnav: 상단 탐색

3. mainbav: 기본 탐색

4. subnav: 하위 탐색

5. sidebar: 측면 탐색

6. leftsidebar 또는 sidebar_a: 왼쪽 탐색

7. 오른쪽 막대 또는 sidebar_b: 오른쪽 탐색

8. title: title

9. summary: summary/li>

10. menu: 메뉴. 영역에는 일반 링크와 메뉴가 포함되어 있습니다.

11. submenu: 하위 메뉴

12. drop: 드롭다운

13. dorpmenu: 드롭다운 메뉴

14. links: 링크 메뉴

기능 ing

1. 로고: 웹사이트 로고 표시

2. banner: 슬로건, 광고 배너, 상위 광고 배너

3. login: 로그인, (예: 로그인 양식: form-login)

4. loginbar: 로그인 바

5. regsiter :Register

6. tool, 도구 모음: Toolbar

7. search: Search

8. searchbar: 검색 창

9. searchlnput: 검색 입력 상자

10. shop: 현재

를 나타내는 리본

11. 아이콘: 작은 아이콘

12. 레이블: 상표

13. 홈페이지: 홈페이지

14. 서브페이지: 보조 페이지 하위 페이지

15. hot: 핫스팟

16. list: 기사 목록, (예: 뉴스 목록: 목록-뉴스)

17. scroll: 스크롤

18. tab: 태그

19. sitemap: 사이트 맵

20. msg 또는 메시지: 프롬프트 메시지

21. current: 현재

22. joinus: 가입하다

23. status: 상태

24. btn: 버튼, (예를 들어 검색 버튼은 다음과 같이 쓸 수 있습니다: btn-search)

25. tips: Tips

26. note: note

27. guild : 가이드

28. 아르, 화살표 : Mark Arrow

29. Service : 서비스

30. 브레드 크 럼프 : (즉, 페이지의 위치에 대한 탐색 프롬프트)

31. 다운로드 : 다운로드

32. vote : 투표

OSiteinfo: 웹사이트 정보
파트너: 파트너
링크, Friendlink: 우정 링크
저작권: 저작권 정보
Siteinfocredits: 평판
Siteinfolegal: 법률 정보

CSS 스타일 이름 지정

1. 정렬 스타일 이름 지정: 왼쪽(왼쪽 콘텐츠), 가운데(가운데 콘텐츠), 오른쪽(오른쪽 콘텐츠) 등

2. 색상 영어 이름 지정: red(빨간색), 녹색(녹색), 노란색(노란색) 또는 border_red(빨간색 테두리) 등

3. 색상 코드 이름 지정: f00(빨간색), ff0(노란색), f90(주황색) 등; 텍스트 크기 이름 지정: 글꼴12px(글꼴 12픽셀), 글꼴16px(글꼴 16픽셀) 등

4. 페이지 줄 이름 지정: line_x(가로선), line_y(세로선) 또는 line_red(빨간색 선), line_black(검은색) line)

5. 그림 아이콘 이름: pic_1.jpg, pic_2.jpg or ico_1.gif, ico_2.gif

6. 페이지 광고 이름: ad_01, ad_02

7. 배경 프레임 이름: nav_bg(배경 이미지를 나타냄) 네비게이션 바의 위치), tool_bg (툴바 배경 이미지 위치를 나타냄)

8. CSS 스타일 시트 이름 지정

index.css: 홈페이지에 별도의 스타일 만들기

1. head.css: 머리 스타일 , 여러 페이지 헤드 디자인 스타일이 일관되게 동시에 사용됩니다.

2. base.css: 공유 스타일.

3. style.css: 독립 페이지에서 사용되는 스타일 파일입니다.

4. global.css: 페이지 스타일의 기본, 글로벌 퍼블릭 스타일로 페이지에 반드시 포함되어야 합니다.

5. layout.css: 레이아웃, 레이아웃 스타일, 일반적인 유형이 많을 때 사용되며 일반적으로 홈페이지 페이지 및 상품 페이지에서 사용됩니다.

6. module.css: 모듈, 상품 페이지에 사용되며 다른 모듈과 함께 사용할 수도 있습니다. 스타일과 함께 사용됩니다.

7. master.css: 기본 스타일 시트

8. columns.css: 열 스타일

9. themes.css: 기본 스타일

10. forms.css: 양식 스타일

11. mend.c SS: Patch는 위의 스타일을 기반으로 한 비공개 패치입니다.

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