HTML5 's work-Learning notes

This paper summarizes some HTML5 related basic knowledge, including some HTML5 features that are not used but are more important. For students who need systematic understanding of HTML5 characteristics, you can check gaps in this article. But this article will not record all the HTML5 characteristics, only select some of the characteristics of the author is not commonly used to record and collate.

1, from HTML4.01 to XHTML to HTML5

XHMTL is a more rigorous, purer HTML code, and the consortium has developed XHTML primarily to replace the original HTML. The consortium recommends using XML specifications to constrain HTML documents, combining the strengths of HTML and XML to form XHTML. The need to specify a DTD (document type definition) in HTML4.01 and XHTML to define semantic constraints (supported elements and attributes) for HTML documents is no longer needed in HTML5, which is a "compromise" specification.

2, attribute value shorthand

<!--XHTML Request:xxx.php?x,y (x,y for users to click on the relative position of the image)-->
<a href= "xxx.php" >

</a>
<!--XHTML External scripts will not execute until the page has finished loading-->
<script src= "Xxx.js" defer= "defer" ></script>

<!--HTML5 Request:xxx.php?x,y (x,y for the user to click on the relative position of the image)-->
<a href= "xxx.php" >

</a>
<!--HTML5 External scripts will not execute until the page has finished loading-->
<script src= "Xxx.js" defer></script>

3. Semantically formatted label for text

<em> definition Accent Text, effect and italic text similar </em>
<strong> Define important text </strong>
<small> define small print, such as disclaimer, precautions, copyright-related text </small>
^{Define superscript text}
_{define subscript text}
<bdo dir= "LTR" > Define text display direction, left to right </bdo>
<bdo dir= "RTL" > Define text display direction, right to left </bdo>
<abbr> Define abbreviated text </abbr>
<address> Define Address text </address>
<blockquote> Define long reference text </blockquote>
<q> define short Reference text </q>
<cite> Definition Work Title </cite>
<code> Define computer code </code>
<var> Define a variable </var>
<dfn> define a professional term </dfn>
<del> define deleted text </del>
<ins> Define inserted text </ins>
<kbd> define keyboard text (commonly used in computer documents) </kbd>
<samp> Define Demo Text </samp>
<!--The following is HTML5 new element-->
<article></article>
<section></section>
<nav></nav>
<aside></aside>
<footer></footer>
<time></time>
<mark></mark>

4, other label elements

<!--defines a sequence table-->
<ol start= "2" type= "I" >
<li></li>
</ol>

<!--define Picture maps-->

<map name= "Imgmap" >
<area shape= "Poly" coords= "188,27,34,89,38,99" href= "xxx.html"/>
</map>

<!--standard form-->
<table>
<caption> Table title </caption>
<colgroup>
<col/>
<col span= "2"/>
</colgroup>
<thead><tr></tr></thead>
<tfoot><tr></tr></tfoot>
<tbody><tr></tr></tbody>
</table>

<!--<meter> and <progress>-->
<meter value= "min=" 0 "max=" low= "0" high= "160" >
<progress value= "max=" ></progress>

<!--use <base> to specify a datum link for all links in the page-->
<base target= "_blank" href= "http://xxx.com/" >

5, new properties

<!--
Contenteditable property: You can make the contents of an HTML (InnerHTML) editable (down inheritance);
There is a iscontenteditable property that can determine whether the current element content is editable;

* For global HTML pages, you can use "Document.designmode = true;" To make the entire page editable;
-->
<p contenteditable= "True" > This is an editable paragraph </p>
<!--setting "hidden = ' true '" is equivalent to setting the Display:none style-->
<div hidden= "true" > Content text </div>
<!--spellcheck property: If you set this property, the browser will check the text in the container for syntax-->
<textarea spellcheck= "true" > Content text </textarea>

6, the form part

Three forms of data encoding methods:

Application/x-www-form-urlencoded: The default encoding is to work with the Value property values in the form control and to process them into a URL-encoded format.
Multipart/form-data: Process form data in binary streams and use when uploading files.
Text/plain: Commonly used when mailing links (mailto:url).
To add the TabIndex property to a form control, you can use the TAB key to convert the focus of each control based on the value of "TabIndex".

Using the label definition tag:<label> tags can be automatically associated with the corresponding form element, and the corresponding form field will automatically receive the focus when the user clicks on the label.

<!--Explicit Association-->
<label for= "username" >please input your username:</label>
<input id= "username" name= "username" type= "text"/>
<!--Implicit Association-->
<label>username: <input name= "Username" type= "text"/></label>

Use button to define buttons:<button> tags can contain plain text, text formatting labels, images, and so on, which is relative to the <input> tag's advantage.

<button type= "Submit" ></button>

Use Form Properties for forms: This property enables the form control to be placed inside the <form> label, and to specify the control elements of the form externally.

<form id= "form" action= "" >
<input type= "text" name= "name"/>
</form>
<!--use the id attribute of form to connect-->
<input type= "Submit" value= "Submit" form= "form"/>

Use the FormAction property of the form: This property enables the form to have a multiple submit entry feature that enables different buttons to be submitted to different server interfaces.

<form id= "form" action= "" >
<input type= "text" name= "name"/>
<input type= "Submit" value= "submit entrance One" formaction= "Interface_one" formmethod= "Get"/>
<input type= "Submit" value= "submit entrance two" formaction= "Interface_two" formmethod= "post"/>
</form>

Use the Formtarget and Formenctype properties of the form: the Formtarget property can dynamically change the target method of the form submission, and the Formenctype property can dynamically change the encoding used when the header is submitted.