Front-End HTML Summary 2.0——Knowledge points you must master

1. HTML common tags

First of all HTML and CSS are two completely different languages, we learn the structure, so we will just write HTML tags and recognize the tags. No more specifying styles for structure tags.

There are a lot of HTML tags, here we learn the most commonly used, and some of the lesser used, we can check the manual on it.

1.1 Typography tags

Layout tags are mainly used with css to show the structure of the web page, and are the most commonly used tags for web page layout.

1) Title tag (familiar with)

In order to make the web page more semantic, we often use the title tag in the page, HTML provides six levels of titles, namely

Semantics of the title tag: Used as a title, and in decreasing order of importance

The basic syntax format is as follows.

<h1> Header text </h1>
<h2> Header text </h2>
<h3> Header text </h3>
<h4> Header text </h4>
<h5> Title text </h5>
<h6> Title text </h6>

Summary :

• The text with the title will be bolded and the font size will be larger in turn
• Only one title can be placed on a line

2) paragraph tag p ( familiar with)

Role semantics:

HTML document can be divided into a number of paragraphs

In order to display the text in an organized manner in a web page, paragraph tags are indispensable, just as we usually write articles, the whole web page can also be divided into several paragraphs, and the paragraph tags are

<p> text content </p>

is the most common tag in HTML documents, by default, the text in a paragraph will be automatically line feed according to the size of the browser window.

3) Horizontal line label hr (recognition)

Abbreviation: horizontal line

In web pages, it is common to see horizontal lines that separate paragraphs from one another, making the document structure clear and layered. These horizontal lines can be achieved by inserting images or simply by tags, <hr /> is a tag that creates a horizontal line across the page. Its basic syntax is as follows:

<hr /> is a single tag

Displays default style horizontal lines in web pages.

---

4) Newline label br (familiar with)

Abbreviations for words: break, newline

In HTML, the text in a paragraph is arranged from left to right, to the right end of the browser window, and then automatically wraps. If you want a piece of text to be forced to wrap, you need to use a newline tag

<br />

At this time, if you still press the Enter key to change a line directly in word, it will not work.

5) div and span tags (familiar with)

Div span has no semantics. It is the two main boxes in our web page layout. You must have heard of css+div

Div is the abbreviation of division. Division means that there are actually many divs to combine web pages.

span span, span; range

Syntax format:

<div> This is the header </div> <span>Today's price</span>

Both of them are boxes, used to hold our web page elements, but they are different. Now we mainly remember the usage and features.

• The div tag is used for layout, but now only one div can be placed on a line
• span tag is used for layout, multiple spans can be placed on one line

Typography Label Summary

Tag Name	Definition	Description
head	Heading Tags	Used as headings, in decreasing order of importance
p	Paragraph tags	Can split HTML documents into several paragraphs
hr	Horizontal line tag	Nothing to say, just a line
br	Newline tag
div	div tag	Used for layout, but now only one div can be placed on a line
span	span tag	Used for layout, multiple spans can be placed on one line

1.2 Text formatting tags (memorize)

In web pages, sometimes it is necessary to set bold, italic or underline effects for text. At this time, it is necessary to use the text formatting tags in HTML to display the text in a special way.

the difference:

b is just bold. strong In addition to being bold, it also means emphasis, and the semantics are stronger.

Same goes for the rest...

1.3 Tag attributes

The so-called attributes are external characteristics, such as the color of the mobile phone, the size of the mobile phone, and the summary is the mobile phone. .

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

When using HTML to make web pages, if you want HTML tags to provide more information, you can use the attributes of HTML tags to set them. Its basic syntax is as follows:

<tag name attribute 1="attribute value 1" attribute 2=" attribute value 2" ...> content </tag name>
<phone color="red" size="5""> </phone>

1.4 Image tag img (emphasis)

word abbreviation: image

To display images in web pages, you need to use image tags. Next, we will introduce the image tag and its related attributes in detail.

The syntax is as follows:

<img src="Image URL" />

In this syntax, the src attribute is used to specify the path and file name of the image file, which is a required attribute of the img tag.

Notice:

1. A tag can have multiple attributes, which must be written in the start tag, after the tag name.
2. The properties are in no particular order. The label name and the property, and the property and the property are separated by spaces.
3. Take the format of key-value pair key="value" format

for example:

normal<br />
    <img src="cz.jpg" width="300" height="300" /><br />
     <br /> with border
    <img src="cz.jpg" width="300" height="300" border="3" /><br />
<br /> with hint text
<img src="cz.jpg" width="300" height="300" border="3" title="This is a little dandelion" /><br />
<br /> with alternate text
<img src="cz.jpg" width="300" height="300" border="3" alt="Picture does not exist" />

Key points to master:

• Please say which attribute of the image tag must be written?
• Please tell me the difference between the alt and title attributes in the image tag?

1.5 Link tags (emphasis)

Abbreviations for words: Abbreviation for anchor [ˈæŋkə(r)] . Basic explanation of anchor, iron anchor

Creating hyperlinks in HTML is as simple as wrapping the text with tags.

Syntax format:

<a href="Jump target" target="The way the target window pops up">text or image</a>`

href:Used to specify the url address of the link target, (required attribute) When the href attribute is applied to the tag, it has the function of a hyperlink

target :is used to specify the opening method of the linked page. Its values are _self and _blank, where _self is the default value and __blank is the opening method in a new window.

Notice:

1. External links
2. Internal link Directly link the name of the internal page, such as < a href="index.html"> home page </a >
3. If the link target is not determined at that time, the href attribute value of the link tag is usually defined as "#" (ie href="#"), indicating that the link is temporarily an empty link.
4. Not only can you create text hyperlinks, but you can add hyperlinks to various web page elements in web pages, such as images, tables, audio, and video.

Key points to master:

• Please say which attribute of the link tag must be written?
• Please tell me how to open this link page in a new window?

1.6 Comment tags

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

Simple explanation:

The comment content is not displayed in the browser window, but is also downloaded to the user's computer as part of the HTML document content and can be seen when viewing the source code.

Syntax format:

    <!-- Comment statement -->
     The shortcut key is: ctrl + / 
    or ctrl +shift + /

Importance of Notes:

Team engagement

Generally used for simple descriptions, such as some state descriptions, attribute descriptions, etc.

One space character before and after the comment content, the comment is located above the code to be commented, on a separate line

recommend:

<!-- Comment Text -->
<div>...</div>

Not recommended:

<div>...</div><!-- Comment Text -->

<div><!-- Comment Text -->
    ...
</div>

2. Path (emphasis, difficulty)

In actual work, our files cannot be randomly placed, otherwise it is difficult to find them quickly, so we need a folder to manage them.

Directory folder:

It is a common folder, which only stores the relevant materials we need to make a page, such as html files, pictures and so on.

Root directory

Open the first level of the directory folder is the root directory

There will be a lot of pictures on the page. Usually, we create a new folder dedicated to storing image files (images). At this time, to insert an image, we need to use the "path" method to specify the location of the image file. Paths can be divided into: relative paths and absolute paths

relative path

The directory path established based on the location of the webpage where the document is referenced. Therefore, when web pages stored in different directories refer to the same file, the paths used will be different, so they are called relative paths.

Same level path:
Just enter the name of the image file, eg <img src="google.gif" />

Next-level path: ("/")
The image file is located in the same level folder of the HTML file (for example, the folder name is: images) such as <img src="images/google.gif" />

Upper level path:( "../" )
Add "../" before the file name, if it is two levels higher, you need to use "../ ../", and so on, such as <img src ="../google.gif" />

The relative path starts from the file where the code is located to find our target file, and what we call the upper level, the lower level, the same level, simply put, is the location where the image is located on the HTML page

absolute path

An absolute path is a directory path based on the Web site's root directory. The reason why it is called absolute means that when all web pages refer to the same file, the path used is the same.

"D:\web\img\logo.gif", or the full web address, such as "https://images.pexels.com/photos/258109/pexels-photo-258109.jpeg".

Notice:

The absolute path is used less, we can understand it. But note that its writing, especially the symbol \ is not a relative path /

3.Anchor point positioning (difficulty)

By creating anchor links, users can quickly locate the target content.

Creating an anchor link is a two-step process:

1. Use the corresponding id name to mark the location of the jump target. (find a target)
   <h3 id="two">Episode 2</h3>

2. Use <a href="#id name">link text</a> to create link text (clicked) (pull relationship) I also have a grandfather
   <a href="#two">

Quick memory method:

It's like looking for someone to do things, first find him, then build a relationship, and finally see the effect.

4. Special characters (understanding)

Some special symbols are difficult or inconvenient to use directly in html. We can use the following alternative codes at this time.

Although there are many, but we usually use less, we should remember the space is greater than the sign is less than the sign, and the rest will come back to check.

Summarize:

1. It starts with operator& and ends with semicolon operator;.
2. They are not labels, but symbols.
3. Less than "<" and greater than ">" special characters cannot be used in HTML, browsers will parse them as tags, to display them correctly, use character entities in the HTML source code

Team Agreement

recommend:

<a href="#">more &gt;&gt;</a>

Not recommended:

<a href="#">more >> </a>

5.XHTML

5.1 What is XHTML

XHTML is stricter and cleaner HTML code.

• XHTML is EXtensible HyperText Markup Language.
• The goal of XHTML is to replace HTML.
• XHTML is almost identical to HTML 4.01.
• XHTML is a stricter and cleaner version of HTML.
• XHTML is HTML redefined as an XML application.
• XHTML is a W3C standard.

5.2 What is the difference between HTML and XHTML?

• XHTML refers to Extensible Hypertext Markup Language
• XHTML is almost identical to HTML 4.01
• XHTML is a stricter and cleaner version of HTML
• XHTML is HTML defined as an XML application
• XHTML is a W3C Recommendation published in January 2001
• XHTML is supported by all major browsers
• XHTML elements are HTML elements written in XML format. XHTML is a strict version of HTML, for example it requires that tags must be lowercase, tags must be properly closed, tags must be in the correct order, double quotes must be used for attributes, etc.