Front end development HTML5 – Basic tag


What is HTML?

Html is a shorthand for hypertext markup language. It’s not a programming language, but a markup language that tells browsers how to build your page. “Hypertext” means that the page can contain pictures, links, even music, programs and other non text elements. Html is also a kind of specification, a kind of standard. It marks all parts of the web page to be displayed by marking symbols. Web page file itself is a kind of text file. By adding a marker in the text file, you can tell the browser how to display the content (such as how to process the text, how to arrange the picture, how to display the picture, etc.).

B / S architecture mode (Browser / server, browser / server mode)

B / S structure (Browser / server mode) is a network structure mode after the rise of web,

Web browser is the most important application software of client. This mode unifies the client and concentrates the core part of system function implementation on the server,

It simplifies the development, maintenance and use of the system. Only one browser is installed on the client, server software and database software are installed on the server.



HTML document is composed of many HTML tags and content, and tags are our main knowledge.

There are two kinds of HTML tags, one is single tag and the other is double tag.

Single tag is mainly a tag with only attributes and no content; it is similar to meta, IMG, input and other tags

A double label consists of a start label and an end label. The contents filled in between are similar to

Some tags can be nested, some tags cannot be nested


1. Represents our document type

2. The root element of HTML, which is used to contain all elements of HTML documents


The content contained in the header will not be displayed on the page, which usually includes the page code, author, and page

Description information, JS import, CSS import and other information.

4. The encoding used to declare the current document is UTF-8


The title used to declare the current document, which will appear in the browser’s tab</p> <p style="margin-left: 30px">6. </p> <p>All elements that you want to display in the browser are included in the element.

Initial text of HTML document


Note: tags can also be called HTML elements, which can be divided into four types.

1. Block elements occupy a row of space. They are used to lay out paragraphs, lists, navigation menus, footnotes and other structures. Do not nest block elements in row elements.


    this is paragraph1
    this is paragraph2

2. Inline elements share a row of space with other elements, which are usually nested in block level elements and appear as part of a paragraph


    you are strong

3. Empty elements contain only a single label, which is usually used to insert some content in the document, such as img


4. Substitute element is out of the category of CSS, and its performance does not depend on CSS, typical replacement elements are,,

HTML Properties

Elements can have many attributes. This attribute is composed of key value pairs. The display effect of the page is also related to these attributes. It will not be explained here. Later CSS content will be mentioned.


Note for HTML: the browser will only parse one blank space; comment method:; entity: similar to space — > copyright entity character — >


Paragraph label: P

Title label: h1-6

Accent labels: EM, strong >  

Bold label: B

Italicized label: I

Underline ID: u

Tabs tab

Ordered list: ol

Child element: Li sequence number starts from 1 by default

Unordered list: UL

Child element: Li

List: DL

Subtitle element: DT

Sublist item element: DD

Hyperlink label: a

Link to a page

The value of the href can be the URL of an address or the ID value of a page. You need to add an ID after the URL

The value of target is generally “blank”, “self”, “top”, “parent”

Image tag: IMG

Add a picture

The value of SRC is the address of the image; the value of ALT indicates that the image will be displayed if it is not loaded successfully

Table label: table

Table labels need to be used in combination with other labels to display tables: caption / thead / tbody / tFoot / TR / TD / Th / COL / colgroup. Compared with these labels, the attributes of tables are particularly important

Table attributes (directly in the form of key value pairs, without the use of style attributes, which are not needed later

How should align tables be aligned in documents? Values can be left, center, right

• border sets the border characteristics of the table, taking the integer as the value, and the unit is PX

• cellpadding sets the distance between the content and the cell

• cellspacing sets the distance between cells

• width sets the width of the table

• bgcolor sets the background color of the table

Tabular label


        Place label for table title

View Code

New label:

1. The header is a kind of structural element with guidance and navigation function, which is usually used to place the title of the whole page or a content block within the page, but it can also contain the search form or logo.

2. NAV is a link group that can be used as page navigation, where navigation elements are linked to other pages or other parts of the current page.

3. Article represents the independent and complete content in a document, page or application, which can be referenced by others or nested. It can be a blog or newspaper article, a forum post, a user comment or independent plug-in, or any other and independent content.


As an HTML document, the independent function is equivalent to the feeling of Div

5. The aside element is used to represent the affiliated information part of the current page or article. It can contain references, sidebars, advertisements, navigation bars, and other types of parts different from the main content related to the current page or main content.

6. The footer element serves as a footnote of its upper parent content block or a root block. Footers usually include footnote information of related blocks, such as the author, related reading links and copyright information. Similar to header, there is no limit to the number of footer elements in a page.

7. The address element is used to present the contact information in the document, including the name of the document author or document maintainer, their website links, e-mail address, real address, telephone number, and all contact information of the contacts related to the document.

8. Figure & figcaption figure element is a combination of elements, with optional title. Figure element is used to represent a piece of independent content on the web page, which will not have any impact on other content on the web page after being removed from the web page. Figure element can represent pictures, statistical charts or code examples, or audio plug-ins, video plug-ins, unified Tables, etc. The figcaption element represents the title of the figure element, which belongs to the figure element and must be written inside the figure element. At most one figcaption element can be placed in a figure element, but multiple other elements can be placed.

9. The details details element is an element used to identify that the sub elements inside the element can be expanded and displayed in a shrinking way The details element is not limited to placing text, but also forms, plug-ins, or detailed data tables for a statistical chart.

Open when the attribute value is true, the child elements inside the element should be expanded and displayed; when the attribute value is false, the child elements inside the element should be shrunk and not displayed. The default value is false

The summary summary element is subordinate to details. When you click the content text in the summary element with the mouse, all other subordinate elements in the details element will expand or contract. If there is no summary element within the details element, the browser provides default text (details) for clicking.