HTML5 코딩 표준

HTML 코딩 규칙

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

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

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

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

올바른 문서 유형을 사용하세요

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

<!DOCTYPE html>

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

<!doctype html>

요소 이름에는 소문자 사용

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

소문자 사용 권장:

대문자와 소문자를 혼합하는 스타일은 매우 나쁩니다.

개발자는 일반적으로 소문자(XHTML과 유사)를 사용합니다.

소문자 스타일이 더 산뜻해 보이네요.

소문자는 쓰기 쉽습니다.

권장하지 않음:

<SECTION> 
  <p>这是一个段落。</p>
</SECTION>

매우 나쁨:

<Section> 
  <p>这是一个段落。</p>
</SECTION>

권장:

<section> 
  <p>这是一个段落。</p>
</section>

모든 HTML 요소 닫기

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

권장하지 않음:

<section>
  <p>这是一个段落。
  <p>这是一个段落。
</section>

권장:

<section>
  <p>这是一个段落。</p>
  <p>这是一个段落。</p>
</section>

빈 HTML 요소 닫기

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

다음과 같이 쓸 수 있습니다:

<meta charset="utf-8">

다음과 같이 쓸 수도 있습니다:

<meta charset="utf-8" />

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

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

소문자 속성 이름 사용

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

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

대문자를 동시에 사용하는 것은 매우 나쁜 습관입니다.

개발자는 일반적으로 소문자(XHTML과 유사)를 사용합니다.

소문자 스타일이 더 산뜻해 보이네요.

소문자는 쓰기 쉽습니다.

권장하지 않음:

<div CLASS="menu">

권장:

<div class="menu">

속성 값

HTML5 속성 값에는 따옴표가 필요하지 않습니다.

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

속성 값에 공백이 포함된 경우 따옴표를 사용해야 합니다.

스타일을 혼합하는 것은 권장하지 않으며 스타일을 통일하는 것이 좋습니다.

속성 값을 읽기 쉽게 하려면 따옴표를 사용하세요.

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

다음 다음과 같은 큰따옴표를 사용합니다.

이미지 속성

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

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

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

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

공백과 등호

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

<link rel = "stylesheet" href = "styles.css">

하지만 공백을 적게 사용하는 것이 좋습니다.

<link rel="stylesheet" href="styles.css">

너무 긴 코드 줄은 피하세요

HTML 편집기를 사용할 때는 다음과 같습니다. 코드를 좌우로 스크롤하는 것이 불편합니다.

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

빈줄과 들여쓰기

무작위로 빈줄을 추가하지 마세요.

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

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

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

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

<body>
  <h1>相思</h1>
  <h2>HTML</h2>
  <p>
   红豆生南国，春来发几枝。
愿君多采撷，此物最相思。
  </p>
</body>

권장:

<body>
<h1>相思</h1>
<h2></h2>
<p>红豆生南国，春来发几枝。
愿君多采撷，此物最相思。</p>
</body>

테이블 예:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

목록 예:

<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

< 생략 ;html> 및 <body>?

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

다음 HTML5 문서는 정확합니다.

예:

<!DOCTYPE html>
<head>
  <title>网页标题</title>
</head>
<h1>标题</h1>
<p>段落。</p>

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

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

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

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

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

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

<head>를 생략하시겠습니까?

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

기본적으로 브라우저는 기본 <head> 요소에 <body> 앞에 콘텐츠를 추가합니다.

예

<!DOCTYPE html>
<html>
<title>页面标题</title>
<body>
  <h1>标题</h1>
  <p>段落。</p>
</body>
</html>

head 태그를 생략하는 것은 현재 권장되지 않습니다.

메타데이터

HTML5의 <title> 요소는 필수입니다. 제목 이름은 페이지의 주제를 설명합니다.

<title>php 중국어 웹사이트</title> ;

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

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>ask.php.cn</title>
</head>

HTML 댓글

댓글은 <!-- 및 --로 작성할 수 있습니다. > ; in:

더 긴 코멘트는  사이에 별도의 줄로 작성할 수 있습니다. 🎜>

<!--

긴 댓글입니다. 이것은 더 긴 리뷰입니다. 이것은 더 긴 리뷰입니다.
긴 댓글입니다. 긴 댓글입니다. 이것은 더 긴 리뷰입니다.
-->

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

스타일 시트

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

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

p.into {font-family: Verdana; 글꼴 크기: 16em;}

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

body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
글꼴 -size: 16em;
color: black;
}

여는 중괄호를 선택기와 같은 줄에 배치합니다.

왼쪽 중괄호와 선택자 사이에 공백을 추가하세요.

들여쓰기에는 공백 두 개를 사용하세요.

콜론과 속성 값 사이에 공백을 추가하세요.

쉼표와 기호 뒤에는 공백을 사용하세요.

각 속성과 값 끝에 기호를 사용하세요.

속성 값에 공백이 포함된 경우에만 따옴표를 사용하세요.

닫는 중괄호가 새 줄에 배치됩니다.

한 줄에 최대 80자까지 가능합니다.

일반적인 규칙은 쉼표와 세미콜론 뒤에 공백을 추가하는 것입니다.

HTML에서 JavaScript 로드

간결한 구문을 사용하여 외부 스크립트 파일 로드(type 속성은 필요하지 않음):

JavaScript를 사용하여 HTML 요소에 액세스

잘못된 HTML 형식으로 인해 JavaScript 실행 오류가 발생할 수 있습니다.

다음 두 JavaScript 문은 서로 다른 결과를 출력합니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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이 파일 이름(예: //m.sbmmt.com/css/)을 지정하지 않으면 서버는 기본 파일 이름을 반환합니다. 일반적으로 기본 파일 이름은 index.html, index.htm, default.html 및 default.htm입니다.

기본 파일이 "index.html"로만 서버가 구성된 경우 파일 이름을 "index.htm"이 아닌 "index.html"로 지정해야 합니다.

그러나 일반적으로 서버는 여러 개의 기본 파일을 설정할 수 있으므로 필요에 따라 기본 파일을 설정할 수 있습니까?

어쨌든 HTML의 완전한 접미사는 ".html"입니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <p id="Demo">段落 1。</p> <p id="demo">段落 2。</p> <script> // 只有段落 2 会被替换 document.getElementById("demo").innerHTML = "HELLO."; </script> </body> </html>

제출하다 코드 재설정

자동운전