“This is the third day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

The front-end series in the eyes of the back end is more straightforward

  • 🚀 Is the front end of the Java backend different from the front end? 1 ️ ⃣ 🚀

  • 🚀 Is the front end of the Java backend different from the front end? 2 ️ ⃣ 🚀

Common HTML tags

First of all, HTML and CSS are two completely different languages, we learn structure, just write HTML tags, just know the tags.Copy the code

3.1 typesetting labels

Layout labels are used together with the CSS to display the structure of the web page. They are the most commonly used labels for web page layout.

3.1.1. Title Labels

In order to make the page more semantic, we often use the title tag in the page. HTML provides six levels of headings (H1 ~ H6).Copy the code
Copy the code

Header tag semantics: Used as headings and in diminishing importance

<h1>Title text</h1>
<h2>Title text</h2>
<h3>Title text</h3>
<h4>Title text</h4>
<h5>Title text</h5>
<h6>Title text</h6>
Copy the code

3.1.2 paragraph tags

Paragraph tags can divide THE HTML document into several paragraphs. To display the text coherently in the web page, paragraph tags are indispensable. Just as we usually write articles, the whole web page can also be divided into several paragraphs.

<p>The text content</p>
Copy the code

3.1.3 Horizontal label

On web pages, it's common to see horizontal lines separating paragraphs from each other to create a clear, hierarchical document. These horizontal lines can be done by inserting images or simply by using labels,Copy the code

is the label that creates a horizontal line across the page. It can display default horizontal lines in the web page. 

<! -- Single label -->
<hr />
Copy the code

3.1.4. Line feed Tags

In HTML, the text in a paragraph is arranged from left to right, up to the right end of the browser window, and then wrapped. If you want to force a line break for a piece of text, you need to use a line break tag.

<br />
Copy the code

3.1.5 div and SPAN

Div and SPAN have no semantics and are the two main boxes in our web layout. It’s used to hold our page elements, but they’re different.

  1. divThe TAB is used for layout, but now you can only put one in a rowdiv.
  2. spanTags are used for layout. You can put multiple tags on a linespan.

3.1.6 Summary of typesetting labels

Tag name define instructions
<hx></hx> The title tag Use as a heading and in diminishing importance
<p></p> Paragraph tags You can split an HTML document into paragraphs
<hr /> Horizontal label There’s nothing to talk about. It’s just a line
<br /> Wrap the label
<div></div> Div tags Used for layout, but now only one div can be placed in a line
<span></span> Span tags For layout, you can put multiple spans on a line

3.2 text formatting labels

In web pages, sometimes you need to set up bold, italic, or underline effects for text. In this case, you need to use text formatting tags in HTML to make text appear in a special way.

The label According to the effect
<b></b> 和 <strong></strong> Words toboldIn the form of
<i></i> 和 <em></em> Words toitalicsIn the form of
<s></s> 和 <del></del> Words tostrikethroughIn the form of
<u></u> 和 <ins></ins> Words to<u>underline</u>In the form of

3.3 tag attributes

Attributes are external characteristics such as the color of the phone the size of the phone, the color and so on. For example, we describe the features of a mobile phone:

  • The color of the phone is black.
  • The size of the mobile phone is 8 inches.
  • The length of the horizontal line is 200.
  • The width of the picture is 300.

When you use HTML to create a web page, if you want the HTML tag to provide more information, you can use the attributes of the HTML tag to set it. The basic syntax is as follows:

< tag name Attribute 1=" Attribute value 1" Attribute 2=" Attribute value 2"... < cell phone color =" red "size ="5 inches "> </ cell phone >Copy the code

3.4 image label IMG

To display an image on a web page, you need to use an image tag, and we’ll look at the image tag and its associated properties in more detail. (It is a single dog), his syntax is as follows:

<! The SRC attribute specifies the path and filename of the image file. It is required for the IMG tag. -->
<img src="Image URL" />
Copy the code

He has several other attributes that are common.

attribute Attribute values describe
src The URL of the image Path of graph
alt The text Replacement text for images that cannot be displayed
title The text What is displayed when the mouse is hovering
width pixel Sets the image width
height pixel Sets the height of the image
border digital Sets the width of the image border

Note:

  1. Tags can have multiple attributes and must be written in the start tag after the tag name.
  2. Attributes are in no particular order. Label names and attributes and attributes are separated by Spaces.
  3. The attribute of any tag has a default value, which is taken if omitted.
  4. The format of the key-value pair is key=”value”.
The normal<br />
    <img src="cz.jpg" width="300" height="300" /><br />bordered<br />
    <img src="cz.jpg" width="300" height="300" border="3" /><br />With the prompt text<br />
	<img src="cz.jpg" width="300" height="300" border="3" title="This is a little dandelion." /><br />With alternate text<br />
	<img src="cz.jpg" width="300" height="300" border="3" alt="Picture does not exist." />
Copy the code

3.5. Link tags

Creating hyperlinks in HTML is as simple as enclosing text with tags. His syntax format is:

<a href="Jump target" target="Target window popup mode">Text or image</a>
Copy the code
attribute role
href The URL used to specify the target of the link, (required attribute) When the href attribute is applied to the tag, it functions as a hyperlink
target Specifies the opening mode of the linked page. The value can be _self or _blank, where _self is the default and _blank is the opening mode in a new window.

Note:

  1. External links: you need to add http:// www.baidu.com
  2. < a href=”index.html”> home page
  3. If the link target is not determined at that time, the href value of the link tag is usually defined as “#” (href=”#”), indicating that the link is temporarily empty.
  4. Hyperlinks can be created not only in text, but also in various web elements such as images, tables, audio, video, etc.

3.6 comment labels

There is also a special kind of tag in HTML – the comment tag. If you need to add comment text to an HTML document that is easy to read and understand but does not need to be displayed on the page, you need to use comment tags.

The comment content is not displayed in the browser window, but is also downloaded to the user’s computer as part of the content of the HTML document and can be seen when viewing the source code. Comments are intended to explain what this code does. The program does not execute this code.

    <! -- Comment statement -->The shortcut keys are CTRL + / or CTRL + Shift + /Copy the code

3.7, path

In practice, our files should not be left carelessly, otherwise it is difficult to find them quickly, so we need a folder to manage them. There are two concepts: directory folder and root directory:

  1. Directory folders are ordinary folders, which only store the relevant materials we need to make a page, such as HTML files, images and so on.
  2. The first layer of a folder is the root directory.

There will be a lot of images on the page. Usually, we create a new folder dedicated to storing images. When inserting images, we need to specify the location of the image file in the way of “path”. Paths can be divided into:

  1. Relative path.
  2. Absolute path.

3.7.1 Relative path

The directory path created based on the location of the page referencing the file. Therefore, when web pages saved in different directories reference the same file, they use different paths, so they are called relative paths.

Path to the classification symbol instructions
Same order path Simply enter the name of the image file.
Next level path “/”
Upper path “.. /” Add “.. “before the file name. / “, for the upper two levels, use “.. /.. / “, and so on.

The relative path, in short, is going from this file to our target file,

3.7.2 absolute path

Absolute path Directory path based on the root directory of the Web site. Absolute means that when all web pages refer to the same file, they use the same path. It has either a disk path or a full network address.

3.8 Special Characters

Some special symbols are difficult or inconvenient to use directly in HTML, we can use the following alternative code.

Although there are many, but we usually use less, we focus on remembering the space, greater than, less than, basically can, the rest of the back to look up.

Conclusion:

  1. Based onThe operator&At the beginning,Semicolon operator;At the end.
  2. They are not labels, but symbols.
  3. The less than sign “<” and the greater than sign “>” special characters cannot be used in HTML. Browsers parse them as tags. To display them correctly, use character entities in the HTML source code.