search
HomeWeb Front-endH5 TutorialLearn what HTML5 is

Learn what HTML5 is

Apr 05, 2017 pm 03:06 PM

If a non-technical person asked you, what is HTML5, how would you answer?

New HTML specification. . .

Provides browsers with powerful capabilities to do things that could not be done before. . . (To be precise, it should stipulate many new interface standards for browsers, requiring browsers to implement awesome functions...Thanks to Hongfeng Yiye for this)

 To browsers Many new interfaces are exposed. . .

A lot of new effects have been added. . .

The person who asked actually didn’t understand the real question he wanted to ask. The person who answered seemed to understand, but something seemed to be missing. Awesome capabilities, new interfaces, cool effects, the first person to answer was dizzy. What is HTML, what is CSS, what is DOM, what is JavaScript, most front-end developers use these every day, but few people think about the relationship between them.

First of all, the full name of HTML is Hypertext Markup Language, which is a computer language in the form of markup. By giving this markup language to a specialized parser, certain interface effects can be parsed. The browser is a parser that specializes in parsing this markup language. We say that the final effect is to display a specific interface on the screen, then the browser must convert each mark into an internal data structure, and this data structure is a DOM element. For example, an tag is an instance of the HTMLAnchorElement type in the browser's internal world.

An HTML file is like an article written in hypertext markup language. Articles usually have a structure, and in the eyes of the browser, it is DOM. DOM describes a series of hierarchical node trees. (But at this time, the DOM still existed inside the browser and was written in C++ language)

With the development of history, when people are no longer satisfied with simply displaying text, some text needs special emphasis or special text is added. The need for format slowly emerged. Faced with people's need to control the display effect, the first and simplest way to think of is to add markers. Add some style control tags. At this time, style control tags like and

appeared. But in this way, all marks will be divided into two categories: one tells what I am, and the other tells how I display. This is not a big problem, the markup is simple, but it is not so simple for the browser to parse the markup. Think about it, if you do this, the DOM will be divided into two categories, one is the DOM node that describes the element, and the other is the DOM node that describes the display effect. A DOM node may represent an element or a display effect. No matter how you look at it, it feels awkward.

In the end, people decided to abandon the style tag and add a style attribute to the element tag. The style attribute controls the style of the element (the original style declaration syntax must be very simple). The original properties of style tags have now become the syntax of style properties, and style tags have become style properties. This makes the logic much clearer. Then here comes the question:

  • If an article contains too much rhetoric, it will inevitably arouse readers’ disgust. If you put both elements and display effects in one file, it will definitely be difficult to read.

  • If there are 10 elements that all need an effect, do you have to write a style ten times?

  • Setting the effect of the parent element Does it have any impact on child elements? Let’s fight

  • . . . . . . . . .

There must be many similar problems, so CSS and cascading style sheets came out, which brought css rules, css selector, css declarations, css attributes, etc. , thus solving the above pain points. The markup language layer has been solved, but the browser can't just sit back and play, it must provide support. So when the browser parses a statichtml file, it traverses the entire html document to generate a DOM tree. When all style resources are loaded, the browser begins to build the rendering tree. The presentation tree determines how each DOM element should be drawn based on a series of CSS declarations and after cascading. At this time, no interface is actually displayed on the page, and the rendering tree is also a data structure in the browser memory. After the rendering tree is completed, the layout begins. This is like knowing the width and height of a rectangle. Now you need to measure where to draw it on the canvas and how much space it occupies. After this process is completed, it is the drawing process, and then we have the display interface we see.

The problem of adding some effects to the marks has been solved, and the wheel of history has begun to move forward again. Gradually, people are no longer satisfied with simple display effects, and people want some interaction. At that time, most of the people who wrote HTML did not understand software development. Are you kidding me? When I wrote the activity page, you asked me to use C++? What C++ does is indeed an anti-aircraft cannon to swat mosquitoes - overqualification and underutilization. Let the guerrillas do what the regular army disdains to do. At this time, Netscape developed the JavaScript language. JavaScript at that time was not as popular as it is now. A local script language was not as awesome as it is now to unify the universe.

JavaScript is a language that runs in the browser. HTML text is static. It is impossible for JavaScript to modify static files, but it can deal with the inside of the browser. But the DOM at this time is not today's DOM. They are C++objects. Either JavaScript is converted into C++ instructions to operate these C++ objects, or these C++ objects are packaged into JavaScript native objects. History chose the latter, and this time marked the official birth of modern DOM. However, history sometimes goes backwards, and there will always be a few weird things in history, such as IE. IE is weird and his whole family, including Edge!

Marx was a charlatan, but Engels was a good comrade. Dialectics of nature and historical materialism are good things. We can see this from a historical perspective. The ultimate source of the emergence and development of CSS, DOM, and JavaScript is HTML, Hypertext Markup Language. People's needs for the web ultimately converge on HTML. So whenever history creates new demands, the final changes will first occur in the HTML specification.

When interactivity cannot meet people's needs, the web ushered in a new demand: webapp. To cater to new needs, the first thing to change is the HTML specification. At this time, the existing HTML4.0 can no longer meet people's growing needs. Therefore, HTML5 is meeting the needs of history. After eight years of hard work, it was finally released in 2014. Officially finalized this year! HTML5 will definitely add new tags, but for traditional HTML, HTML5 is a rebellion. All previous versions only described the JavaScript interface in a few words, and the main space was used to define tags, and all JavaScript-related content was defined by the DOM specification. The HTML5 specification defines a large number of JavaScript API around how to use new tags (so some of the APIs overlap with DOM and define DOM extensions that browsers should support. From this we can see that HTML5 It is certainly not the final version of HTML).

 

The above is the detailed content of Learn what HTML5 is. 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
Beyond Basics: Advanced Techniques in H5 CodeBeyond Basics: Advanced Techniques in H5 CodeMay 02, 2025 am 12:03 AM

Advanced tips for H5 include: 1. Use complex graphics to draw, 2. Use WebWorkers to improve performance, 3. Enhance user experience through WebStorage, 4. Implement responsive design, 5. Use WebRTC to achieve real-time communication, 6. Perform performance optimization and best practices. These tips help developers build more dynamic, interactive and efficient web applications.

H5: The Future of Web Content and DesignH5: The Future of Web Content and DesignMay 01, 2025 am 12:12 AM

H5 (HTML5) will improve web content and design through new elements and APIs. 1) H5 enhances semantic tagging and multimedia support. 2) It introduces Canvas and SVG, enriching web design. 3) H5 works by extending HTML functionality through new tags and APIs. 4) Basic usage includes creating graphics using it, and advanced usage involves WebStorageAPI. 5) Developers need to pay attention to browser compatibility and performance optimization.

H5: New Features and Capabilities for Web DevelopmentH5: New Features and Capabilities for Web DevelopmentApr 29, 2025 am 12:07 AM

H5 brings a number of new functions and capabilities, greatly improving the interactivity and development efficiency of web pages. 1. Semantic tags such as enhance SEO. 2. Multimedia support simplifies audio and video playback through and tags. 3. Canvas drawing provides dynamic graphics drawing tools. 4. Local storage simplifies data storage through localStorage and sessionStorage. 5. The geolocation API facilitates the development of location-based services.

H5: Key Improvements in HTML5H5: Key Improvements in HTML5Apr 28, 2025 am 12:26 AM

HTML5 brings five key improvements: 1. Semantic tags improve code clarity and SEO effects; 2. Multimedia support simplifies video and audio embedding; 3. Form enhancement simplifies verification; 4. Offline and local storage improves user experience; 5. Canvas and graphics functions enhance the visualization of web pages.

HTML5: The Standard and its Impact on Web DevelopmentHTML5: The Standard and its Impact on Web DevelopmentApr 27, 2025 am 12:12 AM

The core features of HTML5 include semantic tags, multimedia support, offline storage and local storage, and form enhancement. 1. Semantic tags such as, etc. to improve code readability and SEO effect. 2. Simplify multimedia embedding with labels. 3. Offline storage and local storage such as ApplicationCache and LocalStorage support network-free operation and data storage. 4. Form enhancement introduces new input types and verification properties to simplify processing and verification.

H5 Code Examples: Practical Applications and TutorialsH5 Code Examples: Practical Applications and TutorialsApr 25, 2025 am 12:10 AM

H5 provides a variety of new features and functions, greatly enhancing the capabilities of front-end development. 1. Multimedia support: embed media through and elements, no plug-ins are required. 2. Canvas: Use elements to dynamically render 2D graphics and animations. 3. Local storage: implement persistent data storage through localStorage and sessionStorage to improve user experience.

The Connection Between H5 and HTML5: Similarities and DifferencesThe Connection Between H5 and HTML5: Similarities and DifferencesApr 24, 2025 am 12:01 AM

H5 and HTML5 are different concepts: HTML5 is a version of HTML, containing new elements and APIs; H5 is a mobile application development framework based on HTML5. HTML5 parses and renders code through the browser, while H5 applications need to run containers and interact with native code through JavaScript.

The Building Blocks of H5 Code: Key Elements and Their PurposeThe Building Blocks of H5 Code: Key Elements and Their PurposeApr 23, 2025 am 12:09 AM

Key elements of HTML5 include,,,,,, etc., which are used to build modern web pages. 1. Define the head content, 2. Used to navigate the link, 3. Represent the content of independent articles, 4. Organize the page content, 5. Display the sidebar content, 6. Define the footer, these elements enhance the structure and functionality of the web page.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),