A new HTML 5 draft (Working Draft) was released on June 10. The editor briefly read the new version documentation provided by it and made some notes: 
HTML 5 draft does not become an official standard
Publication as a Working Draft does not imply endorsement by the W3C Membership.
Publication as a "Draft" does not imply endorsement (support) by W3C members.
The HTML 5 specification will not be considered finished before there are at least two complete implementations of the specification.
The HTML 5 specification will not be finalized until at least two pieces of software have implemented it.
XHTML 1 was released in 1999. It took two or three years before it was fully supported, and it was not until recently, nearly ten years later, that it was fully promoted. So it will take some time until HTML 5 is supported (especially by "non-mainstream" browsers). According to the timetable of the W3C's HTML Working Group, there will be no formal finalization until 2010.
XHTML 1 was released in 1999. It took two or three years before it was fully supported, and it was not until recently, nearly ten years later, that it was fully promoted. So it will take some time until HTML 5 is supported (especially by "non-mainstream" browsers). According to the timetable of the W3C's HTML Working Group, there will be no formal finalization until 2010.
A surprisingly simple DOCTYPE statement
It's that simple, ha. Also, there is no distinction between upper and lower case. It is worth mentioning that the specification requires that if this DOCTYPE is declared, the so-called "'custom' HTML syntax (customized HTML syntax, I don't know why it is called this)" can be used, which is the previous type that does not require tags. Closed HTML syntax. At the same time, it still allows XML format syntax like XHTML, so that the DOCTYPE of the xml document needs to be declared instead of the above.
Forward compatibility
The HTML 5 specification does not have "deprecated" elements. The reason is that on the one hand it requires designers not to try certain elements, but on the other hand it requires browsers to support these elements. In this case, in my intuition, it is intended to support all previous web pages written in HTML or XHTML. This is a blessing for designers. Finally, they no longer have to be restricted by the strict syntax of XHTML.
deleted element
Of course, these elements are relative to HTML 4, but it can also be seen that HTML 5 is not a simple regression to HTML 4. It still adheres to some important spirits of XHTML, such as pure interface presentation elements should be abandoned , while using CSS, etc.
The following elements are discarded "because their effect is purely presentational and therefore better handled by CSS" because they are purely presentational elements and should be replaced by CSS:
basefont/big/center/font/s/strike/tt/u
|
The following elements have been discarded "because their usage affected usability and accessibility for the end user in a negative way":
The following elements have been discarded "because they have not been used often, created confusion or can be handled by other elements":
| acronym/applet/isindex/dir |
HTML test document:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML test document</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>HTML test document</h1>
<ul>
<li>Version: 1.1 </li>
<li>DTD: XHTML 1.0 transitional</li>
<li>Encoding: UTF-8</li>
<li>Updated: 2008-6-12</li>
</ul>
<hr />
<h1><h1> represents title number one</h1>
<h2><h2> represents title number two</h2>
<h3><h3> represents title three</h3>
<h4><h4> represents title number four</h4>
<h5><h5> represents title No. 5</h5>
<h6><h6> represents title No. 6</h6>
<p>This paragraph is enclosed by <p>. <p> represents a paragraph and is the most commonly used text flow format. We can use various inline text tags in text streams. The most commonly used ones are:
<strong> <strong>Aggravated</strong>,
<em><em> Emphasis</em>,
<ins><ins> insert</ins>,
<del><del> Delete</del>,
<sub><sub> subscript</sub>,
<sup><sup> superscript</sup>,
<cite><cite> cite</cite>, <big><big>increase</big>, <small><small>reduce</small>. </p>
<pre> This is a text stream contained by <pre>.
The spaces, tabs, carriage returns, etc. in it can be directly displayed on the web page, and will not be automatically wrapped by the browser. You can use it to display program code.
The preformatted default is to use a fixed-width font. </pre>
<p>We can also use these inline tags to display code snippets in the text flow:
<code><code>code</code>,
<kbd><kbd>Keyboard input</kbd>,
<var><var>Variable</var>,
<samp><samp>sample example</samp>.
</p>
<p>In addition, two tags are also important:</p>
<ul>
<li><abbr>: For example, <abbr title="Mister">Mr.</abbr> is the abbreviation of Mister. But this tag seems to be invalid in IE. </li>
<li><acronym><acronym title=""></acronym>: For example, <acronym title="Hyper Text Markup Language">HTML</acronym> is the acronym for Hyper Text Markup Language (Chinese can also be Use this tag, such as: "<acronym title="People's Republic of China">China</acronym>" is the abbreviation of "People's Republic of China"). </li>
</ul>
<blockquote cite="#">
This paragraph is <blockquote>. Remember to use the cite attribute in <blockquote>.
</blockquote>
<address>
This section is contained by <address>, which can be used to display an email address or a real address. Note that it is a block-level element, but has no margin or padding by default.
</address>
The <div> section is contained by <div>. <div> is a block-level element and does not have any style by default. Another element with its equivalent status is <span><span>inline field</span>, which also has no style by default. <br />
There is a <br> in front of this sentence, which is used for line breaks within the paragraph. </div> <hr />
<p>The horizontal line above is the <hr> tag. </p>
<p><a id="a"></a>This sentence is preceded by an anchor tag implemented by the <a> tag. </p>
<p><a href="http:///"><a>Also means link</a>. Note that it has four pseudo-classes: :link is <a href="http:///">unvisited link</a>, :visited is <a href="#">visited link</a>, :hover is <a href="http:///">link when mouse hovers</a>, :active<a href="http:///">link when mouse click activates</a> . </p>
<p><img width="100" height="100" alt="<img> tag" /> The image is inline by default, but we can also define it as block. And define an .inline class specifically for img <img width="100" height="30" alt="img.inline" class="inline" />. In addition, the style of <img> in the link is different <a href="#"><img width="60" height="60" alt="<img>" in <a> / ></a>. </p>
<p><object width="200" height="150"><param name="movie" value=""></param></object>
There is also an <object> tag for inserting media and a <param> tag inside it. </p>
<hr />
<ul>
<li>The outer layer of the unordered list is<ul></li>
<li>Each item in the list consists of <li></li>
<li>Note that the <ul> tag can only directly contain the <li> tag
<ul>
<li>This is a nested second-level list and must be placed in a <li></li>
<li>Note that the styles of nested second-level list items may be different from those of the first-level list
<ul>
<li>This is the third level, and its style is different from the second level</li>
</ul>
</li>
</ul>
</li>
</ul>
<ol>
<li>The outer layer of the ordered list is <ol></li>
<li>Each item in the list consists of <li></li>
<li>Note that the <ol> tag can only directly contain the <li> tag
<ol>
<li>This is a nested second-level list and must be placed in a <li></li>
<li>Note that the styles of nested second-level list items may be different from those of the first-level list
<ol>
<li>This is the third level, and its style is different from the second level</li>
</ol>
</li>
</ol>
</li>
</ol>
<dl>
<dt>This line is<dt></dt>
The line <dd> is <dd>. The outer definition list is <dl>. </dd>
<dt>Note<dt>can only contain inline level elements</dt>
<dd>And <dd> can contain inline or block-level elements</dd>
</dl> <hr />
<p>Standard table model. The column width is controlled by <colgroup> and <col>. </p>
<table>
<caption>
This is <caption>
</caption>
<colgroup>
<col width="30%" />
<col width="50%" />
<col width="20%" />
</colgroup>
<thead>
<tr>
<th>This line is<thead></th>
<th><thead> can be used with <th> or <td></th>
<th>Here we use <th></th>
</tr>
</thead>
<tfoot>
<tr>
<td>The last line is <tfoot></td>
<td><tfoot>No matter where it is placed, it will always be displayed at the end</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>The following three lines are<tbody> </td>
<td>You can put any number of<tr></td>
<td>What is used here is<td></td>
</tr>
<tr>
<td>Use <col> to represent columns</td>
<td>The rightmost cell of this row is an empty table cell with no content</td>
<td></td>
</tr>
<tr>
<td>Use <tr> to represent rows</td>
<td>The rightmost cell of the row has a&nbsp;</td>
<td> </td>
</tr>
</tbody>
</table>
<hr />
<form action="">
<p><form> labels cannot directly contain various control labels. You can use <label><label></label> to contain form components,</p>
<fieldset>
<legend>You can also use the <fieldset> and <legend> tags to group forms. </legend>
<p>For the CSS definition method of the input tag: use the value of the type attribute as the class name, so that different input controls can be distinguished. </p>
<p>
<input type="text" class="text" size="20" id="text" value="textfield single-line text box" />
<input type="text" class="text" size="20" id="text_d" value="Disabled textfield single-line text box" disabled="disabled" />
<label for="text"> input.text </label>
</p>
<p>
<input type="password" class="text" size="20" id="password" value="password password box" />
<input type="password" class="text" size="20" id="password_d" value="Disabled password password box" disabled="disabled" />
<label for="password"> input.text </label>
</p>
<p>
<input type="submit" class="submit" id="submit" value="submit submit button" />
<input type="submit" class="submit" id="submit_d" value="Disabled submit button" disabled="disabled" />
<label for="submit"> input.submit </label>
</p>
<p>
<input type="reset" class="button" id="reset" value="reset reset button" />
<input type="reset" class="button" id="reset_d" value="Disabled reset reset button" disabled="disabled" />
<label for="reset"> input.button </label>
</p>
<p>
<input type="button" class="button" id="button" value="button ordinary button" />
<input type="button" class="button" id="button_d" value="Disabled button normal button" disabled="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="disabled" />
<label for="image_d"> disabled input.image</label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1" checked="checked" />
<input name="radio" type="radio" class="radio" id="radio2" />
<label>input.radio </label>
</p>
<p>
<input name="radio" type="radio" class="radio" id="radio1_d" checked="checked" disabled="disabled" />
<input name="radio" type="radio" class="radio" id="radio2_d" disabled="disabled" />
<label> disabled input.radio </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1" checked="checked" />
<input type="checkbox" class="checkbox" id="checkbox2" />
<label for="checkbox"> input.checkbox </label>
</p>
<p>
<input type="checkbox" class="checkbox" id="checkbox1_d" checked="checked" disabled="disabled" />
<input type="checkbox" class="checkbox" id="checkbox2_d" disabled="disabled" />
<label for="checkbox_d"> disabled input.checkbox </label>
</p>
<p>
<input type="file" class="file" id="file" size="20" value="file selector file selector" />
<label for="file"> input.file </label>
</p>
<p>
<input type="file" class="file" id="file_d" size="20" value="file selector file selector" disabled="disabled" />
<label for="file_d"> disabled input.file </label>
</p>
<p>
<button><img /><button> tag</button>
<button disabled="disabled"><img />Disabled<button> tag</button>
</p>
<p>
<label for="textarea"><textarea>The default is bottom alignment</label>
<textarea name="textarea" cols="60" rows="5" id="textarea">textarea multi-line text box.
It is also similar to a preformat internally, and can display all carriage returns and tab characters</textarea>
<textarea name="textarea" cols="20" rows="5" id="textarea_b" disabled="disabled">Disabled textarea multi-line text box</textarea>
</p>
<p>
<select name="textarea">
<option>drop-down selector drop-down selector</option>
<optgroup label="This is the first group">
<option>Options can be grouped using <optgroup></option>
<option>And specify the group name by its label attribute</option>
</optgroup>
<optgroup label="This is the second group">
<option>The group name is just a prompt text, not an option</option>
</optgroup>
</select>
<select multiple="multiple" name="textarea">
<option>When the size attribute of <select> is greater than 1 or the multiple attribute is specified</option>
<option>It will become a multi-line selection box like this</option>
</select>
<select name="textarea" disabled="disabled">
<option>Disabled drop-down box</option>
<option>It will become a multi-line selection box like this</option>
</select>
</p>
</fieldset>
</form> </body>
</html>
|
