Introduction: Since learning various frameworks of various sophisticated control library, feel more and more tired. The Three Musketeers itself front-end (HTML, CSS, JAVASCRIPT) mastery is not too skilled. I think it's time to go back to the original, to write about the most primitive web code.
First, the semantic element configuration page
In html5 most commonly used semantic elements related to the page is structured as follows:
| element | Explanation |
| <article> | It represents a form of any article that is similar to news reports, forum posts or blog post (not including comments or author), etc. can separate content block |
| <aside> | It represents a complete block is independent of the main content of the page. For example, with <aside> |
| <figure>和<figcaption> | He represents an illustration. Where <figcaption> element marked figure caption (title illustration), and <figure> element labeled <figcaption> and insert a picture of the <img> element. The goal is to reflect the link between the picture and the figure caption |
| <footer> | It represents the footer at the bottom of the page. Usually small piece of content, including small size of the copyright notice, a simple link |
| <header> | Enhanced representation of the title, the title may contain HTML and other content. Other content can be a sign, authorship or a set of navigation links pointing back contents |
| <nav> | It denotes important a set of links. Links may point to the theme of the current page, you can also point to other pages on the site. In fact, a page contains multiple <nav> also normal |
| <section> | A block representation of a document, or represent a set of documents. |
| <main> | It represents the main content of the page. For example, you can use <main> contain <article> header element, isolated site, footers, and sidebars. This element is new HTML5 |
Second, write more meaningful mark
Three new level of understanding of the text semantic elements:
1. <time> Time and date stamped
//示例 The party starts <time>2014-03-21</time>
2. <output> Return value denoted JavaScript
//示例 <p>Your BMI:<output id="result"></output></p>
3. <mark> highlight text annotation
<Mark> element is used to label a text, this text is highlighted. When quoting other people's content, and you want to attract attention, you can use the <mark> element.
Third, build better form
1. Understanding Form
Commonly referred to as a form, is a set of text boxes, lists, buttons and other controls can click on the small, may collect certain information site visitors through all these gizmos.
All works are similar to the basic form that the user fill out the information and then click the button. In this case, the browser will collect information entered by the user and sends it to the server. On the server, there are software programs responsible for processing information and decide what to do next. The service side of this program may want to contact the database, it may be read data may be written data, then after sending a new page to the browser.
Note: No matter what way, the process is similar, that is, check the form data; some data processing; and then sends back a new page.
2.HTML5 validation principles
Rationale: The basic principle is that HTML5 form validation for you to tell the browser to verify that field.
In two places validation (two indispensable) :
1. Client-side validation: major convenience for visitors.
2. The authentication server: to ensure the correctness of data.
Using regular expressions: the so-called regular expressions, it is a text-mode with a regular expression written language. Commonly used in the search and verification.
The new input controls:
HTML form has a strange approach, namely (called <input> vague) with an element of creating multiple controls: check boxes, text boxes, and buttons. In this case, type property of the main switch become downright.
Email address:
<input type="email"></input>
URL:
<input type="url"></input>
search bar:
<input type="serach"></input>
telephone number:
<input type="tel"></input>
Value:
<input type="number"></input>
Slider:
<input type="range"></input>
Date and Time:
<input type="date"></input>