HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 히스토리 API HTML5 WebSocket

HTML(5) 코드 작성 규약

아래는 일반적이고 자주 사용되는 html 코드 규약을列出합니다. 좋은 작성 습관은 코드의 후속 유지보수와 업그레이드를 돕고,工作效率를 높이며, 여러분에게 도움이 되길 바랍니다.

HTML 코드 규약

많은 웹 개발자들이 HTML의 코드 스타일에 대해 잘 알지 못합니다.

에서2000년부터2010년에, 많은 웹 개발자들이 HTML에서 XHTML로 전환했습니다.

XHTML를 사용하여 개발자들은 좋은 HTML 작성 스타일을 형성하게 되었습니다.

HTML에 대한5 ، 우리는 좋은 코드 스타일을 형성해야 합니다. 다음은 몇 가지 스타일 규칙의提案입니다。

정확한 문서 타입 사용

문서 타입 선언은 HTML 문서의 첫 번째 줄에 위치합니다：

!DOCTYPE html>

기타 태그와 같이 소문자를 사용하고 싶다면 다음 코드를 사용할 수 있습니다：

<!doctype　html>

소문자 요소 이름 사용

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

소문자를 사용하는 것이 좋습니다:

대소문자를 혼용하는 스타일은 매우 나쁩니다.
개발자는 일반적으로 소문자(예: XHTML)를 사용합니다.
소문자 스타일은 더 깔끔하게 보입니다.
소문자는 쉽게 작성할 수 있습니다.

추천하지 않습니다:

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

매우 나쁜 것입니다:

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

추천:

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

모든 HTML 요소를 닫습니다

HTML에서5 중, 모든 요소를 닫지 않아도 됩니다 (예: <p> 요소), 하지만 각 요소에 닫는 태그를 추가하는 것이 좋습니다.

추천하지 않습니다:

<section>
　　<p>이는 단락입니다。
　　<p>이는 단락입니다。
</section>

추천:

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

비어 있는 HTML 요소를 닫습니다

HTML에서5 중, 비어 있는 HTML 요소는 반드시 닫지 않아도 됩니다：

이렇게 쓸 수 있습니다:

<meta　charset="utf-8">

이렇게 쓸 수도 있습니다:

<meta　charset="utf-8"　/>

XHTML과 XML에서 슬래시 (/)는/)는 필수입니다.

如果你的 XML 소프트웨어가 페이지를 사용하려면, 이 스타일을 사용하는 것은 매우 좋습니다.

소문자 속성 이름 사용

HTML5 속성 이름은 대문자와 소문자를 모두 사용할 수 있습니다.

우리는 소문자 속성 이름을 사용하는 것을 추천합니다:

대문자와 소문자를 동시에 사용하는 것은 매우 나쁜 습관입니다.
개발자는 일반적으로 소문자(예: XHTML)를 사용합니다.
소문자 스타일은 더 깔끔하게 보입니다.
소문자는 쉽게 작성할 수 있습니다.

추천하지 않습니다:

<div　CLASS="Style">

추천:

<div　class="style">

속성 값

HTML5 속성 값은 인용부호를 사용하지 않을 수 있습니다.

속성 값은 인용부호를 사용하는 것이 좋습니다:

속성 값에 공백이 포함되면 인용부호를 사용해야 합니다.
혼합 스타일은 추천하지 않으며, 일관된 스타일을 사용하는 것이 좋습니다.
속성 값에 인용부호를 사용하면 더 쉽게 읽을 수 있습니다.

아래 예제 속성 값에는 공백이 포함되어 있으며, 인용부호를 사용하지 않았기 때문에 작동하지 않습니다:

<table　class=table　striped>

아래는 올바른 예입니다: "

<table　class="table　striped">

이미지 속성

이미지는 일반적으로 alt 속성을 사용합니다. 이미지가 표시되지 않을 때, 이미지를 대체할 수 있습니다.

!DOCTYPE html>
<html>
<head>　
<meta　charset="utf-8">　
<title>기본 지침 웹사이트(oldtoolbag.com)</title>　
</head>
<body>
<img　src="logo.png"　alt="HTML5기본 지침">
</body>
</html>

이미지의 크기를 정의하면 로드할 때 특정 공간을 예약하여 빛나는 것을 줄일 수 있습니다.

<img　src="logo.png"　alt="HTML5기본 지침"　style="width:128px;height:40px">

공백과 등호

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

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

하지만 우리는 공백을 적게 사용하는 것을 추천합니다:

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

한 행의 코드가 너무 길지 않도록 피해야 합니다

HTML 편집기를 사용하면 코드를 왕복으로 스크롤하는 것이 불편합니다.

각 행 코드는 가능한 한 80개의 문자.

빈 줄과 들여쓰기

무리하게 빈 줄을 추가하지 마세요.

각 논리 기능 블록에 빈 줄을 추가하여 더 쉽게 읽을 수 있습니다.

들여쓰기는 두 개의 공백을 사용하며, TAB를 사용하지 않는 것이 좋습니다.

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

미적인 빈 줄과 들여쓰기:

　　　　　　　　<body>
　　<h1>기본 지침 웹사이트(oldtoolbag.com)</h1>
　　<h2>HTML</h2>
　　<p>
　　　　기본 지침 웹사이트, 기본을 잘 배우면 더 멀리 가실 수 있습니다.
　　　　기본 지침 웹사이트, 기본을 잘 배우면 더 멀리 가실 수 있습니다.
　　　기본 지침 웹사이트, 기본을 잘 배우면 더 멀리 가실 수 있습니다.,
　　기본 지침 웹사이트, 기본을 잘 배우면 더 멀리 가실 수 있습니다.
　　</p>
</body>

　　추천:

<body>
<h1>기본 지침 웹사이트(oldtoolbag.com)</h1>
<h2>HTML</h2>
<p>기본 지침 웹사이트, 기본을 잘 배우면 더 멀리 가실 수 있습니다.
기본 지침 웹사이트, 기본을 잘 배우면 더 멀리 가실 수 있습니다.
기본 지침 웹사이트, 기본을 잘 배우면 더 멀리 가실 수 있습니다.
기본 지침 웹사이트, 기본을 잘 배우면 더 멀리 가실 수 있습니다.</p>
</body>

　　표格 예제:

<table>
　　<tr>
　　　　<th>이름</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>PHP</li>
　　<li>JAVA</li>
　　<li>C++</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-CN">

声明语言是为了方便屏幕阅读器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。

省略 <body> 在旧版浏览器 (IE9)会发生错误。

省略 <head>?

在标准 HTML5 中， <head>标签是可以省略的。

默认情况下，浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。

예제

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

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

元数据

HTML5 中 <title> 元素是必须的，标题名描述了页面的主题：

<title>基础教程网</title>

标题和语言可以让搜索引擎很快了解你页面的主题：

!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>基础教程网</title>
</head>

HTML 注释

注释可以写在  중：

<!--　这是注释　-->

较长评论可以在  중간에 줄 바꿈을 합니다：

<!--　
　　이는 긴 설명. 이는
　　긴 설명. 이는 긴 설명입니다.
　　이는
　　긴 설명　이는 긴 설명입니다. 이는
　　긴 설명.
-->

장문의 첫 번째 문자는 두 공백으로 들여쓰면 더 읽기 쉽습니다.

스타일 시트

스타일 시트는 간단한 문법 형식을 사용합니다. (type 속성은 필수가 아닙니다):

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

단短的 규칙은 한 행으로 작성할 수 있습니다:

p.into {font-family: Verdana; font-size:　14px;}

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

body {
　　background-color: yellow;
　　font-family: "Arial Black", Helvetica, sans-serif;
　　font-size:　14px;
　　color: red;
}

왼쪽 괄호와 선택자를 같은 행에 두십시오.
왼쪽 괄호와 선택자 사이에 공백을 추가합니다.
두 개의 공백을 사용하여 인덱싱을 합니다.
콜론과 속성 값 사이에 공백을 추가합니다.
콤마와 기호 뒤에 공백을 사용합니다.
속성과 값의 끝에 반드시 세미콜론을 사용합니다.
속성 값에 공백이 포함되어 있을 때만 따옴표를 사용합니다.
오른쪽 괄호를 새 행에 두십시오.
한 행에 최대 80개의 문자.

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

HTML에서 JavaScript 로드

외부 스크립트 파일을 간결한 문법으로 로드하십시오 (type 속성은 필수가 아닙니다):

<script src="myscript.js">

JavaScript를 사용하여 HTML 요소에 접근하십시오

불량적인 HTML 형식은 JavaScript 실행 오류를 유발할 수 있습니다.

다음 두 개의 JavaScript 문장은 다른 결과를 출력합니다:

예제

var obj = getElementById("w3codebox")
var obj = getElementById("w3codebox")

HTML에서 JavaScript는 가능한 한 동일한 이름 규칙을 사용해야 합니다.

소문자 파일 이름을 사용하십시오

대부분의 웹 서버(Centos,) *Unix는 대소문자를 구분합니다: loading.jpg는 Loading.jpg로 접근할 수 없습니다.

기타 웹 서버(Windows, IIS)는 대소문자를 구분하지 않습니다: loading.jpg는 Loading.jpg 또는 loading.jpg로 접근할 수 있습니다.

일관된 스타일을 유지해야하며, 우리는 파일 이름을 소문자로 사용하는 것을 권장합니다.

파일 확장자

HTML 파일 확장자는 .html(또는 .htm)일 수 있습니다.

CSS 파일 확장자는 .css입니다.

JavaScript 파일 확장자는 .js입니다.

htm과 .html의 차이

htm과 .html 확장자 파일은 본질적으로 차이가 없습니다. 브라우저와 웹 서버는 모두 그것을 HTML 파일로 처리합니다.

차이점은 다음과 같습니다:

.htm은 이전 DOS 시스템에 적용되었으며 현재 시스템에서는 세 글자만 가능합니다.

Unix 시스템에서 확장자는 특별한 제한이 없으며 일반적으로 .html을 사용합니다.

기술적 차이

URL이 파일 이름을 지정하지 않았을 경우 (예: https://ko.oldtoolbag.com/html/, 서버는 기본 파일 이름을 반환합니다. 일반적으로 기본 파일 이름은 index.html입니다. index.htm, default.html, 및 default.htm.

서버가 "index.html"를 기본 파일로 설정했을 경우, 파일 이름을 "index.html"로命名해야 하며 "index.htm"로는命名为 안됩니다.

그러나, 일반적으로 서버는 여러 개의 기본 파일을 설정할 수 있으며 필요에 따라 기본 파일 이름을 설정할 수 있습니다.

다만, HTML의 완전한 확장자는 ".html"입니다.

HTML5 히스토리 API HTML5 WebSocket