Detailed introduction to HTML tags, selectors, hyperlinks and SEO

Common tags:

block

The img tag is a single tag alt function. The image fails to load and displays the content in the alt

< img src="Picture name" alt="Picture name"/>

Detailed introduction of a tag:

Link implementation of a tag:

a tag Clicking the a tag

will go to the corresponding link to control the link to open a new page or other target, as well as self and other

him;

Write in the head section; the default page opening method for all links

, if there are some people in the body section For the target attribute, the target attribute in the a tag in the body part is

first;

The download implementation of the a tag: Put in the things to be downloaded Use

# inside to implement the download function

The anchor point implementation of the a tag: (a Anchor) Baibu Fei

剑

The title tag is not one but a group of six:

Paragraph tag Use p tag for a paragraph

< ;p/>

Emphasis tag strong The page is displayed in bold by default

Content (Content)

Also The effect of emphasis is not as important as the tone of the strong tag. The default display is italic

span tag

distinguishes styles, a paragraph of text or content style distinguishes

Conten

List

Ordered List

1. (List Item)< ;/li>

No list required

• (list item)

Definition list

Definition list title

Define list items

SEO: Search engine optimization For example: Baidu wait

Function: There is a crawler program that searches for information every day and saves it.

Advantages of tags:

Semantic page tags;

Using tags that are beneficial to SEO; h1; h2; h3;strong;em accounts for about 7% or 8%. Reasonable optimization

Do not overuse

Increase page keyword density;

id selector

#box1,box2{

width:100px;height:100px;background:red;

}

Group selector # followed by id+","+ A group of id uses the same style

.box(id) and the use of class class is a class, which can be understood as an id that can be used repeatedly

;

class selector can be followed by multiple styles

Type selector tag name {}

Inclusion selector: Select according to the inclusion relationship in the page

div p{ } represents all p tags in the div tag

Wildcard character

*{border:1px solid red;} All in the page have this format and are basically useless

Selector Priority:

Prerequisites at the same level: The style defaults to the latter overriding the former

The higher the inclusion level, the style will use which

class style selector

The order of calling names at the same level does not matter, only the order of styles

Type (1)

(javaScrapt)

Compare style priorities and judge based on the number of highest style priorities

Do not write too deep inclusion relationships during work

Pseudo-class of a:

link not visited

hover mouse hover (mouse across)

active link activation

visited after visit

Written in style

a：link{}

a:hover{}

Pseudo class sequence link visited hover active

Application: Search engine novels, etc.

div pseudo-class: hover Most tags support hover

IE6 does not support a pseudo-class of any other tags

Supported by IE6 and above

The above is the detailed content of Detailed introduction to HTML tags, selectors, hyperlinks and SEO. For more information, please follow other related articles on the PHP Chinese website!