HTML 코딩 규칙
많은 웹 개발자는 HTML 코딩 규칙에 대해 거의 알지 못합니다.
2000년에서 2010년 사이에 많은 웹 개발자가 HTML에서 XHTML로 전환했습니다.
XHTML을 사용하여 개발자들은 점차적으로 더 나은 HTML 작성 표준을 개발해 왔습니다.
HTML5의 경우 더 나은 코드 표준을 만들어야 합니다. 다음은 몇 가지 표준 제안을 제공합니다.
올바른 문서 유형 사용
문서 유형 선언은 HTML 문서의 첫 번째 줄에 있습니다.
<!DOCTYPE html>
다른 태그처럼 소문자를 사용하려면 다음을 사용하면 됩니다. 코드:
<!doctype html>
소문자 요소 사용 이름
HTML5 요소 이름에는 대문자와 소문자를 사용할 수 있습니다.
소문자 사용 권장:
권장하지 않음:
<SECTION> ;p>이것은 단락입니다. </p>
</SECTION>
매우 나쁨:
<섹션> <p>문단입니다.
권장:
<섹션>
<p>문단입니다. </p>
</section>
모든 HTML 요소 닫기
HTML5에서는 모든 요소(예: <p> 요소)를 닫을 필요는 없지만 각 요소에 닫는 태그를 추가하는 것이 좋습니다.
권장하지 않음:
<section>
<p>이것은 단락입니다.
<p>문단입니다.
</section>
권장:
<section>
<p>문단입니다.
이것은 문단입니다. </p>
</section>
빈 HTML 요소 닫기
HTML5에서는 빈 HTML 요소를 닫을 필요가 없습니다.
다음과 같이 작성할 수 있습니다.
<meta charset="utf-8">
다음과 같이 작성할 수도 있습니다.
<meta charset="utf-8" />
XHTML 및 XML에는 슬래시(/)가 필요합니다.
XML 소프트웨어가 페이지를 사용할 것으로 예상되는 경우 이 스타일을 사용하는 것이 좋습니다.
소문자 속성 이름 사용
HTML5 속성 이름에서는 대문자와 소문자를 사용할 수 있습니다.
속성 이름에는 소문자 사용을 권장합니다.
권장하지 않음:
<div CLASS="menu">
추천:
<div class="menu">
속성값
HTML5 속성값은 따옴표 없이 사용할 수 있습니다.
속성 값에는 따옴표를 사용하는 것이 좋습니다.
다음 인스턴스 속성 값에는 공백이 포함되어 있고 인용되지 않으므로 작동하지 않습니다.
<table class=table 스트라이프>
다음은 큰따옴표를 사용하는 것이 올바른 것입니다.
<table class="table Striped">
이미지 속성
이미지는 일반적으로 alt 속성을 사용합니다. 사진을 표시할 수 없는 경우 사진 디스플레이를 대체할 수 있습니다.
<img src="html5.gif" alt="HTML5" >
로드할 때 이미지 크기를 정의하세요. 깜박임을 줄이기 위해 지정된 공간을 확보할 수 있습니다.
<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은 권장되지 않습니다.
더 짧은 코드 사이에 불필요한 빈 줄이나 들여쓰기를 사용하지 마세요. < ;h1>php中文网</h1>
<h2>HTML</h2> 꿈이에요. PHP 중국어 홈페이지, 기술뿐만 아니라 꿈도 배웁니다. php中文网, 당신이 배우는 것은 기술뿐만 아니라 꿈이기도 합니다.
php中文网, 당신은 기술뿐만 아니라 꿈도 배웁니다.
</p></body>
권장:
<body>
<h1>php 중국 웹사이트</h1>
<h2></h2>
< ; p>php 중국사이트, 당신이 배우는 것은 기술뿐만 아니라 꿈이기도 합니다.
php 중국어 홈페이지, 기술뿐만 아니라 꿈도 배웁니다.
php 중국어 홈페이지, 기술뿐만 아니라 꿈도 배웁니다.
php 중국어 홈페이지, 기술뿐만 아니라 꿈도 배웁니다. </p>
</body>
양식 예:
<테이블>
<tr>
<번째>이름</th>
> <tr>
;td>B</td>
<td>B 설명</td>
</tr>
</table>
목록 예:
<ol> <li>런던</li> 파리</li>
<li>도쿄</ li></ol>
<html> 및 <body>를 생략하시겠습니까?
표준 HTML5에서는 <html> 태그를 생략할 수 있습니다. 다음 HTML5 문서는 정확합니다.
<!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> 태그를 생략할 수 있습니다.
기본적으로 브라우저는 기본 <head> 요소에 <body> 앞에 콘텐츠를 추가합니다.
<!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> 요소는 필수 항목입니다. 페이지 :
<title>php 중국어 웹사이트</title>
제목과 언어를 사용하면 검색 엔진에서 귀하의 내용을 빠르게 이해할 수 있습니다. 페이지 테마:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=" UTF -8">
<title>php 중국어 웹사이트</title>
</head>
HTML 댓글
댓글은 <!-- 및 -->로 작성할 수 있습니다.
<!-- 댓글입니다-->
더 긴 댓글은 <!--와--> 사이에 별도의 줄로 작성할 수 있습니다:
<!--
긴 댓글입니다. 이것은 더 긴 리뷰입니다. 이것은 더 긴 리뷰입니다.
긴 댓글입니다. 긴 댓글입니다. 이것은 더 긴 리뷰입니다.
-->
긴 댓글의 첫 글자는 읽기 쉽도록 공백 두 개로 들여쓰기됩니다.
스타일 시트
스타일 시트는 간결한 구문 형식을 사용합니다(type 속성은 필요하지 않음):
<link rel="stylesheet" href="styles.css">
짧은 규칙은 한 줄로 작성할 수 있습니다.
p.into {font-family: Verdana; 글꼴 크기: 16em;}
긴 규칙은 여러 줄로 작성할 수 있습니다.
body {
background-color: lightgrey;
글꼴 계열: "Arial Black", Helvetica, sans-serif;
글꼴 크기: 16em;
color: black;
}
여는 중괄호를 선택자와 같은 줄에 배치합니다.
왼쪽 중괄호와 선택자 사이에 공백을 추가하세요.
들여쓰기에는 공백 2개를 사용하세요.
콜론과 속성 값 사이에 공백을 추가하세요.
쉼표와 기호 뒤에는 공백을 사용하세요.
각 속성과 값 끝에 기호를 사용하세요.
속성 값에 공백이 포함된 경우에만 따옴표를 사용하세요.
닫는 중괄호가 새 줄에 배치됩니다.
한 줄에 최대 80자까지 가능합니다.
일반적인 규칙은 쉼표와 세미콜론 뒤에 공백을 추가하는 것입니다.
HTML에서 JavaScript 로드
간결한 구문을 사용하여 외부 스크립트 파일을 로드합니다(type 속성은 필요하지 않음):
<script src="myscript.js"> 🎜>
JavaScript를 사용하여 HTML 요소에 액세스
HTML 형식이 잘못되면 JavaScript 실행 오류가 발생할 수 있습니다.
HTML의 JavaScript에도 동일한 명명 규칙을 사용해 보세요.
JavaScript 코드 사양에 액세스하세요.
파일 이름 소문자 사용 대부분의 웹 서버(Apache, Unix)는 대소문자를 구분합니다. london.jpg는 London.jpg를 통해 액세스할 수 없습니다.
다른 웹 서버(Microsoft, IIS)는 대소문자를 구분하지 않습니다. london.jpg는 London.jpg 또는 london.jpg로 액세스할 수 있습니다.
일관적인 스타일을 유지해야 하며, 파일 이름은 일관되게 소문자를 사용하는 것이 좋습니다.
파일 확장자
HTML 파일 접미사는 .html(또는 .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"입니다.
다음 섹션
