Latest web development tutorials

HTML (5) 코드 사양

HTML 코드 규칙

많은 웹 개발자는 HTML 코드 사양은 제대로 이해.

2,000에서 2,010 사이, 많은 웹 개발자는 HTML에서 XHTML로 변환합니다.

개발자는 XHTML 점차 좋은 HTML 쓰기 사양을 개발 사용합니다.

HTML5, 우리는 비교적 좋은 코드 규범을 형성한다과 몇 가지 권장 사양 아래에 제공됩니다.

문서의 정확한 유형을 사용

HTML 문서의 첫 번째 행의 문서 형 선언 :

<! DOCTYPE html로>

당신이 낮은 경우와 같은 다른 레이블을 사용하려면, 다음과 같은 코드를 사용할 수 있습니다 :

<! DOCTYPE html로>

소문자 요소 이름

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

권장 사용 소문자 :

  • 혼합 된 경우 스타일이 매우 나쁘다.
  • 개발자는 일반적으로 소문자 (비슷한 XHTML)를 사용합니다.
  • 소문자 스타일은 더 상쾌 보인다.
  • 소문자 쓰기 쉬운.

권장하지 않음 :

<제>
<P>이 단락이다. </ P>
</ SECTION>

아주 나쁜 :

<섹션>
<P>이 단락이다. </ P>
</ SECTION>

권장 사항 :

<섹션>
<P>이 단락이다. </ P>
</ 섹션>

모든 HTML 요소를 해제

HTML5에서는 (<p> 요소 예를 들어) 모든 요소를 ​​닫습니다 싶지 않아,하지만 우리는 각각의 요소가 종료 태그를 추가해야하는 것이 좋습니다.

권장하지 않음 :

<섹션>
<P>이 단락이다.
<P>이 단락이다.
</ 섹션>

권장 사항 :

<섹션>
<P>이 단락이다. </ P>
<P>이 단락이다. </ P>
</ 섹션>

닫기 빈 HTML 요소

HTML5에서 빈 HTML 요소는 종료하지 않습니다

우리는 쓸 수 있습니다 :

<메타 문자 집합 = "UTF-8 ">

당신은 또한 쓸 수 있습니다 :

<메타 문자 집합 = "UTF-8 "/>

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

당신이 당신의 소프트웨어 XML 페이지를 사용하실 경우,이 스타일은 아주 좋은 것입니다.

소문자 속성 이름

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

우리는 소문자 속성 이름을 사용하는 것이 좋습니다 :

  • 사용 사례는 아주 나쁜 습관이다.
  • 개발자는 일반적으로 소문자 (비슷한 XHTML)를 사용합니다.
  • 소문자 스타일은 더 상쾌 보인다.
  • 소문자 쓰기 쉬운.

권장하지 않음 :

<사업부 클래스 = "메뉴">

권장 사항 :

<사업부 클래스 = "메뉴">

속성 값

HTML5 속성 값은 인용 할 수 없습니다.

우리는 속성 값 따옴표를 사용하는 것이 좋습니다 :

  • 속성 값이 포함 된 경우 공백을 인용 부호를 사용해야합니다.
  • 혼합 스타일은 제안 된 통합 스타일을 사용하지 않는 것이 좋습니다.
  • 인용 부호를 사용하여 속성 값은 쉽게 읽을 수 있습니다.

다음 예는 인용 부호를 사용하지 않는, 값에 공백이 포함 된 속성, 그것은 작동하지 않을 수 있습니다 :

<표 클래스 = 테이블 스트라이프>

다음은이 올바른지, 큰 따옴표를 사용합니다 :

<표 클래스 = "테이블 스트라이프" >

이미지 속성

이미지 고도는 자주 사용되는 속성. 화상을 표시 할 수없는 경우, 화상 표시를 교체 할 수있다.

<IMG SRC = "html5.gif"고도 = "HTML5" 스타일 = "너비 : 128px, 세로, 높이 : 128px, 세로">

정의 된 이미지 크기는 플리커를 줄일 로딩 지정된 공간의 시간에 예약 될 수있다.

<IMG SRC = "html5.gif"고도 = "HTML5"스타일 = "너비 : 128px, 세로, 높이 : 128px, 세로">

공간과 등호

당신은 이전과 동일 기호 다음에 공백을 사용할 수 있습니다.

<링크 REL = "스타일 시트"HREF = "styles.css가">

그러나, 우리는 공간을 적게 사용하는 것이 좋습니다 :

<링크 REL = "스타일 시트"HREF = "styles.css가">

코드의 긴 줄을 피

왼쪽, HTML 편집기를 사용하여 오른쪽 코드를 스크롤하는 것은 불편하다.

각 코드의 라인만큼 가능한 미만의 80 자.

빈 라인 및 들여 쓰기

아무 이유없이 빈 줄을 추가하지 마십시오.

각 논리 함수 블록에 대한 읽기 쉽게 만드는 빈 줄을 추가합니다.

들여 쓰기이 공간은, TAB을하지 않는 것이 좋습니다.

불필요한 빈 줄이 짧은 코드 사이에 들여 사용하지 마십시오.

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

<바디>

<H1>이 튜토리얼 </ H1>

<H2> HTML </ H2>

<P>
이 튜토리얼은 학습뿐만 아니라 기술뿐만 아니라 꿈이다.
이 튜토리얼은 학습뿐만 아니라 기술뿐만 아니라 꿈이다.
이 튜토리얼은 학습뿐만 아니라 기술뿐만 아니라, 꿈,
이 튜토리얼은 학습뿐만 아니라 기술뿐만 아니라 꿈이다.
</ P>

</ BODY>

권장 사항 :

<바디>

<H1>이 튜토리얼 </ H1>

<H2> </ H2>
<P>이 튜토리얼은 학습뿐만 아니라 기술뿐만 아니라 꿈이다.
이 튜토리얼은 학습뿐만 아니라 기술뿐만 아니라 꿈이다.
이 튜토리얼은 학습뿐만 아니라 기술뿐만 아니라 꿈이다.
이 튜토리얼은 학습뿐만 아니라 기술뿐만 아니라 꿈이다. </ P>

</ BODY>

예를 형성 :

<표>
<TR>
<목> 이름 </ 일>
<목> 설명 </ 일>
</ TR>
<TR>
<TD>를 </ TD>
<TD>를 </ 설명 TD>
</ TR>
<TR>
<TD> B </ TD>
<TD> </ B의 설명 TD>을
</ TR>
</ 테이블>

목록 예 :

<안녕>
<리> 런던 </ 리>
<리> 파리 </ 리>
<리> 도쿄 </ 리>
</ 올>

의 <HTML>과 <몸> 생략?

HTML5의 표준, <HTML>과에서 <body> 태그를 생략 할 수 있습니다.

다음 문서는 올바른 HTML5 있습니다 :

예 :

<! DOCTYPE html로>
<헤드>
<제목> 페이지 제목 </ 제목>
</ 헤드>

<H1>이이 제목입니다 </ H1>
<P>이 단락이다. </ P>

»시도

생략 <HTML> 및 <body> 태그하지 않는 것이 좋습니다.

<HTML> 요소는 문서의 페이지를 설명하는 데 사용되는 언어의 루트 요소이다 :

<! DOCTYPE html로>
<HTML LANG = "에서 zh">

언어 문은 스크린 리더와 검색 엔진을 촉진하는 것입니다.

의 <HTML> 또는 DOM에서 <몸>과 XML 소프트웨어 충돌을 생략합니다.

의 <몸> 생략 오류는 이전 버전의 브라우저 (IE9)에서 발생합니다.

의 <head>를 생략?

HTML5의 표준에서 <헤드> 태그는 생략 할 수있다.

기본적으로 브라우저는 <몸> 전에 기본 <헤드> 요소에 추가 컨텐츠 것이다.

예

<! DOCTYPE html로>
<HTML>
<제목> 페이지 제목 </ 제목>

<바디>
<H1>이이 제목입니다 </ H1>
<P>이 단락이다. </ P>
</ BODY>

</ HTML>

»시도
주의 이제 헤드 태그는 사용하지 않는 것이 좋습니다 생략합니다.

메타 데이터

HTML5는 <제목>의 요소가 필요하며, 타이틀의 이름이 페이지의 주제를 설명합니다 :

<제목>이 튜토리얼 </ 제목>

검색 엔진이 곧 페이지의 주제를 이해할 수 있도록 제목 및 언어 :

<! DOCTYPE html로>
<HTML LANG = "에서 zh">
<헤드>
<메타 캐릭터 = "UTF-8 ">
<제목>이 튜토리얼 </ 제목>
</ 헤드>

HTML 코멘트

댓글에 기록 할 수있는 <- 및 -!>에서 :

<! - 이것은 주석입니다 ->

에서 긴 주석 <! - 그리고는 -> 지점에 쓴 :

<! -
이것은 긴 설명이다. 이것은 긴 설명이다. 이것은 긴 설명이다.
이는이 기간이 더 긴 주석입니다 의견이다. 이것은 긴 설명이다.
->

첫 번째 문자 들여 쓰기 두 공간의 코멘트가 쉽게 읽을 수 있습니다.

스타일 시트

스타일 시트 간결한 구문 (type 속성이 필요하지 않습니다)

<링크 REL = "스타일 시트"HREF = "styles.css가">

규칙은 짧은 라인과 같이 쓸 수있다 :

p.into {글꼴 - 가족 : 굴림; 글꼴 크기 : 16em;}

긴 멀티 라인 규칙을 작성할 수 있습니다 :

몸 {
배경 색상 : lightgrey;
글꼴 - 가족 : "굴림 블랙" , 돋움, 산세 리프;
글꼴 크기 : 16em;
색상 : 검정;
}
  • 셀렉터와 같은 줄에 괄호.
  • 왼쪽 중괄호 사이에 선택하고 공간을 추가 할 수 있습니다.
  • 나는 들여이 공간을 사용합니다.
  • 콜론과 속성 값 사이에 공간을 추가했습니다.
  • 쉼표 및 기호 뒤에 공백을 사용합니다.
  • 속성 값은 각각의 심볼의 끝을 사용한다.
  • 속성 값에 포함 된 경우에만 공간은 인용 부호를 사용합니다.
  • 새 줄에 마우스 오른쪽 중괄호.
  • 라인 당 최대 80 자.
주의 쉼표와 세미콜론 공백을 추가 한 후에하는 것이 일반적인 규칙입니다.

HTML에서 자바 스크립트를로드

(type 속성이 필요하지 않습니다) 외부 스크립트 파일을로드하는 간단한 구문을 사용합니다 :

<스크립트 SRC = "myscript.js">

HTML 요소에 액세스하기 위해 자바 스크립트를 사용하여

나쁜 HTML 형식은 자바 스크립트 오류가 실행되게 할 수 있습니다.

출력 다른 결과 두 개의 자바 스크립트 문을 다음과 같은 :

예

var에 OBJ =에서 getElementById ( "데모" )

var에 OBJ =에서 getElementById ( "데모" )

»시도

HTML, 자바 스크립트는 같은 이름 지정 규칙을 사용하십시오.

액세스 자바 스크립트 코드 사양 .

소문자 파일 이름

london.jpg의 London.jpg에 액세스 할 수 없습니다 : 대부분의 웹 서버 (아파치, 유닉스)는 대소 문자를 구분이다.

대소 문자를 구분하지 않습니다 다른 웹 서버 (마이크로 소프트 IIS) : london.jpg는 London.jpg 또는 london.jpg를 통해 액세스 할 수 있습니다.

당신은 우리는 일관된 사용 소문자 파일 이름을 추천, 통합 된 스타일을 유지해야합니다.

파일 이름 확장명

HTML 파일 확장자는 .html 중에서 (또는 ▼이 .htm)이 될 수 있습니다.

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

자바 스크립트 파일 접미사의 .js합니다.

이 .htm 및 .html 중에서의 차이

성격에 파일 확장명이 .htm 및 .html 중에서 차이가 없다. 브라우저와 웹 서버가 처리하는 HTML 파일로 처리합니다.

차이점은 다음과 같습니다

초기 DOS 시스템 또는 시스템이 .htm 응용 프로그램은 이제 세 개의 문자입니다.

접미사 .html 중에서 일반적으로 UNIX 시스템에 특히 한정되지 않는다.

기술적 차이

URL에 파일 이름 (예 http://www.w3big.com/css/)를 지정하지 않는 경우, 서버는 기본 파일 이름을 반환한다. 기본 파일 이름은 index.htm으로, default.html을하고 default.htm을, 보통 index.html을합니다.

서버가 기본 파일로 전용 "index.html을"로 구성되어있는 경우, 당신은 오히려 "index.htm으로"이 아닌, "index.html을"을 파일 이름을 지정해야합니다.

그러나 일반적으로 서버가 여러 기본 파일을 설정할 수 있습니다, 당신은 그것을 필요로 기본 파일을 설정할 수 있습니다.

어쨌든, HTML 전체 접미사는 ".html 중에서"입니다.