Share people: Geese
The development of the Internet has always been the emergence of new technologies, and HTML5 and CSS3 have been discussed recently, for every Internet developer, especially front-end developers, are full of curiosity and desire. So what are the things that HTML5 and CSS3 that brighten our eyes? I in the webrebuild Beijing exchange and pearl milk tea to help you share the "secret HTML5 and CSS3", PPT here:
Http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8
The predecessor of the HTML 5 draft, named Web Applications 1.0, was presented by WHATWG in 2004 and was accepted by the consortium in 2007, and a new HTML team was set up. On January 22, 2008, the first official draft was issued. HTML 5 is the most significant leap in web development standards in nearly a decade. Unlike previous versions, HTML 5 is not just for Web content, its new mission is to bring the Web into a sophisticated application platform, where video, audio, graphics, animations, and interactions with computers are standardized on the HTML 5 platform. So let's take a look at the technical overview of HTML5:
HTML5 added a lot of multimedia and interactive elements such as video, audio, in the HTML4 if you want to embed a visual or audio words need to introduce a large section of code, and compatible with each browser, and HTML5 only by introducing a tag can be as convenient as the IMG tag. In terms of page layout and content implementation HTML5 adds a lot of structured tag elements as well as block-level and semantic elements, and if you want to use HTML to represent a file's upload progress bar, you can use the progress element in HTML5 to represent It has a Value property that describes how many tasks have been completed, and a property Max describes how much of the task is required, as well as the position attribute (read-only) of the progress bar through the DOM interface, which is the percentage of task completion. YouTube has made an attempt at HTML5 technology, HTTP://WWW.YOUTUBE.COM/HTML5 (need to flip the wall) is a demo with HTML5, from the whole page source code, very concise. Of course, HTML5 also added some attributes to some elements, such as input and textarea placeholder properties, equivalent to the input box prompts, script has a async property can affect the loading and execution of the script. For all the properties that are common to all HTML, we usually call it "global properties", such as class, ID, TabIndex, TITLE,HTML5 also add some global properties, such as contenteditable, ContextMenu, hidden, and so on. HTML5 also adds support for micro-data, such as HTML5 new item, Itempro, subject, and more.
Of course, HTML5 also removed some of the elements of the presentation page, such as font, center, strike, etc., which should be CSS to do, so it is very good to understand, but also to remove some of the impact of Web site accessibility elements such as frame, frameset, Noframe and some of the less commonly used elements such as acronym, but using ABBR to represent abbreviations. HTML5 also removes some familiarity with HTML that affects client-side compatibility, such as Link's Rev attribute, TD's scope property; HTML5 also removes some properties that represent the page presentation, such as the align,bgcolor properties of some elements.
HTML5 provides powerful control types such as URLs, emails, date, tel, etc., powerful constraint attributes, such as required representing required, file upload accept attributes, and some form repeating element model support, HTML5 can also set up submissions in the form of XML submissions, so that the data that the server receives will be in XML format, and the HTML5 form is defined as "Web Forms 2.0", and opera9.5+ support for Web Forms 2.0 is now perfect.
Click here to view the Web Forms 2.0 DEMO, which requires opera9.5+
HTML5 many of the DOM level 2 HTML are inherited from HTMLDocument interfaces, and of course HTML5 has some notable new members on the DOM, such as: Support Getelementsbyclassname, You can select an element based on its class name, and GetSelection () will return the currently selected object, with two methods on the selector queryselector and Queryselectorall can get the elements to query based on the CSS selector. Equivalent to the Y.one and Y.all in YUI3.
What APIs do HTML5 add to JavaScript?
Did HTML5 make you heartbeat? So when will HTML5 be standard? It is said to wait until 2022, there is a very interesting website http://ishtml5readyyet.com/tell you how many days HTML5 will really come.
Click to view HTML5 DEMO, you need firefox3.5+/safari4.0+
CSS3CSS3 is not only a novel technology for our web developers, but more importantly, these new concepts of Web applications to bring us more unlimited possibilities, but also greatly improve our development efficiency. We will no longer have to rely on pictures or JavaScript to do the same with rounded corners, backgrounds, user-defined fonts, 3D animations, gradients, Box shadows, text shadows, transparency, and so on to improve the quality of web design features.
With the property selector we can easily select an element based on the beginning or end of the property value. Using the sibling selector, you can select a sibling node or an element adjacent to the next node, using a pseudo class selector to select a certain element, and CSS3 's rich support on the selector allows us to control the style flexibly, Instead of adding a class name such as "odd" or "even" to them in order to select some elements.
There is a survey that developers are looking forward to the most CSS3 features, the final number of votes is the most "rounded", yes, rounded corners this function can give us the front-end engineers save a lot of time and energy to cut the map piece a rounded corner. CSS3 also supports shadows, Box shadows, and Text shadows, gradients, which you may have seen before via IE filters, in fact CSS3 is more convenient to implement. @font-face can customize the font, if in the traditional way, VD a special text with a design map to you to enable you to achieve it you may be made into a picture, and through the CSS3 with @font-face on it. CSS3 for continuous text wrapping also added a property word-wrap, you can set it as normal (no line) or Break-word (line), which solves the problem of page dislocation of consecutive English characters, and does not need to intercept the sequential characters. Using CSS3 You can also add a background to the border, which is also an example of an application on the iphone. CSS3 supports background resizing on the background, such as when you use a large image to make a small background of the element, you can adjust the size of the background image by background-size to fit this element. The difference between CSS3 support opacity, RGBA and hsl/a, opacity and RGBA is that the transparency of opacity settings also has an impact on its content, and RGBA only affects the elements you apply. CSS3 provides support for the box model in the layout, can be set box-sizing to Content-box or Border-box, the application of Content-box is the normal mode, The box model applied to Border-box and IE5.5 is very similar, that is, the width of the elements including border and padding, this may be more convenient in the layout, without going to the end of this element will occupy how much width, and content-box also need to manually calculate the actual width of this element.
The types of animations supported by CSS3 are: Transform (transforms), transition (transitions), and animation (animations). You can set Transition,transiton and animation for specific properties, animation animations are defined by themselves, and more often than not, scripting developers are more complex.
To use most of the CSS3 features, we have to use the manufacturer's proprietary extensions with the original attributes. The reason is that until now, most browsers support only some of the CSS3 properties. The most common private properties are used for WebKit core browsers (Safari, for example), starting with-webkit-and Gecko core browsers (for example, Firefox), starting with-moz-, and Konqueror (-khtml-), Opera (-o-) and Internet Explorer (-ms-) have their own property extensions (currently only IE8 support-ms-prefixes)
I think the first is to follow the principle of graceful demotion, such as the rounded corners mentioned above, we can apply the CSS fillet to browsers that support fillet, such as Firefox and Safari, while browsers that do not support CSS rounded corners are displayed at right angles. The second is for browsers that do not support CSS3 can use JavaScript to implement, such as CSS3 any element support: hover pseudo class, we can only support links: hover IE6 with JS to achieve. The last is to promote the new technology to users or bosses while also pay attention to their goals and feasibility, not for technology and technology.
Click to view CSS3 DEMO, you need firefox3.5+/safari4.0+