HTML5

The HTML 5 draft, formerly known as Web Applications 1.0, was proposed by the WHATWG in 2004 and accepted by the W3C in 2007 with the creation of a new HTML working group. On 22 January 2008, the first official draft was released. HTML5 is the biggest leap forward in Web development standards in the last decade. Unlike previous versions, HTML5 is not just about representing Web content. Its new mission is to bring the Web into a mature application platform where video, audio, graphics, animation, and interaction with computers are standardized. So let’s take a look at the technical overview of HTML5:

New and removed elements of HTML5

HTML5 has added a lot of 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. HTML5 only needs to introduce a tag, just like img tag is convenient. In terms of page layout and content implementation, HTML5 has added a lot of structured tag elements as well as block-level and semantic elements. If you want to represent the progress bar of a file in HTML, in HTML5 you can use the element progress. It has a value attribute that describes how many tasks have been completed, a Max attribute that describes how many tasks have been completed, and a DOM interface that gives you the position attribute (read only), which is the percentage of tasks completed. Youtube has made a try in HTML5 technology, www.youtube.com/html5 is a DEMO with HTML5, from the whole page source code, very simple. HTML5 has also added some attributes to some elements, such as input and Textarea placeholder attributes, which are equivalent to input prompts in input fields. Script has an async attribute that affects script loading and execution. All HTML attributes are commonly referred to as “global attributes”, such as class, ID, tabIndex, title. HTML5 has also added some global attributes, such as Contenteditable, ContextMenu, hidden, etc. HTML5 also adds support for microdata, such as HTML5’s new item, ItemPro, Subject and other attributes.

Of course HTML5 also removes some of the elements that represent the presentation of the page, such as font, center, strike, etc., which is supposed to be done by CSS, so it makes sense. It also removes some of the elements that affect the accessibility of the site, such as frame, frameset, Instead of noFrame and less commonly used elements such as ACRONYM, ABBR is used for abbreviations. HTML5 also removes some HTML familiarity that affects client compatibility, such as link’s rev attribute, TD’s scope attribute; HTML5 has also removed some of the attributes that indicate page presentation, such as the align, BGColor attributes for some elements.

HTML5 support for forms

HTML5 provides powerful control types such as URL, email, date, tel, etc., powerful constraint properties such as required, accept attribute for file upload, and some form repeating element model support. HTML5 Forms can also be submitted in XML format, so that the data received by the server will be in XML format. HTML5 Forms are defined as “Web Forms 2.0”. Web Forms 2.0 is currently perfectly supported in Opera 9.5+.

HTML DOM changes

HTML5 in DOM LEVEL 2 HTML is largely inherited from HTMLDocument interface, of course, HTML5 also has some notable new members in DOM, such as: Support for getElementsByClassName. You can select elements based on the class name. GetSelection () will return the currently selected object. There are two methods above the selector, querySelector and querySelectorAll, which can obtain the element to be queried based on the CSS selector, equivalent to y.ne and y.ll in YUI 3.

HTML 5 Javascript APIs

What apis does HTML5 add to Javascript?

  • Video/Audio: HTML5 provides apis for Video and Audio to allow developers to control their own user interfaces, such as playing and pausing media content.
  • Canvas: Canvas is a new HTML element that can be used by the Script language (usually JavaScript) to draw graphics. For example, it can be used to draw pictures, compose images, or do simple (and not-so-simple) animations. Canvas is a magical thing, it gives me the first feeling like using Photoshop, every method of it is so similar to Photoshop, you can get the API of this Canvas by using Canvas.getContext (‘ 2D ‘). You can use fillStyle to set its fill color or strokeStyle to set its stroke color, and even the way it draws paths is similar to the pen in Photoshop. Canvas has been used in many websites and can even be used to write Web games.
  • Drag&Drop: In the visual media indicating the device, the action of a “Drag” is a mousedown followed by a mousemove, while the action of a “Drop” is an event triggered when the mouse is released. DataEvent and DataTransfer interfaces are defined in Drag&Drop, and events such as Dragstart, Dragenter, Dragleave, DROP and Dragend will be triggered when drag operations occur.
  • Web Workers: Allows JavaScript to be multithreaded, doing a lot of work in the background without blocking current browser operations.
  • Geolocation: Location positioning, run the navigator. Geolocation. GetCurrentPosition (success, error) if this method when the browser prompts to share your location, if you choose to share, will success callback function, One argument to the Success function is the position object, which has a Coords object. The COords object contains a lot of geographic information such as latitude and longitude. This lets you know where you are, a feature already widely available on some phones, such as the iPhone.
  • The Application Cache: This is HTML5 support for offline applications. By adding a manifest attribute to an HTML element, the browser will prompt you whether to cache data to the client. If the user chooses to allow this, it will cache the required files according to the specified manifest file list. You can still use the app. For offline applications, Google also developed the Google Gears browser extension, but Google’s final move to HTML5 may have seen the benefits of HTML5 for storing and offline applications.
  • Storage: Webkit already implements Database Storage, which allows you to query data and perform operations just like a back-end database. Another type of storage is key-value pair storage, such as sessionStorage and localStorage, which can be used to store values and values through setItem and getItem. Compared with Cookie storage, the storage capacity is much larger.
  • X – Document Messaging: Browser for security and privacy reasons, prevent the document communication between different domains, although this is a security restrictions, but for those who have no harm to the different domains of document communication brings a lot of problems, but it can realize the cross document communication, let us can need not GuanYuan domain is from where, at the same time can prevent scripting attacks.

Is HTML5 appealing to you? So when will HTML5 become a standard? It’s said to be 2022, and there’s an interesting website, ishtml5readyyet.com/, that tells you how many days HTML5 will actually arrive.

CSS3

CSS3 is not only a novel technology for us Web developers, but more importantly, these new concepts of Web applications bring us more infinite possibilities and greatly improve our development efficiency. We no longer have to rely on images or JavaScript for rounded corners, multi-backgrounds, custom fonts, 3D animations, gradients, box shadows, text shadows, transparency, and other features that enhance the quality of Web design.

CSS3 support on selectors

Using attribute selectors we can according to the attribute value is easy to choose the beginning or the end of an element, brother brother selector can be used to select the corresponding nodes or adjacent to the next element, using the pseudo class selector can choose one type of elements, CSS 3 on the selector rich flexible support allows us to control the style, You don’t have to give them a class name like “odd” or “even” to select certain elements.

CSS3 style support

There was a survey that asked developers what the most anticipated feature of CSS3 was, and the top vote was “rounded corners.” Yes, rounded corners will save us front-end engineers a lot of time and energy to cut and piece together a rounded corner. CSS3 also supports shadows, box shadows, text shadows, and gradients, which you may have seen in IE filters before, but is much easier to implement. @font-face allows you to customize fonts. In the traditional way, VD gives you a design with special text and lets you do it as an image, whereas CSS3 uses @font-face. CSS3 also adds a new word-wrap attribute for continuous text wrap. You can set it to normal or break-word. This eliminates the need for the back end to truncate consecutive English characters. With CSS3 you can also add a background to the border, which is also used in iPhone examples. CSS3 supports background resizing. For example, if you want to make a small element background with a large image, you can use background-size to adjust the size of the background image to fit the element. CSS3 supports opacity, rgba, and HSL /a. The difference between opacity and rgba is that the content of opacity Settings is also affected, while rGBA only affects the elements you apply. CSS3 provides support for box models in layout. Box-sizing can be set to content-box or border-box. Content-box is normal, and border-box is similar to IE5.5. That is, the width of the element includes border and padding. This may be convenient in layout, and you don’t need to worry about how much width the element will take up. With content-box, you need to calculate the actual width of the element manually.

CSS3 support for animation

CSS3 supports the following animation types: Transform, Transition, and animation. You can set transition to a specific property. There’s not much difference between an animation and transiton. Animation’s animations are self-defined and are more targeted at script developers, so they tend to be more complex.

To use most of the CSS3 features, we had to use vendor-specific extensions along with the original attributes. The reason is that until now, most browsers only supported some CSS3 attributes. The most common private attributes are for Webkit core browsers (such as Safari), which start with -webkit-, and Gecko core browsers (such as Firefox), which start with -moz-, Konqueror (-khtml-), Opera (-o-), and Internet Explorer (-ms-) all have their own attribute extensions (currently only IE 8 supports the -ms- prefix).

So how do we use CSS3 in development?

I think the first thing to do is to follow the principle of elegant downgrading, such as the rounded corners mentioned earlier. We can apply CSS rounded corners to browsers like Firefox and Safari that support rounded corners, while those that don’t support CSS rounded corners will display them as right angles. Second is not support CSS3 browser can use JavaScript to achieve, such as CSS3 any element support :hover pseudo-class, we can only support link: HOVER IE6 with JS to achieve. The last is to focus on the goals and feasibility of a new technology while promoting it to users or bosses, not technology for technology’s sake.

Fed.taobao.org/blog/2009/1…