HTML5 study Notes

New mark of HTML5 (from http://www.vaikan.com/html5-new-old-semantics/)

The task that designers need to accomplish is to develop a richer and more meaningful semantics for HTML5 – and of course it can be imagined that this new approach will be flexible and efficient, while adapting to all modern Internet standards. Here are some new tags that will be added to the HTML5.

• <article> tags define an article
• <aside> tags define the sidebar of the Content section of the page
• <audio> tags define audio content
• <canvas> Tag definition picture
• <command> tags define a command button
• <datalist> Tags define a drop-down list
• <details> Tags define the details of an element
• <dialog> Tags Define a dialog box (session box)
• <embed> tags define external, interoperable content or plugins
• <figure> tags define a set of media content and their titles
• <footer> tags define a page or the bottom of an area
• Tag defines the head of a page or an area
• Tag definition information about a chunk in a file
• <keygen> tag defines a generated key value in a form
• <mark> tags define tagged text
• <meter> Tag definition measurement within a
  Predefined range
• <nav> Tag definition navigation links
• <output> Tags define some output types
• <progress> marking the process of defining a task
• <rp> tags are used in ruby annotations to tell browsers that do not support ruby elements how to display
• <rt> tag definition for Ruby
  Annotations's explanation
• <ruby> tags define ruby annotations.
• <section> tags define an area
• <source> tags defining media resources
• <time> Tags define a date/time
• <video> tags define a video

Hopefully all of these tags will be truly "alive" and useful, rather than just a cool marker today.

The burden of HTML5-the old mark, farewell ...

Do you remember that old age, HTML3 is regarded as a kind of magical thing that can only run in Netscape? Yes, that's the beginning of the dawn of the internet age. We certainly do not forget that history, but it is reasonable to say goodbye to some good but old things (especially when they are not currently considered so useful, or when no one is paying attention to them).

As a result, HTML5 's designers have abolished some old tags, because they are only used by the HTML geeks, and because they are completely useless, the new HTML tags will no longer include them – and I think we should thank these designers for this. After all, these marks are so old that it can be imagined that 20 years from now our children will think that only Shakespeare will be used in his 14 lines of poetry. Anyway, let's take a look at them in the Internet museum (is there really such a museum?). ）。

• The <acronym> tag defines an acronym.
• The <applet> tag defines an embedded applet.
• <basefont> tag specifies a default
  Font-color, Font-size, or font-family for all the text in a document.
• <big> tag is used to format the text one
  Size bigger, and can in relation to your <font> or
  <basefont> size, if you ' ve specified either one.
• <center> tag is used to center text.
• <dir> tag is used to list directory titles.
• <font> tag Specifies the font face, font
  Size, and font color of text.
• <frame> Tag definition one particular window
  (frame) within a frameset.
• The <frameset> tag defines a frameset. The
  Frameset element holds or more frame elements. Each frame element
  holds a separate document.
• <s> <strike> tags
  Define strikethrough text.
• <tt> tag is used for "typetype" text, or
  Fixed-width typewriter-type Font. Other than the different type style,
  It has normal font characteristics
• <u> tag is used to underline text.

These tags are basically useless (you might think that there are several markers that are somewhat similar to the new ones in the HTML5). Some of them have been used in earlier versions of the browser, but have now lost their role, while others have been replaced with CSS functionality (such as setting fonts and Text style tags).

Important questions about the <DIV> tag

Replacing the <div> tag with the new tag is a major semantic achievement of HTML5. This <div> tag is an important (and now still) marker in HTML4, which is widely used in HTML, but it is too weak to express, and it is useless in the face of the task of declaring a different chunk of the page's structure. New HTML5 tags – such as <article>, <aside>, <nav>, <figure>, , <footer> -will be more useful and convenient, these tags will allow you to specify the purpose of different areas of the Web page, clearly show the structure of the site. This means that even if you're a novice or a middle-class programmer, you can clearly understand the structure of the entire page based on HTML code-and it's worth mentioning that search engines will be thrilled to be able to parse the structure of the page so easily.

What good is it to us?

There has been a lot of discussion about the value of new tags and semantics, and some people think that these semantics and visual representation do not make any sense-because they bring more complex code and create the opportunity to use these new HTML code for new mistakes. The value of HTML5 's new semantics is to enhance the level of interaction and collaboration between Web users and these technologies, which is why the Internet is moving forward.

The same is true – we should understand that, just as HTML5 gives us the feeling of being so cool, people have put a lot of effort into it and have great hopes for the development of the Internet over the next 5 years. Today, these new tags and semantics look really great, and we all like it, but remember that everything is changing to suit people's needs, that new language features must depend on people's use and the vast use of the Internet community-only in this way can the simple new things become useful new things.

10 main differences between HTML4 and HTML5 (from http://www.vaikan.com/10-essential-differences-between-html4-and-html5/)HTML5 is the latest HTML standard, or late or early, all web programmers will find it necessary to use this latest standard, and, many people will feel, to re-develop a HTML5 site, than to move a site from HTML4 to HTML5 more easily, This is because there are a lot of differences between the two versions.

In fact, HTML5 did not make any significant changes to HTML4, and many of them were similar.

However, there are some very important differences you need to know. The main differences between some HTML4 and HTML5 are listed below (not all of them are listed as impossible):

1. The HTML5 standard is still in development

The first difference is obvious, but very important, and I need to start with it first. Maybe you've noticed that cool talk about HTML5 is everywhere, but the fact is, HTML5 is a standard that hasn't been done yet. HTML4 has been 10 years old, but it is still the current formal standard of fact unchanged.

On the other hand, HTML5 is still in its early stages, and subsequent revisions will continue to emerge. You have to take this into account, because the new additions or modifications you use on the site will change every year, and you'll need to keep updating your site, which is not what you want. This is the reason why, so far, you'd better use HTML4 in your product, just use HTML5 in your experiment.

2. Simplified syntax

A simpler DOCTYPE statement is one of many new features in HTML5. Now all you have to do is write <!doctype html> The HTML5 syntax is compatible with HTML4 and XHTML1, but is not compatible with SGML.

3. A new <canvas> tag that replaces flash

For web users, Flash is both a surprise and a pain. There are a lot of web developers who are dissatisfied with HTML5 's threat to flash. But for those who endure bloated flash videos that take years to load and run, the technology for generating video with new <canvas> tags has arrived.

Currently, the <canvas> tag does not provide all the features that Flash has, but in time, Flash will be eliminated from the Web. We will wait and see, because many people do not agree with this view.

4. New

HTML5 is designed to better depict the anatomical structure of the site. That's why these The advent of new tags such as <footer>, which are specifically designed for these parts of the logo website.

When developing a Web site, you do not need to use the <div> tag to label these parts of the page.

5. New <section> and <article> marks

Like the

Presumably, in addition to making the code more organized, it can also improve the SEO effect, can make the search engine easier to analyze your page.

6. New <menu> and <figure> marks

New <menu> tags can be used as normal menus or on toolbars and right-click menus, although these things are not commonly used on the page.

Similarly, the new <figure> tag is a more professional way of managing text and images on a page. Of course, you can use style sheets to control text and images, but using the HTML5 built-in tag is more appropriate.

7. New <audio> and <video> marks

The new <audio> and <video> tags may be the most useful two things added in HTML5. As tag names, they are used to embed audio and video files.

In addition, there are new multimedia tags and attributes, such as <TRACK>, which are used to provide text messages for tracking video. With these marks, HTML5 makes Web2.0 features more and more friendly. The problem is that before HTML5 is widely accepted, Web2.0 is still the old Web2.0.

8. New Form Design

New <form> and <forminput> tags make new changes to the original form elements, and they have a lot of new properties (and some modifications). If you develop the form frequently, you should take the time to study it in more detail.

9. No longer use <b> and <font> marks

For me personally, this is a change that I don't quite understand. I don't think there is much benefit in removing <b> and <font> tagging. I know that the official guidelines say that these tags can be better handled by CCS, but in this way, it's not awkward to have this feature in separate CSS and text two places for this type of markup to appear in the one or two places in the article. Maybe we'll get used to this method later.

10. No longer using <frame>, <center>, <big> Mark

In fact, I can't remember when I used these tags, so I don't feel sad about removing them. For the same reason, there are better marks to achieve their function--which is good, and any obsolete mark removed from the standard is welcome.

The difference between these 10 HTML5 and HTML4 is only a small part of the entire new specification. In addition to these major changes, I can also briefly mention a few minor changes, such as modifying the <ol> tag properties, so that it can be inverted, and the <u> tag has been modified.

All of these minor changes are large in number. And the new changes are constantly increasing, so if you want to keep track of the latest trends in real time, you need to look at the different pages of w3.org HTML4 and HTML5 frequently. If you are impatient and want to use these new tags and attributes in your work, I advise you to just do the experiment, and the reason is clear that these new tags and properties may change a lot in the future, so unless you keep updating your code, they are likely to expire.

Although the latest version of most popular browsers now supports HTML5, there are some new (or modified) tags and attributes that are not supported, so your page may appear inconsistent on the user's screen. Wait patiently, wait HTML5 really can practical time. It's not the right time.

HTML5 study Notes