새로운 HTML 5 초안(Working Draft)이 6월 10일에 출시되었습니다. 편집자는 제공된 새 버전 문서를 간략하게 읽고 몇 가지 메모를 했습니다. 
HTML 5 초안은 공식 표준이 되지 않습니다.
작업 초안으로 출판한다고 해서 W3C 회원의 승인을 의미하는 것은 아닙니다.
"초안"으로 출판한다고 해서 W3C 회원의 승인(지원)을 의미하는 것은 아닙니다.
HTML 5 사양은 사양이 최소한 두 번 완전히 구현되기 전에는 완료된 것으로 간주되지 않습니다.
HTML 5 사양은 최소한 두 가지 소프트웨어가 구현될 때까지 완성되지 않습니다.
XHTML 1은 1999년에 출시되었습니다. 완전히 지원되기까지 2~3년이 걸렸으며, 거의 10년이 지난 최근에야 완전히 승격되었습니다. 따라서 HTML 5가 지원되기까지는 시간이 좀 걸릴 것입니다(특히 "비주류" 브라우저에서). W3C HTML 워킹 그룹의 시간표에 따르면 2010년까지는 공식적인 마무리가 이루어지지 않을 것입니다.
XHTML 1은 1999년에 출시되었습니다. 완전히 지원되기까지 2~3년이 걸렸으며, 거의 10년이 지난 최근에야 완전히 승격되었습니다. 따라서 HTML 5가 지원되기까지는 시간이 좀 걸릴 것입니다(특히 "비주류" 브라우저에서). W3C HTML 워킹 그룹의 시간표에 따르면 2010년까지는 공식적인 마무리가 이루어지지 않을 것입니다.
놀랍도록 간단한 DOCTYPE 문
참 간단해요, 하. 또한 대문자와 소문자의 구분이 없습니다. 사양에서는 이 DOCTYPE이 선언되면 소위 "'사용자 정의' HTML 구문(사용자 정의 HTML 구문, 왜 이렇게 불리는지 모르겠습니다)"을 사용할 수 있도록 요구한다는 점을 언급할 가치가 있습니다. 태그가 필요하지 않은 유형입니다. 동시에 XHTML과 같은 XML 형식 구문을 허용하므로 위의 대신 xml 문서의 DOCTYPE을 선언해야 합니다.
향후 호환성
HTML 5 사양에는 "더 이상 사용되지 않는" 요소가 없습니다. 그 이유는 한편으로는 디자이너가 특정 요소를 시도하지 않도록 요구하지만 다른 한편으로는 브라우저가 이러한 요소를 지원해야 하기 때문입니다. 이 경우, 내 직감으로는 HTML이나 XHTML로 작성된 이전의 모든 웹 페이지를 지원하도록 의도되었습니다. 이는 디자이너에게 축복입니다. 마지막으로 더 이상 XHTML의 엄격한 구문에 의해 제한될 필요가 없습니다.
삭제된 요소
물론 이러한 요소는 HTML 4와 관련이 있지만 HTML 5는 HTML 4에 대한 단순한 회귀가 아니라는 것도 알 수 있습니다. 순수한 인터페이스 표시 요소는 버려야 한다는 것과 같은 XHTML의 몇 가지 중요한 정신을 여전히 고수하고 있습니다. CSS 등을 사용하여
다음 요소는 "그 효과가 순전히 표현적이므로 CSS로 더 잘 처리되기 때문에" 삭제됩니다. 순전히 표현적 요소이고 CSS로 대체되어야 하기 때문입니다.
기본 글꼴/큰/센터/글꼴/s/strike/tt/u
|
다음 요소는 "사용이 최종 사용자의 유용성과 접근성에 부정적인 영향을 미치기 때문에" 삭제되었습니다.
다음 요소는 "자주 사용되지 않거나 혼동을 일으키거나 다른 요소에서 처리할 수 있기 때문에" 삭제되었습니다.
HTML 테스트 문서:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 테스트 문서</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<본문>
<h1>HTML 테스트 문서</h1>
<ul>
<li>버전: 1.1 </li>
<li>DTD: XHTML 1.0 전환</li>
<li>인코딩: UTF-8</li>
<li>업데이트 날짜: 2008년 6월 12일</li>
</ul>
<시간 />
<h1><h1>은 제목 번호 1을 나타냅니다.</h1>
<h2><h2>는 제목 번호 2를 나타냅니다.</h2>
<h3><h3>은 제목 3을 나타냅니다.</h3>
<h4><h4>는 제목 번호 4를 나타냅니다.</h4>
<h5><h5>는 제목 번호 5를 나타냅니다.</h5>
<h6><h6>은 제목 번호 6을 나타냅니다.</h6>
<p>이 단락은 <p>로 둘러싸여 있습니다. <p>는 단락을 나타내며 가장 일반적으로 사용되는 텍스트 흐름 형식입니다. 텍스트 스트림에서 다양한 인라인 텍스트 태그를 사용할 수 있습니다. 가장 일반적으로 사용되는 것은 다음과 같습니다.
<strong> <strong>악화</strong>,
<em><em>강조</em>
<ins><ins> 삽입</ins>,
<del><del> 삭제</del>,
<sub><하위 첨자</sub>,
<sup><sup> 위 첨자</sup>,
<cite><cite>cite</cite>, <big><큰> 증가</big>, <small><작은>감소</small>. </p>
<pre> 이것은 <pre>에 포함된 텍스트 스트림입니다.
그 안의 공백, 탭, 캐리지 리턴 등은 웹 페이지에 직접 표시될 수 있으며 브라우저에 의해 자동으로 래핑되지 않습니다. 이를 사용하여 프로그램 코드를 표시할 수 있습니다.
미리 포맷된 기본값은 고정 너비 글꼴을 사용하는 것입니다. </pre>
<p>또한 이러한 인라인 태그를 사용하여 텍스트 흐름에 코드 조각을 표시할 수도 있습니다.
<code><code>코드</code>,
<kbd><kbd>키보드 입력</kbd>,
<var><var>변수</var>,
<samp><samp>샘플 예</samp>.
</p>
<p>또한 다음 두 가지 태그도 중요합니다.</p>
<ul>
<li><abbr>: 예를 들어 <abbr title="Mister">Mr.</abbr>은 Mister의 약어입니다. 하지만 이 태그는 IE에서는 유효하지 않은 것 같습니다. </li>
<li><acronym><acronym title=""></acronym>: 예를 들어 <acronym title="Hyper Text Markup Language">HTML</acronym>은 Hyper Text Markup Language(중국어도 가능)의 약어입니다. be 이 태그를 사용하세요. 예: "<acronym title="People's Republic of China">China</acronym>"은 "People's Republic of China"의 약어입니다. </li>
</ul>
<blockquote cite="#">
이 단락은 <blockquote>입니다. <blockquote>에서 cite 속성을 사용하는 것을 잊지 마세요.
</blockquote>
<주소>
이 섹션은 <address>에 포함되어 있으며 이메일 주소나 실제 주소를 표시하는 데 사용할 수 있습니다. 블록 수준 요소이지만 기본적으로 여백이나 패딩이 없습니다.
</주소>
<div> 섹션은 <div>에 포함되어 있습니다. <div>는 블록 수준 요소이며 기본적으로 스타일이 없습니다. 동등한 상태를 갖는 또 다른 요소는 <span><span>인라인 필드</span>이며, 이 요소에도 기본적으로 스타일이 없습니다. <br />
이 문장 앞에는 단락 내에서 줄바꿈을 위해 사용되는 <br>가 있습니다. </div> <시간 />
<p>위의 수평선은 <hr> 태그입니다. </p>
<p><a id="a"></a>이 문장 앞에는 <a> 태그로 구현된 앵커 태그가 있습니다. </p>
<p><a href="http:///"><a>링크를 의미하기도 합니다</a>. 여기에는 4개의 의사 클래스가 있습니다. :link는 <a href="http:///">방문하지 않은 링크</a>이고, :visited는 <a href="#">방문한 링크</a>입니다. hover는 <a href="http:///">마우스를 가리키면 링크</a>이고 :active<a href="http:///">마우스 클릭이 활성화되면 링크</a>입니다. </p>
<p><img width="100" height="100" alt="<img> tag" /> 이미지는 기본적으로 인라인이지만 블록으로 정의할 수도 있습니다. 그리고 img <img width="100" height="30" alt="img.inline" class="inline" />에 대해 특별히 .inline 클래스를 정의하세요. 또한 링크의 <img> 스타일이 <a href="#"><img width="60" height="60" alt="<img>" </a>. </p>
<p><object width="200" height="150"><param name="movie" value=""></param></object>
미디어를 삽입하기 위한 <object> 태그와 그 안에 <param> 태그도 있습니다. </p>
<시간 />
<ul>
<li>순서가 지정되지 않은 목록의 외부 레이어는<ul>입니다.</li>
<li>목록의 각 항목은 <li>로 구성됩니다.</li>
<li><ul> 태그에는 <li> 태그만 포함될 수 있습니다.
<ul>
<li>이 목록은 중첩된 2차 수준 목록이며 <li></li>에 배치되어야 합니다.
<li>중첩된 두 번째 수준 목록 항목의 스타일은 첫 번째 수준 목록의 스타일과 다를 수 있습니다.
<ul>
<li>이것은 세 번째 레벨이며 스타일이 두 번째 레벨과 다릅니다</li>
</ul>
</li>
</ul>
</li>
</ul>
<올>
<li>순서가 지정된 목록의 외부 레이어는 <ol></li>
<li>목록의 각 항목은 <li>로 구성됩니다.</li>
<li><ol> 태그에는 <li> 태그만 포함될 수 있습니다.
<올>
<li>이 목록은 중첩된 2차 수준 목록이며 <li></li>에 배치되어야 합니다.
<li>중첩된 두 번째 수준 목록 항목의 스타일은 첫 번째 수준 목록의 스타일과 다를 수 있습니다.
<올>
<li>이것은 세 번째 레벨이며 스타일이 두 번째 레벨과 다릅니다</li>
</ol>
</li>
</ol>
</li>
</ol>
<DL>
<dt>이 줄은<dt></dt>
<dd> 줄은 <dd>입니다. 외부 정의 목록은 <dl>입니다. </dd>
<dt>메모<dt>는 인라인 레벨 요소만 포함할 수 있습니다</dt>
<dd>그리고 <dd>는 인라인 또는 블록 수준 요소를 포함할 수 있습니다</dd>
</dl> <시간 />
<p>표준 테이블 모델. 열 너비는 <colgroup> 및 <col>에 의해 제어됩니다. </p>
<테이블>
<캡션>
<caption>입니다.
</caption>
<열그룹>
<col width="30%" />
<col 너비="50%" />
<col width="20%" />
</colgroup>
<머리>
<tr>
<th>이 줄은<thead>입니다</th>
<th><thead>는 <th> 또는 <td></th>와 함께 사용할 수 있습니다.
<th>여기에서는 <th></th>를 사용합니다.
</tr>
</thead>
<tfoot>
<tr>
<td>마지막 줄은 <tfoot></td>입니다.
<td><tfoot>어디에 배치되든 항상 마지막에 표시됩니다</td>
<td></td>
</tr>
</tfoot>
<본체>
<tr>
<td>다음 세 줄은<tbody>
<td><tr>을 원하는 만큼 넣을 수 있습니다</td>
<td>여기서 사용된 내용은<td></td>
</tr>
<tr>
<td><col>을 사용하여 열 표시</td>
<td>이 행의 가장 오른쪽 셀은 내용이 없는 빈 표 셀입니다.</td>
<td></td>
</tr>
<tr>
<td><tr>를 사용하여 행 표시</td>
<td>행의 가장 오른쪽 셀에는 &nbsp;</td>가 있습니다.
<td> </td>
</tr>
</tbody>
</table>
<시간 />
<양식 작업="">
<p><form> 라벨은 다양한 컨트롤 라벨을 직접 포함할 수 없습니다. <label><label></label>을 사용하여 양식 구성요소를 포함할 수 있습니다.</p>
<필드셋>
<legend><fieldset> 및 <legend> 태그를 사용하여 양식을 그룹화할 수도 있습니다. </legend>
<p>입력 태그의 CSS 정의 방법: 다양한 입력 컨트롤을 구별할 수 있도록 type 속성의 값을 클래스 이름으로 사용합니다. </p>
<p>
<input type="text" class="text" size="20" id="text" value="textfield 한 줄 텍스트 상자" />
<input type="text" class="text" size="20" id="text_d" value="비활성화된 텍스트 필드 한 줄 텍스트 상자" 비활성화="비활성화" />
<label for="text"> 입력.텍스트 </label>
</p>
<p>
<input type="password" class="text" size="20" id="password" value="password 비밀번호 상자" />
<input type="password" class="text" size="20" id="password_d" value="비활성화된 비밀번호 비밀번호 상자" 비활성화="비활성화" />
<label for="password"> 입력.텍스트 </label>
</p>
<p>
<input type="submit" class="submit" id="submit" value="제출 제출 버튼" />
<input type="submit" class="submit" id="submit_d" value="제출 버튼 비활성화됨" 비활성화="비활성화" />
<label for="submit"> 입력.제출 </label>
</p>
<p>
<input type="reset" class="button" id="reset" value="reset 재설정 버튼" />
<input type="reset" class="button" id="reset_d" value="비활성화 재설정 재설정 버튼" 비활성화="비활성화" />
<label for="reset"> 입력.버튼 </label>
</p>
<p>
<input type="button" class="button" id="button" value="버튼 일반 버튼" />
<input type="button" class="button" id="button_d" value="비활성화된 버튼 일반 버튼" 비활성화="비활성화" />
<label for="button"> 입력.버튼 </label>
</p>
<p>
<input type="image" class="image" size="20" id="image" />
<label for="image"> 입력.이미지 </label>
</p>
<p>
<input type="image" class="image" size="20" id="image_d" 비활성화="비활성화" />
<label for="image_d"> 비활성화된 input.image</label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1" check="checked" />
<input name="radio" type="radio" class="radio" id="radio2" />
<label>입력.라디오 </label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1_d" check="checked" 비활성화="비활성화" />
<input name="radio" type="radio" class="radio" id="radio2_d" 비활성화="비활성화" />
<label> 비활성화된 input.radio </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1" selected="checked" />
<input type="checkbox" class="checkbox" id="checkbox2" />
<label for="checkbox"> 입력.체크박스 </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1_d" selected="checked" 비활성화="비활성화" />
<input type="checkbox" class="checkbox" id="checkbox2_d" 비활성화="비활성화" />
<label for="checkbox_d"> 비활성화된 input.checkbox </label>
</p>
<p>
<input type="file" class="file" id="file" size="20" value="파일 선택기 파일 선택기" />
<label for="file"> 입력.파일 </label>
</p>
<p>
<input type="file" class="file" id="file_d" size="20" value="파일 선택기 파일 선택기" 비활성화="비활성화" />
<label for="file_d"> 비활성화된 input.file </label>
</p>
<p>
<버튼><img /><버튼> 태그</button>
<button 비활성화="disabled"><img />비활성화<button> 태그</button>
</p>
<p>
<label for="textarea"><textarea>기본값은 하단 정렬입니다</label>
<textarea name="textarea" cols="60"rows="5" id="textarea">textarea 여러 줄 텍스트 상자.
내부적으로도 사전 형식과 유사하며 모든 캐리지 리턴 및 탭 문자를 표시할 수 있습니다.</textarea>
<textarea name="textarea" cols="20"rows="5" id="textarea_b" 비활성화="disabled">텍스트 영역 여러 줄 텍스트 상자 비활성화</textarea>
</p>
<p>
<선택 이름="텍스트 영역">
<option>드롭다운 선택기 드롭다운 선택기</option>
<optgroup label="첫 번째 그룹입니다">
<option><optgroup>을 사용하여 옵션을 그룹화할 수 있습니다.</option>
<option>그리고 label 속성으로 그룹 이름을 지정하세요</option>
</optgroup>
<optgroup label="두 번째 그룹입니다">
<option>그룹 이름은 옵션이 아닌 프롬프트 텍스트일 뿐입니다</option>
</optgroup>
</select>
<select multiple="다중" 이름="텍스트 영역">
<option><select>의 size 속성이 1보다 크거나 multiple 속성이 지정된 경우</option>
<option>이렇게 여러 줄 선택 상자가 됩니다</option>
</select>
<선택 이름="텍스트 영역" 비활성화="비활성화">
<option>비활성화된 드롭다운 상자</option>
<option>이렇게 여러 줄 선택 상자가 됩니다</option>
</select>
</p>
</fieldset>
</form> </body>
</html>
|
