Home > Developer > Web Develop
A: Most browsers support, low version also no problem
I read this information, is to do the mobile phone application site (there are three scenarios, this is a backup plan), you can develop a responsive website, can be separated from the development platform for cross-platform.
The introduction of Modernizr in the HTML5 Web page will allow IE to support HTML5 new elements.
HTML5 template file Rapid development (html5boilerplate.com)
Two: The layout, the label saves time and effort
[HTML] view Plaincopyprint?
<!--semantics equivalent to <div class= "header" >-->
<nav> Navigation </nav>
This way, developers do not have to mark the end of the label, the location will be very convenient, but also easy for the search engine to judge.
<footer> define the tail of the page or section;
<nav> define the (main) navigation area of the page or section;
<section> the logical area or content combination of a page, such as one for "introduction" and another for "News list".
<article> define the body or a complete content, can be directly pasted into other places have independent meaning, such as "blog text."
<aside> definition of supplemental or related content, sidebar, banner, etc.
<a> tags can contain multiple labels
[HTML] view Plaincopyprint?
<a href= "index.html" >
<vedio>, <audio> Quick Add video, audio
[HTML] view Plaincopyprint?
<video src= "Myvideo.ogg" Controls Width= "640" height= "480" > Here you are prompted not to use a browser that supports HTML5 </video>//controls play control bar Support ogg and MP4 format; Responsive Video: Normal situation can use max-width:100% Height:auto, if external <iframe> video, use fitvids jquery plugin
Three: Offline Web applications
Specify which files can be accessed offline through the. manifest file
Four: more flexible CSS3
01. You can display text in multiple columns
Column-width:12em; Tried a few browsers like a lot of invalid ~
02. A wide selection of selectors
Body[id= "2^"]{}//id a label beginning with "2"
Li:first-child, Li:last-child//For List of items
[HTML] view Plaincopyprint?
Li:nth-child (2n+1)//First "1" Li element, each "2" color is red
color:red;
}
<ul>
<li>????? </li>
<li>22222222</li>
<li>33333333</li>
</ul>
p::first-line{color:red;}//The first line of text is red
Five: Richer CSS3
Traditional CSS to achieve rounded corners, shadows and other effects, generally with the help of pictures to achieve, using CSS3 instead of pictures, can effectively reduce the HTTP request, get faster page loading speed. Different browsers may use different code for different CSS features, which can be handled using the preprocessor sass or less.
01.CSS3 easy to apply border rounded corners
[HTML] view Plaincopyprint?
<style>
A
{
border-top-left-radius:8px;/* fillet position and size */
border-top-right-radius:8px;
Padding:0.8em;
}
</style>
<body>
<br/>
<a href= "#" > Rounded corners </a>
</body>
02. You can use @font-face to embed Web page fonts, you can also use the scalable icon (not picture format, fico.lensco.be)
Add:
Use HTML5 boilerplate to write HTML5 website, it has organized folder structure and CSS files, add the current coding best practices, browser bug fixes and JS library.
How, the advantages are obvious, but if you want to really get started, it is recommended to learn the North Wind network launched the " Cross-platform development technology-HTML5+CSS3 from the beginning to proficient (with two actual projects, taking into account the PC version && mobile page + Hand Tour Development)" course, Can always be in essence to help you, from this step into the cross-platform of the ranks of the program!
Benefits of using HTML5+CSS3
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
