Advantages of using Html5 CSS3_html/css_WEB-ITnose

1: Most browsers support it, and lower versions are no problem. I read some information in this area to build a mobile application website (there are three options, this is a backup option), you can Developing responsive websites can be cross-platform without the development platform. Introducing Modernizr into Html5 web pages will enable IE to support new HTML5 elements. Rapid development of HTML5 boilerplate files (html5boilerplate.com)

2: Layout and labels save time and effort [html] view plaincopyprint? View the code piece on CODE and derive it from my code piece

nav>Navigation

This way developers don’t have to mark the end position of the tag, which will be very convenient for positioning and easy for search engines. Make judgments. Define the header of the page or section; Define the footer of the page or section; Define the (main) navigation area of the page or section; A logical area or combination of content on a page, such as one for "Introduction" and another for "News List". Defines the main text or a complete piece of content, which can be directly pasted into other places with independent meaning, such as "blog text". Define supplementary or related content, sidebar, advertising column, etc. tags can contain multiple tags [html] view plaincopyprint? View code snippets on CODE derived to my code snippets

一

、 Quickly add video and audio [html] view plaincopyprint? View the code piece on CODE derived to my code piece

This reminds you that you are not using a browser that supports HTML5 //controls playback control bar; supports ogg and mp4 formats; responsive video: max-width can be used in normal situations :100% height:auto, if it is an external video, use FitVids’ jQuery plug-in

Three: Offline Web Application Specify which files can be accessed offline through the .manifest file

Four: More flexible CSS3 01. Can display text in multiple columns column-width:12em; //I tried several browsers and it seems that many of them are invalid~

02. Numerous selectors body[id="2^"]{} //Tag with id starting with "2" li:first-child, li:last-child //For the first and last items of the list

[html] view plaincopyprint? View the code piece on CODE Derived to my code piece

li:nth-child (2n 1) // Starting from the "1" li element, every "2" color is red 🎜> ;33333333

p::first-line{color:red;} //The first line of text is red

five : Richer CSS3 Traditional CSS achieves effects such as rounded corners and shadows, which are generally achieved with the help of images. Using CSS3 instead of images can effectively reduce http requests and achieve faster web page loading speeds. Different browsers may use different codes for different CSS features, which can be processed using the preprocessor SASS or LESS. 01.CSS3 easily applies border rounded corners

[html] view plaincopyprint? View the code piece on CODE Derived to my code piece

🎜>

border-top-left-radius:8px;/*rounded corner position and size*/

border-top-right-radius:8px;

padding:0.8em;

}

>

02. You can use @font-face to embed web fonts, and you can also use scalable ICON (non-image format, fico.lensco .be)

Supplement: Use HTML5 Boilerplate to write HTML5 websites, it comes with an organized folder structure and CSS files, adding the best of current coding Practice, browser bug fixes and js libraries.

How about it, the advantages are obvious, but if you want to really get started, it is recommended to learn the "Cross-platform development technology-HTML5 CSS3 from entry to proficiency" launched by Beifeng.com (with two practical projects, taking into account the PC version&& Mobile web and mobile game development)” course can always help you in essence, and you can now step into the ranks of cross-platform programmers!