Web Front End Learning (3): Understanding HTML Basic Tags

Source: Internet
Author: User

The main purpose of this chapter:

  Introduce commonly used text related tags, such as

In the second chapter we have learned that the page can be divided into the

The structure of the content of the Web page must be indicated by the label

  Web document content will be written to the <body> department, so let's imitate the "newspaper", try to write a title paragraph in the <body> text and open it with a browser (note: In HTML, we use <!--comment Content- To make comments , comments are mainly to allow themselves to better control the structure of the Web page, the browser will display the content of the comment is ignored.

<Head></Head><Body>    <!--The following is the title -Time Learning<!--here are two paragraphs -Learning and time learning, not to mention. Learning and time learning, not to mention. Learning and time learning, not to mention.



Learning and time learning, not to mention. Learning and time learning, not to mention. Learning and time learning, not to mention.

</Body></HTML>

as we can see, the browser has done its top priority--display text, but at the same time, we set the title does not have the title "Features", the set of paragraphs also completely ignore the two-paragraph format, in other words, the browser completely ignores the HTML line breaks and spaces. Maybe you will think, how to let the browser know where is the title, where is the paragraph, where there are spaces, where to change the line? Is it possible to make a mark for the browser to know? Yes, keep in mind--the structure of the Web content must be described by the label. If we want to achieve the effect we want, we will use the corresponding label to modify the text.

Second, the most commonly used text decoration tags

  Try adding

<Head></Head><Body>    <!--The following is the title -    <H1>Time Learning</H1>       <!--here are two paragraphs -   <P>Learning and time learning, not to mention. Learning and time learning, not to mention. Learning and time learning, not to mention.</P>     <P>Learning and time learning, not to mention. Learning and time learning, not to mention. Learning and time learning, not to mention.</P>    </Body></HTML>

  Well, we succeeded in getting a conspicuous headline and two paragraphs. Take a closer look at the pages you've cut, and the text that marks the

<Head></Head><Body>    <!--The following is a one-level title -    <H1>The Shi</H1>        <!--below is the level two heading -    <H2>The Shi</H2>         <!--below is the level three heading -    <H3>The Shi</H3>         <!--below is the level four heading -    <h4>The Shi</h4>         <!--below is the level five heading -    <h5>The Shi</h5>         <!--below is the level six heading -    <h6>The Shi</h6>  </Body></HTML>

Third, the protagonist of hypertext--hyperlink

  Have you ever wondered why we can reach another page when we click on the text in the navigation bar above the blog park? To jump from one Web page to another (about hyperlinks connected to the inside of this document for the time being), we have to go through a "anchor" connected to the landing point, and this "anchor" has a "link", when we click on it, we can follow the "anchor" on the "link" to the target page, this "anchor" , that is, the <a> tag, ' a ' means anchor. The text represented by <a> is a hyperlink that connects to the specified address, which is the address of the other page for us. The following assumes that we want to establish a link to the Baidu hyperlink, first of all, we need an anchor <a>, and secondly, we need to know the address of Baidu, but we find the address after the address of how to record it? The href attribute of the <a> tag is introduced here (note: If <a> points to a Web page on the Internet, the href will try to give the "http://" If not given the possibility of not connecting to the Web page).

<Head></Head><Body>    <!--This is a hyperlink -    <ahref= "Http://www.baidu.com">Dot I link to Baidu</a></Body></HTML>

When we click on this text, the browser will follow the "anchor" on the "link" to get us to the designated page:

Iv. Introduction to HTML Tag properties

  Labels are usually paired and are divided into start and end tags, such as

HTML tags have attributes, such as Id,class,title,alt, and so on. However, not all tags need to set properties, only the <a> href such as the lack of the problem of the property must be set, because if not set, can not find the location of the target page, the hyperlink will naturally expire. Typically the property is set at the start tag, and the attribute is separated from the label, attribute, and property with a space. Property has a property value, usually in the form of: Property = "Property value". Some properties have more than one property value, separated by semicolons, in the form: Property = "Property value 1; property value 2; property value 3;". Let's add a new title property to the above hyperlink to see what's new.

 <head> </Head><Body>    <!--This is a hyperlink -    <ahref= "Http://www.baidu.com"title= "Baidu">Dot I link to Baidu</a></Body></HTML>

 

 After we have added the title attribute to <a>, the title's property value will appear when you move the mouse over the hyperlink text, which helps the user to get more messages you want to convey.

In this chapter, we mainly learn some simple tags related to text, but also learn some of the tag properties, the main focus is on the hyperlink settings. Today's example has a basic text and structure, but there is no picture. In the following chapters, I will introduce you. The article layout has been changing, one is also looking for their own style, the second is sent to the home page of the article because the format of the problem was moved out of the home, so slowly change, please forgive me.

  

  

Web Front End Learning (3): Understanding HTML Basic Tags

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.