This is the 13th day of my participation in the August More Text Challenge

Preface 🥳

As we all know, HTML is the first language the front-end learns. However, in our daily practical development, we always pay attention to practice and application. However, many people ignore the basic knowledge of HTML. What is HTML and what is its history? How HTML is used, and how to write more semantic HTML.

Next, let’s learn ⑧~🧐

😋 1. Three elements of web page

As you all know, there are three basic elements to a web page. That’s the familiar HTML, CSS and JS. For the three, the main description is as follows:

HTML: The basic structure of a web page;
CSS: the appearance of a web page;
Js: Functional behavior of web pages.

😜 2. Introduction to HTML

Definition 1.

HTML, known as HyperText Markup Language, is a Markup Language used to build the basic structure and content of web pages. Let’s see what hypertext and markup languages are:

Hypertext: text containing links to other text;

Markup language: Combines text and other text-related information to present document structure, such as HTML, XML, KML, Markdown, and so on.

2. Development history

After looking at the definition, let’s take a look at the history of HTML. Details are as follows:

Berners-Lee 在In 1989,A hypertext system based on Internet is proposed.
In 1993, IETF(Internet Engineering Task Force) released its firstHTMLThe proposal, therefore,HTMLThe first version of language was born.
After going through several drafts,HTML 2.0 于In 1995,Release, includingBased on the formFile upload, form, internationalization and other functions.
In 1994, W3CFounded and then took overHTMLThe standardization work, and inIn 1997,releasedHTML3.2 。
Subsequently releasedHTML4.0Many browser-specific element types and attributes are used in.
inIn 2014,The time,HTML5As aW3CRelease of recommendation standards.

😝 3. HTML structure

1. Cite examples

Let’s take a look at some HTML code, which looks like this:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>The test site</title>
</head>
<body>
    <p class="editor-note">Chow's cat is so cute!</p>
    <img src="cat.png" alt="Cat pictures">
</body>
</html>
Copy the code

As you can see, in the HTML code above, there are HTML, head, meta, title and body tags, and so on. These tags form the structure of HTML.

Let’s take a look at some of the features of HTML.

Characteristics of 2.

HTMLThe document contains multipleHTMLElements, elements have different properties.
HTMLElements =The start tag + End tag + Element content.
Some elements have only one tag, such asimg 、 input 、 brAnd so on.
HTMLThe element tagCase insensitive.
Elements can be nested among other elements.
Elements can have attributes, which contain additional information about the element.

Let’s take a look at each of these tags.

3. HTML page structure

(1) the DOCTYPE

, usually placed at the top of an HTML document, will be added to parse the rendered page in accordance with the W3C’S HTML5 standard.

(2) the HTML

< HTML >, which is the root element of the web page, contains the content of the entire page.

(3) the head

, this tag is not visible to the user and contains content like search engine oriented keywords, page descriptions, character encoding declarations, CSS styles, and so on.

(4) the body

, which contains content accessible to the user, including text, graphics, video, games, audio, and more.

(5) meta

, the usual Settings are: charset/name/http-equiv. The following provides some common configuration information.

<meta charset="utf-8">Define document character encoding<meta name="keywords" content="HTML">The keyword<meta name="description" content="HTML based">Page description<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = 0">Mainly used on mobile devices, it defines the area of the device screen used to display web pages<meta http-equiv="expires" content="31 Dec 2021">HTTP headers Here is a custom meta site, you can consult to https://wiki.whatwg.org/wiki/MetaExtennsionsCopy the code

(6) the title

, which represents the title of a page and is often displayed on a browser TAB.

(7) style

(8) the link

indicates a jump link. The following are some common link modes. Details are as follows:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">Favicon for the current page<link rel="stylesheet" href="my-css-file.css">Link to the stylesheet<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">Replaceable style sheetsCopy the code

(9) script

<script type="text/javascript" src="javascript.js"></script>
Copy the code

Let’s look at its two properties:

defer: The script can be downloaded immediately and executed laterdomExecuted after fully parsed and displayed, only for external scripts. There aredeferThe script of the property preventsDOMContentLoadedEvent until the script is loaded and parsed.
async: Downloads scripts immediately and does not interfere with other operations, such as downloading other resources or loading other scripts. Only external scripts are available.

Let’s use a picture to show the difference between the two, as shown below:

As you can see, Async supports downloading scripts as soon as it encounters js files. In the case of defer, it only has the previous JS

After all the content is loaded, you can perform the operation.

😛 4. Common elements

1. Three common elements

(1) Inline elements

It occupies only the space contained in the border of its own corresponding label.
Only text or other inline elements can be contained.
The size can only be changed by modifying the horizontal margin, border, or line height.
Common inline elements are:<a>,<span> 、 <br> 、 <i> 、 <em> 、 <strong> 、 <label> 、 <q> 、 <var> 、 <cite> 、 <code> 。

(2) Intra-line block-level elements

Elements are arranged within a row, not on a single row.
Supports setting width and height as well as vertical margins and borders.
Common inline elements:<img> 、 <input> 、 <td> 。

(3) Block-level elements

The entire line that occupies its parent element, always starting with a new line.
Can hold other block elements or inline elements.
You can control the width height, line height, margin, border and so on to change its size.
Common block-level elements:<div>,<p> 、 <h1>-<h6> 、 <ol> 、 <ul> 、 <dl> 、 <table> 、 <address> 、 <blockquote> 、 <form> 。

2. The legend

Let’s use a diagram to understand the differences between the three commonly used elements. The details are as follows:

😏 semantic

Definition 1.

Semanticizing means choosing the right tags based on the structure of the content to build a more maintainable code structure that developers can read and that machines can parse better. As follows:

<div class="header"></div>
<div class="section">
	<div class="article">
    	<div class="figure">
        	<img>
            <div class="figcaption"></div>
        </div>
    </div>
</div>
<div class="footer"></div>
Copy the code

<header></header>
<section>
	<section>
    	<figure>
        	<img>
            	<figcaption></figcaption>
        </figure>
    </section>
</section>
<footer></footer>
Copy the code

2. Common semantic tag parsing

Let’s take a look at some common semantic tags, as follows.

(1) Semantic – block category label

1) the header

headerMainly used to present some introductory information.
Usually contains a set of introductory or navigational elements, such as headings,Logo, search box, author name, etc.
Can’t put<footer> 、 <address>Or another one<header>Inside the element.

Such as:

<header>
	<h1>HTML</h1>
    <P><time pubdate datetime="2021-08-15"></time></P>
</header>
Copy the code

2) nav

Provide navigation links, such as menus, tables of contents, indexes, and so on, in the current document or other documents.
Used to place some popular links, uncommon links are usually placedfooterPut it in the bottom.

Such as:

<nav>
	<ol>
        <li><a href="#">HTML</a></li>
        <li><a href="#">css</a></li>
        <li><a href="#">js</a></li>
    </ol>
</nav>
Copy the code

3) the article

Separate documents, pages, applications, sites.
Independently assignable or reusable structures, such as forum posts, news articles, blogs, user-submitted comments, interactive components, and so on.

Such as:

<article class="forecast">
    
    <h1>The weather forecast for Guangzhou</h1>
    
    <article class="day-forecast">
        <h2>2021.08.15</h2>
        <p>It's cloudy</p>
    </article>
    
    <article class="day-forecast">
        <h2>2021.08.16</h2>
        <p>A sunny day</p>
    </article>
    
</article>
Copy the code

4) section

Groups content by subject, usually with headings.
<section>It usually appears in the outline of a document.
Don’t put the<section>Used as a normal container, for example, to beautify fragment styles<div>More appropriate.
This works best if the element contains a single block of content that can be published separately<article> 。

Such as:

<h1>Choose an apple</h1>
<section>
    <h2>introduce</h2>
    <p>This document will provide a guide to help select the right apple</p>
</section>
<section>
    <h2>standard</h2>
    <p>There are many different criteria for choosing an apple, such as size, color, sweetness and so on</p>
</section>
Copy the code

5) value

Represents a section that has little to do with the rest of the page, or that does not affect the overall content.
Usually placed in the sidebar, used to display advertising,tipsReferences, etc.

Such as:

<p>Today the weather is fine, I decided to go for an outing</p>
<aside>
	<h4>The picnic</h4>
    <P>Prepare all kinds of food and leave for the picnic at about 9am.</P>
</aside>
Copy the code

6) footer

Represents the footer of the most recent chapter.
Usually contains information about the chapter’s author, copyright data, or document links.
footerThe elements in are not part of the section content and are not included in the outline.

Such as:

<footer>
	<h1>Copyright by Monday</h1>
    <P><time pubdate datetime="2021-08-15"></time></P>
</footer>
Copy the code

(2) Semantic – grouping category labels

1) figure/figcaption

<figure>Wrap content that is referenced independently: diagrams, illustrations, code, etc., usually with a title;
<figcaption>Description/title of the chart associated with it, usually located<figure>The first or the last one.

Such as:

<figure>
    <img 
         src="https://developer.mozilla.org/static/img/favicon144.png" 
         alt="A robotic monster over the letters MDN.">
    <figcaption>MDN logo</figcaption>
</figure>
Copy the code

2) blockquote

Block-level reference elements.
citeProperty represents the source’surl 。

Such as:

<figure>
    <blockquote cite="https://www.huxley.net/bnw/one.html">
        <p>Words can be X-rays, if you use them properly - they'll go through anything.</p>
    </blockquote>
    <figcaption>-Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>
Copy the code

3) dl/dt/dd

Term used to describe a set of key-value pairs.
Typically used for metadata, term definition, and other scenarios.

<dl>
	<dt>FireFox</dt>
	<dd>A free, open source, cross-platform.</dd>
</dl>
Copy the code

(3) Semantic – text labels

1) cite

<cite>The element is usually used to refer to the work title.
Includes citations from papers, documents, books, films, etc.

2) time

Machine readable time and date.
datetimeRepresents the date and time associated with this element. If not specified, the element will not be resolved to a date.

3) address

Represents the contact information of a person or organization.

4) mark

Used in a reference to indicate a need for attention.

5) code

Represents code snippets.

6) small

Disclaimers, notes, etc.

(4) Semantic – multimedia element tag

1) the img

srcProperty is required to embed the file path of the image.
altProperty contains oneA textual description of an image, optional. The screen reader reads these descriptions to the user who needs to use the reader to let them know what the image means. The browser displays the image on the page when it cannot load (network error, blocked content, or expired link)altProperty.
decodingDecoding mode: asynchronous, synchronous.
loadingLazy loading.

2) the picture

Element by containing zero or more<source>Element and one<img>Elements come for different.
The display/device scenario provides the corresponding image version.
mediaProperties: Render the corresponding image according to the media condition, similar to media query.
typeProperties:MIMEType that renders the corresponding image according to browser support.

3) Audio and video

The so-called audio and video tags are
and
tags.
The SRC attribute is required to embed the video file path.
Controls indicates whether to display the browser’s own controls and to create custom controls.
Autoplay Specifies whether toplay automatically.
The source element represents an alternate resource for the video (different formats, intelligibility, try in turn if it fails to read or cannot be decoded).

Such as:

<video controls>
    <source src="/flower.webm" type="video/webm">
    <source src="/flower.mp4" type="video/mp4">
    Sorry, your brower doesn't support embedded videos.
</video>

<audio controls src="/xxx.mp3">
    Your brower deos not support the <code>audio</code> element.
</audio>

<video controls src="/friday.mp4">
    <track default kind="captions" srclang="en" src="friday.vtt"/>
    Sorry, your brower doesn't support embedded videos.
</video>
Copy the code

🧐 6. HTML parsing

Let’s take a look at how HTML is parsed.

1. DOM document object model

The DOM, which expresses the structure of a node and defines a way for programs to access that structure, links web pages to scripting languages.

2. HTML parsing process

For DOM trees, the building process is as follows:

First buildDOMTree;
The second thing to do is calculate the style, and then buildCSSOMTree;
thenDOM 和 CSSOMCombine into oneRenderThe render tree;
Now, the browser calculates the layout of the entire page;
Finally, draw the page.

The details are shown in the figure below:

🙃 7. Conclusion

In the previous section, we looked at the three elements of a web page, the introduction, structure, and parsing of HTML. Also important, of course, is semantic tags. As for semantic tags, they can let us know what they mean at a glance, which greatly improves the development efficiency.

So much for the basics of HTML! Hope to help you ~

🐣 Egg One More Thing

👉 pay attention to the public number on Monday laboratory, the first time to pay attention to quality articles, more selected columns for you to unlock ~

👉 If this article is useful to you, remember to leave a footprint jio before leaving oh ~

👉 that’s all for this article! See you next time! 👋 👋 👋

HTML basics worth paying attention to

Preface 🥳

😋 1. Three elements of web page

😜 2. Introduction to HTML

Definition 1.

2. Development history

😝 3. HTML structure

1. Cite examples

Characteristics of 2.

3. HTML page structure

(1) the DOCTYPE

(2) the HTML

(3) the head

(4) the body

(5) meta

(6) the title

(7) style

(8) the link

(9) script

😛 4. Common elements

1. Three common elements

(1) Inline elements

(2) Intra-line block-level elements

(3) Block-level elements

2. The legend

😏 semantic

Definition 1.

2. Common semantic tag parsing

(1) Semantic – block category label

1) the header

2) nav

3) the article

4) section

5) value

6) footer

(2) Semantic – grouping category labels

1) figure/figcaption

2) blockquote

3) dl/dt/dd

(3) Semantic – text labels

1) cite

2) time

3) address

4) mark

5) code

6) small

(4) Semantic – multimedia element tag

1) the img

2) the picture

3) Audio and video

🧐 6. HTML parsing

1. DOM document object model

2. HTML parsing process

🙃 7. Conclusion

🐣 Egg One More Thing

Related Posts

HTTP Caching

Vue nextTick thoroughly understood

Small program subcontract processing