HTML5 Foundation (IV.)

Understanding of new and abolished elements

1. Other new elements
1. New figure element and figcaption element

A figure element is a combination of elements with an optional caption. The figure element is used to represent a separate piece of content on the page, and if he is removed from the page, it does not affect our page.
The Figcaption element represents the caption of the figure element, which belongs to the figure element, and the figcaption element must be written inside the figure element and can be written before or after other subordinate elements within the figure element. Only one figcaption element is allowed to be placed within a figure element.

<figure> < figure > is used to group elements. Generally used for pictures or videos

<figcaption> <figcaption> Figure's child elements are used to illustrate the contents of a figure

<figure>

(note no alt)

<figcaption> class photo &copy fun </figcaption>
</figure>

2. New details element and summary element

The details element is an element that identifies which child elements inside the element can be expanded and shrunk. The details element has a Boolean type of open property, and when true, the child elements inside the element should be expanded to display, and when the property value is false, its inner child elements should be shrunk to be unrealistic. The default value of this property is false, and the child elements inside it should be in a shrinking state when the page is opened.
The summary element is subordinate to the details element, and when you click the content text in the summary element with the mouse, all other dependent elements in the details element will expand or contract. If there is no summary element within the details element, the browser will provide you with the default text for clicking, such as "details"
Currently only Google Chrome browser support!

<details>
<summary>binperson</summary>
<p> the most handsome person </p>
</details>

3. New Mark Element

The mark element represents a paragraph of text that needs to be highlighted or highlighted on the page for reference by the current user. The mark element is usually used when referencing the original text, and is intended to draw the reader's attention. The mark element is an element that complements the content of the original, and should be used in a text that is not considered important by the original author, but is now highlighted or highlighted for other purposes unrelated to the original author.
The main purpose of the Mark element is to attract the attention of the current user.
In addition to highlighting, the Mark element also has a role in referencing the original text, for a particular purpose, the author does not show the content of the focus of expression.

mark{background:red;}
<mark> Tags </mark>

4. New Progress elements

The progress element represents the completion progress of a task, which can make an indeterminate, indicating progress Z is ongoing, but it is unclear how much of this work is not done, or the number of s that can be used between 0 and a maximum number (such as 100) to indicate an accurate progress condition (such as a percentage)
The element has two properties that represent the current task completion, the Value property indicates how much work has been done, and the Max property indicates how much work is in total. The unit of work is arbitrary, not specified.
When setting a property point, the Value property and the Max property can only be specified as valid floating-point numbers, the Value property must be greater than 0, and is less than or equal to the Max property, and Max's property must be greater than 0.

<progress max= "Value=" >
<span>76</span>%
</progress>

5. New meter elements

The meter element represents the quantity value within the specified range.
The meter element has 6 properties!

1. Value property: The actual value that is specifically represented in the element. The property value defaults to 0, and you can set a floating point decimal value for the property.
2, Min Property: Specify the specified range to allow the minimum value, the default of 0, when the property is set to set the value can not be less than 0.
3, Max property: Specifies the maximum value that is allowed when the specified range is set, or the value of the Min property as the maximum value if the value of the property is less than min at the time of setting. The default value for the Max property is 1.
4. Low attribute: The lower value of the specified range must be less than or equal to the high value.
5, High property: The upper limit of the specified range. If the value of the property is less than the value of the low property, the value of the low property is treated as the value of the high property, and if the value of the property is greater than the value of the Max property, the value of the Max property is treated as a value of high.
6. Optimum attribute: The best value attribute value must be between the Min attribute value and the Max property value, which can be greater than the high property value.

<p> actual use of hard disk <meter value= "43.9" max= "119" min= "0" >43.9/119</METER>GB </p>
<p>
Actual use of hard disk
<meter value= "43.9" max= "119" min= "0" low= "["] high= "optimum=" ></meter>
</p>

6. Add DataList Element

List of l<datalist></datalist> options. Used in conjunction with the INPUT element to define the possible values for input.

<input type= "text" list= "Vallist"/>
<datalist id= "Vallist" >
<option value= "JavaScript" >javascript</option>
<option value= "HTML" >html</option>
<option value= "CSS" >css</option>
</datalist>

7. Public key

<form action= "http://www.baidu.com" method= "Get" >
User: <input type= "text" name= "Usr_name"/>
Public key: <keygen name= "Security"/>
<input type= "Submit"/>
</form>

2. Abolition of elements

1. Elements that can be replaced with CSS:
Basefont, big, center, font, S, Strike, TT, u
2, not in use frame frame
For frameset elements, frame elements, and noframes elements, because frame frames have a negative impact on page usability, frame frames are not supported in HTML5, only the IFRAME framework is supported, and the above three elements are abolished.
3. Only some elements supported by the browser
For applet elements, Bgsound, Blink, marquee elements, because only some browsers support these elements, especially the BGSOUND element and the marquee element, are only supported by IE browser, so it is abolished in HTML5! The applet element can be replaced by the EMBED element or the object element, and the BGSOUND element is replaced by the audio element, marquee can be replaced with JavaScript!
4. Other elements that have been abolished
A. To abolish the RB element and use the Ruby element instead
B, abolish the acronym element, use the abbr element instead
C, the abolition of the Dir element, the use of UL elements instead
D, abolish the Inindex element, use the form element and the input element in a way to replace
E, repeal listing element, use pre element instead
F, the XMP element is abolished, the code element is used instead
G, repeal NextID elements, use GUIDs instead
H, repeal plaintext element, use "Text/plian" MIME type instead

3. HTML5 Outline
1, HTML5 on the outline

1, in HTML5, we can use the structure of the previous learning elements to arrange a Web page outline, so that we can through the page outline to understand the content of the page, the page in what form to organize the content has a clearer understanding.
2. HTML5 Outline Analysis Tools
Http://gsnedders.html5.org/outliner
3, analysis of a Web page outline!
Find the reason for the Untitled section and fix it!
4. Can the header element be an outline?
5, in the header element with a picture to create an outline method!
6, about the NAV element and the aside element.

<! DOCTYPE html>
<meta charset= "GBK" >
<title></title>
<body>
<section>
<section>
&LT;H2&GT;HTML5 's outline (UP) <section>
<p> content </p>
</section>
<section>
&LT;H3&GT;HTML5 Outline Analysis Tools <p> content </p>
</section>
<section>
<p> content </p>
</section>
</section>
<section>
Outline of &LT;H2&GT;HTML5 (bottom) <section>
<p> content </p>
</section>
</section>
</section>
<footer>
</footer>
</body>

<! DOCTYPE html>
<meta charset= "GBK" >
<title></title>
<body>
<nav>
<ul>
<li><a href= "/" >xxx</a> </li>
<li><a href= "/" >xxx</a> </li>
</ul>
</nav>
<aside>
Side Bar Information
</aside>
</body>

2. Under the HTML5 outline

Outline rules
for the outline of HTML, we can be divided into "explicit orchestration" and "implicit orchestration" two ways.
1, explicit orchestration
Explicit orchestration is the explicit use of the section element to create a Web page document, using the title (H1~H6)
2, implicit orchestration
so-called implicit orchestration in each content chunk, that is, we do not use sections elements for explicit chunk partitioning , we create blocks automatically based on the elements we write (H1-h6, hgroup, etc.), because HTML5 's parser can determine the corresponding chunks of content based on different levels of headings.
3, Title rating
different headings have different levels, with the highest level of H1 in (H1-H6), and the lowest level of h6. So in the case of implicit orchestration will be generated according to the following rules!
  1), if a new title appears lower than the previous heading level, then a subordinate content chunk will be generated!
  2), if the new title appears higher than the one heading above, or the same level, then a new content chunk is generated!
4, different content chunks can use the same level of title
parent content chunks and child content chunks can use the same level of H1 headings

<! DOCTYPE html>
    <meta charset= "UTF-8";
    <title></title>
<body>
<p> Here is an introduction to explicit orchestration </p>
<section>
         <p> content </p>
</section>
<section>
        <p> content </p>
</section>
</body>

<! DOCTYPE html>
<meta charset= "GBK" >
<title></title>
<body>
<p> Implicit orchestration </p>
<p> Sub-directories </p>
<p> Sub-directories </p>
<p> Double Catalog </p>
<p> Double Catalog </p>
<p> Sub-directories </p>
<p> Sub-directories </p>
<p> Implicit orchestration Methods </p>
Methods of Methods of <p> sub-implicit programming </p>
</body>

<! DOCTYPE html>
<meta charset= "GBK" >
<title></title>
<body>
<H2> Title Rating H2<H3> Title Rating H3<H4> Title Rating H4<H3> Title Rating H3<H4> Title Rating H4<H4> Title Rating H4</body>

<! DOCTYPE html>
<meta charset= "GBK" >
<title></title>
<body>
<article>
<p> article Body </p>
</article>
</body>

<! DOCTYPE html>
<meta charset= "GBK" >
<title> page Outline Writing practice </title>
<body>
<nav>
<ul>
<li><a href= "index.html" > Home </a> </li>
<li><a href= "index2.html" > Content pages </a> </li>
<li><a href= "index3.html" > Contact Us </a></li>
</ul>
</nav>
<article>
<p> article Body </p>
<section>
<article>
<P> Reviews Content A</p>
</article>
<article>
<p> Reviews Title B</p>
</article>
</section>
</article>
<footer>
<small> Wheat Academy All rights reserved </small>
</footer>
</body>

HTML5 Foundation (IV.)