HTML Learning 2

1. Use the <a> tab to link to a page

Using <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.

Grammar:

<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 the clicking here! Text, which links the Web page to http://www.imooc.com.

The Title property, which displays the text content of this property when the mouse slides over the linked text. This property in the actual web page Development role is very large, the main convenience of the search engine to understand the content of the link (more semantically friendly), such as the right case code (8-12 lines).

Note: There is also an interesting phenomenon do not know that the small partners found no, as long as the text to add a tag, the text color will automatically change to blue (the text has been clicked Color Purple), the color is very difficult to see, but there is no relationship after we learn the CSS look can be set to come over (A{color: #000 }), which will be explained in more detail later.

3. Use mailto to link the email address in the Web page
<a> tags also have the role of linking email addresses, using mailto to make it easy for visitors to send e-mails to website managers. We can also use mailto to do many 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 parameter must be "?" At the beginning, each of the following parameters is separated by "&".

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:

Task
Put the 10th line in the right editor, "How do you feel about this review, send me a message" to join the link, so that it can be clicked to automatically send mail, specific requirements:

1. Email address of sender: [email protected].

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

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

4. Understanding tags, inserting images for Web pages
In the production of web pages in order to make the page beautiful, it must be missing pictures, you can use the tag to insert pictures.

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. Image can be an image file in gif,png,jpeg format

5. use form labels to interact with users
How does a website interact with users? The answer is to use an HTML form (form). The form can transfer the data entered by the browser to the server side, so that the server-side program can process the data that the table only son over.

Grammar:

<form method= "transfer Mode" action= "Server File" >
Explain:

1.<form>:<form> label is in pairs appear, start with <form>, end with </form>.

2.action: Where the data entered by the browser is transmitted, such as a PHP page (save.php).

3.method: The way data is transmitted (Get/post).

<form method= "POST" action= "save.php" >
<label for= "username" > User name:</label>
<input type= "text" name= "username"/>
<label for= "pass" > Password:</label>
<input type= "password" name= "pass"/>
</form>
Attention:

1. All form controls (text boxes, text fields, buttons, radio boxes, checkboxes, and so on) must be placed between the <form></form> tags (otherwise the user input information can not be submitted to the server Oh!). ）。

2, Method:post/get the difference this part of the content belongs to the back-end programmer to consider the problem. Interested partners can view the wiki in this section, which is described in detail.

Task
Let me try this: Add code to line 8th <form> tags in the right editor:

Method= "POST" action= "save.php"

6. text input box, password input box
A text input box is used when the user wants to type something like letters, numbers, and so on in the form. The text box can also be converted into a Password entry box.

Grammar:

<form>
<input type= "Text/password" name= "name" value= "text"/>
</form>
1. Type:

When type= "text", the input box is a text input box;

When type= "password", the input box is the password input box.

2, Name: For the text box name, in case the background program ASP, PHP use.

3. Value: Sets the default value for the text input box. (usually play a cue)

Example:

<form>
Name:
<input type= "text" name= "MyName" >
<br/>
Password:
<input type= "password" name= "pass" >
</form>
Results displayed in the browser:

Task
I'll give it a try: Insert a name, password entry box for the form

1. Enter the code in the 10th line of the right editor:

<input type= "text" name= "MyName"/>

2. Enter the code in the 13th line of the right editor:

<input type= "password" name= "pass"/>

7. text field, support multi-line text input
Text input fields are required when users need to enter large pieces of text in the form.

Grammar:

<textarea rows= "Number of rows" cols= "columns" > Text </textarea>
1, <textarea> tags are in pairs appear, start with <textarea>, to </textarea> end.

2. Cols: Number of columns in a multiline input field.

3. Rows: Number of rows in the input field.

4. You can enter a default value between <textarea></textarea> tags.

Example:

<form method= "POST" action= "save.php" >
<label> Contact Us </label>
<textarea cols= "rows=" > enter the content here ...</textarea>
</form>
Note: The <label> tags in the code are explained in this chapter 5-9.

Display the results in the browser:

Note that these two properties can be replaced by the width and height of the CSS style: col with width, row with height instead. (These two CSS styles will be explained in a later chapter)

Task
Let me give it a try: Modify the number of columns and rows of a text field

1, in the right editor in the 10th row <textarea> tag Supplement code cols= "Rows=" 10 "two attribute values

8. Use the Radio box, check box, let the user select
When using form design questionnaires, to reduce user action, using a selection box is a good idea, there are two selection boxes in HTML, that is, the radio box and the check box, the difference is that the option in the Radio box allows the user to select only one item, and the user of the check box can select multiple items or even choose them all. Take a look at the following example:

Grammar:

<input type= "Radio/checkbox" value= "value" name= "name" checked= "Checked"/>
1. Type:

When Type= "Radio", the control is a radio box

When type= "checkbox", the control is a check box

2, Value: Submit data to the server values (background program PHP use)

3, Name: For the control name, in case the background program ASP, PHP use

4, checked: When set checked= "checked", this option is selected by default

As in the following code:

Note: The <label> tags in the code are explained in this chapter 5-9.

Results displayed in the browser:

Note: The same group of radio buttons, name values must be consistent, such as the above example is the same name "Radiolove", so that the same group of radio buttons can play the role of radio.

Task
Task 1: I'll try it: Modify the Radio Box code error (male, female can select simultaneously), making it a single selection.

1, in the right editor in the 11th line, 13 lines of code error, please correct.

Wrong answer

Note: The same group of radio buttons, name values must be consistent, such as the above example is the same name "Radiolove", so that the same group of radio buttons can play the role of radio.

9. save space by using the drop-down list box
Drop-down lists are often used in Web pages, which can effectively save web space. It can be both single-choice and multi-select. The following code:

Explain:

1. Value:

2, selected= "selected":

Set the Selected= "selected" property, the option is selected by default.

Results displayed in the browser:

Task
Let me have a try: Set the travel option for the "Hobbies" drop-down list to the default option

1. Add code selected= "selected" to the 12th line in the right editor.

. Use the drop-down list box to make multiple selections
The drop-down list can also be multi-select, in the <select> tag set multiple= "Multiple" property, you can implement multi-select function, under the Widows operating system, the multi-select when the CTRL key at the same time to click (under the Mac use Command + click), you can select multiple options. The following code:

Results displayed in the browser:

Task
Let me have a try: make the "hobby" drop-down list box multi-select function

1. Add code multiple= "multiple" in the 10th line of the right editor.

HTML Learning 2