HTML5 new elements, tag summary, html5 new element tags

HTML5 new elements, tag summary, html5 new element tags

I have always encountered a test question for the new h5 label. I checked the materials to summarize them:

1. form related:

(1) form attributes: In HTML5, the form element can be placed outside the form. You can add the form attribute to the element to point to the target form (set the form attribute value to the target form id.

(2) formaction attributes: HTML5 adds the formaction attribute to the submit button (such as button, submit, and image) for submission to different server addresses.

<Input formaction = "new.html" type = "submit" value = "submit to new.html">

(3) formmethod attributes: The usage is the same as formaction.

(4) placeholder attributes: A text prompt when the text box is not entered.

(5) autofocus attributes: Automatically obtains the focus. Only one control on a page can have this attribute. This property has no value and can be written directly.

<input name="username" autofocus type="text" id="username">

(6) list attributes: Used for single-row text box. The value of this attribute is the id of a datalist element. The single-row text box after this attribute is added is similar to the select box, but user-defined input is allowed, to avoid errors in browsers that do not support this element, we usually use CSS settings to disable display.

<Datalist>Label: defines the list of optional data. With the input element, you can create a drop-down list of input values.

order:<input list="list" name="order" autofocus type="text" id="order">            <datalist id="list" style="display:none">            <option value="1">1</option>            <option value="2">2</option>            <option value="3">3</option>            </datalist>

(7) autocomplete attributes: Automatically allows the browser to predict the input of a field. html5. this attribute is customized to avoid any security risks. This attribute value can be "on", "off", or "" (not specified). If it is not specified, the default value of the browser is used.

(8) input element types:

　　Search: Similar to text boxes, used for search;

　　Tel: Similar to text box, used for telephone;

Url: Similar to the text box, it is used for url format addresses;

Email: Similar to the text box, it is used for addresses in the email format;

Number: Similar to text boxes, used for numeric values;

Range: Only a value in a range can be entered. The range is set using the min and max attributes;

Color: Color text box in the format of "#000000;

File: Select the text box for the file. You can select multiple text boxes through the multiple attribute in HTML5;

Datetime, date, month, week, time, datetime-localText boxes for various Date and Time input;

Output:Define different types of outputs;

(9) Form Verification:

　　Automatic Verification (that is, the verification requirement is met by adding corresponding attributes to the element)

　　Required attributes: An element with this attribute. If its content is empty, it cannot be submitted and a prompt is given.

　　Pattern attributes: An element with this attribute. if the content is not empty, the content matches the value of pattern in a regular expression. If the matching fails, the element fails and a prompt is displayed.

　　Min and max attributes: These are special attributes of the input element of the value type and date type, which limit the input range.

　　Step attribute: The stride for increasing or decreasing the value of the control element. For example, if you enter a number between 1 and the stride is 5, you can only enter 1, 6, 11 .....

Display verification (in addition to adding attributes to the element for automatic verification, in HTML5, both form and input elements (input), including select elements and textarea, have a checkValidity method, you can call this method for manual verification. The checkValidity method returns the verification result in the form of boolean)

　　

Function check () {var email = document. getElementById ("email"); if (email. checkValidity () {alert ("correct email format");} else {alert ("Incorrect email format ");}}

　Cancel verification (canceling form verification has two attributes: novalidate for form and formnovalidate for submit)

// Novalidate for form <form novalidate> <input type = "text" name = "name" id = "name" required> <input type = "submit" name = "button "id =" button "value =" submit "> </form> // formnovalidate <form> <input type =" text "name =" name "id =" name "required> <input type =" submit "orfmnovalidate name =" button "id =" button "value =" submit "> </form>

　　Custom error: A default prompt is displayed in a form browser that has not been verified in HTML5, but a custom error message is also provided through JavaScript. (I think you can write a function and call it when you click it ).

2. Enhanced page elements

(1) figure Element: Figure is a combination element with the title figcaption. A figure can only contain one figcaption.

<Figure>  <figcaption> flag </figcaption> </figure>

(2) details Elements: Details provides a method that replaces Javascript to expand or contract the local area on the screen.

<Details> <summary> click here to view details </summary> <p> I am the details. </P> </details>

(3) mark element:The mark element indicates the part of the page that needs to be highlighted or highlighted.

(4) progress element:It is generally used to write progress bars. You can set the value and max attributes for progress. value indicates the progress, max indicates the total number, and value and max can only be valid floating point numbers, value must be greater than 0 and less than or equal to max. If you do not set these two properties for SS, the status is dynamically displayed in progress and the progress is uncertain.

(5) meter element: Define a scale. (The upper and lower values are distinguished by colors ).

High: defines the point at which the measurement value is located and is defined as a high value.
Low: defines the point at which the measurement value is located and is defined as a low value.
Max: defines the maximum value. The default value is 1.
Min: defines the minimum value. The default value is 0.
Optimum: defines what kind of metric value is the best value. If the value is higher than the "high" attribute, it means the higher the value, the better. If the value is lower than the value of the "low" attribute, the lower the value, the better.
Value: defines the measurement value.

(6) Improved ol list: The start attribute and reversed attribute are added to the ol element in HTML5.

Start: indicates the sequence number of the list.

Reversed: indicates that the list sequence number is in reverse order.

(7) Improved dl list:Dl is a list specifically used to define terms. In HTML5, dfn is added to dt.

<Dl> <dt> term 1 </dt> <dd> description... </dd> <dt> <dfn> name </dfn> term 2 </dt> <dd> description... </dd> </dl>

(8) cite:Used to represent the author.

(9) small:Used to identify "small text ".

(10) <article>Label: defines external content.

(11) <aside>Label: defines content other than article. The content of aside should be related to the content of article. The aside can be used for advertisement or link at the end of a website page, and a vertical row is an aside. It can also be used in the blog sidebar.

(12) <audio>Label: Define the sound.

(13) <canvas>Label: defines the image (designed for the client vector graphics ).

(14) <command>Tags: Define command buttons, such as single-choice buttons, check boxes, or buttons.

(15) <embed>Label: defines embedded content, such as plug-ins.

(16) <footer>Label: defines the footer of a section or document.

(17) Label: defines the header of a section or document.
(18) Tags: used to combine the title of a webpage or section.

(19) Tags: used to combine the title of a webpage or section.

(20) <nav>Label: defines the navigation link.

(21) <output>Tags: define different types of output, such as the output of scripts.

(22) <rp>Tags: Used in ruby annotations to define the content displayed by browsers that do not support ruby elements.

(23) <rt>Tags: defines the interpretation or pronunciation of a character (Chinese phonetic alphabet or character.

(24) <ruby>Tags: Define ruby annotations (Chinese phonetic symbols or characters ).

(25) <section>Label: defines the section (section, section) in the document ). For example, a section, header, footer, or other part of the document.
(26) <source>Tags: defines media resources for media elements (such as <video> and <audio>.

(27) <summary>Label: the title of the details element. The "details" element is used to describe detailed information about a document or a document fragment ." The summary element should be the first child element of the details element.

(28) <time>Label: defines the date or time, or both.

(29) <video>Tags: videos, such as movie clips or other video streams.

 (30) <dialog>Label: defines the dialog (Session) dialog element to indicate conversations between several people.

If any error occurs, please correct it!

 

Reference link:

Yiju tutorial network> webpage creation> html5 tutorial
Big front-end> Html5 new tag explanation and usage