When starting a new project, you need a startup template. Here is a concise and clean template that can be used as a basis for HTML5 projects.
HTML5 Startup Template
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>Untitled</title>
<!--[If Lt IE 9]>
<script src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>
<! [endif]-->
<body>
</body>
Get the Position form (Google Maps)
Here is a simple but powerful form code that the user can enter his location to indicate to a particular place. is useful for contact pages.
<form action= "Http://maps.google.com/maps" method= "get" target= "_blank" >
<label for= "Saddr" >enter your location</label>
<input type= "text" name= "Saddr"/>
<input type= "hidden" name= "Daddr" value= "5th Ave New York, NY 10018 (Empire State Building)"/>
<input type= "Submit" value= "Get Directions"/>
</form>
BASE64 encoded blank GIF picture
I don't recommend using a transparent GIF, but I know that even in the 2013, a lot of people are still using them. If you are one of them, you may enjoy this BASE64 encoded 1 * 1px blank GIF. This way is better than using the image.
Regular expression of Email checksum
HTML5 has done a lot of good to form functionality, such as allowing the use of regular expression patterns to validate e-mail messages.
<input type= "text" title= "email" required pattern= "[^@]+@[^@]+. [A-za-z] {2,6} "/>
Embed Flash
Do you often need to embed Flash files in HTML pages? If so, you will better save the following Flash embedding code for future use.
<object type= "Application/x-shockwave-flash"
Data= "your-flash-file.swf"
Width= "0" height= "0" >
<param name= "movie" value= "your-flash-file.swf"/>
<param name= "Quality" value= "High"/>
</object>
HTML5 Video with Flash fallback
Another feature of the new HTML5 specification is the video tag, which allows you to easily embed the file. Unfortunately, some browsers can't handle embedded HTML5 video. As a result, this is compatible with the old browser code, which uses Flash in browsers that do not support HMTL5 video.
<video width= "640" height= "360" controls>
<source src= "__video__. MP4 "type=" Video/mp4 "/>
<source src= "__video__. OGV "type=" Video/ogg "/>
<object width= "640" height= "360" type= "Application/x-shockwave-flash" data=. SWF ">
<param name= "movie" Value= "__flash__". SWF "/>
<param name= "Flashvars" value= "controlbar=over&image=__poster__". jpg&file=__video__. MP4 "/>
title= "No video playback capabilities, please download the video below"/>
</object>
</video>
Calling and texting
In mobile Web pages, there is a quick way to build call and SMS links. Here is an example code, which is stored in your code fragment library.
<a href= "tel:1-408-555-5555" >1-408-555-5555</a>
<a href= "sms:1-408-555-1212" >new SMS Message</a>
Auto Completion function
Using the DataList element, HTML5 allows you to create a list of input fields that automatically complete the data. It's super useful! Here is a sample code.
<input name= "Frameworks" list= "frameworks"/>
<datalist id= "Frameworks" >
<option value= "MooTools" >
<option value= "Moobile" >
<option value= "Dojo Toolkit" >
<option value= "JQuery" >
<option value= "YUI" >
</datalist>
Downloadable files
HTML5 allows you to force download files using the Download property. Here is a standard link to a downloadable file.
<!--would download as "Expenses.pdf"-->
<a href= "/files/adlafjlxjewfasd89asd8f.pdf" download= "expenses.pdf" >download Your Expense Report</a>
Crash IE6
The Internet Explorer 6 market share that brought nightmare to front-end developers has dropped a lot in 2013. But some people are still using it. If you want to get rid of this old browser, here is a very interesting code to include in your HTML page and let IE6 crash.
Thanks to/index.html teaching, here is my own classification summary:
Search Classification Keywords: multimedia class, text paragraph class, navigation list form class, button event drawing class, page structure cache class
Multimedia:
Embed video <Video>
Controls= "Controls" displays controls to the user, such as play buttons; autoplay= "AutoPlay" autoplay; loop= "loop" loop playback
Video resource relative URL-point to a file within a site (such as href= "Song.ogg")
<video width= "height=" controls= "Controls" >
<source src= "/i/movie.ogg" type= "Video/ogg" >
<source src= "/i/movie.mp4" type= "Video/mp4" >
Your Browser does not support the "video tag."
</video>
--------------------------------------------------------------------------------------------------------------- -------
Embed Audio <audio>
Controls= "Controls" displays controls to the user, such as play buttons; autoplay= "AutoPlay" autoplay; loop= "loop" loop playback
<audio src= "/i/horse.ogg" controls= "Controls" >
Your Browser does not support the audio element.
</audio>
--------------------------------------------------------------------------------------------------------------- -------
label defines an image in an HTML page.
Note that technically, an image is not inserted into an HTML page, but is linked to an HTML page. The role of label is to create placeholders for the referenced image.
tags have two required properties: SRC and alt. Alt specify alternate text for the image
--------------------------------------------------------------------------------------------------------------- -------
<a> label defines a hyperlink that is used to link from one page to another, and the most important attribute is the HREF attribute, which specifies the target of the link
The target property is used to specify how the destination should be opened: _blank (new window open) _self (open in the same window) _parent (Open in parent window) _top (Open in window body)
<a href= "" >W3School</a>
<a target= "Value" >
--------------------------------------------------------------------------------------------------------------- -------
Text paragraph class:
<article> tags define independent content that may be used in newspaper articles, forum posts, user reviews, etc.
<article>
<a href= "http://www.apple.com" >safari 5 released</a><br
7 June 2010. Just after the announcement's new IPhone 4 at WWDC,
Apple announced the release of Safari 5 for Windows and Mac ...
</article>
--------------------------------------------------------------------------------------------------------------- -------
The <aside> label defines what is outside of its contents and can be used as the sidebar of the article
<p>me and my family visited the Epcot center this summer.</p>
<aside>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
--------------------------------------------------------------------------------------------------------------- -------
<b> labels define bold text (bold text, play a role of emphasis)
<p>it is a <b>red</b> house with a <b>blue</b> door.</p>
--------------------------------------------------------------------------------------------------------------- -------
BDI refers to the bidi quarantine,<bdi> tag, which allows you to set up a piece of text that is detached from the text orientation of its parent element, which is useful when publishing user comments or other content that you cannot fully control
<ul>
<li>username <bdi>bill</bdi>:80 points</li>
<li>username <bdi>steve</bdi>: points</li>
</ul>
--------------------------------------------------------------------------------------------------------------- -------
<blockquote> label definition from another source block references all text between,<blockquote> and </blockquote> is separated from the regular text, often indented on the left and right sides, And sometimes italic is used. In other words, block references have their own space.
<blockquote> Imperialism is a paper tiger ... </blockquote>
--------------------------------------------------------------------------------------------------------------- -------
<br/> Label Insert simple line break, note no terminator
This text contains<br/>a line break
--------------------------------------------------------------------------------------------------------------- -------
Title of <caption> label definition table
<caption> label must be placed directly after <table> tag
<table>
<caption> Monthly Deposit </caption>
<tr>
<th> Month </th>
<th> Deposit </th>
</tr>
<tr>
<td> January </td>
<td>1000 Yuan </td>
</tr>
</table>
--------------------------------------------------------------------------------------------------------------- -------
<del> label defines deleted text in a document
A dozen is <del>21</del> pieces
--------------------------------------------------------------------------------------------------------------- -------
Because the H element has exact semantics, you should carefully select the appropriate tag level to build the structure of the document. Therefore, do not use the title tag to change the font size in the same row. Instead, we should use cascading style sheet definitions to achieve a pretty display effect.
--------------------------------------------------------------------------------------------------------------- -------
The <mark> label defines the marked text. Use <m> labels when you need to highlight text
<p>do not forget to buy <mark>milk</mark> today.</p>
--------------------------------------------------------------------------------------------------------------- -------
<span> tags are used to group inline elements in a document.
Use the span element to group inline elements so that they can be formatted by styles.
<p>this is a paragraph <span style= "color: #00ff00;" >this is a paragraph</span>
This is a paragraph</p>
--------------------------------------------------------------------------------------------------------------- -------
<abbr> abbreviation Label, abbreviated People ' s Republic to PRC
The <abbr title= "People ' Republic of" >PRC</abbr> was founded in 1948.
--------------------------------------------------------------------------------------------------------------- -------
Navigation List Form class:
<ul> Label definition unordered list
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
--------------------------------------------------------------------------------------------------------------- -------
<select> tags create a drop-down list
<select>
<option value= "Volvo" >Volvo</option>
<option value= "Saab" >Saab</option>
<option value= "Opel" >Opel</option>
<option value= "Audi" >Audi</option>
</select>
--------------------------------------------------------------------------------------------------------------- -------
<nav> label defines the part of the navigation link
<nav>
<a href= "Index.asp" >Home</a>
<a href= "html5_meter.asp" >Previous</a>
<a href= "html5_noscript.asp" >Next</a>
</nav>
--------------------------------------------------------------------------------------------------------------- -------
The <keygen> label sets the key Pair builder field for the form.
When submitting a form, the private key is stored locally and the public key is sent to the server.
<form action= "demo_keygen.asp" method= "Get" >
Username: <input type= "text" name= "Usr_name"/>
Encryption: <keygen name= "Security"/>
<input type= "Submit"/>
</form>
--------------------------------------------------------------------------------------------------------------- -------
<form> label tags are used to create HTML forms for user input.
A FORM element contains one or more form elements, such as:
button
Input
Keygen
Object
Output
Select
TextArea
<form action= "form_action.asp" >
Name: <input type= "text" name= "fname" value= "Mickey"/><br/>
Last name:<input type= "text" name= "lname" value= "Mouse"/><br/>
<input type= "Submit" value= "Submit"/>
</form>
--------------------------------------------------------------------------------------------------------------- -------
<fieldset> tags are used to logically combine elements from a form.
<fieldset> labels draw borders around related form elements.
<legend> label defines the title for the fieldset element.
To group related elements in a form:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type= "text"/><br/>
Email: <input type= "text"/><br/>
Date of birth: <input type= "text"/>
</fieldset>
</form>
--------------------------------------------------------------------------------------------------------------- -------
Comment label, where content is not displayed
<!--This is just a comment-->
--------------------------------------------------------------------------------------------------------------- -------
Button Event Drawing class:
<area> label defines the area within the image map (the image map refers to an image with a clickable region), and the region element is always nested inside the <map> tag
Shape definition Click area shape, coords define regional coordinates, HREF defines link address
<map id= "Planetmap" >
<area shape = "rect" coords = "0,0,110,260" href = "sun.htm" alt= "Sun"/>
<area shape = "Circle" coords = "129,161,10" href = "mercur.htm" alt= "Mercury"/>
<area shape = "Circle" coords = "180,139,14" href = "venus.htm" alt= "Venus"/>
</map>
--------------------------------------------------------------------------------------------------------------- -------
<button> Label definition button, where you can place content, such as text or images, inside a BUTTON element. This is the difference between the element and the button created by the INPUT element.
autofocus= "Autofocus" Automatically gets focus
Type has submit submission button, reset reset button (empty data)
<button type= "button" >click me!</button>
--------------------------------------------------------------------------------------------------------------- -------
<canvas> tags define graphics, such as charts and other images, you can set Height,width
<canvas> tag is just a graphics container, you must use a script to draw the graphic
<canvas id= "MyCanvas" ></canvas>
<script type= "Text/javascript" >
var Canvas=document.getelementbyid (' MyCanvas ');
var ctx=canvas.getcontext (' 2d ');
ctx.fillstyle= ' #FF0000 ';
Ctx.fillrect (0,0,80,100);
</script>
--------------------------------------------------------------------------------------------------------------- -------
<script> tags are used to define client script, such as JavaScript.
The script element can either contain a scripting statement or point to an external script file through the SRC attribute.
JavaScript is typically used for image manipulation, form validation, and dynamic content changes.
<script type= "Text/javascript" >
document.write ("Hello world!")
</script>
--------------------------------------------------------------------------------------------------------------- -------
Page structure Caching class:
HTML5 file declaration, placed before <! DOCTYPE html>
--------------------------------------------------------------------------------------------------------------- -------
Offline Caching:
<! DOCTYPE html>
...
Mainfest File configuration:
Cache MANIFEST//files listed under this heading will be cached after the first download, available offline
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
Network://The files listed under this heading need to be connected to the server and will not be cached, or use a * to represent other files to be networked
Login.asp
Fallback://The documents listed under this heading provide a fallback page when the page is inaccessible (for example, 404 pages)
/html5//404.html
--------------------------------------------------------------------------------------------------------------- -------
<address> tags, provide contact, generally used for headers or footers
<address>
Written by w3school.com.cn<br/>
<a href= "mailto:us@example.org" >email us</a><br/>//email
Address:box 564, disneyland<br/>
Phone: +12//phone
</address>
--------------------------------------------------------------------------------------------------------------- -------
<base> label to specify the default address or default target for all links on the page, place the <base> tag in the first element of the head element so that other elements in the top can take advantage of the information in the <base> element.
The following is equivalent to
<base href= "/i/"/>
--------------------------------------------------------------------------------------------------------------- -------
The <footer> tab defines the footer for section or document.
Typically, the element contains the creator's name, the date the document was authored, and/or contact information.
If you use footer to insert contact information, you should use the <address> element within the footer element.
<footer>this document is written in 2010.</footer>
--------------------------------------------------------------------------------------------------------------- -------
The head element is the container for all the header elements. Elements within The following tabs are available in the head section:
<base>
<link>
<meta>
<script>
<style>
<title>
<title> title of document </title>
--------------------------------------------------------------------------------------------------------------- -------
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
