HTML + CSS Study Notes (3)

1. Create a text link

1. Links inside the page

① Use an anchor to identify the location in the webpage (generally speaking, the location to be returned after the link is clicked)

<A id = "end"> </a>

The ID must be unique on the page and must start with a letter.

② Link to the anchor position (click the link and the page will return to the corresponding position)

<A href = "# End"> go to end </a>

Of course, when this page has a scroll bar and the anchor point and link point exceed one page, you can see the page beating

 

2. link a specific part of another page

The premise is to know the anchor ID of the other page.

<A href = "page2.html # End"> go to page2 end </a>

 

3. Link to email

<A href = "mailto: email address? Subject = TOPIC & amp; body = body "> send me an email </a>

Mailto is followed by the email address. The subject is the subject of the email, the body is the body of the email, and is used between the email address and the attribute subject? Separated. The attribute subject and body are separated by "&", which is represented by "& amp;" code. To prevent some people from using the software to identify mailto to get their email addresses and send a large number of spam emails, we use ASCII codes to indicate some letters or symbols. For example, I use "& #109; "indicates the letter" M"

<A href = "mailto: & #109; & #106; & #104; qq2012 @ qq. & #99; Om? Subject = HTML learning & amp; body = Hello Xiaoke! "> Send me an email </a>

 

4. Link to QQ

<A target = blank href = http://wpa.qq.com/msgrd? V = 1 & uin = QQ number & Site = Xiaoke & menu = Yes> </a>

The first QQ number indicates the phone number for the conversation, and the second QQ number indicates that the phone number is not online. Of course, the two numbers must be consistent.

2. Insert images into webpages

1. Insert an image

Complex Method

2. Image Link
<A href = "boy.jpg"> </a>
Generally, small images are used in the webpage to accelerate the display speed. If you want to see a clearer picture, click the small picture to open the big picture. In the previous example, the boy_sm.jpg is a large image.

3. Image Alignment
In addition to the <p> </P> or <div> </div> style = "text-align: Center" operation, you can also add
Surround alignment: Style = "float: Left", style = "float: Right", picture on the right, text on the left. Note that no center surround exists.
Vertical Alignment: Style = "vertical-align: Top", style = "vertical-align: bottom", style = "vertical-align: Middle", style = "vertical-align: baseline"

End sample http://mjh.35free.net/wblj.html

TIPS: we can use a small image as a project symbol for the list tag mentioned in the previous article. This is more beautiful. Just put the image code in the list tag, O (others _ tags) O ~