Learn HTML from scratch (iv) Recognize tags (Part III)

Source: Internet
Author: User

One, use <a> tag, link to another page
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title>Great Gatsby.</title>6 </Head>7 <Body>8     <ul>9        <Li><ahref="#"title= "front-end development interview Heart">Front-end development interview Heart</a> </Li>Ten        <Li><ahref="#"title= "0 Basic Learning HTML">0 Basic Learning HTML</a></Li> One        <Li><ahref="#"title= "JavaScript full guide">JavaScript full guide</a></Li> A     </ul> -     <P>In the spring of 1922, a writer who wanted to fame named Nick Callaway (Toby McGuire Tobey Maguire) left the Midwestern United States and came to New York. It was a time of rising morality, popular jazz, smuggling as king, and soaring stocks. In pursuit of his American dream, he moved into a bay near New York to live.</P> -     <P>Fitzgerald, one of the American literary giants of the 20th century, combines both writer and screenwriter. He sings the ornate elegy of the "Jazz Age" with the poet's sensibility and the imagination of the dramatist, and the temperament of his poet and Dreamer is also the perfect note for that extravagant age.</P> the </Body> - </HTML>
use a tag to link to another page

Use <a> tags to achieve hyperlinks, it can be said in the Web page production is ubiquitous, as long as there is a link to the place, there will be this tag.

Syntax: <a href= "Destination url" title= "mouse over displayed text" > link displayed text </a>

For example:

<a  href= "http://www.imooc.com"  title= "click into Mu class net" >click here!</a>

The above example function is to click on the click here! text, the Web page link to http://www.imooc.com this page.

The Title property, which displays the text content of this property when the mouse slides over the linked text.

This property is very useful in the actual web page development, it is convenient for the search engine to understand the content of the link address (semantically more friendly).

Note: There is also an interesting phenomenon not knowing that small partners have found no, as long as the text is added to the a tag,

The color of the text will automatically change to blue (the color of the text being clicked is purple), the color is very difficult to see,

But there is no relationship behind we learn the CSS look can be set up (A{color: #000}).

The 13 words "Tobey Maguire Tobey Maguire" in the first line of the editor are linked,

The destination URL to link to is " http://www.m1905.com/mdb/star/3316/ ".

1.<a href="目标网址">链接显示的文本</a>

2. Don't forget to write " http:// "

Href:hypertext Reference's abbreviation. Meaning a hypertext reference.

Second, open the link in the new browser window
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title>Great Gatsby.</title>6 </Head>7 <Body>8     <P>In the spring of 1922, a man who wanted to be famous named Nick Callaway (<ahref= "http://www.m1905.com/mdb/star/3316/">Toby? McGuire Tobey Maguire</a>Left the Midwestern United States and came to New York. It was a time of rising morality, popular jazz, smuggling as king, and soaring stocks. In pursuit of his American dream, he moved into a bay near New York to live.</P>9     <P>Fitzgerald, one of the American literary giants of the 20th century, combines both writer and screenwriter. He sings the ornate elegy of the "Jazz Age" with the poet's sensibility and the imagination of the dramatist, and the temperament of his poet and Dreamer is also the perfect note for that extravagant age.</P>Ten </Body> One </HTML>
open a link in a new browser window

<a>Label by default, the linked page opens in the current browser window, and sometimes we need to open it in a new browser window.

The following code:<a href="目标网址" target="_blank">click here!</a>

Change the hyperlink in the line in the editor to 8 Open in a new window.

Syntax for opening links in new window: <a href= "Destination url" target= "_blank" >click here!</a>
Be sure to add a space before target!!!!!!!!!!!!!!!!!!!!!
_blank--Open a link in a new window
_parent--open link in parent form
_self--Opens the link in the current form, which is the default value
_top--Opens the link in the current form and replaces the current entire form (frames page)
The name of a corresponding frame page--opens in the corresponding frames page
Third, use mailto to link the email address in the webpage
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" />5 <title>mailto</title>6 </Head>7 <Body>8 <P>In the spring of 1922, a writer who wanted to be named Callaway (Tobey Maguire) left the Midwestern United States and came to New York. It was a time of rising morality, popular jazz, smuggling as king, and soaring stocks. In pursuit of his American dream, he moved into a bay near New York to live.</P>9     <P>Fitzgerald, one of the American literary giants of the 20th century, combines both writer and screenwriter. He sings the ornate elegy of the "Jazz Age" with the poet's sensibility and the imagination of the dramatist, and the temperament of his poet and Dreamer is also the perfect note for that extravagant age.</P>Ten How do you feel about this film, send me an email One </Body> A </HTML>
use mailto to link email addresses in Web pages

<a>Tags also have a role to link email addresses, using mailto can make it easy for visitors to send e-mail to the website manager. We can also take advantage of mailto doing a lot of other things. Here's a look at the detailed illustrations:

Note: If there are multiple parameters at the same time behind the mailto, the first argument must begin with " ? " and each subsequent parameter is delimited with "" & .

The following is a complete example:

Results displayed in the browser:

Send

Clicking on the link will open the Email app and automatically fill in the settings such as the recipient's information, such as:

Take the line in the editor, 10 "How do you feel about this review, send me a message" Join the link, so that it can automatically send messages when clicked, specific requirements:

1, the recipient email address: [email protected].

2, the subject of the message: View The Great Gatsby.

3, the contents of the message: Hello, some ideas on this comment.

Forgot the mailto?

<a href="mailto:[email protected]?subject=主题名称&body=邮件内容">

Mailto after the recipient address, CC is the CC address, bcc after the BCC address, subject after the subject of the message, body after the content of the message,

Iv. Understanding tagging, inserting images for Web pages
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5 <title>Great Gatsby.</title>6 </Head>7 <Body>8     <P>In the spring of 1922, a man who wanted to be famous named Nick Callaway (<ahref= "http://www.m1905.com/mdb/star/3316/">Toby? McGuire Tobey Maguire</a>Left the Midwestern United States and came to New York. It was a time of rising morality, popular jazz, smuggling as king, and soaring stocks. In pursuit of his American dream, he moved into a bay near New York to live.</P>9   <P>Fitzgerald, one of the American literary giants of the 20th century, combines both writer and screenwriter. He sings the ornate elegy of the "Jazz Age" with the poet's sensibility and the imagination of the dramatist, and the temperament of his poet and Dreamer is also the perfect note for that extravagant age.</P>Ten   <imgsrc= "Http://img.mukewang.com/52da54ed0001ecfa04120172.jpg">  One </Body> A </HTML
recognize IMG tags, insert pictures for Web pages

In the production of web pages in order to make the page beautiful, it is certainly not a picture, you can use the label to insert the picture.

Grammar:

Example:

Explain:

1, SRC: Identify the location of the image;

2, alt: Specify the descriptive text of the image, when the image is not visible (when the download is unsuccessful), you can see the text specified by the attribute;

3. Title: Provides a description of the image when the image is visible (the text displayed when the mouse slides over the picture);

4. The image can be an image file in gif,png,jpeg format.

Try adding mouse-aged hint text to the picture

Add the following code to the line in the editor 10 :

title="电影介绍"

Learn HTML from scratch (iv) Recognize tags (Part III)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.