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"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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:

<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<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.

<P

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">
<head>
<meta charset="utf-8">
<title> untitled </ title>
</ Head>
<body>
<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">
<head>
<meta charset="utf-8">
<title> untitled </ title>
</ Head>
<body>
<form action="" method="get">
<label for="email"> Email: </ label>
<input name="email" type="email" />

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



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="doug@givethesepeopleair.com" />



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.



10. Semantics Header and Footer

<div>
...
</ Div>

<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>
...
</ Header>

<footer>
...
</ 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.

<header>
<hgroup>
<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>



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)"
autofocus
required>
<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.

<script>
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: http://www.chinaz.com/Webbiz/Exp/0P31242Z2010.html
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Developers must learn skills of 20 + HTML5

  • ActiveMQ practice the road (four) ActiveMQ 4.x + JBoss 4.x MDP actual articles

    Keyword: ActiveMQ ActiveMQ practice the road (four) ActiveMQ 4.x + JBoss 4.x MDP actual articles At <<ActiveMQ Practice ( Three ) ActiveMQ 4.x +JBoss 4.x Consolidating articles >> which we compare in detail the ActiveMQ with JBoss integration

  • JS menu

    JS menu

  • Using Rails Captcha plug-in, easy implementation Verification Code

    Simple Captcha Plugin Can help us easily in the Rails implementation of Verification Code function. In addition, he has the option to provide sufficient to meet the U.S. requirements for certification, the use of easy. Supported picture and digital authen

  • [Ask] Rest nested resources helper method

    (Novice, studying RestFul_Rails, rails 2.2.2) Nested resource definition is as follows: And in the project under the index view using the following code: Results page error: iterations_path undefined I would like to ask how are going on? The teaching ...

  • Use Ext JS to read the JsonReader complex object json

    Today was how to resolve the following complex json object to the difficult living over a long time .. did not find documentation how to read JsonReader Ways json object (possibly also because of their limited level of E the text did not correctly underst

  • Dynamic loading JS script four kinds of methods

    To achieve dynamic loading JS script has four kinds of methods: 1, direct document.write <script language="javascript"> document.write ( "<script src='test.js'> <\ / script>"); </ script> 2, dynamic scri

  • spring + hibernate + oracle9i to read and write CLOB

    Database-driven update classes12-9i.jar Hibernate modify the configuration of the following code <bean/> <bean Lazy-init="true"> <property name="nativeJdbcExtractor"> <ref local="nativejdbcExtractor"/>

  • Process migration from tomcat to websphere changes

    Process migration from tomcat to websphere changes Because customers use the web application server software used by different what tomcat5, tomcat6, websphere5.1, websphere6.1, weblogic8, and so on, and the software used inconsistent standards, ibm's

  • The level Hibernate cache

    Hibernate cache level: (1) a cache is very short and the session life cycle consistent, also known as session-level cache-level cache or transaction-level cache (2) Ways of Supporting level cache: get (); load (); iterator (); only entity object cach ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries