Advantages of Html5 + CSS3 and html5css3
I. Most browsers support this feature, and the earlier version is okay.
I want to read this information to develop a mobile app website (there are three solutions, this is a backup solution). You can develop a responsive website and cross-platform it from the development platform.
Introducing Modernizr to Html5 web pages enables IE to support new HTML5 elements.
Rapid development of HTML5 sample files (html5boilerplate.com)
2. save time and effort on layout and labels
[Html] view plaincopyprint? View the CODE piece derived from my CODE piece on CODE
<Header>
<! -- Semantics is equivalent to <div class = "header"> -->
<Nav> navigation </nav>
</Header>
In this way, developers do not need to mark the end position of the tag, which is convenient for locating and easy for search engines to determine.
<Header> define the header of a page or segment;
<Footer> defines the end of a page or segment;
<Nav> defines the (main) navigation area of a page or segment;
<Section> logical area or content combination of a page, for example, one for "Introduction" and the other for "News list ".
<Article> defining a body or a complete content that can be directly pasted somewhere else has an independent meaning, such as "blog body ".
<Aside> define supplementary or related content, sidebar, and advertisement bar.
<A> a tag can contain multiple tags.
[Html] view plaincopyprint? View the CODE piece derived from my CODE piece on CODE
<A href = "index.html">
<Vedio> and <audio> Add videos and audios quickly
[Html] view plaincopyprint? View the CODE piece derived from my CODE piece on CODE
<Video src = "myVideo.ogg" controls width = "640" height = "480"> the following message is displayed: you are not using a HTML5-supported browser </video> // controls playback control bar; supports ogg and mp4 formats. Responsive videos: In normal cases, you can use max-width: 100% height: auto. If an external <iframe> video is used, the FitVids jQuery plug-in is used.
Iii. Offline Web Applications
You can use the. manifest file to specify which files can be accessed offline.
4. More flexible CSS3
01. text can be displayed in multiple columns
Column-width: 12em; // It seems that many browsers are invalid ~
02. Numerous Selector
Body [id = "2 ^"] {} // tag whose id starts with "2"
Li: first-child, li: last-child // For the first and last items in the list
[Html] view plaincopyprint? View the CODE piece derived from my CODE piece on CODE
Li: nth-child (2n + 1) // starting from the "1" li element, each "2" color is red
Color: red;
}
<Ul>
<Li> zookeeper </li>
<Li> 22222222 </li>
<Li> 33333333 </li>
</Ul>
P: first-line {color: red;} // The first line of text is red.
V. Richer CSS3
Traditional CSS achieves rounded corners, shadows, and other effects. Generally, images must be used. Using CSS3 instead of images can effectively reduce http requests and achieve faster webpage loading speeds. Different browsers may use different codes for different CSS features. You can use the pre-processor SASS or LESS for processing.
01. CSS3 easily applies border rounded corners
[Html] view plaincopyprint? View the CODE piece derived from my CODE piece on CODE
<Html>
<Head>
<Style>
A
{
Border-top-left-radius: 8px;/* rounded corner position and size */
Border-top-right-radius: 8px;
Padding: 0.8em;
}
</Style>
</Head>
<Body>
<Br/>
<A href = "#"> rounded corner </a>
</Body>
</Html>
02. You can use @ font-face to embed a webpage font, or use a scalable ICON (non-image format, fico. lensco. be)
Supplement:
HTML5 Boilerplate is used to write HTML5 websites. It has an organized folder structure and CSS files, best practices for adding the current Code, bug fixes for browsers, and js libraries.
What about the advantages and obvious advantages? But if you want to get started, we suggest you take a look at the cross-platform development technology launched by Beijing wind network-HTML5 + CSS3 from getting started to proficient (with two practical projects, taking into account the PC Edition & mobile edition web page + mobile game development) Course, it will always be helpful to you, and you will be taken into the ranks of cross-platform programs!
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
