HTML you may not yet know some of the points of knowledge

First, label semantics

HTML tag semantics is to let everyone intuitively understand the use and role of tags and attributes, the most important thing is the search engine friendly.

Eg:

1, If you want to highlight in the page "Obama" This three words, let the search engine pay attention to it, if you write:

<div> Obama </div>

For the search engine, it is only a common three words can not be ordinary, although it refers to the President of the United States.

So how do you get the search engine to know its importance? Let's take a look at the semantic wording:

Obama looked after, happy, elder brother should have been paid attention to!
2, if the text to bold display,<em> is used as an emphasis, strong is used as a key emphasis.
3, for the label <s> just represents a normal strikethrough, and the <del> tag is more semantic, it means to delete a content, and Del also with cite and datetime to indicate the reason for the deletion and the time of deletion.
......
So, label semantics is actually the thing that you want to express more easily by the search engine to understand and pay attention to, let you want to express something, to being girlfriend,not to be friend.
Second, HTML tag supplement
1. abbreviation Description
<abbr title= "Hyper text Markup Language" >HTML</abbr>
2. definition list (usually for content interpretation)
<dl>   <dt> zi Yue: "Rhetoric, fresh and benevolence!" "</dt>   <dd> Confucius said:" The rhetoric, pretending to be pleasant, this kind of person's benevolence heart is very few. "</dd>   <dt> season </dt>   <dd>1, sibling ranking smallest: Titi (younger brother)." Father of the season (little Uncle) </dd>   <dd>2, Three months for one season, one year of four Seasons </dd></dl>
3. pre-formatted text tags
Text that is enclosed in the pre element usually preserves spaces and line breaks
<pre>1, this is a ditch desperate stagnant water 2, the breeze cannot blow up the slightest Yi 3, as much as throw some scrap metal 4, shuangxing spilled its leftovers leftovers </pre>
4. Copyright Characters
&copy;
5, the HTML is escaped
&lt;body&gt;
Third, H5 new tags
1. Multimedia Tags: video, audio, canvas
1.1 Audio Tag Video
The compatibility of HTML5 audio tags and audio formats in different browsers (OGG and MP3 formats are generally available to support all major browsers.) ）
<audio src= "1.mp3" controls= "Controls" >
<audio controls= "Controls" AutoPlay loop>   <source src= "1.mp3"  type= "Audio/mpeg"/>   < SOURCE src= "1.ogg"  type= "Audio/ogg"/></audio>
Codec tool: FFmpeg (: www.ffmpeg.org)
MP4 to the Ogg method ibid.
1.2 video Tag Videos
<video src= "1.mp3" controls= "Controls" Autoplay><video controls= "Controls" >   <source src= "1.mp4"  type= "Video/mpeg"/>   <source src= "1.mp4"  type= "Video/ogg"/></video>
Audio and video playback, pause, stop method:
var audio = document.getElementById (' Music1 '); Audio.play ();//Play Audio.pause ();//Pause Audio.pause (); audio.currenttime= 0;//stop
1.3 Canvas Label: canvas (need to work with JS to do the effect, follow-up summary)
2. Main Structure label
The 2.1 NAV element represents the navigation link area of the page. Used to define the main navigation section of the page.
<nav>    <ul>        <li>html 5</li>        <li>CSS3</li>        <li> Javascript</li>    </ul></nav>
The 2.2 article element displays a separate piece of content in the Web page, such as a forum post, blog post, and a user comment.
<article>    
<article>    
2.3 section elements represent "sections" or "segments" in a document, and "segments" can refer to sections in an article by topic; "Sections" can refer to groups in a page.
<article>    
2.4 Aside elements are included in the article element as the main content of the subsidiary Information Section, wherein the content can be related to the current article relevant information, labels, ranking interpretation, etc.
<article>    <p> content </p>    <aside>        
The 2.5 header element shows the head of a region
2.6 Footer element shows the tail part of an area
The 2.7 hgroup element represents the title of "page" or "section", and when the element has multiple levels, the element can be h1 placed into the h6 element, such as a combination of the main title and subtitle of the article
The 2.8  Figure tag specifies separate stream content (images, charts, photos, code, and so on). The content of the figure element should be related to the main content, but if deleted, it should not affect the flow of the document. The figcaption tag defines the caption of the figure Element (caption). The "figcaption" element should be placed in the position of the first or last child element of the "figure" element.
<figure><figcaption> Lupu Bridge on the Huangpu River </figcaption></figure>
3. Non-subject structure label
3.1 <datalist> tags define a list of options.
<input type= "text" list= "taglist"/><datalist id= "taglist" ><option> Apple </option><option > Oranges </option><option> tomatoes </option></datalist>
3.2 Details tab define document detail
<details><summary>copyright 2011.</summary><p>all pages and graphics on this web site is the Pro Perty of W3school.</p></details>
3.3 menu Label definition list
<menu>  <li>home</li>  <li>home</li>  <li>home</li></ Menu>
3.4 Address label
<address>written by <a href= "Mailto:[email protected]" >donald duck</a>.<br> Visit US at:<br >example.com<br>box 564, Disneyland<br>usa</address>
3.5 Progress progress bar label
Download Progress:<progress></progress>
3.6 Mark Highlights
<mark> China </mark> People's greatest
3.7 <time> tags define the date or time, or both
<p> We are open every morning <time>9:00</time> start. </p>
3.8 New Form elements
<input type= "Email"/><input type= "url"/><input type= "tel"/><input type= "number" min= "1" max= "20 "Step=" 4 "/><input type=" range "  min=" 1 "max=" "" step= "4"/><input type= "search"/><input type= " Color "/><input type=" date "/><input type=" month "/><input type=" Week "/><input type=" Time "/ >
3.9 The new input property
3.9.1 User Input Auto-complete function
<form autocompelete= "on" ><input type= "text" list= "CityList"/><datalist id= "CityList" >  < option>beijing</option>  <option>QingDao</option>   <option>qingzhou</ Option>    <option>QingHai</option></datalist></form>
3.9.2 get focus when the page loads
<input type= "text" autofocus= "Autofocus"/>
3.9.3 form can also do data submission
<form action= "" method= "Get" id= "Form1" ></form><input type= "text" name= "Address1" form= "Form1"/>
The contents of the 3.9.4 form can also be changed to the action address
<form action= "1.aspx" >  <input type= "Submit" value= "submit" formaction=  "2.aspx"/></form>
3.9.5 file can support uploading multiple files.
<input type= "file" Name= "img" multiple= "multiple"/>
The 3.9.6 supports custom verification capabilities.
<form action= "1.aspx" > Please enter ZIP Code: <input type= "text" pattern= "[0-9]{6}" title= "Please enter the 6-digit zip code"/> <input type= " Submit "/></form>
3.9.4 added a default content hint
<input type= "text" placeholder= "Please enter user name"/>
3.9.5 New cannot be empty property
<form action= "1.aspx" > Please enter ZIP Code: <input type= "text" required= "required"/> <input type= "Submit"/>< /form>
3.10 New Global Properties
The 3.10.1 contenteditable property specifies whether the contents of an element can be edited.
<p contenteditable= "True" > This is an editable paragraph. Please try editing the text. </p>
The 3.10.2 hidden property specifies that the element is hidden.
<p hidden= "Hidden" > This is a hidden paragraph. </p><p> This is a paragraph that is visible. </p>
The 3.10.3 TabIndex property specifies the order of elements when navigating with the "tab" key.
<a href= "http://www.w3school.com.cn/" tabindex= "2" >w3school</a><br/><a href= "http/ www.google.com/"tabindex=" 1 ">google</a><br/><a href=" http://www.microsoft.com/"tabindex=" 3 " >Microsoft</a>
3.11 Other properties
3.11.1 ol reversed property to list order descending
<ol reversed start= "5" >    <li>shuffle!/three World love song </li>    <li> culling angels </li>    <li > 0 Magic </li>    <li> do not be spoiled oh/very Lotte division/innocent Monk Qiao nun </li>    <li>to love/out Ru </li></ol >
The async attribute of 3.11.2 JS Specifies that once the script is available, it executes asynchronously.
<p id= "P1" >hello world!</p><script type= "Text/javascript" src= "/example/html5/demo_async.js" async= " Async "></script>
The defer attribute of 3.11.3 JS Specifies that the script will not be executed until the page has finished loading.
<script type= "Text/javascript" src= "/example/html5/demo_defer.js" defer= "defer" ></script><p> The above script requests information from the following paragraph. Typically, this is not possible because the script was executed before the paragraph was loaded. </p><p id= "P1" >hello world!</p><p> However, the defer attribute specifies that the script executes later. This allows the script to request information from the paragraph. </p>
HTML you may not yet know some of the points of knowledge