The difference between H5 and traditional HTML-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

The difference between H5 and traditional HTML

Y2J

May 23, 2017 pm 01:36 PM

htmlhtml5

This article mainly introduces the relevant information about the difference between HTML5 and traditional HTML in HTML5 study notes. Friends in need can refer to 1. Changes in HTML5 syntax
The The changes mentioned in the knowledge points refer to the changes defined based on HTML4, which are mainly as follows:
1. The file extension (.html or .htm) and content type (text/html) of HTML5 remain unchanged.
2. In HTML5, version declarations are deliberately not used, and one document will apply to all versions of HTML.
3. Starting from HTML5, it is recommended to use UTF-8 for the character encoding of files.
4.HTML5 ensures maximum compatibility with previous HTML versions.
In order to ensure compatibility, we need to start with the element. In HTML5., the mark of the element can be omitted. Specifically, the tags of elements are divided into three types: "the end tag is not allowed to be written", "the end tag can be omitted" and "the start tag and the end tag can be omitted".
• End tag elements are not allowed to be written: area, base, br, col....
• End tags can be omitted: li, dt, dd, p, rt...
• Both the start tag and the end tag can be omitted: html, head, body...
二.New structural elements
•The section element represents a content block in the page, such as a chapter, header, footer or other part of the page;
•The article element represents a block of the page that is not relevant to the context Independent content, such as an article in a blog or an article in a newspaper;
•aside element represents auxiliary information related to the content of the article element in addition to the content of the article element;
•header element Represents the title of a content block in the page or the entire page;
•hgroup element is used to combine the titles of the entire page or a content block in the page;
•footer element represents the entire page or a piece of content in the page Block footer. Generally speaking, it will contain the name of the creator, the date of creation, and the creator's contact information;
•nav element represents the navigation link part of the page;
•figure element represents an independent paragraph Stream content generally represents an independent unit in the main stream content of the document. Use the figcaption element to add a title to the figure element group
2. Other new elements
•audio element definition Audio , such as music or other audio streams;
•embed element is used to insert various multimedia, the format can be Midi, Wav, AU, MP3, etc.;
•mark element To visually present text that needs to be highlighted or highlighted to users, a typical application is to highlight search keywords to users in search results;
•progress element represents The running process
•ruby element represents rubycomment (Chinese phonetic or character)
•rt element represents the interpretation or pronunciation of the character (Chinese phonetic or character)
•rp element in Used in ruby annotations to define content displayed by browsers that do not support ruby elements.
•The wbr element represents soft line breaks, and when the width is not enough, line breaks are automatically performed here
•canvas elements represent graphics, such as charts and other images
•cammand elements represent commands Button, such as radio button, checkbox or button
•the details element represents the detailed information that the user requires and can get
• The datagrid element represents a list of optional data, which is displayed in the form of a tree list
•keyThe gen element represents the generated key
•The output element represents different types of output, such as scripts Output
•The source element defines media resources for media elements (such as

The code is as follows:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>form属性</title> 
</head> 
<body> 
<form action="" id="testform"> 
<input type="text" name="" /> 
</form> 
<textarea form="testform" name="" cols="30" rows="10"></textarea> 
</body> 
</html>

The input element belongs to the form. It is written inside the form, and there is no need to set the form attribute for it. The textarea element is written outside the form, but it is subordinate to the form, so the id of the form is set to the form attribute of the textarea element.
The advantage of this is that when you need to add styles to the elements on the page, you can add them more conveniently, because they are no longer scattered among the forms.

【Related Recommendations】

1. HTML5 Free Video Tutorial

2. The input box appears when making a virtual keyboard in H5 What to do if there is occlusion?

3. Detailed explanation of the method of implementing full-screen playback on WeChat in HTML5

4. Detailed explanation of browser compatibility issues with H5 new tags

5. Overall overview of how to use H5 to create web pages

The above is the detailed content of The difference between H5 and traditional HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

H5: How It Enhances User Experience on the WebApr 19, 2025 am 12:08 AM

H5 improves web user experience with multimedia support, offline storage and performance optimization. 1) Multimedia support: H5 and elements simplify development and improve user experience. 2) Offline storage: WebStorage and IndexedDB allow offline use to improve the experience. 3) Performance optimization: WebWorkers and elements optimize performance to reduce bandwidth consumption.

Deconstructing H5 Code: Tags, Elements, and AttributesApr 18, 2025 am 12:06 AM

HTML5 code consists of tags, elements and attributes: 1. The tag defines the content type and is surrounded by angle brackets, such as. 2. Elements are composed of start tags, contents and end tags, such as contents. 3. Attributes define key-value pairs in the start tag, enhance functions, such as. These are the basic units for building web structure.

Understanding H5 Code: The Fundamentals of HTML5Apr 17, 2025 am 12:08 AM

HTML5 is a key technology for building modern web pages, providing many new elements and features. 1. HTML5 introduces semantic elements such as, , etc., which enhances web page structure and SEO. 2. Support multimedia elements and embed media without plug-ins. 3. Forms enhance new input types and verification properties, simplifying the verification process. 4. Offer offline and local storage functions to improve web page performance and user experience.

H5 Code: Best Practices for Web DevelopersApr 16, 2025 am 12:14 AM

Best practices for H5 code include: 1. Use correct DOCTYPE declarations and character encoding; 2. Use semantic tags; 3. Reduce HTTP requests; 4. Use asynchronous loading; 5. Optimize images. These practices can improve the efficiency, maintainability and user experience of web pages.

H5: The Evolution of Web Standards and TechnologiesApr 15, 2025 am 12:12 AM

Web standards and technologies have evolved from HTML4, CSS2 and simple JavaScript to date and have undergone significant developments. 1) HTML5 introduces APIs such as Canvas and WebStorage, which enhances the complexity and interactivity of web applications. 2) CSS3 adds animation and transition functions to make the page more effective. 3) JavaScript improves development efficiency and code readability through modern syntax of Node.js and ES6, such as arrow functions and classes. These changes have promoted the development of performance optimization and best practices of web applications.

Is H5 a Shorthand for HTML5? Exploring the DetailsApr 14, 2025 am 12:05 AM

H5 is not just the abbreviation of HTML5, it represents a wider modern web development technology ecosystem: 1. H5 includes HTML5, CSS3, JavaScript and related APIs and technologies; 2. It provides a richer, interactive and smooth user experience, and can run seamlessly on multiple devices; 3. Using the H5 technology stack, you can create responsive web pages and complex interactive functions.

H5 and HTML5: Commonly Used Terms in Web DevelopmentApr 13, 2025 am 12:01 AM

H5 and HTML5 refer to the same thing, namely HTML5. HTML5 is the fifth version of HTML, bringing new features such as semantic tags, multimedia support, canvas and graphics, offline storage and local storage, improving the expressiveness and interactivity of web pages.

What Does H5 Refer To? Exploring the ContextApr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

See all articles