Demystifying HTML5 and CSS3

The development of the Internet is always spawning the emergence of new technologies, and HTML5 and CSS3 are hot topics that have been discussed recently. For every Internet developer, especially front-end developers, they are full of curiosity and desire. So what are the things about HTML5 and CSS3 that make us shine? I shared "Revealing the Secrets of HTML5 and CSS3 " with you at the WebRebuild Beijing Exchange Conference and the Pearl Milk Tea Gang. The PPT is here:
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

The predecessor of the HTML 5 draft was called Web Applications 1.0. It was proposed by WHATWG in 2004 and accepted by W3C in 2007, and a new HTML working team was established. On January 22, 2008, the first official draft was released. HTML 5 is the biggest leap forward in web development standards in the past decade. Unlike previous versions, HTML 5 is not just used to represent Web content. Its new mission is to bring the Web into a mature application platform. On the HTML 5 platform, video, audio, images, animations, and computer-based Interactions are standardized. So let’s take a look at the technical overview of HTML5:

HTML5 new and removed elements

HTML5 adds many new multimedia and interactive elements such as video and audio. In HTML4, if you want to embed a video or audio, you need to introduce a large section of code and it is compatible with various browsers. However, HTML5 only needs to introduce a tag. That's it, just as convenient as the img tag. In terms of page layout and content implementation, HTML5 has added many new structured tag elements as well as block-level and semantic elements. If you want to use HTML to represent the upload progress bar of a file, in HTML5 you can use the progress element to represent it. It has A value attribute describes how many tasks have been completed, and a max attribute describes how many tasks are required in total. You can also get the position attribute (read-only) of this progress bar through the DOM interface, which is the percentage of task completion. Youtube has already made an attempt on HTML5 technology. http://www.youtube.com/html5 (needs to circumvent the firewall ) is a DEMO made using HTML5. Judging from the entire page source code, it is very simple. Of course, HTML5 also adds some new attributes to some elements, such as the placeholder attribute of input and textarea, which is equivalent to the input prompt of the input box. The script has an async attribute that will affect the loading and execution of the script. For all attributes common to HTML, we usually call them "global attributes", such as class, id, tabindex, title. HTML5 also adds some new global attributes, such as contenteditable, contextmenu, hidden and other attributes. HTML5 also adds support for microdata, such as HTML5's new attributes such as item, itempro, and subject.

Of course, HTML5 also removes some elements that represent page presentation, such as font, center, strike, etc. These are supposed to be done by CSS, so they are still easy to understand. It also removes some elements that affect website accessibility, such as frame, frameset, noframe and some uncommon elements such as acronym, use abbr to represent the abbreviation. HTML5 also removes some HTML familiarity that affects client compatibility, such as the rev attribute of link and the scope attribute of td. HTML5 also removes some attributes that indicate page presentation, such as the align and bgcolor attributes of some elements.

HTML5 support for forms

HTML5 provides powerful control types such as url, email, date, tel, etc., powerful constraint attributes, such as required to indicate required, accept attributes for file uploads, and support for some form repeating element models. HTML5 also provides support when submitting a form. You can set the submission method to XML submission, so that the data received by the server will be in XML format. HTML5 forms are defined as "Web Forms 2.0". Currently, opera9.5+ has perfect support for Web Forms 2.0.

Click here to view Web Forms 2.0 DEMO , requires Opera9.5+

HTML5 DOM changes

HTML5 has many interfaces inherited from HTMLDocument in DOM LEVEL 2 HTML. Of course, HTML5 also has some noteworthy new members in DOM, such as: supporting getElementsByClassName, which allows you to select elements based on class names. getSelection() will return the current selection. Object, there are two methods querySelector and querySelectorAll on the selector, which can obtain the element to be queried based on the css selector, which is equivalent to Y.one and Y.all in YUI3.

HTML5 Javascript APIs

What new APIs does HTML5 add to Javascript?

• Video/Audio: HTML5 provides APIs for Video and Audio to allow developers to control their own user interface, such as playing or pausing media content.
• Canvas: Canvas is a new HTML element that can be used to draw graphics using Script language (usually JavaScript). For example, you can use it to draw pictures, composite images, or do simple (and not so simple) animations. Canvas is a magical thing. The first feeling it gives me is like using Photoshop. Every method of it is so similar to Photoshop. You can get the canvas API through canvas.getContext('2d') , you can set its fill color through fillStyle or set its stroke color through strokeStyle. Even its operation of drawing paths coincides with Photoshop's pen operation. Canvas has been used in many websites, such as Firefox's real-time download status statistics , and canvas can even be used to write Web games.
• Drag&Drop: In the visual media of pointing devices, the operation of "Drag" is the event of mouse down (mousedown) accompanied by mouse movement (mousemove), while "Drop" is the event triggered when the mouse is released. The DataEvent and DataTransfer interfaces are defined in Drag&Drop. At the same time, when a drag operation occurs, events such as dragstart, dragenter, dragleave, drop, and dragend will be triggered.
• Web Workers: Make Javascript multi-threaded and can do a lot of work in the background without blocking the current browser operation.
• Geolocation: Geolocation. When you run the navigator.geolocation.getCurrentPosition(success, error) method, the browser will prompt whether you want to share your geographical location. If you choose to share, the success function will be called back. One parameter of the success function is the position object. , this position object has a coords object. The coords object contains a lot of geographical location information such as latitude (dimension) and longitude (longitude), so that you can know your specific location. This function is already widely used on some mobile phones such as Iphone. Applied.
• Application Cache: This is HTML5's support for offline applications. By adding an attribute manifest to the html element, the browser will prompt you whether you want to cache the data to the client. If the user chooses to allow it, it will follow the specified manifest file list. Cache the files you need so you can still use the app when your network is unavailable. For offline applications, Google also developed the Google Gears browser extension, but in the end Google switched to HTML5 and may have seen the advantages of HTML5 storage and offline applications.
• Storage: Webkit has implemented database storage. You can query data and perform some operations just like back-end database operations. Another type of storage is key-value storage, such as sessionStorage and localStorage, which can store and obtain values ​​through setItem and getItem. Compared with cookie storage, the storage capacity is much larger.
• X-Document Messaging: Browsers prevent the communication of documents between different domains for security and privacy reasons. Although this is a security restriction, it brings many problems to the communication of documents in different domains that are not harmful, but HTML5 This cross-document communication can be achieved, allowing us to ignore where the source domain comes from and preventing script attacks.

Does HTML5 excite you? So when will HTML5 become a standard? It is said that it will have to wait until 2022. There is an interesting website http://ishtml5readyyet.com/ that tells you how many days until HTML5 will actually arrive.