HTML의 명명 규칙

HTML에는 엄격한 명명 규칙이 있다는 것을 알고 있으므로 오늘은 이러한 규칙을 통합하여 명명 오해를 방지하고 웹 페이지 제작에서 DIV+CSS 명명 규칙 사용을 표준화하면 특히 최적화 효과를 크게 향상시킬 수 있습니다. 팀으로 작업하면 공동제작의 효율성이 확실히 높아집니다.

CSS+DIV 웹 페이지(Xhtml)를 개발할 때 가장 헷갈리고 얽히는 것은 CSS 이름 지정입니다. 특히 이름을 어떻게 지정해야 할지, 이름을 지정하는 가장 좋은 방법이 무엇인지 모르는 초보자라면 더욱 그렇습니다.

1. 명명 규칙 설명: - TOP

1) 모든 이름은 소문자여야 합니다.

2) 속성 값은 큰따옴표("")로 묶어야 하며 다음과 같은 값을 가져야 합니다. class= "divcss5", id="divcss5"

3), 각 태그에는 시작과 끝이 있어야 하며 올바른 레벨이 있어야 하며 레이아웃은 규칙적이고 깔끔해야 합니다

4), 빈 요소에는 종료 태그 또는 시작 태그

5) 태그 뒤에 "/"를 추가하면 성능과 구조가 완전히 분리되며, 코드에는 스타일, 글꼴, bgColor, 테두리 등 성능 요소가 포함되지 않습니다.

6),

~

7), 각 테이블과 양식에 고유한 구조적 태그 ID를 추가하세요

8), 그림에 alt 태그를 추가하세요

9), 영어 명명 원칙을 사용해 보세요

10), 축약하지 마세요. 단어 개요

DIVCSS5에서는 일반적인 CSS 이름 지정 및 DIV CSS 이름 지정 방법을 소개합니다.

2. 웹 페이지 외부 레이어의 중요한 부분에 대한 CSS 스타일 이름 지정:

코트 랩 -----가장 바깥 레이어에 사용됨

header - ---------------머리에 사용

메인 콘텐츠 메인 ----------본문 콘텐츠에 사용(가운데)

main-left -------------왼쪽 레이아웃

오른쪽 기본-오른쪽 ----------오른쪽 레이아웃

탐색 모음 탐색--------- ---- ------웹 메뉴 네비게이션 바

content ---------------웹 페이지의 중간 본문에 사용됩니다

하단 바닥글 --------- -------- 하단에 사용

3. DIV+CSS 명명 참조표: - TOP

다음은 CSS 스타일 명명 및 CSS 파일 명명 참조표, DIV CSS 명명 참조표입니다.

CSS 스타일 이름 지정 설명

웹 페이지 공개 이름 지정

#wrapper 페이지 주변은 전체 레이아웃 너비를 제어합니다

#container 또는 #content 컨테이너, 가장 바깥쪽

#레이아웃 레이아웃

#head, #header 헤더 부분에 사용됨 # 메인 페이지 본문

#태그 태그

#msg #메시지 프롬프트 정보

#팁 팁

#투표 투표

#friendlink 친화적 링크

#제목 제목

#요약 요약

#로그인바 로그인 바

#searchInput 검색 입력 상자

#hot 핫스팟

#search 검색

#search_output 검색 결과와 검색 결과가 유사함

#searchBar 검색 창

#search_results 검색 결과

#copyright 저작권 정보

#브랜딩 상표

​arr /화살표 화살표

#길드 가이드

#사이트맵 웹사이트 맵

#목록 목록

#홈페이지 홈페이지

#하위 페이지 보조 페이지 하위 페이지

#tool, #toolbar 툴바

#드롭 드롭다운

# dorpmenu

드롭다운 메뉴

#상태상태

#스크롤 스크롤

.tab

tab

.left .right .center left, center, right

.news

.download

.banner 광고배너(상위광고) 배너)

전자무역 관련

.products 상품

.products_prices 상품 가격

.products_description 상품 설명

.products_review 상품 리뷰

.editor_review 에디터 리뷰

.news_release 최신 상품

. 출판사 프로듀서

. 스크린샷

thumbnail

.faqs

FAQ

.keyword 키워드

.blog blog

.forum forum

CSS 파일 명명 설명

master.css, style.css 메인

module.css 모듈

base.css는 기본적으로

layout.css 레이아웃, 레이아웃

themes.css 테마

columns.css 열

font.css 텍스트, 글꼴

forms.css 양식

mend.css 패치

인쇄를 공유합니다. CSS 인쇄

CSS 이름 지정에 대한 기타 지침:

DIV+CSS 이름 지정 요약: 기호로 시작하는 이름을 선택하기 위해 “.”(소문자 마침표)를 사용하거나 기호로 시작하는 이름을 선택하기 위해 “#”(파운드 기호)을 사용하는지 여부는 중요하지 않습니다. 가장 중요한 특수 상자의 이름은 "#"(파운드 기호) 선택 기호로 시작하고 다른 상자의 이름은 "."(소문자 마침표)로 시작하는 것이 좋습니다. HTML 호출에서 재사용할 수 있도록 CSS 선택기의 이름을 지정합니다.

일반적으로 가장 일반적으로 사용되는 기본 이름은 다음과 같습니다. Wrap(코트, 가장 바깥쪽 레이어), header(헤더, 헤더), nav(탐색 모음), menu(메뉴), title(열 제목, 일반적으로 h1h2h3h4 태그와 함께 사용됨)

, content(콘텐츠 영역), footer(바닥글, 하단), logo(로고, h1 태그와 함께 사용 가능), 배너(광고 배너, 일반적으로 상단에 위치), copyRight(저작권). 다른 것들은 필요에 따라 선택적으로 사용할 수 있습니다.

DIVCSS5 권장사항: 기본 상자, 중요 상자, 가장 바깥쪽 상자의 이름은 "#"(파운드 기호) 선택 기호로 시작하여 지정하고, 나머지 상자의 이름은 "."(소음점) 선택 기호로 시작해야 합니다.

2. CSS 스타일 파일의 이름은

main master.css

layout,layout.css

columns.css

textfont.css

print style print.css

theme theme입니다. .css

4. 영어 명명 기술:

일반적으로 사용되지 않는 내용이 있으면 번역 도구를 사용하여 영어로 번역하고 이름을 지정할 수 있습니다.

Google 온라인 번역 도구 사용을 권장합니다: http://translate.google.cn/

표준화된 CSS 이름 지정은 많은 이점을 제공하므로 모든 사람이 명명 규칙을 엄격히 준수하여 편리하게 사용할 수 있기를 바랍니다. 너와 나.

관련 읽기:

Div를 관리하고 아름답게 하기 위해 HTML이 CSS를 호출하는 방법

css+div 일반적인 레이아웃 기본 프레임워크

라디오 방송국 목록의 DIV+CSS 구현을 보여주는 예

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