I signed up for the first byte Front End youth training camp and learned HTML again on the first day.
Before, I always thought THAT HTML was just those tags, and HTML was the simplest of the three sets. But in fact, after listening to the lessons of youth Training camp, I found that MY understanding of HTML was not comprehensive, and THERE were many things I did not know clearly.
For example, the <script> tag I knew would block the PARSING of the DOM structure, so I put it at the end of the <body>, but I didn’t know it had a property (defer) to let the JS download synchronously and defer execution.
And then there are semantic tags, although I know that semantic tags, semantic tags are good for all kinds of devices and SEO, but I have hardly used them ~~, maybe I am still too low, haven’t reached that level 😂.
In order to deepen memory and promote learning, take notes is certainly essential, since there is this article activity, then I will send my notes, in order to encourage ~, everyone come on 💪.
1. Markup and programming languages
HTML stands for HyperText Markup Language; Hypertext is text that contains links to other text; It is a markup language; Proposed by Berners-Lee and now maintained by the W3C;
Markup language
The collection of text and other information related to the text to present the structure of the document;
Examples of markup languages: HTML, XML, KML, Markdown;
A programming language
Logical language;
2, HTML 5
HTML5 launched in 2015; Improved the previous document structure too dependent on div shortcomings;
The advantage of it
Semantic labels, easy to understand and conducive to SEO optimization;
Unified standard, to solve the compatibility between the rogue;
More apis are provided;
3. Basic HTML syntax
<! DOCTYP html>
<! DOCTYP> is used to declare the HTML version to be used, <! DOCTYP HTML > is used to declare that HTML5 is used.
The < meta > tag
Source data label, data that describes the data;
Commonly used attributes
Charset: Defines the character encoding mode;
Name: brief description of the page information. Common values are keywords, description, viewport (mainly used for mobile terminal, define the area on the device screen used to display the web page);
Http-equiv: Adds information to the HTTP header, such as setting the page expiration time and setting the cookie
Other custom meta information;
<title>
The page title
<link>
Commonly used attributes
Shortcut Icon: Specifies the logo next to the page title
Stylesheet: Links to style sheets
Alternate Stylesheet: Alternate stylesheet, not supported by all browsers
<script>
Used to import external script files;
classification
<script defer> : Download the script file immediately. This Boolean property is set to notify the browser that the script will be triggered as soon as the document is parsedDOMContentLoaded (en-US)Execute before the event. ;
<script async> : For ordinary scripts, if anyasyncProperty, the normal script is requested in parallel and parsed and executed as quickly as possible. forModule scriptIf there isasyncProperty, the script and all its dependencies are executed in the defer queue, so they are requested in parallel, resolved and executed as soon as possible.
Semantic tags
Use semantic tags to facilitate understanding and SEO optimization; Make people and machines better able to read you;
Block semantic tags:
<header>
<nav>
<article>
<section>
<aside>
<footer>
Grouping class semantic tags
< Figure > : Independently referenced contents of the package: charts, illustrations, codes, etc
