Why use HTML5+CSS3

Last Update:2017-09-26 Source: Internet

Author: User

Tags html5 boilerplate

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

<header>
<nav> Nav </nav>
</Header>

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

<a href="index.html"><h2> </h2><img src="home.jpg"></a>

<vedio>, <audio> Quick Add video, audio

<video src="Myvideo.ogg" Controls width="640" height= "480"> You are not prompted to use the HTML5-enabled browser </video>//controls to play the control bar; ogg and MP4 formats; responsive video: Normal conditions can be used max-width:100% Height:auto, if external <iframe> video, use Fitvids's 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

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>
<head>
<style>
A
{
background-color:red;
border-top-left-radius:8px;/* fillet position and size */
border-top-right-radius:8px;
Padding:0.8em;
}
</style>
</head>
<body>
<br />
<a href="#"> Rounded corners </a>
</body>
</html>

02. You can use @font-face to embed Web page fonts, you can also use the scalable icon (not picture format, fico.lensco.be)

03. Use Transparent Channels

<style>
body{
Background:url (01.jpg) no-repeat;
}
#wrapper {
Background-color:hsla (100,100%,100%,0.7);/*HSL is a 360 degree hue ring */
width:500px;
height:500px;
}
</style>
</head>
<body>
<div id="wrapper">
Transparent area
</div>
</body>

04 Text Shadows

[HTML]View PlainCopy

text-shadow:5px 5px 2px #333; (plus or minus) right, bottom, shadow degree, color

Emboss Effect:

[HTML]View PlainCopy

<head>
<style>
#wrapper {
height:500px;
Background-color:activeborder;
text-shadow:0px 1px 0px Hsla (0,0%,100%,0.75);
font-size:30px;
}
</style>
</head>
<body>
<div id="wrapper">
Emboss effect
</div>
</body>

Similarly, you can use the box shadow Box-shadow to shadow a photo
05 Color Gradient

[HTML]View PlainCopy

Background:linear-gradient (90deg,red 0%,blue 50%, #ffffff 100%);

You can control the linear gradient direction gradient position, etc., as well as radial (spherical) gradients
06 Writing 2D variants

More code parameters, the site http://www.useragentman.com/matrix/to make it

There is also a picture 3D effect, seemingly not used much. http://webdesignerwall.com/There's a lot of cool stuff about this, and I've also found an article in it that's translated: http://blog.csdn.net/wowkk/article/details/12572447

Finally, the advantages of the form, HTML5 can be without the help of jquery, the user's input behavior judgment (some browsers on the HTML5 form support is not very good, can be solved by webshims Lib).

<head>
<style>
/* Pseudo Selector */
. input:required/* If you do not fill in the required fields, the border becomes red */
{
border:1px solid #f00;
}
. input:focus:invalid/* If the data entered is invalid */
{
}
. input:focus:invalid/* If the data entered is correct */
{
}
</style>
</head>
<body>
<form method="POST">
<div>
<label for="UserName"> enter your user name </label>
<input id="userName" type= "text" placeholder="For example: Admin" Required aria-required="true" autofocus />
<!--placeholder indicates prompt input
Required aria-required="true" is required;
Autofocus indicates that the cursor focus is automatically obtained
The Pattern property can be filled with regular expressions to determine the user's input behavior
-->
<input type="search" value="similar to text, some browser performance is more powerful" />
<!--In addition to Type=number and the like.
<input type="Submit" value= "ok" />
</div>
</form>
</body>

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.

Why use HTML5+CSS3

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More