Summary of new elements and tags in HTML5

I always encounter written test questions about h5 new tags, so I checked the information to summarize:

1.form related:

(1) form attribute: In HTML5, form elements can be placed outside the form, by giving the Just 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 attribute: HTML5 adds the formaction attribute to submission buttons (such as button, submit, image, etc.) to facilitate submission to different server addresses.

<input formaction="new.html" type="submit" value="提交到new.html">

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

(4) placeholder attribute: a text prompt used when the text box is in an uninput state.

(5) autofocus attribute: Automatically obtain focus. Only one control on a page can have this attribute. This attribute has no value, just write it directly.

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

(6) list attribute: used for single-line text boxes. The value of this attribute is the id of a certain datalist element. The single-line text box after adding this attribute is similar to a select box (select), but allows users to customize input. In order To avoid errors in browsers that do not support this element, we usually use CSS to set it not to display.

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 attribute: Autocomplete allows the browser to predict the input to the field. HTML5 implements custom setting of this attribute to avoid security risks that can be seen by anyone. This attribute has three values: "on", "off" or "" (not specified). If not specified, the browser's default value is used.

(8) Input element type:

Search: Similar to text text box, used for search;

Tel: Similar to text text box, used for phone calls;

url: Similar to text text box, used for url Format address;

email: Similar to the text text box, used for email format addresses;

number: Similar to the text text box, used for numerical values;

range: Only allowed to enter values ​​within a range, through min and max attribute to set the range;

color: color text box, text in "#000000" format;

file: file selection text box, multiple selections can be made through the multiple attribute in HTML5;

datetime, date, month, week , time, datetime-local Text boxes for various date and time inputs;

Output: Define different types of output;

(9) Form verification related:

Automatic verification (achieved by adding corresponding attributes to elements Verification requirements)

　Required attribute: Elements with this attribute are not allowed to be submitted if their content is empty, and a corresponding prompt is given.

　 Pattern attribute: For elements with this attribute, if the content is not empty, the content will be matched with the pattern value. If the match is unsuccessful, it will not pass and a prompt will appear.

　Min attribute and max attribute: They are special attributes for input elements of value type and date type, which limit the input range.

　Step attribute: Controls the step by which the value of an element increases or decreases. For example, if you enter a number between 1-100 and the step is 5, you can only enter 1, 6, 11....

　Display verification (in addition to adding attributes to elements for automatic verification, in HTML5, form elements and input elements (input) including select elements and textarea have a checkValidity method, which can be manually verified by calling this method. The checkValidity method starts with boolean The form returns the verification result)

function check(){
        var email=document.getElementById("email");
        if(email.checkValidity()){
        alert("email格式正确");
        }else{
        alert("email格式不正确");
        }
        }

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

//用于form的novalidate
        <form novalidate>
        <input type="text" name="name" id="name" required>
        <input type="submit" name="button" id="button" value="提交">
        </form>

        //用于submit的formnovalidate
        <form>
        <input type="text" name="name" id="name" required>
        <input type="submit" orfmnovalidate name="button" id="button" value="提交">
        </form>

Custom error: In HTML5, the form browser that has not been verified will There are default prompts, but also provide custom error prompts through JavaScript. (I think I just need to write a function myself and call it when I click).

2. Enhanced page elements

(1) figure element: figure is a combination element that can have a title figcaption, and a figure only allows one figcaption to be placed.

        <figure>
        <img src="logo.png" alt="Summary of new elements and tags in HTML5">
        <figcaption>标志</figcaption>
        </figure>

(2) details element: details provides an alternative to Javascript to expand or contract local areas on the screen.

        <details>
        <summary>点击我查看细节</summary>
        <p>我是细节内容。</p>
        </details>

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

(4) Progress element: Generally used to write progress bars. You can set the value and max attributes for progress. Value represents what has been carried out, and max represents the total number. Value and max can only be valid floating point numbers. Value must be greater than 0 and less than equal to max. If you do not set these two attributes for progress, the dynamic display is in progress and the progress is uncertain.

(5) meter element: Define weights and measures. (The upper and lower values ​​​​will be distinguished by color).

　　　high:定义度量的值位于哪个点，被界定为高的值。
low:定义度量的值位于哪个点，被界定为低的值。
max:定义最大值。默认值是 1。
min:定义最小值。默认值是 0。
optimum:定义什么样的度量值是最佳的值,如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value:定义度量的值。

（6）改良的ol列表：在HTML5中为ol元素添加了start属性和reversed属性。

　　start：表示列表序号从几开始。

　　reversed：表示列表序号为倒序。

（7） 改良的dl列表：dl是专门用来定义术语的列表，在HTML5中为dt增加了名字dfn。

        <dl>
        <dt>术语1</dt>
        <dd>描述...</dd>
        <dt><dfn>名字</dfn>术语2</dt>
        <dd>描述...</dd>
        </dl>

(8)cite:用于表示作者。

(9)small:用于标识“小型文本”。

(10)

(11)

（12）

（13） 标签：定义图形（是为了客户端矢量图形而设计的）。

（14） 标签：定义命令按钮，比如单选按钮、复选框或按钮。

（15） 标签:定义嵌入的内容，比如插件。

（16）

（17）

（19）

（20）

（21）

 标签：定义不同类型的输出，比如脚本的输出。

（22） 标签：在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

（23） 标签：定义字符（中文注音或字符）的解释或发音。

（24） 标签：定义 ruby 注释（中文注音或字符）。

（25）

（27）

（28） 标签：定义日期或时间，或者两者。

（29）

 (30)