Developers must learn skills of 20 + HTML5

The speed of the Internet technology soon be described as amazing, a too easy, you may not be able to keep up its pace. HTML5 change and update have overwhelmed many people, this article will introduce some basic HTML skills are very necessary.

1. The new document types (Doctype)

<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"

Are you still using the above this is both tedious and difficult to remember the XHTML document type? If still so, now switch to the new HTML5 document type.

<! DOCTYPE html>

As long as such a simple 15 characters on it. (Note: Your doctype of Affirming the need to appear in the first line of your html file.)

2. Graph (Figure) elements

Consider the following code to tag pictures?

<mg src="path/to/image" alt="About image" />
<p> Image of Mars. </ p>

Unfortunately, it can not be simple, rich semantic relationships, the way the title associated with the graphics, because it is only with the paragraph tag and the picture element wrapped the HTML5 element through the introduction of <figure> to improve this. When combined with <figcaption> elements used, we can match the graphics up the title and graphics. Code:

<img src="path/to/image" alt="About image" />
<p> This is an image of something interesting. </ p>
</ Figcaption>
</ Figure>

3. Redefinition <small>

So you can use to create and logo <small> elements closely related to the subtitle. However, this usage is now HTML5 modify, <small> element being redefined, or more correctly, it is now used to represent the small print or other side of injection (eg, the site's copyright notice at the bottom).

4. No longer need the script, link type

Most likely you still the same as the following code to your links and script tags to add the type of property.

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"> </ script>

In HTML5, this is no longer needed. Means that these two labels represent the style and script. Therefore, we can have them removed the type attribute. Code:

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"> </ script>

5. To use or not use quotation marks

Remember, HTML5 and XHTML different, if you do not like what you do not use quotation marks to attribute wrapped up. However, if you think the use of quotation marks makes you feel more comfortable, of course, there will not be any problems.


At this point, you can decide. If you want a very clear document structure, then stick with the quotes are quite good.

6. So you can edit the content of

Developers must learn skills of 20 + HTML5

HTML5 one of the very powerful feature is the "contenteditable", the name suggests it will allow users to edit the elements (including his sub-elements) contains any text. Its use is very wide, such as a simple list of tasks or based wiki sites are also very practical, in addition, it also has an advantage is to use a local store.

<! DOCTYPE html>

<html lang="en">
<meta charset="utf-8">
<title> untitled </ title>
</ Head>
<h2> To-Do List </ h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </ li>
<li> Drive to abandoned factory
<li> Watch video of self </ li>
</ Ul>
</ Body>
</ Html>

Alternatively, techniques described in accordance with Article V, you can be the ninth line of code written like this (without quotes):

<ul contenteditable=true>

7. E-mail input

If we apply the "email" type to specify the input form, we can command the browser only allows structural requirements for effective e-mail address string input. Although the built form validation will come very soon, but we can not completely rely on this. Older browsers do not understand this "email" type, they will simply return to the regular text box.

<! DOCTYPE html>

<html lang="en">
<meta charset="utf-8">
<title> untitled </ title>
</ Head>
<form action="" method="get">
<label for="email"> Email: </ label>
<input name="email" type="email" />

<button type="submit"> Submit Form </ button>
</ Form>
</ Body>
</ Html>

Developers must learn skills of 20 + HTML5

When it comes to support the browser and do not support the elements and attributes, you need to know all the current browsers are not so reliable. For example, Opera is only when you specify the name attribute to support e-mail authentication. However, it does not support the placeholder attributes (will be mentioned below). Finally, although you can use this form of authentication, but not to place undue reliance on it.

8. Placeholder

Prior to that, we need to use JavaScript to create a text box placeholder. You can initially set the value of attributes, is appropriate, but as long as the user deletes the text, the contents of the input will become empty again. Placeholder attributes to effectively compensate for this.

<input name="email" type="email" placeholder="" />

Developers must learn skills of 20 + HTML5

9. Local storage

Thanks to HTML5's local storage, we can let the advanced browser "remember" the contents of our input, even if the browser was closed or re-refresh will not be affected. Although not all browsers support, but the most critical Internet Explorer 8, Safari 4, Firefox 3.5. Support.

Developers must learn skills of 20 + HTML5

10. Semantics Header and Footer

</ Div>

</ Div>

The above code gone. Divs Fundamentally, there is no semantic structure, even if the application of the ID or so.

In HTML5, we can use <header> and <footer> elements, the above code can be replaced with:

</ Header>

</ Footer>

But be careful not to these two elements and sites in the head and feet mixed up. They only represent their containers.

11. IE and HTML5

IE needs to understand the new HTML5 elements of certain fees God, in order to ensure that the new HTML5 elements block-level elements can be displayed correctly, it is necessary to define their style with the following code:

header, footer, article, section, nav, menu, hgroup (
display: block;

Even so, IE still do not know what these elements, which will ignore these formats, but also use the following code to solve this problem:

document.createElement ("article");
document.createElement ("footer");
document.createElement ("header");
document.createElement ("hgroup");
document.createElement ("nav");
document.createElement ("menu");

12. Group Title (hgroup)

Suppose a site name, subtitled respectively <h1>, <h2> tags to mark, in HTML4 also do not have a relationship between the two can be used to describe a good method of semantic relations, in addition, when using h2 title in other pages displayed when the problem is more in the level of respect. The use of group title hgroup elements, we can use these titles together, without affecting the entire outline of the document.

<h1> Recall Fan Page </ h1>
<h2> Only for people who want the memory of a lifetime. </ h2>
</ Hgroup>
</ Header>

13. Necessary to (Required) property

The necessary form to allow the new property, whether the provisions of a particular input is necessary. You can write code according to their preferences, with the following two different ways to declare this property:

<input type="text" name="someInput" required>

Or, more stringent:

<input type="text" name="someInput" required="required">

The above two lines of code are feasible. With this line of code, and browser support required attribute, then enter a blank form will not be submitted. Here is a simple example, we also added a placeholder attributes:

<form method="post" action="">
<label for="someInput"> Your Name: </ label>
<input type="text" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit"> Go </ button>
</ Form>

If the input is empty, the form will not submit, highlight the text box.

14. AF (Autofocus) property

Similarly, with HTML5 JavaScript programs no longer need to solve the auto-focus problem. If an input should be "selected" or focus, we can now use HTML-AF autofocus attribute.

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

15. Audio support

We no longer need to rely on a third-party plug-ins to provide audio. HTML5 provides audio elements <audio>. Currently, only the latest browsers support the HTML5 audio. At this point, better to provide some backward compatibility.

<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3"> Download this file. </ a>
</ Audio>

Said audio format, Mozilla and Webkit have not fully supported. Firefox wants to see a. Ogg file, Webkit browsers only support the most common. Mp3 extension. This means that, at least for now, you should create two versions of the audio. When Safari loads pages, it did not recognize. Ogg format, will skip and move mp3 version. Please note, IE does not support it, Opera 10 or lower version only supports. Wav files.

16. Video support

And audio elements <audio> very much like that in the new browser also supports the HTML5 video. In fact, recently announced a new YouTube video embedded in HTML5. Unfortunately, because the documentation is not for the HTML5 video that a particular encoder, so all depends on the browser to decide. While Safari and IE9 can support H.264 format video, Firefox and Opera are still insists Theora and Vorbis formats. Therefore, the display HTML5 video, you must provide both.

17. Video pre-loaded

You first need to determine the need for the browser to pre-load the video. Is it necessary? Suppose that a visitor to enter a page dedicated to display video, then it is necessary to pre-load this page to save a little time to wait. You can set the preload = "preload" to pre-load the video, or can be added between the preload.

<video preload>

18. Display Controls

You may have noticed that with the above code, then the video will only appear as an image, without any control device. In order to obtain control of these players, we need to specify them in the video element control properties.

<video preload controls>

Developers must learn skills of 20 + HTML5

19. Regular Expression

On the loss properties of the new model, we can insert in the code of a regular expression.

<form action="" method="post">
<label for="username"> Create a Username: </ label>
<Input type = "text"
name = "username"
id = "username"
placeholder = "4 <> 10"
pattern = "[A-Za-z] (4,10)"
<button type="submit"> Go </ button>
</ Form>

If you're familiar with regular expressions, then you will notice that this new model: [A-Za-z] (4,10) accept only uppercase and lowercase letters. This string must have at least four characters, at most 10 characters.

20. Detect browser support for property

Mentioned earlier, not all browsers support these properties, it is there any way to determine whether the browser can recognize them? Asked a very good question, here are two ways to tell you, the first option is to use Modernizr to detect, or you can create and analyze these elements to see what capabilities the browser has. For example, in the previous example, if we are to determine if the browser is able to perform pattern attribute, you can add the page JavaScript:

alert ('pattern' in document.createElement ('input')) / / boolean;

In fact, this is to determine the browser compatibility of a very common method. jQuery library use this technique. The above code, we created a new input element, and confirm whether the pattern properties can be identified. If you can identify if the browser supports this feature, or do not support.

if (! 'pattern' in document.createElement ('input')) (
/ / Do client / server side validation
</ Script>

Remember, this will need to rely on JavaScript to achieve!

21. Mark element

<mark> main function of the element is highlighted in the pages that the user needs to visually highlight its importance to the text. Wrapped in a string of this tag must be associated with the user's current behavior. For example, if I have a number of blog search "Open your Mind", I can use the JavaScript tags in the <mark> to wrap every action.

<h3> Search Results </ h3>
<p> They were interrupted, just after Quato said, <mark> "Open your Mind" </ mark>. </ p>

22. When to use <div>

Still need to use <div> label? Certainly needed. For example, if you want an element encased in a block of code, particularly for content positioning, <div> will be the ideal choice. However, if the package is not the case but to blog posts, or footer link list, I suggest you use <article> and <nav> elements, respectively.

Original translation: WordPress it!

Taken from:

分类:Web 时间:2010-08-15 人气:282
blog comments powered by Disqus


  • DOCTYPE html PUBLIC js code so that part of the solution failure 2010-11-02

    Javascript call to a number of properties in the name of which has changed how I said the value of not document.body.scrollTop js script after taking time to document the value in question is estimated to get out of here ~ ~ Obviously the script usin

  • [转]XML中关于DTD类型(内部(SYSTEM)的和外部(PUBLIC)的区别) 2012-02-13

    DTD是什么?Document Type Definition--文档类型定义. 在做自定义标签的时候,写标签库定义文件tld时,要写一大段东东:<!DOCTYPE ...... >.当时只知道拷贝.粘贴,也没有去想这是什么东西.今天才知道,这玩意儿叫DTD.是为了规范xml文档元素编写的. DTD的语法规定,DTD的所有关键字都是大写的,如DOCTYPE,ELEMENT等,它分为两种. 1.内部DTD.注意的是在元素名后面一定要有空格,否则就不是格式良好的 <!DOCTYPE 根元素名

  • 8 kinds of basic Java data types (primitive Type) 2010-08-23

    Data Type Size (bits) Range Default byte (byte) 8 -128 ~ 127 0 short (short integer) 16 -32768 ~ 32767 0 int (plastic) 32 -2147483648 ~ 2147483647 0 long (long integer) 64 -9,233,372,036,854,477,808 ~ 9233372036854477807 0L float (floating-point type

  • Sybase lock types Lock Type 2010-04-15

    ------------------------------------------------- Avira lock ------------------------------------------------- sp_who sp_lock 156 kill 156 dbcc traceon (3604) is the result of the dbcc output to screen. dbcc sqltext (pid) is to look at the process of

  • Essential script code 2010-04-17

    First, some very practical and will use the small script code: Script 1: Go home after the auto-play sound <embed src="pnm://" hidden=true autostart=true loop=true> Script 2: enter home page automatically afte

  • Check the color code on-line web site 2009-01-14 Put the mouse on the picture, you can show all kinds of color code! Code is as follows (in html format the following code to open a browser to view results): <! DOCTYPE HTML PUBLIC "- / / W3C

  • Configured + to run under Windows source code + AS3 connection red5 red5 simple example 2010-04-19

    Configured + to run under Windows source code + AS3 connection red5 red5 simple example Posted on 18 April 2010 Windows environment + configuration + run red5 source Red5 developed rapidly, the latest version is 0.9.1, and the previous version (0.8.

  • Encrypted JavaScript code 2010-06-10

    Encrypted JavaScript code But there is a small Bug, that is when the JavaScript code in a "\", this code will have problems. Is seeking a solution. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <H

  • XHTML 1.0 DTD provides a statement of the three options 2010-12-13

    English called DTD: Document Type Definition (DTD) is to define the legal building blocks of XML documents. It uses a series of legal elements to define the document structure. DTD can be declared in the XML document to make the trip, it also can be

  • Java Generics FAQs - Type Parameters (switch) 2010-07-29

    Type Parameters Fundamentals What is a type parameter? A place holder for a type argument. Generic types have one or more type parameters. Example of a parameterized type: interface Comparable <E> ( int compareTo (E other); ) The identifier E is a t

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C), All Rights Reserved. 版权所有 闽ICP备15018612号

processed in 0.338 (s). 12 q(s)