This is the 11th day of my participation in the August Wenwen Challenge.More challenges in August

HTML

HyperText Markup Language (HTML) is a standard Markup Language for creating web pages. HTML is a fundamental technology that, along with CSS and JavaScript, is used by many websites to design user interfaces for web pages, web applications, and mobile applications. Web browsers can read HTML files and render them as visual web pages. HTML describes the structural semantics of a website as clues are presented, making it a markup language rather than a programming language.

The above introduction is quoted from Wikipedia

basis

The element tag

WEB a WEB page, consisting of many HTML elements. For a standard HTML element, there are three parts: the opening tag, the closing tag, and the content. For example,

the first-level header

For HTML elements, you can nest each other, but you need to pay attention to block-level elements, inline elements. Block-level elements cannot be nested within inline elements

<! - right - >
<p>The text<strong>bold</strong></p>
<! Error inline element cannot be nested inside block level element
<strong>The text<p>bold</p></strong>
Copy the code

Block level elements, exclusive row, common h1, P; Inline elements can exist in multiple rows, such as strong and SPAN

Of course, not all elements have closed tags. This type of element is called empty element, or self-closing element, common img, hr

HTML element, and there’s a very important point, the attributes of the element, such as

title one

The element here has an attribute added. The class attribute is an identifier for a class of HTML elements. A standard attribute consisting of an attribute name and value separated by an equal sign. For definitions of multiple attributes, be sure to add Spaces between attributes

Similarly, there are attributes in attributes that have no attribute value. Such attributes are called Boolean attributes.

In addition, you can use single, double, or no quotes for element attribute values (not recommended)

Single and double quotation marks are used to escape characters. For example, if the title property value contains single quotation marks, the property value itself can be wrapped in double quotation marks. Attribute values without quotation marks are not recommended because they are compatible with earlier versions and may cause ambiguity

Next, take a brief look at the structure of an HTML document

<! -- The document states that this is an HTML5 document -->
<! DOCTYPEhtml>
<! -- HTML element, which exists as the root element of an HTML document and wraps the entire page -->
<! -- Attribute value lang specifies the document language -->
<html lang="en">
<! -- Head element, the content is not visible, used to add the description of the page, etc.
<head>
    <! -- Specify the character set of the document -->
    <meta charset="UTF-8">
    <! -- Specify the title of the page -->
    <title>Title</title>
</head>
<! -- Body element, where the contents are visible -->
<body>

</body>
</html>
Copy the code

Earlier, we introduced the head element, where the content defined is not visible. Here, a brief introduction to the role of the head element, as well as the metadata meta

<! -- Add title -->
<title>Title</title>

<! Character set encoding -->
<meta charset="utf-8">

<! -- Add author -->
<meta name="author" content="Zhou Mo">

<! Add site description -->
<meta name="description" content="Mr. Chow's notes have been lost, sadly enough.">

<! Add page icon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<! -- Import CSS file -->
<link rel="stylesheet" href="Styles.css">

<! -- Import JavaScript files -->
<script src="JavaScript.js"></script>
Copy the code

Word processing

HTML, mainly responsible for the structure and content of the text, the browser is responsible for parsing rendering. This kind of element, which can be called semantic element, has a specific meaning

The first is the title element, from pompous to small, from h1 to H6. Next is the paragraph element P, where the contents of the package are parsed into a text paragraph

<h1>Primary title</h1>
<h6>Six levels of headings</h6>
<p>The weather today is very nice and sunny</p>
Copy the code

When it comes to word processing, we need to introduce semantic elements. Why do we need semantics? The size and thickness of the text can be adjusted to the style of the heading, but it cannot replace the heading. The title is to make a division of the content of the article. This is the use of semantic elements. With specific semantic elements, you know where this content is located

There are also important semantic elements, such as lists, bold, and so on

In HTML, lists are defined in two categories, ordered and unordered

<! Unordered list -->
<ul>
    <! -- List entry -->
    <li>watermelon</li>
    <li>apple</li>
</ul>

<! -- Ordered list
<ol>
    <li>Step one</li>
    <li>Step 2</li>
</ol>
Copy the code

For ordered and unordered lists, elements can be nested and used according to the actual scene

At the same time, you can also do semantic processing for part of the text, such as bold text, text tilt

<p>The font<em>tilt</em></p>
<p>The font<strong>bold</strong></p>
Copy the code

Document links

This section begins by introducing the use of hyperlinks on web pages. It can be roughly divided into four parts

  1. Definition and properties of hyperlinks
  2. URL and path location
  3. Anchor location of hyperlinks
  4. Hyperlinks in a special format

The element in HTML that defines the hyperlink is A, as shown in the following example, where the text is converted to a clickable hyperlink

<a href="https://www.baidu.com">baidu</a>
Copy the code

The common attributes that exist for a hyperlink are

  • Href: The jump address of the hyperlink
  • Title: the content displayed when the mouse is hovering
  • Download: Jumps to a file and converts it into a downloadable file

The common one is href, which specifies a URL. Next, we introduce URL and path location

URL: Uniform resource locator. Is responsible for specifying the path of a file. It is divided into absolute path and relative path

Absolute path: The absolute location of a resource on a computer or Internet, for example, D:\Demo

Relative path: The location of an external file relative to the current file, for example./Demo/ a.html

Then, it introduces the use of hyperlink anchor points, including internal anchor points and external anchor points

<h1 id="One">Primary title</h1>
<br><br>.<a href="#One">Return to the top</a>
Copy the code

This demonstrates the use of anchor points in internal documents, such as returning to the top at any point in the document

<! -- A.html -->
<a href="./B.html">Text B</a>
<a href="./B.html#B2">B Somewhere in the text</a>
Copy the code
<! -- B -->
<h1>1</h1>
<br>.<h1 id="B2">2</h1>
<br>.Copy the code

This example demonstrates a jump to an external page (relative path) and a jump to a location on an external page

There are also special formats for hyperlinks, such as links to email addresses. Can not directly open a web page, file, declare this is an email address, start the corresponding mailbox application

<a href="mailto:XXXXX.qq.com">For personal email, click Send</a>
Copy the code

Above, is the simple use of hyperlinks. Note that anchor location can only be identified by the ID attribute