新しい HTML 5 ドラフト (Working Draft) が 6 月 10 日にリリースされました。編集者は、提供されている新しいバージョンのドキュメントを簡単に読み、いくつかのメモを作成しました。 
HTML 5 ドラフトは正式な標準にはならない
作業草案としての公開は、W3C メンバーシップによる承認を意味するものではありません。
「ドラフト」としての公開は、W3C メンバーによる承認 (サポート) を意味するものではありません。
HTML 5 仕様は、その仕様の完全な実装が少なくとも 2 つ存在するまでは完成したとはみなされません。
HTML 5 仕様は、少なくとも 2 つのソフトウェアが実装するまで最終決定されません。
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 構文、なぜこれが呼ばれるのかはわかりません) を使用できることが要求されていることに注意してください。タグを必要としないタイプ。クローズド HTML 構文。同時に、XHTML のような XML 形式の構文も引き続き使用できるため、上記の代わりに XML ドキュメントの DOCTYPE を宣言する必要があります。
上位互換性
HTML 5 仕様には「非推奨」要素がありません。その理由は、デザイナーが特定の要素を試行しないよう要求している一方で、ブラウザーがこれらの要素をサポートすることを要求しているためです。この場合、私の直感では、HTML または XHTML で書かれた以前のすべての Web ページをサポートすることを目的としています。これは、デザイナーにとって、XHTML の厳密な構文に制限される必要がなくなりました。
削除された要素
もちろん、これらの要素は HTML 4 に関連していますが、HTML 5 が HTML 4 への単純な回帰ではないこともわかります。HTML 5 は、純粋なインターフェイスのプレゼンテーション要素は放棄する必要があるなど、XHTML のいくつかの重要な精神を依然として遵守しています。 CSSなどを使って
次の要素は、「その効果が純粋に表現的なものであるため、CSS でより適切に処理できるため」破棄されます。これらは純粋に表現的な要素であり、CSS で置き換える必要があるためです。
Basefont/big/center/font/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>
<hr />
<h1><h1> はタイトル 1 を表します</h1>
<h2><h2>はタイトル 2 を表します</h2>
<h3><h3> タイトル 3 を表します</h3>
<h4><h4>はタイトル 4 を表します</h4>
<h5><h5>はタイトルNo.5を表します</h5>
<h6><h6>はタイトルNo.6を表します</h6>
<p>この段落は <p> で囲まれています。 <p> は段落を表し、最も一般的に使用されるテキスト フロー形式です。テキスト ストリームではさまざまなインライン テキスト タグを使用できます。最も一般的に使用されるものは次のとおりです。
<strong> <strong> 悪化</strong>、
<em><em> 強調</em>
<ins><ins>挿入</ins>、
<del><del> 削除</del>、
<sub><sub> 添え字</sub>、
<sup><sup>上付き文字</sup>、
<cite><cite>引用</cite>、<big><big>増加</big>、<small><small>減少</small>。 </p>
<pre> これは、<pre> に含まれるテキスト ストリームです。
その中のスペース、タブ、改行などは Web ページに直接表示でき、ブラウザによって自動的に折り返されません。これを使用してプログラム コードを表示できます。
事前にフォーマットされたデフォルトでは、固定幅フォントが使用されます。 </pre>
<p>これらのインライン タグを使用して、テキスト フローにコード スニペットを表示することもできます。
<コード><コード>コード</コード>、
<kbd><kbd>キーボード入力</kbd>、
<var><var>変数</var>、
<samp><samp>サンプル例</samp>。
</p>
<p>さらに、次の 2 つのタグも重要です。</p>
<ul>
<li><abbr>: たとえば、<abbr title="ミスター">ミスター</abbr>はミスターの略称です。ただし、このタグはIEでは無効なようです。 </li>
<li><acronym><acronym title=""></acronym>: たとえば、<acronym title="Hyper Text Markup Language">HTML</acronym> は Hyper Text Markup Language の頭字語です (中国語でも可能です)このタグは次のように使用します。「<acronym title="中華人民共和国">中国</acronym>」は「中華人民共和国」の略称です）。 </li>
</ul>
<blockquote cite="#">
この段落は<blockquote>です。 <blockquote> で cite 属性を使用することを忘れないでください。
</blockquote>
<アドレス>
このセクションは <address> に含まれており、電子メール アドレスまたは実際のアドレスを表示するために使用できます。これはブロックレベルの要素ですが、デフォルトではマージンやパディングがないことに注意してください。
</アドレス>
<div> セクションは <div> に含まれています。<div> はブロックレベルの要素であり、デフォルトではスタイルを持ちません。同等のステータスを持つもう 1 つの要素は <span><span>inline field</span> です。これにもデフォルトではスタイルがありません。 <br />
この文の前に <br> があり、段落内の改行に使用されます。 </div> <hr />
<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 クラスを定義します。また、リンク内の <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>
<hr />
<ul>
<li>順序なしリストの外側の層は<ul></li>
<li>リスト内の各項目は <li> で構成されます</li>
<li><ul> タグには <li> タグのみを含めることができることに注意してください。
<ul>
<li>これはネストされた第 2 レベルのリストであり、<li> に配置する必要があります。</li>
<li>ネストされた第 2 レベルのリスト項目のスタイルは、第 1 レベルのリストのスタイルとは異なる場合があることに注意してください。
<ul>
<li>これは 3 番目のレベルであり、そのスタイルは 2 番目のレベルとは異なります</li>
</ul>
</li>
</ul>
</li>
</ul>
<オル>
<li>順序付きリストの外側の層は <ol> です</li>
<li>リスト内の各項目は <li> で構成されます</li>
<li><ol> タグには <li> タグのみを含めることができることに注意してください。
<オル>
<li>これはネストされた第 2 レベルのリストであり、<li> に配置する必要があります。</li>
<li>ネストされた第 2 レベルのリスト項目のスタイルは、第 1 レベルのリストのスタイルとは異なる場合があることに注意してください。
<オル>
<li>これは 3 番目のレベルであり、そのスタイルは 2 番目のレベルとは異なります</li>
</ol>
</li>
</ol>
</li>
</ol>
<dl>
<dt>この行は<dt></dt>です
行 <dd> は <dd> です。外側の定義リストは <dl> です。 </dd>
<dt>注<dt>インラインレベル要素のみを含めることができます</dt>
<dd><dd> にはインラインまたはブロックレベルの要素を含めることができます</dd>
</dl> <hr />
<p>標準テーブルモデル。列の幅は、<colgroup> と <col> によって制御されます。 </p>
<テーブル>
<キャプション>
これは <caption> です。
</caption>
<コルグループ>
<col width="30%" />
<col width="50%" />
<col width="20%" />
</colgroup>
<頭>
<tr>
<th>この行は <thead> です</th>
<th><thead> は <th> または <td></th> と一緒に使用できます。
<th>ここでは <th></th> を使用します。
</tr>
</thead>
<足>
<tr>
<td>最後の行は <tfoot> です</td>
<td><tfoot>どこに配置しても、常に最後に表示されます</td>
<td></td>
</tr>
</tfoot>
<本体>
<tr>
<td>次の 3 行は <td> です。
<td><tr> はいくつでも入力できます</td>
<td>ここで使用されているのは<td></td>です。
</tr>
<tr>
<td>列を表すには <col> を使用します。
<td>この行の右端のセルは、内容のない空の表のセルです</td>
<td></td>
</tr>
<tr>
<td>行を表すには <tr> を使用します</td>
<td>行の右端のセルには&nbsp;があります</td>
<td> </td>
</tr>
</tbody>
</テーブル>
<hr />
<フォームアクション="">
<p><form> ラベルにはさまざまなコントロール ラベルを直接含めることはできません。<label><label></label> を使用してフォーム コンポーネントを含めることができます。</p>
<フィールドセット>
<legend><fieldset> タグと <legend> タグを使用してフォームをグループ化することもできます。 </凡例>
<p>input タグの 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="テキストフィールドの単一行テキストボックスを無効にしました" disabled="無効" />
<label for="text"> input.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="無効なパスワード パスワード ボックス" disabled="無効" />
<label for="password"> input.text </label>
</p>
<p>
<input type="submit" class="submit" id="submit" value="submit 送信ボタン" />
<input type="submit" class="submit" id="submit_d" value="送信ボタンが無効になりました" disabled="無効" />
<label for="submit"> input.submit </label>
</p>
<p>
<input type="reset" class="button" id="reset" value="リセット リセット ボタン" />
<input type="reset" class="button" id="reset_d" value="リセット リセット ボタンを無効にしました" disabled="無効" />
<label for="reset"> input.button </label>
</p>
<p>
<input type="button" class="button" id="button" value="ボタン通常のボタン" />
<input type="button" class="button" id="button_d" value="無効ボタン通常ボタン" disabled="無効" />
<label for="button"> input.button </label>
</p>
<p>
<input type="image" class="image" size="20" id="image" />
<label for="image"> input.image </label>
</p>
<p>
<input type="image" class="image" size="20" id="image_d" disabled="無効" />
<label for="image_d"> input.image が無効になりました</label>
</p>
<p>
<input name="ラジオ" type="ラジオ" class="ラジオ" id="ラジオ1" Checked="チェック済み" />
<input name="ラジオ" type="ラジオ" class="ラジオ" id="ラジオ2" />
<label>input.radio </label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1_d" selected="チェック済み" disabled="無効" />
<input name="ラジオ" type="ラジオ" class="ラジオ" id="radio2_d" disabled="無効" />
<label> input.radio が無効になりました </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1" selected="チェック済み" />
<input type="checkbox" class="checkbox" id="checkbox2" />
<label for="checkbox"> input.checkbox </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1_d" selected="チェック済み" disabled="無効" />
<input type="checkbox" class="checkbox" id="checkbox2_d" disabled="無効" />
<label for="checkbox_d"> input.checkbox が無効になりました </label>
</p>
<p>
<input type="file" class="file" id="file" size="20" value="ファイル セレクター ファイル セレクター" />
<label for="file"> input.file </label>
</p>
<p>
<input type="file" class="file" id="file_d" size="20" value="ファイル セレクター ファイル セレクター" disabled="無効" />
<label for="file_d"> input.file が無効になりました </label>
</p>
<p>
<button><img /><button> タグ</button>
<buttondisabled="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="disabled">テキストエリアの複数行テキスト ボックスを無効にしました</textarea>
</p>
<p>
<select name="テキストエリア">
<option>ドロップダウン セレクター ドロップダウン セレクター</option>
<optgroup label="これは最初のグループです">
<option>オプションは <optgroup> を使用してグループ化できます</option>
<option>ラベル属性でグループ名を指定します</option>
</optgroup>
<optgroup label="これは 2 番目のグループです">
<option>グループ名は単なるプロンプト テキストであり、オプションではありません</option>
</optgroup>
</選択>
<select multiple="multiple" name="textarea">
<option><select>のsize属性が1より大きい場合、またはmultiple属性が指定されている場合</option>
<option>このような複数行の選択ボックスになります</option>
</選択>
<select name="textarea" disabled="disabled">
<option>無効なドロップダウン ボックス</option>
<option>このような複数行の選択ボックスになります</option>
</選択>
</p>
</フィールドセット>
</form> </body>
</html>
|
