The article begins with a recommended methodology for learning knowledge: go through this trilogy when learning a concept

  • What is the concept of knowing this knowledge

  • What is the purpose for which this knowledge is presented?

  • Will the knowledge with a word clear!

If all three of the above are done, then we basically understand the knowledge 😊

1. The semantic HTML

Here are some exercises from Freecodecamp. Many simple examples can help us understand the specific use of H5 tags in real situations

Looking forward to the knowledge

The role of semantics:

  • Choose appropriate tags based on the structure of the content to build a more maintainable code structure that developers can read

  • It also allows the machine to parse the code better

First, an overview

Now let’s see how semantic tags are partitioned

  • Header nav — Usually in the header

  • Article section – Tags that are commonly used when writing articles

  • Footer aside

Take a look at the page structure of MDN

Now that you’ve looked at semantic labels (again, very simple) what might be asked in an interview?

[1] Brief understanding of HTML semantics?

  • Do the right thing with the right label.

  • HTML semantics make the content of the page structured, clearer structure, easy to browser, search engine parsing;

  • Displays in a document format even without styling CSS and is easy to read;

  • Search engine crawlers also rely on HTML tags to determine the context and the weight of each keyword, which is good for SEO.

  • Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding.

  • In addition, the use of semantic tags to improve the accessibility of the web page after hearing disabilities, visual disabilities will be able to access the information of the page through auxiliary devices!

    • It is important to keep in mind that reading AIDS used by people with disabilities rely on good, semantic labels to capture information on a page

    Hey, using semantic tags is a great thing!

In a nutshell

  • Ascend accessibility!

  • Optimize your search engine!

  • Improve code readability!

2. Other new HTML5 features

Knowledge overview

  • Multimedia label

[1] What are the new features and elements removed from HTML5?

HTML5 is no longer a subset of SGML (the ancient standard that was released in 1986, nine years before HTML2.0, as a system for defining markup languages), and is mostly about the addition of graphics, location, storage, multitasking, and more.

New elements:

  • Canvas painting; New elements for drawing can be used to achieve all kinds of cool special effects interested in this brochure ~

  • Video and audio elements for media playback; (Mentioned above)

  • Local offline storage localStorage Stores data for a long time. Data is not lost after the browser is closed.

  • SessionStorage data is automatically deleted after the browser closes;

  • Form controls, Calendar, Date, time, Email, URL, search;

  • New technologies webworker, Websocket, Geolocation;

And, of course, semantic tags, which we studied in Part 1

  • Article, footer, header, nav, section;

Removed elements:

  • Pure elements: Basefont, Big, Center, FONT, S (strikeout), Strike, TT, u (underline);

  • Elements that negatively affect usability: Frame, Frameset, Noframes;

[2] How to deal with the browser compatibility of HTML5 new tags?

IE8/IE7/IE6 supports tags generated by the document.createElement method. You can take advantage of this feature to enable these browsers to support the new HTML5 tags. When browsers support the new tags, they also need to add the default style of the tags.

[3] How to distinguish HTML from HTML5

The DOCTYPE declaration mentioned earlier

In HTML 4.01, you declare references to DTDS, because HTML 4.01 is based on SGML(the system for defining markup languages). The DTD(Document Type Definition) specifies the rules of the markup language so that browsers can render content correctly.

  • Contains all HTML elements and attributes, but excludes display and deprecated elements (such as font). Framesets are not allowed.
<! DOCTYPEHTML PUBLIC "- / / / / W3C DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd">
Copy the code
  • Contains all HTML elements and attributes, both presentable and deprecated (such as font). Framesets are not allowed.
<! DOCTYPEHTML PUBLIC "- / / / / W3C DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">
Copy the code

HTML5 is not based on SGML, so you don’t need to reference DTDS.

  • One line of code
<! DOCTYPEhtml>
Copy the code

In addition, the code can be determined by whether there are new structural elements \ functional elements ~