What are the results of the new interactive features page for HTML 5 & CSS 3?

Source: Internet
Author: User
Keywords Html features new interactions now real

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall


This picture of the title of this article is made with Phosotshop. However, in search engines you can not search it, the search engine is not strong enough to recognize the text inside the picture. And because the size of the picture is not too small, may slow Internet users in the browsing time had to patiently wait for the image refresh. So is there a new way to avoid these drawbacks?

Yes, HTML5 and CSS3 can meet your needs. Even, it can do more and better. As a designer, we should understand what they are and what they are, and thus further reflect on what we can do through HTML5 and CSS3.

What are HTML5 and CSS3

HTML and CSS are not hard to understand. HTML is the main language that makes up a Web page. In this language, we can explain to the computer page format, content, display effects, and so on. CSS is a language designed to control the display of Web pages. This time the problem comes out, why do we have to use CSS alone, HTML is not the same can control the display of Web pages? To answer this question, let me give you a simple example:


Have you found that if you describe too many things and want to describe things clearly, we have to repeat a lot of information? The same is true of the page language, in which case it is messy and difficult to get a clue. By integrating the language of control display into CSS, we can not only guarantee the simplicity of the main part of the page, but also make it easy to reuse various language collections.

HTML5 and CSS3 are the latest versions of HTML and CSS, and they are not yet standard-setting, but the new features that have been unveiled have been a thrill.

New for HTML 5

1. New Content Tags


The content label levels in the HTML4 are the same and cannot differentiate between parts. The content tags in the HTML5 are independent, different levels, search engines and statistical software can quickly identify the contents of each part.

2. Better Tabular system


Now, you can discard JavaScript or PHP and simply define the table by HTML5. You can define the input format for each table cell, or you can define whether the unit is required and so on.

3. Audio, Video API



HTML5 not only allows you to integrate video and audio directly into your Web pages, but also provides a rich set of APIs to control media playback, and the elements used to control media playback can be edited. As a result, HTML5 has actually been able to replace the usual flash plug-ins on video and audio levels.

4. Canvas (Canvas) API


Drawing graphics in a Web page has always been a big problem, and we have to use plug-ins such as Flash, Silverlight, and so on. However, HTML5 allows you to draw directly on a Web page, even allowing you to generate more interaction with the web, such as drawing graphics, zooming in and out, and so on. The legend is a small game made with HTML5.

5. Geographic (geolocation) API


HTML5 provides an application interface geolocation API for geo-information. Through this API, Web pages can be IP,GPS to access the user's geographic information, and users can choose whether to turn off the feature.

6. Web page storage (Web Storage) API


HTML5 provides a web-store API that facilitates offline use of Web applications. In addition, the new API has the advantages of high security, efficiency and greater space relative to cookies.

7. Drag release (Drag and Drop) API


We can through the HTML5 drag and drop API to complete the drag-and-drop effect on the Web page, to avoid the previous Web page in the drag and drop process need to constantly modify the location of elements, code a wide range of drawbacks.

CSS3 new Features

1. RGBa


CSS3 's Rgba new features allow you to set the color and transparency of each element. The original opacity command can only set the element and its child elements.

2. Multi-column layout


CSS3 the new multiple-column layout selector generates a multiple-column layout without the HTML layout tag, while ' Number of columns ', ' column widths ', and ' column spacing ' can be defined.

3. Round Corners


The fillet function may be the most useful feature provided by CSS3. With Border-radius, you can add rounded corners to the specified HTML element without any difficulty. And you can also define the size of the fillet and which corner is rounded and which is not rounded.

4. @font-face


When a Web page displays a font that is not installed by a user, the @font-face feature provided by CSS3 automatically downloads the corresponding fonts from the network silently. So that designers can play more freely, regardless of whether the user's machine installed the appropriate font.

5. Other Features

In addition, CSS3 also brings us a gradient, prevents long string overflow, multiple backgrounds, and uses pictures as an element border.

Using a good CSS3, you can get more quickly in the past with a lot of plug-ins to get the effect. With the use of the elements themselves to replace most of the pictures, the speed of the Web page will be increased, which is originally a picture of the content, can also be retrieved by the search engine.

Compatibility of HTML5 and CSS3

The standards of HTML5 and CSS3 have not been formally completed and the level of support from browsers varies. It is essential to understand the compatibility of HTML5 and CSS3. The following connection is a website dedicated to tracking HTML5 and CSS3 compatibility, and interested friends can click to view:


Some resources you might be interested in.










Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.