HTML 튜토리얼

HTML 및 CSS에 대한 코딩 사양

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 30, 2016 am 09:21 AM

HTML 및 CSS 코딩 사양 내용

1. HTML 사양

2. CSS 사양

3. 주의사항:

4. 일반적으로 사용되는 명명 규칙

5. CSS 스타일 시트 파일 이름 지정

6. 파일 명명 규칙

1. HTML 사양:

1. 코드 사양

페이지 첫 번째 줄에 표준 모드 선언 을 추가하세요.
코드 들여쓰기: 탭 키로 공백 4개 설정(보통 해당 공백 크기는 소프트웨어 오른쪽 하단에서 설정)
처음에 DOC와 'UTF-8'이 있거나 대문자로 쓸 수 있는 머리 부분의 특수한 경우를 제외하고는 모두 소문자이며 CSS 클래스는 모두 소문자입니다
문서 lang="zh-CN"에 대한 올바른 언어를 설정하려면 html 루트 요소에 lang 속성을 지정하는 것이 좋습니다
다양한 문서 유형은 다양한 브라우저에서 다양한 렌더링 모드를 실행합니다

<span class="hljs-doctype"><!DOCTYPE html>
<span class="hljs-tag"><<span class="hljs-title">html <span class="hljs-attribute">lang=<span class="hljs-value">"zh-CN">
  <span class="hljs-tag"><<span class="hljs-title">head>
      <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">charset=<span class="hljs-value">"UTF-8">
      <span class="hljs-tag"><<span class="hljs-title">meta <span class="hljs-attribute">http-equiv=<span class="hljs-value">"X-UA-Compatible" <span class="hljs-attribute">content=<span class="hljs-value">"IE=Edge">
  <span class="hljs-tag"></<span class="hljs-title">head>
  ....
<span class="hljs-tag"></<span class="hljs-title">html>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

@import를 사용하지 마세요
- 태그에 비해 @import 명령은 훨씬 느려서 추가 요청 수가 늘어날 뿐만 아니라 예측할 수 없는 문제도 발생합니다. 대안에는 다음이 포함됩니다.
  - 여러 개의 요소 사용
  - Sass 또는 Less와 같은 CSS 전처리기를 통해 여러 CSS 파일을 하나의 파일로 컴파일합니다
  - Rails, Jekyll, 기타 시스템을 통해 제공되는 CSS 파일 병합 기능

<code class="hljs xml"><span class="hljs-comment"><!-- Use link elements -->
<span class="hljs-tag"><<span class="hljs-title">link <span class="hljs-attribute">rel=<span class="hljs-value">"stylesheet" <span class="hljs-attribute">href=<span class="hljs-value">"core.css">

<span class="hljs-comment"><!-- Avoid @imports -->
<span class="hljs-tag"><<span class="hljs-title">style><span class="css">
  <span class="hljs-at_rule">@<span class="hljs-keyword">import <span class="hljs-function">url(<span class="hljs-string">"more.css");
<span class="hljs-tag"></<span class="hljs-title">style>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

CSS 및 JavaScript 파일 소개

HTML5 사양에 따르면 일반적으로 CSS와 JS를 도입할 때 유형을 지정할 필요가 없습니다. 왜냐하면 text/css와 text/javascript가 각각 기본값이기 때문입니다

<span class="hljs-comment"><!-- External CSS -->
<span class="hljs-tag"><<span class="hljs-title">link <span class="hljs-attribute">rel=<span class="hljs-value">"stylesheet" <span class="hljs-attribute">href=<span class="hljs-value">"code-guide.css">

<span class="hljs-comment"><!-- In-document CSS -->
<span class="hljs-tag"><<span class="hljs-title">style><span class="css">
 <span class="hljs-comment">/* ... */
<span class="hljs-tag"></<span class="hljs-title">style>

<span class="hljs-comment"><!-- JavaScript -->
<span class="hljs-tag"><<span class="hljs-title">script <span class="hljs-attribute">src=<span class="hljs-value">"code-guide.js"><span class="undefined"><span class="hljs-tag"></<span class="hljs-title">script>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

2.댓글

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML 문서의 루트 태그는 무엇입니까?Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesasthetop-levellement thatenCapsulateslotherContent, 프로퍼 디코 언어 구조에있는 BrowserParsing을 보장합니다.

HTML 태그와 요소가 같은 것입니까?Apr 28, 2025 pm 05:44 PM

이 기사는 HTML 태그가 요소를 정의하는 데 사용되는 구문 마커이고 요소는 태그 및 내용을 포함한 완전한 단위라고 설명합니다. 그들은 웹 페이지를 구조화하기 위해 협력합니다. character count : 159

& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?Apr 28, 2025 pm 05:43 PM

이 기사는 & lt; Head & gt의 역할에 대해 설명합니다. & lt; Body & Gt; HTML의 태그, 사용자 경험에 미치는 영향 및 SEO 영향. 적절한 구조화는 웹 사이트 기능 및 검색 엔진 최적화를 향상시킵니다.

& lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?Apr 28, 2025 pm 05:42 PM

이 기사는 HTML 태그, 등의 차이점과 시맨틱 대 프리젠 테이션 사용 및 SEO 및 접근성에 미치는 영향에 중점을 둡니다.

HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?Apr 28, 2025 pm 05:41 PM

기사는 UTF-8에 중점을 둔 HTML에서 문자 인코딩 지정에 대해 논의합니다. 주요 이슈 : 올바른 텍스트 표시 보장, 멍청한 문자 방지 및 SEO 및 접근성 향상.

HTML의 다양한 형식 태그는 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 웹 컨텐츠를 구조화하고 스타일링하는 데 사용되는 다양한 HTML 서식 태그에 대해 논의하여 텍스트 모양에 미치는 영향과 접근성 및 SEO에 대한 시맨틱 태그의 중요성을 강조합니다.

'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?Apr 28, 2025 pm 05:39 PM

이 기사는 고유성, 목적, CSS 구문 및 특이성에 중점을 둔 HTML의 'ID'와 '클래스'속성의 차이점에 대해 설명합니다. 웹 페이지 스타일링 및 기능에 어떤 영향을 미치는지 설명하고 모범 사례를 제공합니다.

HTML의 '클래스'속성은 무엇입니까?Apr 28, 2025 pm 05:37 PM

이 기사는 스타일링 및 JavaScript 조작을위한 요소 그룹에서 HTML '클래스'속성의 역할을 고유 한 'ID'속성과 대조합니다.

See all articles

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.