The development of the Internet is always constantly giving rise to the emergence of new technologies, and HTML5 and CSS3 are hot topics that have been discussed recently. For every Internet developer, especially front-end developer, they are full of curiosity and desire. So what exactly are there for HTML5 and CSS3 that make us shine? I shared with you "Revealing HTML5 and CSS3 " at the WebRebuild Beijing Exchange Conference and the Pearl Milk Tea Gang. PPT is here:
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8
The predecessor of the HTML 5 draft was called Web Applications 1.0. It was proposed by WHATWG in 2004, accepted by W3C in 2007, and established a new HTML working team. On January 22, 2008, the first official draft was released. HTML 5 is the biggest leap 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, animation, and the same computer. The interactions are standardized. So let’s take a look at the technical overview of HTML5:
HTML5 has added many multimedia and interactive elements such as video and audio. If you want to embed a video or audio in HTML4, you need to introduce a large piece of code and is compatible with each browser. HTML5 only needs to introduce a tag. That's fine, just as convenient as the img tag. In terms of page layout and content implementation, HTML5 has added many structured tag elements, 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 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 needed in total. You can also obtain the position attribute of this progress bar (read-only) through the DOM interface, which is the percentage of the task completion. Youtube has made an attempt in HTML5 technology. http://www.youtube.com/html5 (need to cross the wall) is a DEMO made with HTML5. Judging from the source code of the entire page, it is very concise. Of course, HTML5 has also added some 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 HTML common attributes, we usually call them "global attributes", such as class, id, tabindex, title. HTML5 has also added some global attributes, such as contenteditable, contextmenu, hidden and other attributes. HTML5 also adds support for microdata, such as the new attributes of item, itempro, subject, etc. in HTML5.
Of course, HTML5 also removed some elements that represent page display, such as font, center, strike, etc. These should have been done by CSS, so it is still easy to understand. Some elements that affect the accessibility of the website are also removed, such as frame, frameset, noframe and some uncommon elements such as acronym, and abbr is used 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 representing page display such as the align and bgcolor attributes of some elements.
HTML5 provides powerful control types such as url, email, date, tel, etc., powerful constraint properties, such as required, acceptance attributes for file uploads, and some form duplicate element models support. HTML5 also provides You can set the submission method to XML submission method, so that the data received by the server will be in XML format, and the HTML5 form is defined as "Web Forms 2.0". Currently, operator9.5+ supports Web Forms 2.0 more perfectly.
Click here to view Web Forms 2.0 DEMO, Opera9.5+ is required
Many HTML5 interfaces inherit from HTMLDocument in DOM LEVEL 2 HTML. Of course, HTML5 also has some notable new members on DOM, such as: support getElementsByClassName, you can select elements according to the class class name, getSelection() will return to the currently selected The object of the selector has two methods on the querySelector and querySelectorAll that can obtain the elements to be queryed based on the css selector, which is equivalent to Y.one and Y.all in YUI3.
What APIs have HTML5 added to Javascript?
Video/Audio: HTML5 provides APIs for Video and Audio to allow developers to control their own user interfaces, such as playing or pausing media content.
Canvas: Canvas is a new HTML element that can be used by Script language (usually JavaScript) to draw graphics. For example, it can be used to draw pictures, synthesize images, or do simple (and not so simple) animations. Canvas is a magical thing. It gives me the first feeling that I am using Photoshop. Each method is so similar to Photoshop. You can get this canvas through canvas.getContext(’2d’) API, you can set its fill color through fillStyle or set its stroke color through strokeStyle, and even the operation of drawing paths coincides with Photoshop's pen operation. Canvas already has applications on many websites, such as Firefox's real-time download status statistics, and you can even use canvas to write Web Games.
Drag&Drop: In the visual media indicating the device, the operation of "Drag" is the event of mouse down and mousemove with mousemove, and "Drop" is an event triggered when the mouse is released. The DataEvent and DataTransfer interfaces are defined in Drag&Drop. At the same time, when the drag operation occurs, events such as dragstart, dragter, dragleave, drop, dragend and other events will be triggered.
Web Workers: Make Javascript multi-threading and can do a lot of work in the background without blocking the current browser operations.
Geolocation: Geolocation. When running navigator.geolocation.getCurrentPosition(success, error) this method, the browser will prompt whether to share your geographical location. If you choose share, the success function will be called back. A 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 (dimensionality) and longitude (longitude), so that you can know your specific location. This function has been widely used on some mobile phones such as iPhones. Applied.
Application Cache: This is HTML5's support for offline applications. By adding a property manifest to the html element, the browser will prompt you whether to cache the data to the client. If the user chooses to allow, it will follow the specified manifest file list. Cache the required files, and you can still use this application when your network is unavailable. For offline applications, Google has also developed the Google Gears browser extension, but in the end, Google's switch to HTML5 may also see the advantages of HTML5 storage and offline applications.
Storage: Webkit has implemented database storage, you can query data and perform some operations like a backend operation database. There is another type of storage, such as sessionStorage and localStorage, which can be stored and obtained through setItem and getItem. Compared with the storage of cookies, the storage capacity is much larger.
X-Document Messaging: The browser blocks the communication of documents between different domains due to security and privacy. Although this is a security restriction, it brings many problems for document communication in different domains that do not have any harm, but HTML5 This kind of cross-document communication can be achieved, allowing us to ignore where the source domain comes from, and at the same time prevent script attacks.
Did HTML5 make you excited? So when will HTML5 become the standard? It is said that it will be until 2022, and there is a very interesting website http://ishtml5readyyet.com/ to tell you how many days there are to be in HTML5.