April 9 Study Notes-HTML5, 9 Study Notes html5
1. HTML tags with specific meanings are directly added to the new HTML5 standard, for example:<article>,<footer>,,<nav>,<Section>,<video>,<Progress> (progress bar ),<Meter> (capacity utilization ),<Time> (no effect is displayed),<Aside> (article sidebar),<canvas>
Some tags are also canceled, such as <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <isindex>, <noframes>, <strike>, <tt>
2. Smart forms are directly added to HTML5 standards to make everything so simple, suchcalendar,date,time,email,url,search
3. Added support for audio, video, and canvas technologies in the HTML5 standard. Make WEB programs more independent and better adapt to various forms of clients.
4. HTML5 provides two new methods for storing data on the client.
5. HTML5canvasElements use JavaScript to draw images on webpages. It also provides multiple ways to draw paths, rectangles, circles, characters, and add images.
6. The front-end performs large-scale operations without affecting UI update and browser interaction with users.setTimeoutTo simulate multithreading. In the new standard, the HTML5 Web Worker object added by JS supports multithreading.
7.WebSocketsIt is a two-way communication technology in a (TCP) interface, the PUSH technology type.WebSocketIs a newly introduced function of html5 specifications, used to solve the problem of two-way communication between browsers and backend servers.WebSocketTechnology: the backend can push messages to the front end at any time to ensure the unified status of the front and back end. In traditional stateless HTTP protocol, this is "impossible.
8. HTML5 (text/html) browsers will be more flexible in handling error syntax. HTML5 ensures that the old browser can safely ignore the new HTML5 code during design. Compared with HTML4.01, HTML5 provides complete parsing rules so that different browsers can return identical results even in the case of a syntax error.
9. Because projects often use Web applications to control local files, some rich client technologies suchflash,ActiveX,SilverlightAnd other technologies. Newly provided in HTML5HTML5 File APIThis allows JavaScript to be launched easily.
10. HTML5 only has one type. <! DOCTYPE html>
- Page layout changes
HTML5:
The Code is as follows:
1 <!DOCTYPE html> 2
- Tag description
<section>Define the section in the document. It is used to represent common document content or application blocks,sectionAn element tag is not a common container element. It indicates a topic content and generally has a title.
<article>SpecialsectionTag, which is similarsectionIt has a clearer meaning and represents an independent and complete content block. When we describe a specific thing, we usually encourage the usearticleTo replacesection.articleThere will be a title section (usually included inheaderCan also containfooter.articleCan be nested.articleExternal LayerarticleTags are affiliated.
<Nav> it can be used as a link group for page navigation. The navigation element links to other pages or other parts of the current page to make html code more accurate in semantics, it also provides better support for screen readers and other devices.
<aside>A tag is used to load non-body content. It is regarded as a separate part of the page. Its content is separated from the main content on the page and can be deleted without affecting the content, chapters, or information to be conveyed on the page. For example, advertisements, group links, and sidebar.
The label defines the header of the document, which is usually the guiding and navigation information. It is not limited to writing in the webpage header, but also in the webpage content. UsuallyheaderA tag must contain at least one title tag (h1-h6), You can also includehgroupTags, including table content, identifiers, search forms,navNavigation.
<footer>Label DefinitionsectionOrdocumentContains information related to the page, article, or part of the content, such as the author or date of the article. It andheaderLabels are basically the same, and can be used multiple times on a page.footerIt is equivalent to the footer of the Section.
Labels are for webpages or segmentssectionThe title element (h1-h6. For example, if you have consecutive h series label elements in a segment, you can usehgroupInclude them.
<figure>Used to combine elements. It is mostly used for combination of images and image descriptions.
- <Input> New Type
1. number Type
1 <input type="number" name="demoNumber" min="1" max="100" step="1"/>
Control the range of input data.Name:Identifies the key value when a form is submitted,Min:The minimum value entered in the current input box,Max:Identifies the maximum value entered in the current input box,Step:Step size increases/decreases when you click "increase/decrease,Value:Default Value
2. Email type
1 <input type = "email" name = "email" placeholder = "Enter your registered email address"/>
The system automatically checks whether the email format is used.
3. URL type
1 <input type = "url" placeholder = "Enter the url" name = "url"/>
The system automatically checks whether the URL format is used.
4. range type
1 <form oninput="output.value=parseInt(range.value)">2 <input type="range" min="0" max="100" step="5" name="range" value="0"/>3 <output name="output">0<output/>4 </form>
Range is the effect of a slide. You can use the value represented by the display slide with the <output> label (the form label is added with oninput = "output. value = parseInt (range. value )")
5. date type
Datetime type not supported by Google Browser
6. color type
1 <input type="color" name="colordemo"/>
7. Automatic form prompt
1 <input type = "text" autocomplete = "on" name = "demoAutoComplete" list = "autoNames"/> 2 <datalist id = "autoNames"> 3 <option value =" lab Building "> </option> 4 <option value =" HTML5 "> </option> 5 <option value =" input tag "> </option> 6 </datalist>
- New Form attributes
1. Add attribute for input tag
2. New form attributes
- File operation API
It mainly includes several JS objects: FileList, Blob, File, and FileReader:
FileList:
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
