timerring

HTML Basics

July 5, 2021 · 5 min read
Tutorial
Frontend
If you have any questions, feel free to comment below. Click the block can copy the code.
And if you think it's helpful to you, just click on the ads which can support this site. Thanks!

A web page consists of three parts:

  1. Structure: written using HTML
  2. Presentation: CSS is used to set the styles of elements on the page
  3. Behavior: JavaScript is used to define the page’s behavior HTML is HyperText Markup Language. It is responsible for the page’s structure and defines its various parts. HTML is written as plain text and uses HTML tags to identify the different parts of a page.

Tags #

  • Paired tags: <tagname></tagname>
  • Self-closing tags: <tagname />

Attributes #

Attributes can be used to set the effects of tags. Attributes must be defined in opening or self-closing tags; they are essentially sets of name-value pairs.

  • <tagname attribute="value" attribute="value"></tagname>
  • <tagname attribute="value" attribute="value" />

Basic Structure of an HTML Page #

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- Main content of the web page -->
	</body>
</html>

Document Declaration #

<!doctype html> identifies the HTML version of the current page. This declaration tells the browser that the current page is written according to the HTML 5 standard.

Common Tags #

<html> #

The root tag of a web page. A page has one and only one root tag, and all content on the page must be written inside the html tag.

The head of the page. Its contents are not displayed directly on the page; this tag helps the browser parse the page.

Its child tags include <title> and <meta>:

<title> #

Sets the title of the page, which is displayed in the browser’s title bar by default. When search engines index a page, they primarily examine the content of title, which affects the page’s search ranking.

<meta> #
  1. Sets page metadata, such as the character set used by the page. <meta charset="utf-8" />
  2. Sets the page’s keywords. <meta name="keywords" content="keyword,keyword,keyword,keyword"/>
  3. Sets the page’s description. <meta name="description" content="Description of the web page"/>
  4. Requests a redirect. <meta http-equiv="refresh" content="seconds;url=address" />

<body> #

The body of the page. All visible parts of the page must be written in body.

<h1> ~ <h6> #

Heading tags. HTML has six heading levels; pages generally only use h1~h3. The importance of h1 is second only to title. Browsers also primarily examine the contents of h1 to determine the main content of a page. Generally, a page can only have one h1.

<p> #

Paragraph tag

<br /> #

Line break tag

<hr /> #

Horizontal rule tag

Inline Frames #

<iframe></iframe> can embed another external page in a page. Search engines do not index content inside inline frames, so avoid using them in development when possible. Its attributes are as follows:

  • src: the address of the external page; a relative path can be used
  • width and height: set the width and height of the frame
  • name: assigns a name to the inline frame. This value can be used as the target attribute of a hyperlink so that clicking the link opens the page in the corresponding inline frame.
Embedding a Bilibili Video #

Use the Bilibili player address as the iframe’s src. Common parameters:

  • autoplay: 0 disables autoplay; 1 enables autoplay
  • danmaku: toggles on-screen comments (enabled by default)
  • t: starts playback at the specified number of seconds
  • muted: plays without sound
  • hasMuteButton: whether to show a one-click mute button (hidden by default)
  • width, height: set the frame dimensions, for example width="65%" height="360"

Example:

<iframe src="https://player.bilibili.com/player.html?aid=682906056&bvid=BV1oS4y1A7sL&cid=912818995&p=2&muted=1" width="65%" height="360" allowfullscreen></iframe>

<a>Link text</a> lets the current page navigate to another page. Its attributes are as follows:

  • href The destination address of the link; it can be a relative path. It can also be #id-attribute-value, which navigates to a specified location on the current page when the link is clicked. mailto: can be used to create a hyperlink for sending email.
  • target Specifies which window opens the link. Possible values: _self: the default; opens the link in the current window _blank: opens the link in a new window The inline frame’s name attribute value: opens the link in the specified inline frame

Comments #

<!-- Comment content -->

Comments do not appear on the page, but they appear in the source code. We can use comments to explain the page’s code or to hide content we do not want to display on the page.

Entities #

Some special symbols cannot be used directly in HTML pages; entities must be used in their place. Entities are also called escape characters.

Entity syntax: &entityname;

  • Space: &nbsp;
  • <: &lt;

  • : &gt;

  • Copyright symbol: &copy;

Image Tags #

<img /> can be used to insert an external image into the page.

Attributes:

  • src: points to the path of an external image; a relative path can be used
  • alt: provides a description of the image when it cannot be loaded. Search engines primarily use this attribute to identify the image’s content; if it is omitted, search engines will index the image.
  • width: sets the image’s width
  • height: sets the image’s height

Image formats:

  • JPEG: images with rich colors, such as photographs
  • GIF: images with simple colors, simple transparency, or animation
  • PNG: images with rich colors and complex transparency
  • Principle for choosing images: if the results are the same, use the smaller one. If the results differ, use the one with better results.

Relative Paths #

A path relative to the directory containing the current resource. Use ../ to go up one directory; use as many ../ segments as the number of levels to go up.

xHtml Syntax Rules #

  1. HTML is case-insensitive, but try to use lowercase
  2. HTML comments cannot be nested
  3. Tags must have complete structure: either paired tags or self-closing tags.
  4. Tags can be nested but cannot overlap
  5. Attributes must have values, and the values must be quoted; either single or double quotes can be used

Text Tags #

<em>This is emphasized text.</em>
<strong>This is very important text.</strong>
<i>This is italic text.</i>
<b>This is bold text.</b>
<small>This is small text.</small>
<cite>1984 is a work by George Orwell.</cite>
<p>He said: <q>This is a good example.</q></p>
<blockquote>This is quoted text; it can be a sentence or a paragraph.</blockquote>
<p>This is an example of superscript text: x<sup>2</sup>.</p>
<p>This is an example of subscript text: H<sub>2</sub>O.</p>
<p>This text <del>has been deleted</del>.</p>
<p>This text <ins>has been inserted and is usually displayed underlined.</ins>.</p>
<pre>This is preformatted text
that can span multiple lines
and preserves spaces and line breaks.</pre>
<p>This is a code example: <code>print("Hello, World!")</code></p>

Lists #

Unordered Lists #

ul creates an unordered list; li represents a list item within it.

Ordered Lists #

ol creates an unordered list; li represents a list item within it.

List-related elements are block elements and can be nested within one another. Remove list markers with list-style:none.

<< prev | About Continue strolling JavaScript... ｜ next >>
If you want to follow my updates, or have a coffee chat with me, feel free to connect with me:
Follow @timerring @timerringX 知乎@timerring Official Account

© 2022 - present timerring