HTML 5 ร่างใหม่ (Working Draft) เปิดตัวเมื่อวันที่ 10 มิถุนายน ผู้แก้ไขอ่านเอกสารเวอร์ชันใหม่โดยย่อและจดบันทึกไว้: 
แบบร่าง HTML 5 ไม่ได้เป็นมาตรฐานอย่างเป็นทางการ
การตีพิมพ์ในรูปแบบ Working Draft ไม่ได้หมายความถึงการรับรองโดยสมาชิก W3C
การเผยแพร่ในรูปแบบ "ร่าง" ไม่ได้หมายความถึงการรับรอง (การสนับสนุน) โดยสมาชิก W3C
ข้อมูลจำเพาะ HTML 5 จะไม่ถือว่าเสร็จสิ้นก่อนที่จะมีการใช้งานข้อกำหนดดังกล่าวให้เสร็จสมบูรณ์อย่างน้อยสองครั้ง
ข้อมูลจำเพาะ HTML 5 จะไม่ได้รับการสรุปจนกว่าจะมีการติดตั้งซอฟต์แวร์อย่างน้อยสองชิ้น
XHTML 1 เปิดตัวในปี 1999 ใช้เวลาสองหรือสามปีก่อนที่จะได้รับการสนับสนุนอย่างเต็มที่ และจนกระทั่งเมื่อไม่นานมานี้ เกือบสิบปีต่อมาจึงได้รับการส่งเสริมอย่างเต็มที่ ดังนั้นจึงต้องใช้เวลาสักระยะก่อนที่จะรองรับ HTML 5 (โดยเฉพาะเบราว์เซอร์ "ที่ไม่ใช่กระแสหลัก") ตามตารางเวลาของคณะทำงาน HTML ของ W3C จะไม่มีการสรุปอย่างเป็นทางการจนกว่าจะถึงปี 2010
XHTML 1 เปิดตัวในปี 1999 ใช้เวลาสองหรือสามปีก่อนที่จะได้รับการสนับสนุนอย่างเต็มที่ และจนกระทั่งเมื่อไม่นานมานี้ เกือบสิบปีต่อมาจึงได้รับการส่งเสริมอย่างเต็มที่ ดังนั้นจึงต้องใช้เวลาสักระยะก่อนที่จะรองรับ HTML 5 (โดยเฉพาะเบราว์เซอร์ "ที่ไม่ใช่กระแสหลัก") ตามตารางเวลาของคณะทำงาน HTML ของ W3C จะไม่มีการสรุปอย่างเป็นทางการจนกว่าจะถึงปี 2010
คำสั่ง DOCTYPE ที่เรียบง่ายอย่างน่าประหลาดใจ
มันง่ายขนาดนั้นเลย ฮ่าๆ นอกจากนี้ยังไม่มีความแตกต่างระหว่างตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก เป็นมูลค่าการกล่าวขวัญว่าข้อกำหนดกำหนดว่าหากมีการประกาศ DOCTYPE นี้ ไวยากรณ์ HTML ที่เรียกว่า "กำหนดเอง" (ไวยากรณ์ HTML ที่กำหนดเอง ฉันไม่รู้ว่าทำไมจึงเรียกว่าสิ่งนี้)" สามารถนำมาใช้ได้ ซึ่งเป็นรูปแบบก่อนหน้า ประเภทที่ไม่ต้องใช้แท็กไวยากรณ์ HTML แบบปิด ในเวลาเดียวกัน ยังคงอนุญาตให้ใช้ไวยากรณ์รูปแบบ XML เช่น XHTML ดังนั้นจึงจำเป็นต้องประกาศ DOCTYPE ของเอกสาร xml แทนข้างต้น
ความเข้ากันได้ไปข้างหน้า
ข้อกำหนด HTML 5 ไม่มีองค์ประกอบ "เลิกใช้งาน" เหตุผลก็คือ ในแง่หนึ่งนักออกแบบไม่ต้องลองใช้องค์ประกอบบางอย่าง แต่ในทางกลับกัน ต้องใช้เบราว์เซอร์เพื่อรองรับองค์ประกอบเหล่านี้ ในกรณีนี้ ตามสัญชาตญาณของฉัน มีวัตถุประสงค์เพื่อรองรับหน้าเว็บก่อนหน้าทั้งหมดที่เขียนด้วย HTML หรือ XHTML นี่เป็นพรสำหรับนักออกแบบ สุดท้ายนี้ พวกเขาไม่จำเป็นต้องถูกจำกัดด้วยไวยากรณ์ XHTML ที่เข้มงวดอีกต่อไป
องค์ประกอบที่ถูกลบ
แน่นอนว่าองค์ประกอบเหล่านี้สัมพันธ์กับ HTML 4 แต่ก็เห็นได้ว่า HTML 5 ไม่ใช่การถดถอยอย่างง่ายกับ HTML 4 แต่ยังคงยึดตามจิตวิญญาณที่สำคัญบางประการของ XHTML เช่น องค์ประกอบการนำเสนออินเทอร์เฟซล้วนๆ ควรละทิ้ง ในขณะที่ ใช้ CSS เป็นต้น
องค์ประกอบต่อไปนี้ถูกยกเลิก "เนื่องจากเอฟเฟกต์เป็นเพียงการนำเสนอเท่านั้น ดังนั้นจึงได้รับการจัดการที่ดีกว่าโดย CSS" เนื่องจากองค์ประกอบเหล่านี้เป็นองค์ประกอบการนำเสนอล้วนๆ และควรแทนที่ด้วย CSS:
basefont/ใหญ่/กลาง/แบบอักษร/s/นัดหยุดงาน/tt/u
|
องค์ประกอบต่อไปนี้ถูกยกเลิก "เนื่องจากการใช้งานส่งผลต่อการใช้งานและการเข้าถึงสำหรับผู้ใช้ปลายทางในทางลบ":
องค์ประกอบต่อไปนี้ถูกยกเลิก "เนื่องจากไม่ได้ใช้บ่อย ก่อให้เกิดความสับสน หรือองค์ประกอบอื่นสามารถจัดการได้":
| ตัวย่อ/แอปเพล็ต/isindex/dir |
เอกสารทดสอบ 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" />
</หัว>
<ร่างกาย>
<h1>เอกสารทดสอบ HTML</h1>
<ul>
<li>เวอร์ชัน: 1.1 </li>
<li>DTD: XHTML 1.0 การเปลี่ยนผ่าน</li>
<li>การเข้ารหัส: UTF-8</li>
<li>อัปเดต: 12-6-2551</li>
</ul>
<ชม. />
<h1><h1> แสดงถึงหัวเรื่องหมายเลขหนึ่ง</h1>
<h2><h2> แสดงถึงหัวเรื่องที่สอง</h2>
<h3><h3> แสดงถึงชื่อที่สาม</h3>
<h4><h4> หมายถึงหัวเรื่องที่สี่</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> ตัวห้อย</sub>,
<sup><sup> ตัวยก</sup>,
<cite><cite> อ้างอิง</cite>, <ใหญ่><ใหญ่>เพิ่มขึ้น</big>, <เล็ก><เล็ก>ลด</small> </p>
<pre> นี่คือสตรีมข้อความที่มีอยู่โดย <pre>
ช่องว่าง แท็บ การขึ้นบรรทัดใหม่ ฯลฯ ในนั้นสามารถแสดงบนหน้าเว็บได้โดยตรง และเบราว์เซอร์จะไม่รวมโดยอัตโนมัติ คุณสามารถใช้มันเพื่อแสดงรหัสโปรแกรม
ค่าเริ่มต้นที่จัดรูปแบบไว้ล่วงหน้าคือการใช้แบบอักษรที่มีความกว้างคงที่ </pre>
<p>เรายังสามารถใช้แท็กอินไลน์เหล่านี้เพื่อแสดงข้อมูลโค้ดในโฟลว์ข้อความ:
<รหัส><รหัส>รหัส</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 (ภาษาจีนยังสามารถ ใช้แท็กนี้ เช่น: "<acronym title="People's Republic of China">จีน</acronym>" เป็นตัวย่อของ "People's Republic of China") </li>
</ul>
<blockquote อ้างอิง="#">
ย่อหน้านี้คือ <blockquote> อย่าลืมใช้แอตทริบิวต์อ้างอิงใน <blockquote>
</บล็อคโควต>
<ที่อยู่>
ส่วนนี้บรรจุอยู่ใน <ที่อยู่> ซึ่งสามารถใช้เพื่อแสดงที่อยู่อีเมลหรือที่อยู่จริง โปรดทราบว่ามันเป็นองค์ประกอบระดับบล็อก แต่ไม่มีระยะขอบหรือช่องว่างภายในตามค่าเริ่มต้น
</ที่อยู่>
ส่วน <div> มีอยู่ใน <div> เป็นองค์ประกอบระดับบล็อกและไม่มีสไตล์ใดๆ ตามค่าเริ่มต้น องค์ประกอบอื่นที่มีสถานะเทียบเท่าคือ <span><span>ฟิลด์แบบอินไลน์</span> ซึ่งไม่มีรูปแบบตามค่าเริ่มต้นเช่นกัน <br />
มีเครื่องหมาย <br> นำหน้าประโยคนี้ ซึ่งใช้สำหรับขึ้นบรรทัดใหม่ภายในย่อหน้า </div> <ชม. />
<p>เส้นแนวนอนด้านบนคือแท็ก <hr> </p>
<p><a id="a"></a>ประโยคนี้นำหน้าด้วยแท็กจุดยึดที่ใช้งานโดยแท็ก <a> </p>
<p><a href="http:///"><a>หมายถึงลิงก์ด้วย</a> โปรดทราบว่ามีคลาสหลอกสี่คลาส: :link คือ <a href="http:///">ลิงก์ที่ไม่ได้เยี่ยมชม</a>, :visited คือ <a href="#">ลิงก์ที่เยี่ยมชม</a>, : โฮเวอร์คือ <a href="http:///">ลิงก์เมื่อเมาส์โฮเวอร์</a>, :active<a href="http:///">ลิงก์เมื่อคลิกเมาส์เปิดใช้งาน</a> </p>
<p><img width="100" height="100" alt="<img> tag" /> รูปภาพอยู่ในบรรทัดตามค่าเริ่มต้น แต่เรายังสามารถกำหนดให้เป็นบล็อกได้ และกำหนดคลาส .inline โดยเฉพาะสำหรับ img <img width="100" height="30" alt="img.inline" class="inline" /> นอกจากนี้ รูปแบบของ <img> ในลิงก์จะแตกต่างออกไป <a href="#"><img width="60" height="60" alt="<img>" ใน <a> </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>นี่คือรายการระดับที่สองที่ซ้อนกันและจะต้องวางไว้ใน <li></li>
<li>โปรดทราบว่ารูปแบบของรายการระดับที่สองที่ซ้อนกันอาจแตกต่างจากรูปแบบของรายการระดับแรก
<ul>
<li>นี่คือระดับที่สาม และสไตล์ของมันแตกต่างจากระดับที่สอง</li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>เลเยอร์ด้านนอกของรายการที่เรียงลำดับคือ <ol></li>
<li>แต่ละรายการในรายการประกอบด้วย <li></li>
<li>โปรดทราบว่าแท็ก <ol> สามารถมีได้เฉพาะแท็ก <li>
<ol>
<li>นี่คือรายการระดับที่สองที่ซ้อนกันและจะต้องวางไว้ใน <li></li>
<li>โปรดทราบว่ารูปแบบของรายการระดับที่สองที่ซ้อนกันอาจแตกต่างจากรูปแบบของรายการระดับแรก
<ol>
<li>นี่คือระดับที่สาม และสไตล์ของมันแตกต่างจากระดับที่สอง</li>
</ol>
</li>
</ol>
</li>
</ol>
<ดล>
<dt>บรรทัดนี้คือ<dt></dt>
บรรทัด <dd> คือ <dd> รายการคำจำกัดความภายนอกคือ <dl> </dd>
<dt>หมายเหตุ<dt>สามารถมีได้เฉพาะองค์ประกอบระดับอินไลน์เท่านั้น</dt>
<dd>และ <dd> สามารถมีองค์ประกอบแบบอินไลน์หรือระดับบล็อกได้</dd>
</ดล> <ชม. />
<p>โมเดลโต๊ะมาตรฐาน ความกว้างของคอลัมน์ถูกควบคุมโดย <colgroup> และ <col> </p>
<ตาราง>
<คำบรรยายภาพ>
นี่คือ <คำบรรยาย>
</คำบรรยาย>
<คอลกรุ๊ป>
<ความกว้างคอลัมน์="30%" />
<ความกว้างคอลัมน์="50%" />
<ความกว้างคอลัมน์="20%" />
</คอลกรุ๊ป>
<หัว>
<tr>
<th>บรรทัดนี้คือ<thead></th>
<th><thead> สามารถใช้กับ <th> หรือ <td></th>
<th>ในที่นี้เราใช้ <th></th>
</tr>
</หัว>
<tเท้า>
<tr>
<td>บรรทัดสุดท้ายคือ <tfoot></td>
<td><tfoot>ไม่ว่าจะวางไว้ตรงไหนก็จะแสดงที่ส่วนท้ายเสมอ</td>
<td></td>
</tr>
</tเท้า>
<tbody>
<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>
</ตาราง>
<ชม. />
<รูปแบบการกระทำ="">
<p><label> ป้ายกำกับไม่สามารถมีป้ายกำกับควบคุมต่างๆ ได้โดยตรง คุณสามารถใช้ <label><label></label> เพื่อบรรจุส่วนประกอบของแบบฟอร์มได้</p>
<ชุดสนาม>
<legend>คุณยังสามารถใช้แท็ก <fieldset> และ <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="Disabled textfield single-line text box" ปิดการใช้งาน="disabled" />
<label for="text"> input.text </label>
</p>
<p>
<input type="รหัสผ่าน" class="text" size="20" id="password" value="กล่องรหัสผ่านรหัสผ่าน" />
<input type="password" class="text" size="20" id="password_d" value="กล่องรหัสผ่านรหัสผ่านถูกปิดใช้งาน" ปิดการใช้งาน="ปิดการใช้งาน" />
<label for="password"> input.text </label>
</p>
<p>
<input type="submit" class="submit" id="submit" value="ส่งปุ่มส่ง" />
<input type="submit" class="submit" id="submit_d" value="ปิดใช้งานปุ่มส่ง" ปิดใช้งาน = "ปิดใช้งาน" />
<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="ปิดใช้งานปุ่มรีเซ็ตรีเซ็ต" ปิดใช้งาน = "ปิดใช้งาน" />
<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="ปุ่มที่ปิดใช้งาน ปุ่มปกติ" ปิดใช้งาน = "ปิดใช้งาน" />
<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>
<ประเภทอินพุต = "รูปภาพ" class = "รูปภาพ" size = "20" id = "image_d" ปิดการใช้งาน = "ปิดการใช้งาน" />
<label for="image_d"> ปิดการใช้งาน input.image</label>
</p>
<p>
<ชื่ออินพุต = "วิทยุ" type = "วิทยุ" class = "วิทยุ" id = "radio1" ตรวจสอบ = "ตรวจสอบ" />
<ชื่ออินพุต = "วิทยุ" ประเภท = "วิทยุ" class = "วิทยุ" id = "วิทยุ2" />
<label>input.radio </label>
</p>
<p>
<ชื่ออินพุต = "วิทยุ" type = "วิทยุ" class = "วิทยุ" id = "radio1_d" ตรวจสอบ = "ตรวจสอบ" ปิดการใช้งาน = "ปิดการใช้งาน" />
<ชื่ออินพุต = "วิทยุ" type = "วิทยุ" class = "วิทยุ" id = "radio2_d" ปิดการใช้งาน = "ปิดการใช้งาน" />
<label> ปิดการใช้งาน input.radio </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1"checked="checked" />
<input type="ช่องทำเครื่องหมาย" class="ช่องทำเครื่องหมาย" id="ช่องทำเครื่องหมาย2" />
<label for="checkbox"> input.checkbox </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1_d"checked="checked" ปิดการใช้งาน="disabled" />
<input type="ช่องทำเครื่องหมาย" class="ช่องทำเครื่องหมาย" 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"> input.file </label>
</p>
<p>
<input type="file" class="file" id="file_d" size="20" value="ตัวเลือกไฟล์ ตัวเลือกไฟล์" ปิดการใช้งาน = "ปิดการใช้งาน" />
<label for="file_d"> ปิดการใช้งาน input.file </label>
</p>
<p>
<button><img /><ปุ่ม> แท็ก</button>
<button Disabled="disabled"><img />แท็กที่ปิดใช้งาน<ปุ่ม>
</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 ที่ปิดใช้งาน</textarea>
</p>
<p>
<select name="textarea">
<option>ตัวเลือกแบบเลื่อนลง ตัวเลือกแบบเลื่อนลง</option>
<optgroup label="นี่คือกลุ่มแรก">
<option>ตัวเลือกสามารถจัดกลุ่มได้โดยใช้ <optgroup></option>
<option>และระบุชื่อกลุ่มตามแอตทริบิวต์ป้ายกำกับ</option>
</เลือกกลุ่ม>
<optgroup label="นี่คือกลุ่มที่สอง">
<option>ชื่อกลุ่มเป็นเพียงข้อความแจ้ง ไม่ใช่ตัวเลือก</option>
</เลือกกลุ่ม>
</เลือก>
<select multiple="multiple" name="textarea">
<option>เมื่อแอตทริบิวต์ size ของ <select> มากกว่า 1 หรือมีการระบุแอตทริบิวต์หลายรายการ</option>
<option>มันจะกลายเป็นช่องสำหรับเลือกหลายบรรทัดเช่นนี้</option>
</เลือก>
<select name="textarea" ปิดการใช้งาน = "ปิดการใช้งาน">
<option>กล่องแบบเลื่อนลงที่ปิดใช้งาน</option>
<option>มันจะกลายเป็นช่องสำหรับเลือกหลายบรรทัดเช่นนี้</option>
</เลือก>
</p>
</ฟิลด์เซต>
</แบบฟอร์ม> </ร่างกาย>
</html>
|
