Home > Developer > Web Develop
1. The HTML5 new standard directly adds HTML tags with specific meanings such as:,,,, <article> <footer> <nav><section>、<video>, <progress>（进度条）、<meter>（容量占用条）、<time>（不显示效果）, <aside>（文章侧栏）, <canvas>
Also canceled some tags, such as < acronym> , < applet> , < basefont> , < big> , <, center> <, dir> <, font> < frame> frameset> , <, < isindex>, < noframes> , < strike> ,<tt>
2. The HTML5 standard adds a smart form directly, making it all the easier, such as,,,, calendar , date time email urlsearch
3. In the HTML5 standard native to support audio, video, canvas and other technologies. Make Web programs more independent and better suited to many forms of clients.
4. HTML5 provides two new ways to store data on the client
5. HTML5 canvas elements use JavaScript to draw an image on a Web page. There are several ways to draw paths, rectangles, circles, characters, and add images.
6. Without affecting UI update and browser interaction with the user, the front-end do large-scale operations, only through setTimeout the like to simulate multithreading. And the new standard, JS new HTML5 Web worker object native to support multithreading.
7. WebSockets is the technology for two-way communication on a (TCP) interface, the push technology type. WebSocketHTML5 specification is a new feature introduced to solve the browser and background server two-way communication problems, the use of WebSocket technology, the background can always push the message to the front end, to ensure that the front and rear state unity, in the traditional stateless HTTP protocol, which is "unable to do".
8. HTML5 (text/html) browser will be more flexible in the processing of error syntax. HTML5 is designed to ensure that the old browser can safely ignore the new HTML5 code. Compared to HTML4.01, HTML5 gives the complete rules for parsing, allowing different browsers to return exactly the same results even in the event of a syntax error.
9. Because projects often encounter the use of Web applications to control the operation of local files, and before all using some rich client technology, such as, and flash ActiveX Silverlight other technologies. The new offer in HTML5 HTML5 File API makes JS easy to battle.
HTML5 There is only one type, <! DOCTYPE html>
- Page layout changes
HTML5:
The code is as follows:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>My page</title>5 </Head>6 <Body>7 <Header>Header</Header>8 <nav>Nav</nav>9 <article>Ten < Section>Section</ Section> One </article> A <aside>Aside</aside> - <Footer>Footer</Footer> - </Body> the </HTML>
- Label specific explanation
<section>Defines a section in a document. It is used to represent ordinary document content or application chunks, but the section element tag is not an ordinary container element, it represents a thematic content, usually with a title.
<article>The special section label, which section is more explicit than the semantics, represents a separate, complete block of related content. When we describe a specific thing, it is often encouraged article to replace it section . articlethere will be a title section (usually contained header within), or it can contain footer . articlecan be nested, the inner layer of the article outer layer of the article label has a subordinate relationship.
<nav> can be used as a link group for page navigation, where navigation elements are linked to other pages or other parts of the current page, making the HTML code more accurate in semantics and better for devices such as screen readers.
<aside>tags are used to load non-body content and are considered a separate part of the page. It contains content that is separate from the main content of the page and can be deleted without affecting the content of the page, the chapters, or the information the page is about to convey. Examples include ads, groups of links, sidebar, and so on.
The label defines the header of the document, which is usually some guidance and navigation information. It is not confined to the head of the Web page, it can also be written in the content of the Web page. Usually header the label contains at least one header tag ( h1 - h6 ), can also include a hgroup label, and can include table content, identification, search form, nav navigation, and so on.
<footer>A label definition section or document footer that contains information about a page, article, or part of the content, such as the author or date of the article. It is header basically the same as the label, can be used multiple times in a page, if added after a section footer , then it is equivalent to the footer of the section.
A tag is a combination of the section title elements ( h1 -) of a Web page or section h6 . For example, in a section where you have successive H-series label elements, you can hgroup enclose them.
<figure>Used to group elements. Used for pictures and picture description combinations.
- <input> New types
1. Number Type
1 < type= "number" name= "Demonumber" min= "1" Max = "+" step= "1"/>
Controls the range of input data. Name: identifies the key value when the form is submitted,min: identifies the minimum value entered by the current input box, Max: identifies the maximum value of the current input box input,step: Identify click Increase/ Decrease time, increment/decrement step,value: Specify default value
2. Email type
1 < type= "email " name= "email" placeholder= "Please enter a registered email" />
System automatically detects if the mailbox format is
3. URL type
1 < type= "url " placeholder= "Please enter URL" name= "url" />
System automatically detects if it is a URL format
4. Range Type
1 <formOninput= "Output.value=parseint (range.value)">2 <inputtype= "Range"min= "0"Max= "+"Step= "5"name= "Range"value= "0"/>3 <Outputname= "Output">0<Output/>4 </form>
Range is a slider effect and can be used with the <output> tab to display the values represented by the slider bar (Form label plus oninput= "Output.value=parseint (range.value)")
5. Date type
DateTime type Google Chrome does not support
6. Color type
1 < type= "Color" name= "Colordemo"/>
7. Automatic notification of Forms
1 <inputtype= "text"AutoComplete= "On"name= "Demoautocomplete"List= "Autonames" />2 <DataListID= "Autonames">3 <optionvalue= "Experimental Building" ></option>4 <optionvalue= "HTML5" ></option>5 <optionvalue= "Input Tag" ></option>6 </DataList>
- Form new properties
1.input Tag New properties
2.form New Properties
- File Operations API
Mainly FileList, Blob, File, FileReader a few JS objects:
FileList:
April 9 Study Note--HTML5
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
