HTML5 코딩 표준

올바른 문서 유형 사용

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

<!DOCTYPE html>

원하는 경우 다른 태그와 동일 소문자를 사용하려면 다음 코드를 사용할 수 있습니다:

<!doctype html>

소문자 요소 이름 사용

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

소문자 사용 권장:

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

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

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

소문자는 쓰기 쉽습니다.

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

모든 HTML 요소 닫기

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

<section>
<p>문단입니다.

이것은 문단입니다. </p>
</section>

빈 HTML 요소 닫기

HTML5에서 빈 HTML 요소가 반드시 닫힐 필요는 없습니다.

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

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

< ;meta charset= "utf-8" />

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

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

소문자 속성 이름 사용

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

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

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

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

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

소문자는 쓰기 쉽습니다.

속성값

HTML5 속성값은 따옴표 없이 사용할 수 있습니다.

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

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

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

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

이미지 속성

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

이미지 크기를 정의하면 로드할 수 있습니다. 깜박임을 줄이기 위해 지정된 공간을 예약합니다.

공간 등호

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

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

너무 긴 코드 줄은 피하세요

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

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

빈줄과 들여쓰기

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

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

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

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

<body>

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

양식 예:

<번째> 이름

<번째> 설명

;B</td>
< td>B</td>
</tr>
</table>

목록 인스턴스 설명:

<ol>
<li> ;런던</li>
<li>파리</li>
<li>도쿄</li>

</ol>

<html> 및 <body>를 생략하세요.

표준 HTML5에서는 <html> .

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

<!DOCTYPE html>

<head>

<title>페이지 제목</title>
</head>
<h1>제목입니다</h1>
<p>문단입니다 .

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

<head> 생략?

표준 HTML5에서 < ;head> 태그는 생략 가능합니다.

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

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

메타데이터

<title> 예, 제목 이름은 페이지의 주제를 설명합니다.

<title>php中文网</title>

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
< ;title>php 중국 웹사이트</title>
</head>

HTML 댓글

댓글은  형식으로 작성 가능:

더 긴 댓글은 <! -- 그리고 --> 중간 지점은 다음과 같이 씁니다.

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

스타일 시트

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML에서 JavaScript 로드

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

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

HTML 형식이 잘못되면 JavaScript 실행 오류가 발생할 수 있습니다.

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

Instance

var obj = getElementById("Demo")

var obj = getElementById(" 데모")

사용해 보기»

HTML의 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"입니다.

새로운 파일

<!DOCTYPE html> <!-- HTML5 doctype 标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现-->
<html lang="zh-CN"> <!-- 语言属性 有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等 -->
<head>

 <!-- 字符编码 通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式 -->
 <meta charset="UTF-8">

 <!-- IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。
 除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式 -->
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">

 <title>Page title</title>

 <!-- External CSS 根据 HTML5 规范，在引入 CSS 文件时一般不需要指定 type 属性，因为 text/css 是它的默认值 -->
 <link rel="stylesheet" href="code-guide.css">

 <!-- In-document CSS -->
 <style>
 /* ... */
 </style>

 <!-- JavaScript 根据 HTML5 规范，在引入 JavaScript 文件时一般不需要指定 type 属性，因为 text/javascript 是它的默认值 -->
 <script src="code-guide.js"></script>

</head>
<body>

	<!-- 属性顺序 HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
		 class
		 id, name
		 data-*
		 src, for, type, href
		 title, alt
		 aria-*, role
		class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位 -->
	<a class="..." id="..." data-modal="toggle" href="#">
		Example link
	</a>
	<br><br>
	<input class="form-control" type="text">
	<br><br>
	<img src="..." alt="...">
	<br><br>
	<!-- 布尔（boolean）型属性 不用赋值 元素的布尔型属性如果有值，就是 true，如果没有值，就是 false -->
	<select>
		<option value="1" selected>1</option>
	</select>
	<br><br>
	<!-- JavaScript 放在 body 底部加载可增快页面渲染速度 -->
	<script src="code-guide.js"></script>
</body>
</html>

제출하다 코드 재설정

자동운전

전체 화면