HTML5 Introduction
HTML5 is the next-generation HTML standard specification after HTML4. It provides some new elements and attributes (such as <nav> website navigation blocks and <footer> ). The new tags facilitate search engines and semantic analysis, and help small screen devices and People with Visual Impairment better. In addition, they also provide some new functions, for example, the <video> and <audio> of video and audio have the following features:
Expires cancels some outdated element and attribute tags in HTML4.
These include purely display effect tags, such as <font> and <center>, which have been replaced by CSS. HTML5 draws some suggestions from XHTML2, including some functions used to improve the document structure, such as the use of new HTML Tag headers, footer, dialog, aside, and figure, the content creators will create documents in a more semantic way. Previous developers generally use div to implement these functions.
Separated timeline content and presentation
B And I labels are retained, but they have different meanings. These labels are used only to identify a text, rather than to set bold or italic styles for them. The u, font, center, and strike labels are completely removed.
Add some new form input objects for Sheet
Including date, URL, and Email address. Other objects are supported for non-Latin characters. HTML5 also introduces micro-data. This method uses tags that can be recognized by machines to label content, making Semantic Web processing easier. In general, these structure-related improvements allow content creators to create more clean and easier-to-manage webpages. Such webpages are more friendly to search engines and read screen software.
Brand-new and more reasonable tags for ingress
Multimedia objects are no longer all bound to the object or embed Tag. Instead, they are video tags and audio tags.
Local Storage
This function is embedded with a local SQL database to accelerate interactive search, cache, and indexing. At the same time, those offline Web programs will also benefit a lot. You do not need rich animations for plug-ins.
Canvas objects
This will give the browser the ability to draw vector images directly above, which means that users can directly display graphics or animations in the browser without using Flash and Silverlight.
New API extensions
Provides New API extensions for HTMLDocument and HTMLElement.
Using HTML5 to replace Flash and Silverlight
Syntax)
1. Document media type
Most HTML syntaxes defined by HTML5 are compatible with HTML4 and XHTML1, but some of them are not compatible. Most HTML documents are saved as text/html media types.
HTML5 defines detailed parsing rules (including error handling) for HTML syntax. You must follow these rules to save them as text/html media types. The following is an example that complies with HTML syntax specifications:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Example document </title>
</Head>
<Body>
<P> Example paragraph </p>
</Body>
</Html>
Copy code
HTML5 also defines a text/HTML-sandboxed media type for the html syntax, so that the host does not trust the content.
Other syntaxes that can be used in HTML5 are XML, which is compatible with xhtml1. To use the XML syntax, you need to save the document as an XML media type, and set the namespace to http://www.w3.org/5o/xhtmlaccording to XML specifications.
The following example documents comply with the XML syntax specifications in HTML5. Note that XML documents must be saved as XML media types, such as application/xhtml + xml or application/xml.
<? Xml version = "1.0" encoding = "UTF-8"?>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Example document </title>
</Head>
<Body>
<P> Example paragraph </p>
</Body>
</Html>
Copy code
2 Character Encoding
In the HTML Syntax of HTML5, there are three forms to declare the encoding type of the string:
1. on the transport level, set Content-Type in the HTTP instance header.
2. Set a Unicode Byte Order Mark (BOM) at the beginning of the file. This character provides a signature for the file's encoding mode.
3. Use the meta element with the charset attribute to declare the encoding method in the content before the first 1024 bytes of the document. 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 declaration, although the original syntax is still available, but it is not recommended in HTML5.
The XML syntax in HTML5 is still the same as the previous XML syntax declaration.
3 DOCTYPE
HTML Syntax of HTML5 requires that the document declare DOCTYPE to ensure that the browser can display the page in standard mode. This DOCTYPE has no other purpose and is optional in XML, because documents in XML media format are always processed in standard mode.
The DOCTYPE declaration method is <! DOCTYPE html>, case insensitive. The DOCTYPE declared in earlier versions of HTML takes a long time because the HTML language is based on SGML and therefore needs to reference a corresponding DTD. HTML5 is different from the previous version. You only need to declare DOCTYPE to tell the document to enable the HTML5 syntax standard. The browser will <! DOCTYPE html> to do the rest of the work.
4 MathML and SVG
HTML5 HTML syntax allows you to use MathML (Mathematical Markup Language) and SVG (scalable vector graph) elements in your documents. For example, a very simple HTML page contains a circle drawn by an svg element:
<! Doctype html>
<Title> SVG in text/html </title>
<P>
A green circle:
<Svg> <circle r = "50" cx = "50" cy = "50" fill = "green"/> </svg>
</P>
Copy code
More complex combined tags are also supported. For example, you can use the foreignObject element of svg to nest MathML, HTML, or itself.
5 others
HTML5 is already native to support Siri, although these Siri can only be used in documents of UTF-8 and UTF-16.
If the lang attribute is set incorrectly, it will be updated to a null string to tell the browser that it is an unknown language, which serves the same purpose as XML: lang in xml.
Uncle Tom
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
