You must know the basics of HTML

This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

📢 Hello everyone, I am Xiao Cheng, a sophomore front-end enthusiast

📢 This article is a study note for the basics of HTML

📢 Thank you very much for reading

📢 May you be true to yourself and love life

💡 Knowledge points look first

About HTML History
HTML Document structure
Semantic tags in HTML5

This is the first article in a series of articles, so let’s keep it simple and get straight to work!

A brief introduction to HTML

1. Three elements of a web page

Speaking of this always want to mention the front three musketeers, HTML, CSS, JS, they three in the web page has a clear division of labor

HTML: Basic structure of a web page
CSS: Display effect of a web page
JS: Function and behavior of web pages

2. What is HTML

HTML is also called HyperText Markup Language, short for HyperText Markup Language, a Markup Language used to build the basic structure and content of web pages

Hypertext: Links within text that contain other text

Markup language: Combines text and other text-related information to reveal information about the structure of the document, such as HTML, XML, KML, Markdown, etc

3. Development history

HTML has a long history of improving on pre-existing problems

I think this is the meaning of our learning, to find problems, solve problems, continue to grow, slowly become stronger

Berners-lee proposed an Internet-based hypertext system in 1989
In 1993, IETF (Internet Engineering Task Force) issued the first HTML proposal, from which the first version of HTML language was born
HTML 2.0 was released in 1995 after several drafts, including form-based file uploads, tables, internationalization, and more
In 1994, the W3C was formed to take over the standardization of HTML, releasing HTML 3.2 in 1997
Many browser-specific element types and attributes were adopted in the subsequent release of HTML4.0
HTML5 was released as a W3C recommendation in 2014

I didn’t expect that the HTML5 I’m talking about every day was released in 2014 😂

Second, HTML features

HTML tags typically consist of a start tag, an end tag, content, and elements

Of course, some tags do not have an end tag, such as IMG, input…

HTML documents contain multiple HTML elements that have different characteristics
HTML element = start tag + End tag + element content
Some elements have only one tag, such as IMG, input, br, and so on
HTML element tags are case insensitive
Elements can be nested among other elements
Elements can have attributes, which contain additional information about the element

3. HTML page structure

1. Fixed structure

Writing HTML in VSCode often makes us forget about the fixed structure in HTML

<! DOCTYPE html><html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>The page title</title> 
    </head> 
    <body> 
        //xxx
    </body> 
</html>

Copy the code

is placed at the top of the HTML document, and the browser will parse the rendered page according to the W3C’S HTML5 standard
< HTML > root element, which contains the content of the entire page
is not visible to the user and contains, for example, search engine-oriented keywords, page descriptions, character encoding declarations, CSS styles, and so on
This element contains content that can be accessed by the user, including text, images, video, games, audio, etc

2. meta

In the head we can set some configuration information with the meta tag

<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, initialscale = 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 headersCopy the code

3. link

The link tag is used to specify external resources and establish links between HTML documents and external resources

There are three common attributes

Ref: Indicates the type of relationship between an HTML page and a resource, such as icon
Type: Specifies the MIME type, such as text/ CSS
Href: Specifies the external resource URL

Several common uses

<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

4. script

I’ll focus on its two properties defer and Async

The script tag that adds defer will download immediately and delay execution

The script tag added with async tells the browser that it does not need to wait for the script to download and execute before loading the page.

The difference between the three can be seen in the figure

4. Common elements

1. Inline the element inline

• Occupies only the space contained in the border of its corresponding label

• Can only accommodate text or other inline elements

• The size can only be changed by modifying the horizontal margin, border, or line height

Commonly used inline element: < a >, < span >, < br >, < I >, < em >, < strong >, < label >, < q >, < var >, < cite >, < code >

2. Block level element block

The entire line that occupies its parent always starts on the 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:
, < P >,
, < H6 >, < OL >,
,

,
,

3. Inline block-level elements inline-block

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: , , < TD >

Fifth, semantic labels

Prior to HTML5, div tags were abused, leading to problems such as decreased code readability

A set of semantic tags has been proposed in HTML5 to make code easier to read, more maintainable, and better parsed by machines

HTML5 tags are much more readable

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

1. Semantics — block labels

Classic god figure

This figure shows the division of semantic tags

1. header

• Present introductory information

• Usually contains a set of introductory or navigational elements such as a title, Logo, search box,

Author name, etc.

• Cannot be placed inside a

Usually a large box used to wrap head navigation

(gold code)

2. nav

Provide navigation links, such as menus, tables of contents, indexes, and so on, in the current document or other documents
Used toPlace some popular links, infrequently used links are usually placedfooterPut in the bottom

<nav>
	<ol>
        <li><a href="#">HTML</a></li>
        //xxxx
    </ol>
</nav>

Copy the code

3. 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

4. section

Groups content by subject, usually with headings
<section>Usually occurs inThe outline of the document
Don’t put the<section>Use as a normal container, for example, to beautify the fragment style<div>A more appropriate
If the element contains a single block of content, yesSeparate releaseIs more suitable for use<article>

5. aside

Represents a section that has little to do with the rest of the page, or that does not affect the overall content
Usually inThe sidebarFor display advertising,tipsReferences, etc

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

2. Semantically — group

1. figure — figcaption

<figure>Package isIndependently referenced content: Diagrams, illustrations, code, etcThe title
<figcaption>Description/title of the chart associated with it, usually located<figure> 的The first or the last

<figure>
    <figcaption>xxx</figcaption>
    <img src="" alt="">
</figure>
Copy the code

Kind of like our standard logo tag,

2. blockquote

Block-level reference elements
citeProperty represents thesourcetheurl

<blockquote cite="http://baidu.com">
    <p>sdafkl</p>
</blockquote>
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.

3. Semantic — text

None of these things have been used much, whoohoo

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 beParse to date

3. address

Contact information

4. mark

Make a mark to indicate the need for attention

5. code

Code snippet

6. small

Disclaimer, precautions and other information

4. Semantic — multimedia

1. img

srcSpecifies the path to the file
altDescription of the image, text displayed when the network speed difference
decodingDecoding mode: asynchronous or synchronous
loading Lazy loadingAnd look forward to!
titleText displayed when the mouse is placed

2. picture

Contains more than onesocurceElements, andimgThe difference is that it can provideMultiple versionsImage version of
mediasimilarMedia queries
type MIMEType, depending on browser support for rendering images

3. The audio and video

Here are the two tags video and audio, and they have similar properties

srcSpecify file path
controlsSpecify whetherAccording to the control, you can also create your own
autoplayWhether or notAutomatically play
sourceAlternative resources,In the case of load failure, load resources, or different clarity, different formats, that is, spare

📌 summary

Finally, from this article we learn the following knowledge

HTML history
HTML features
HTML Document structure
Semantic tags in HTML5

In the end, there may be some unclear place, please forgive me

💌 if the article has any mistakes, or have any questions, welcome to leave a message, also welcome private letter exchange