First, the Three elements of the Web

Front base three sets

  • HTML (Hyper Text Markup Language): Web infrastructure
  • CSS (Cascading Style Sheets): Webpage display effect
  • JS (JavaScript): The functionality and behavior of a web page

What is HTML

Hyper Text Markup Language

A markup language used to define the structure of content, consisting of a series of elements that can be used to surround different parts of content to make it appear or work in a certain way. A pair of tags can add a hyperlink to a text or image, set the text to italics, change the font size, and so on.

HTML elements

elements

<p> This is an element </p>Copy the code

HTML tags that are case-insensitive <p> are equivalent to <p>, but for consistency, readability, and so on, it is best to use only lowercase letters.

Each element has several parts

  1. Start tag:<p>
  2. Closing label:</p>
  3. Content: “This is an element”

The above three constitute an element whose output is

This is an element

Some Spaces have been omitted, which will be explained later

Nested elements

Elements can be nested within each other

<P><em> This is a </em><strong> element </stong></P>Copy the code

This is one element

However, the correctness of nesting must be guaranteed. The following is an error demonstration

<P><em> This is a </em><strong> element </P></stong>Copy the code

Block-level elements, inline elements, and inline block-level elements

  • Block-level elements
    • It appears on a new line, and everything that follows it is pushed to the next line.
    • Can hold other blocks or inline elements
    • You can control the size
    • <div>,<p>,<h1>–<h6>
  • Inline element
    • Inline elements do not result in text wrapping
    • For example, hyperlink elements<a>Or emphasize elements<em>and<strong>.
  • Inline block-level elements
    • Rows arranged within rows do not occupy a single row.
    • Supports setting of width, height, vertical margins and borders.

An example:

Inline element < em > 1 < / em > < em > inline element 2 < / em > < em > inline element 3 < / em > < p > block-level element 1 < / p > < p > block-level elements 2 < / p > < p > block-level elements 3 < / p >Copy the code

Output:

Inline element 1 is inline element 2 is inline element 3

Block level element 1

Block-level element 2

Block-level element 3

Empty elements

Some elements have only one tag, such as 

<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/692069baa798408dbf838488b1b1f5c7~tplv-k3u1fbpfcp-watermark.image" >Copy the code

Output:

Empty elements are sometimes called void elements.

attribute

Elements can have attributes, and each attribute should contain the following

  1. The space before and between attributes
  2. Attribute name, called and accompanied by one=.
  3. Property value from""To cause to

Take the example of the element <a>, which has the following attributes

  • Href: Hyperlinked Web address that is redirected to when clicked
  • Title: Additional information displayed while hovering
  • Target: specifies how the link is rendered, for exampletarget="_blank"Indicates that content will be displayed in the new TAB
< p > < em > < a href = "https://juejin.cn" title = "Denver's official website" > Denver < / em > < / p >Copy the code

Output:

The Denver nuggets

Boolean attribute

Properties whose values can be omitted are called Boolean properties whose values are the same as their property names

Example:

<input type="text" diabled="disabled">
<input type="text" diabled>
Copy the code

These two are equivalent

Matter of style

Omit quotes surrounding attribute values

This is allowed in some cases, such as when only one attribute is included and the value does not contain a space hour

<a href=https://www.mozilla.org/>Copy the code

But in other cases, such as when you add an additional attribute, there are problems

<a href=https://www.mozilla.org/ title= juejin homepage>Copy the code

Output (hover to see the value of its title property) :

The home page

The title property is understood as two properties with a value of “juejin” and a homepage property

Single and double quotes

Both of the following are true, but single and double quotation marks should not be mixed

Example < a href = "http://www.abc.com" > < / a > < a href = "http://www.abc.com" > example < / a >Copy the code

If you already use one kind of quotation mark in an HTML, you can nest another kind of quotation mark in that quotation mark

< a href = "http://www.abc.com" title = "sample 'ABC'" > example site link < / a >Copy the code

HTML structure

Here is a complete HTML page:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title> My test site </title> </head> <body> <p>Copy the code

<! DOCTYPE html>

  • Doctype declarations are not HTML tags; tag; It is an instruction that tells the browser the version of the markup used to write the page

  • It is important to specify docTypes in HTML documents before HTML5 becomes ubiquitous, so that browsers know what document types are expected

  • With the popularity of HTML5, this approach has become obsolete and a relic of history

<html></html>

  • The root element, which wraps the complete HTML page

<head></head>

  • Content that is included in an HTML page but not intended to be displayed in an HTML page
  • Include keywords and page descriptions that you want to appear in search results, CSS styles, character set declarations, and more

<body></body>

  • Contains all content, text, images, audio, games, etc. displayed on the page when visiting the page

<title></title>

  • Set the page title, which appears on the browser TAB and describes the page when you tag/bookmark it

<meta>

Metadata: Data that describes data. This article uses charset/name only in part

<meta charset=”utf-8″>

  • This element sets the document to use utF-8 character set encoding.

The UTF-8 character set contains most of the characters in everyday use

<meta name=”keywords” content=”HTML”>

  • Set the keyword

<meta name=”description” content=”HTML basics “>

  • Setting Page Description

White space in HTML

The following two pieces of code are equivalent

<p>这两段 代 码 等 价</p>

<p>这两段        代
       码    等  价</p>
Copy the code

Output:

These two codes are at the same price

These two codes are at the same price

In fact, no matter how much space you use in the content of HTML elements (including whitespace characters, including newlines), the HTML interpreter will reduce successive whitespace characters to a single space when rendering the code.

However, for readability, we often use Spaces to indent each nested element!!

Character references:

In HTML, the characters <, >,”,’ and & are special characters. What do we do when you want to use these characters in text without being recognized as code?

A: use character references — this is a special encoding for characters, and each character reference begins with the symbol & and ends with a semicolon (;). The end.

The original meaning character Equivalent character reference
< &lt;
> &gt;
“ &quot;
‘ &apos;
& &amp;

Example:

<p>HTML uses <p> to define paragraph elements. </p> <p>HTML with &lt; p&gt; To define the paragraph element </p>Copy the code

Output:

HTML is used

To define paragraph elements.

HTML uses <p> to define paragraph elements

The first piece of code is identified as two block-level elements

HTML comments

Is there a mechanism available in HTML to write comments in code to help yourself and others understand how written code works

With the
are comments

  • Comments are ignored by browsers.
  • Comments are not visible to the user.
  • The purpose of comments is to describe how your code works and how different codes work, making it easier to read.

Case study:

<p> This is not a comment </p> <! -- This is a comment -->Copy the code

Output:

This is not a comment

summary

Using the content learned in this article, you can write the following HTML page, realize the image add, element nesting, external links, try!!

Example:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p><em>Hello</em> <strong>World! </strong></p> <p> Below is an image link, please hover and click </p> <! -- <a href="https://juejin.cn" title=" _blank"> <img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb82b11254a14079bbfdb6ca04ada59b~tplv-k3u1fbpfcp-watermark.image" ></a> </body> </html>Copy the code

Output:

Hello World!

Below is a link to an image, please hover and click