HTML(5) 코드 사양

HTML 코딩 규칙

많은 웹 개발자는 HTML 코딩 규칙에 대해 거의 알지 못합니다.

2000년에서 2010년 사이에 많은 웹 개발자가 HTML에서 XHTML로 전환했습니다.

XHTML을 사용하여 개발자들은 점차적으로 더 나은 HTML 작성 표준을 개발해 왔습니다.

HTML5의 경우 더 나은 코드 표준을 만들어야 합니다. 다음은 몇 가지 표준 제안을 제공합니다.

올바른 문서 유형 사용

문서 유형 선언은 HTML 문서의 첫 번째 줄에 있습니다:

<!DOCTYPE html>

다른 태그와 마찬가지로 소문자를 사용하려면 다음을 사용하면 됩니다. 코드:

<!doctype html>

소문자 요소 이름 사용

HTML5 요소 이름에는 대문자와 소문자를 사용할 수 있습니다.

소문자 사용 권장:

대문자와 소문자를 혼합하는 스타일은 매우 나쁩니다.
개발자는 일반적으로 소문자(XHTML과 유사)를 사용합니다.
소문자 스타일이 더 산뜻해 보이네요.
소문자는 쓰기 쉽습니다.

권장하지 않음:

<섹션>
<p>문단입니다. </p>
</SECTION>

매우 나쁨:

<섹션>
<p>문단입니다. </p>
</SECTION>

모든 HTML 요소 닫기

HTML5에서는 모든 요소(예: <p> 요소)를 닫을 필요는 없지만 각 요소에 닫는 태그를 추가하는 것이 좋습니다.

권장하지 않음:

<섹션>
<p>문단입니다.
<p>문단입니다.
</section>

권장:

<섹션>
<p>문단입니다. . </p>
<p> 이것은 단락입니다. </p>
</섹션>

빈 HTML 요소 닫기

HTML5에서는 빈 HTML 요소를 닫을 필요가 없습니다.

다음과 같이 작성할 수 있습니다.

<메타 charset="utf-8">

은 다음과 같이 작성할 수도 있습니다.

XHTML과 XML에는 슬래시(/)가 필요합니다.

XML 소프트웨어가 페이지를 사용할 것으로 예상되는 경우 이 스타일을 사용하는 것이 좋습니다.

소문자 속성 이름 사용

HTML5 속성 이름에서는 대문자와 소문자를 사용할 수 있습니다.

속성 이름에는 소문자 사용을 권장합니다.

대문자를 동시에 사용하는 것은 매우 나쁜 습관입니다.
개발자는 일반적으로 소문자(XHTML과 유사)를 사용합니다.
소문자 스타일이 더 산뜻해 보이네요.
소문자는 쓰기 쉽습니다.

권장하지 않음:

권장:

속성 값

HTML5 속성 값은 다음과 같습니다. 따옴표가 생략되었습니다.

속성 값에는 따옴표를 사용하는 것이 좋습니다.

속성 값에 공백이 포함된 경우 따옴표를 사용해야 합니다.
스타일을 혼합하는 것은 권장하지 않으며 스타일을 통일하는 것이 좋습니다.
속성 값은 따옴표를 사용하여 읽기 쉽습니다.

다음 인스턴스 속성 값에는 공백이 포함되어 있고 인용되지 않으므로 작동하지 않습니다.

다음에서는 큰따옴표를 사용했는데 이는 올바른 것입니다.

<테이블 class="테이블 스트라이프">

이미지 속성

일반적으로 이미지가 사용됩니다. alt 속성입니다. 사진을 표시할 수 없는 경우 사진 디스플레이를 대체할 수 있습니다.

이미지 크기를 정의하고 로딩 시 깜박임을 줄이기 위해 지정된 공간을 확보하세요.

공백 및 등호

등호 앞뒤에 공백을 사용할 수 있습니다.

<링크 rel = "stylesheet" href = "styles.css">

그러나 공간을 적게 사용하는 것이 좋습니다.

너무 긴 코드 줄은 피하세요

HTML 편집기 사용 시 코드를 좌우로 스크롤하는 것이 불편합니다.

각 코드 줄을 80자 미만으로 유지하세요.

빈 줄과 들여쓰기

아무 이유 없이 빈 줄을 추가하지 마세요.

읽기 쉽도록 각 논리 기능 블록에 빈 줄을 추가합니다.

들여쓰기에는 공백 두 개를 사용하세요. TAB은 권장되지 않습니다.

더 짧은 코드 사이에 불필요한 빈 줄이나 들여쓰기를 사용하지 마세요.

불필요한 빈 줄 및 들여쓰기:

<body>

<h1>php 중국어 웹사이트</h1>

<h2>HTML</h2> 그것은 꿈이다. php 중국어 홈페이지, 기술뿐만 아니라 꿈도 배웁니다. php 중국어 홈페이지, 당신이 배우는 것은 기술뿐만 아니라 꿈이기도 합니다,
php 중국어 웹사이트, 당신이 배우는 것은 기술뿐만 아니라 꿈이기도 합니다.
🎜>>권장:

<

본체
> <
h1
>php 중국어 웹사이트</h1

h2><
/ h2
> <p>php 중국어 홈페이지, 배우는 것은 기술뿐만 아니라, 하지만 꿈이기도 하다. php 중국어 홈페이지, 기술뿐만 아니라 꿈도 배웁니다. php 중국어 홈페이지, 기술뿐만 아니라 꿈도 배웁니다. php 중국어 홈페이지, 기술뿐만 아니라 꿈도 배웁니다.
<
/p></body> ;

表格实例:

<테이블>
<tr>
    <번째>이름</번째>
    <번째>설명< /일>
   </tr>
<tr>
    <td>A</td>
    <td>A 설명</td> ;
   </tr>
<tr>
    <td>B</td>
    <td>B 설명</td> ;
</tr>
</테이블 >

목록 인스턴스:

<html> 및 <body>를 생략하시겠습니까?

표준 HTML5에서는 <html> 태그와 <body>

다음 HTML5 문서가 정확합니다:

Instance

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

인스턴스 실행»

클릭" 온라인 인스턴스를 보려면 인스턴스 실행' 버튼을 누르세요

<html> 및 <body> 태그를 생략하는 것은 권장되지 않습니다.

<html> 요소는 문서의 루트 요소이며 페이지의 언어를 설명하는 데 사용됩니다.

< !DOCTYPE html>
<html lang="zh">

선언된 언어는 스크린 리더와 검색 엔진의 편의를 위한 것입니다.

<html> 또는 <body>를 생략하면 DOM 및 XML 소프트웨어가 중단됩니다.

<body>를 생략하면 이전 브라우저(IE9)에서 오류가 발생합니다.

<head> 생략?

표준 HTML5에서는 <head> 태그를 생략할 수 있습니다.

기본적으로 브라우저는 <body> 이전의 콘텐츠를 기본 <head> 요소에.

인스턴스

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO。";
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

	现在省略 head 标签还不推荐使用。

메타데이터

HTML5의 <title> 요소는 페이지의 주제를 설명합니다.

< 제목>php 중국어 홈페이지</title>

제목과 언어를 사용하면 검색 엔진이 페이지의 주제를 빠르게 이해할 수 있습니다.

<!DOCTYPE html >
<html lang="zh">
<머리>
<메타 charset="UTF-8">
<제목>php 중국어 홈페이지</title>
</head>

HTML댓글

댓글 작성 가능  in:

상대적으로 긴 설명은  사이에 별도의 줄로 작성할 수 있습니다.

긴 댓글의 첫 글자는 읽기 쉽도록 공백 두 개로 들여쓰기됩니다.

스타일 시트

스타일 시트는 간결한 구문 형식을 사용합니다(type 속성은 필요하지 않음):

<링크 rel="stylesheet" href="styles.css">

짧은 규칙은 한 줄로 작성할 수 있습니다:

p.into {font-family: 베르다나; 글꼴 크기: 16em;}

긴 규칙은 여러 줄로 작성할 수 있습니다:

body {
background-color: lightgrey;
글꼴군: "Arial 검정", 헬베티카, 산세리프;
글꼴 크기: 16em;
색상: 검정;
}

왼쪽 중괄호를 선택기와 같은 줄에 배치합니다.
왼쪽 중괄호. 선택기와 같은 줄에 있습니다.
콜론과 속성 값 사이에 공백을 추가하세요.
쉼표와 기호 뒤에 공백을 사용하세요.
각 속성과 값 끝에
속성 값에 공백이 포함된 경우에만 따옴표를 사용하세요.
닫는 중괄호는 새 줄에 배치됩니다.
한 줄에 최대 80자까지 가능합니다.
HTML에서 JavaScript 로드
간결한 구문을 사용하여 외부 스크립트 파일을 로드합니다(type 속성은 필요하지 않음):
< ; script src="myscript.js">
다음을 사용하여 HTML 요소에 액세스 JavaScript
HTML 형식이 잘못되면 JavaScript 실행 오류가 발생할 수 있습니다.
다음 두 JavaScript 문은 서로 다른 결과를 출력합니다.
Instance
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
// 只有段落 2 会被替换
document.getElementById("demo").innerHTML = "HELLO.";
</script>

</body>
</html>
```
인스턴스 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
HTML의 JavaScript에도 동일한 명명 규칙을 사용해 보세요.
JavaScript 코드 사양에 액세스하세요.
소문자 파일 이름 사용
대부분의 웹 서버(Apache, Unix)는 대소문자를 구분합니다. london.jpg는 London.jpg를 통해 액세스할 수 없습니다.
다른 웹 서버(Microsoft, IIS)는 대소문자를 구분하지 않습니다. london.jpg는 London.jpg 또는 london.jpg를 통해 액세스할 수 있습니다.
일관적인 스타일을 유지해야 하며, 파일 이름은 일관되게 소문자를 사용하는 것이 좋습니다.
파일 확장자
HTML 파일 접미사는 .html(또는 r .htm)일 수 있습니다.
CSS 파일 접미사는 .css입니다.
JavaScript 파일 접미사는 .js 입니다.
.htm과 .html의 차이점
.htm과 .html의 확장자 파일에는 본질적으로 차이가 없습니다. 브라우저와 웹 서버 모두 이를 HTML 파일로 처리합니다.
차이점은 다음과 같습니다.
.htm은 초기 DOS 시스템에서 사용되었지만 현재 시스템에는 3개의 문자만 있습니다.
유닉스 시스템에서는 접미사에 특별한 제한이 없으며 일반적으로 .html을 사용합니다.
기술적 차이
URL에 파일 이름이 지정되지 않은 경우(예: http://www.php.cn/css/), 서버는 기본 파일 이름을 반환합니다. 일반적으로 기본 파일 이름은 index.html이며, index.htm, default.html 및 default.htm.
기본 파일이 "index.html"로만 서버가 구성된 경우 파일 이름을 "index.htm"이 아닌 "index.html"로 지정해야 합니다.
그러나 일반적으로 서버는 여러 개의 기본 파일을 설정할 수 있으므로 필요에 따라 기본 파일을 설정할 수 있습니까?
어쨌든 HTML의 완전한 접미사는 ".html"입니다.

← HTML 5 퀴즈

HTML(5) 코드 사양

HTML 코딩 규칙

올바른 문서 유형 사용

소문자 요소 이름 사용

권장하지 않음:

매우 나쁨:

추천:

모든 HTML 요소 닫기

빈 HTML 요소 닫기

소문자 속성 이름 사용

속성 값

이미지 속성

공백 및 등호

너무 긴 코드 줄은 피하세요

빈 줄과 들여쓰기

불필요한 빈 줄 및 들여쓰기:

表格实例:

목록 인스턴스:

<html> 및 <body>를 생략하시겠습니까?

Instance

<head> 생략?

인스턴스

메타데이터

HTML댓글

스타일 시트

HTML에서 JavaScript 로드

다음을 사용하여 HTML 요소에 액세스 JavaScript

Instance

소문자 파일 이름 사용

파일 확장자

.htm과 .html의 차이점

기술적 차이

PHP 중국어 웹사이트