Introduction to the

Html4 declaration mode

<! PUBLIC DOCTYPE HTML "- 4.01 / / / / / / W3C DTD HTML EN" "http://www.w3.org/TR/html4/strict.dtd" > < meta HTTP - equiv = "content-type" content="text/html; charset=utf-8">Copy the code

Html5 declaration

<! DOCTYPE html> <meta charset="UTF-8">Copy the code

The new labels

<header></header>

The header that defines a section or page (the top of the page, the header area of the document). The header is separated from the headCopy the code

<div id="header"></div>

<footer></footer>

Define the footer of a section or page (bottom of the page)Copy the code

<div id="footer"></div>

<nav></nav>

Defining navigation linksCopy the code

<div id="nav"></div>

<article></article>

Define the articleCopy the code

<section></section>

Define sections (sections in a document)Copy the code

<aside></aside>

Define content beyond the content of the page (sidebar)Copy the code

semantic

Each tag in HTML has a specific meaning, such as H1-H6 for title, P for paragraph, img for image, including some new tags in HTML5: Header, footer, nav all have a specific meaning. Semantization allows us to use the right tags in the right places to make it easier for both humans and machines to see. In other words, it can render content structure without CSS. Other people can read your code according to the tag to figure out your intention, good for programmers to read, easy for teams to develop and maintain browser easy to read and good for search engine optimization. Search Engine Optimization) some tags have styles by default that can be highlighted if the browser disables CSS styles, such as h1 for parsing by other devices, or blind readers for rendering web pages based on semanticsCopy the code

The form

basic<input type="text" placeholder="please input a number">

<input type="email">

Type :email Verifies whether the input is in the email formatCopy the code

<input type="url">

Type: URL Verifies whether the entered content is a complete URLCopy the code

<input type="color">

<input type="date">

<input type="time">

<input type="range">

Range: <input type="range" step="10">Copy the code

<input type="search">

Search The search box (provides a delete button to empty the contents of the input box)Copy the code

<input type="number" max="50" min="1" step="4">

Number Number type Max Maximum value of the input box min Minimum value of the input boxCopy the code

<input type="tel" maxlength="11">

Tel Pulls up the dialer keypad of the phone (the effect can only be seen on the phone) maxLength Sets the maximum length of the input in the input boxCopy the code

<input type="file" accept="image/png">

Demo code

<form action=""> text:<input type="text" placeholder="please input a number"><br/> <! --> email:<input type="email"><br/> <! <input type="url"><br/> color: <input type="color"><br/> date: <input type="date"><br/> time: <input type="time"><br/> range: <input type="range"><br/> <! Range: <input type="range" step="10"><br/> <! --> search: <input type="search"><br/> <! -- number Number type Max Maximum value of the input box min Minimum value of the input box --> number: <input type="number" Max ="50" min="1" step="4"><br/> <! -- tel: <input type="tel" maxLength ="11"><br/> <! -- file Upload file accept sets the type of file that the user selects --> file: <input type="file" accept="image/png"><br/> <select> <option value="">cherry</option> <option value="">shirley</option> <option value="">sherry</option> </select> <! -- <input type="text" list="name"> <datalist id="name"> <option value="">cherry</option> <option value="">shirley</option> <option value="">sherry</option> </datalist> --> <input type="text" list="name"> <datalist id="name"> <option value="shirley" label="aaa">shirley</option> <option value="shirley" label="bbb">shirley</option> <option value="cherry">cherry</option> <option value="xiaoming">xiaoming</option> </datalist> <input type="submit"> </form>Copy the code

Copy the code