HTML5 Study Notes (1): HTML5 Introduction and grammar

Source: Internet
Author: User
Tags silverlight

HTML5 Introduction

HTML5 is the next-generation HTML standard specification following HTML4, which provides some new elements and attributes (such as <nav> site navigation blocks and <footer> ). New labels are good for search engines and semantic analysis, and at the same time help small-screen devices and visually impaired people. In addition, there are some new features, such as video audio <video> and <audio> , in summary terms. There are several major features such as the following:

    • Removed some obsolete element and attribute tags in the HTML4

There are markers that contain purely display effects, <font> such <center> as and, which have been replaced by CSS. HTML5 draws on some XHTML2 suggestions, including some features to improve the structure of the document. For example, the use of new HTML tags,,,, and header footer so on dialog aside figure , will enable content creators to create documents more semantically, which are generally used by previous developers when implementing these features div .

    • Separation of content and presentation

band i labels remain. But their meaning is different from before. These tags are meant only to identify a piece of text, rather than to set a bold or oblique sample for them. , and the u font center strike labels are completely removed.

    • Add some new form input objects

Contains the date, Url,email address. Other objects have added support for non-Latin characters.

HTML5 also introduces micro-data. This method of labeling content using a label that the machine can recognize. Making the semantic Web easier to handle. Overall. These structure-related improvements enable content creators to create cleaner, easier-to-manage Web pages for search engines. More friendly to read screen software.

    • Brand new, more reasonable labels

Multimedia objects will no longer be all bound in object or embed Tag. Instead, the video has the tag of the video, the audio has the audio tag.

    • Local storage

This feature will embed a local SQL database to speed up the interactive search. Caching and indexing capabilities. At the same time, those offline Web programs will also benefit. There is no need for rich animations of plugins.

    • Canvas Object

will give the browser the ability to draw vectors directly above, which means that users can move away from flash and Silverlight and display graphics or animations directly in the browser.

    • The new API extension

HTMLDocument HTMLElement provides a new API extension for and excuses.

    • HTML5 instead of Flash and Silverlight
Syntax (Syntax) 1 Document Media type

Most of the HTML syntax defined by HTML5 is compatible with HTML4 and XHTML1. But a part of it is incompatible. Most HTML documents are saved as text/html media types.

HTML5 defines specific parsing rules (including error handling) for HTML syntax, which the user must follow to save it as a text/html media type.

For example, here is a sample that conforms to the HTML syntax specification:

<!DOCTYPE HTML><HTML>  <Head>    <MetaCharSet= "UTF-8">    <title>Example Document</title>  </Head>  <Body>    <P>Example Paragraph</P>  </Body></HTML>

HTML5 also defines a text/html-sandboxed media type for HTML syntax to be able to host untrusted content.

Other syntax that can be used in HTML5 is XML, which is compatible with XHTML1. With XML syntax, you need to save the document as an XML media type, and you need to set the namespace (namespace) to http://www.w3.org/1999/xhtml according to the XML specification.

The following sample document conforms to the XML syntax specification in HTML5, and it is important to note that the XML document must be stored as an XML media type. Like Application/xhtml+xml or Application/xml.

<?XML version= "1.0" encoding= "UTF-8"?><HTMLxmlns= "http://www.w3.org/1999/xhtml">  <Head>    <title>Example Document</title>  </Head>  <Body>    <P>Example Paragraph</P>  </Body></HTML>

2 Character Encoding

In HTML5 's HTML syntax, there are three ways to declare the encoding type of a string:

    1. On the transport level (transport levels). Set the Content-type in the header of the HTTP instance.
    2. Set a Unicode byte Order Mark (BOM) at the beginning of the file. This character provides a signature for the encoding method of the file.
    3. In the content before the first 1024 bytes of the document, use the META element with the CharSet attribute to declare the encoding mode.

      For example:<meta charset= "UTF-8" > indicates that the document is in UTF-8 format. It replaces the original <meta http-equiv= "Content-type" content= "text/html; charset=utf-8" > syntax declarations, although the original syntax is still available. But it is not recommended in HTML5.

FOR XML syntax in HTML5. is still the same as the previous XML syntax declaration.

3 DOCTYPE

HTML5 's HTML syntax requires the document to be declared DOCTYPE to ensure that the browser can present the page in standard mode. There is no other purpose for this DOCTYPE. And in XML is optional, because the XML media format of the document has been in the standard mode of processing.

DOCTYPE is declared by <! DOCTYPE html>, with no distinction between uppercase and lowercase.

The earlier version of HTML declares that the DOCTYPE need to be very long because the HTML language is based on SGML, so it is necessary to associate a reference to a corresponding DTD.

HTML5 and the previous version number is different, only need to declare DOCTYPE to be able to tell the document enabled is the HTML5 syntax standard, the browser will be <! DOCTYPE html> Do the rest of the work.

4 MathML and SVG

HTML5 's HTML syntax agrees to use the MathML (mathematical Markup Language) and SVG (scalable vector) elements in the document. Like what. A very easy HTML page includes a circle drawn by an SVG element:

<!DOCTYPE HTML><title>SVG in text/html</title><P>A Green Circle:<svg> <CircleR= " the"CX= " the"Cy= " the"Fill= "Green"/> </svg></P>

Many other complex combinations of tags are also supported, for example, using SVG's foreignobject element you can nest MathML, HTML, or nesting itself.

5 Other

HTML5 has natively supported IRI, although these IRI can only be used in UTF-8 and UTF-16 documents.

The Lang property assumes that the setting is not valid and will be updated to an empty string. To tell the browser that it is an unknown language. The function is the same as the Xml:lang in XML.

HTML5 Study Notes (1): HTML5 Introduction and grammar

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.