HTML Basics (iii) Common tags-by Haley

First, comment text

Grammar:
<!--comment text--

Second,

Third,

Create a horizontal line in an HTML page

<P>HR tags define horizontal lines:</p>
<p> this is the paragraph. </p>
<p> this is the paragraph. </p>
<p> this is the paragraph. </p>

Iv. <p> Labels

<p> this is a paragraph. </p>
<p> this is a paragraph. </p>
<p> this is a paragraph. </p>

Five, <br> label

<p> This <br> paragraph <br> demonstrates the effect of a branch </p>

vi. <b> tags, <i> tags, <code> tags, <sub> tags, <sup> tags

Formats the output text, such as bold or italic
Usually label <strong> replace bold label <b> ("bold") to use, <em> replace <i> ("italic") label to use.

<b> Bold text </b><br><br>
<i> Italic text </i><br><br>
<code> Computer Auto Output </code><br><br>
This is _subscript and ^superscript

vii. <a> Tag, target property, id attribute

1. Syntax:
<a href= "url" > link text </a>

2.target Properties

<a href= "http://www.baidu.com" target=_blank> link text </a>

<a href= "http://www.baidu.com" target=_self> link text </a>

<a href= "http://www.baidu.com" target=_parent> link text </a>

<a href= "http://www.baidu.com" target=_top> link text </a>

3.id Properties

Such as:

<a href= "#p1" > Click to go </a>
<p id= "P1" > Articles </p>

To insert an ID in an HTML document:
<a id= "Tips" > Useful tips Section </a>

Create a link to the Useful Tips section (id= tips) in an HTML document:
<a href= "#tips" > Access useful Tips section </a>

Alternatively, create a link from another page to the "Helpful Tips section (id=" Tips ")":
<a href= "Http://www.runoob.com/html/html-links.html#tips" >
Visit the Helpful Tips section </a>

viii. tags, alt attributes

1. Syntax:

2.ALT Properties

3. Set the height and width of the image
The default units for property values are pixels:

ix. <table> tags, <tr> tags, <td> tags, <th> tags

The table is defined by the <table> tag. Each table has several rows (defined by the <tr> tag) and each row is split into several cells (defined by the <td> tag). Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and so on.

Horizontal vertical Column

Merge

1. Merging columns

<th colspan= "3" > Personnel Information Sheet </th>

2. Merging rows

<th rowspan= "5" > I am redundant </th>

10. <ul> tags, <ol> tags, <li> tags, <dl> tags, <dt> tags, <dd> tags, type properties, start properties

HTML supports ordered, unordered, and defined lists:

1. The unordered list is a list of items that are marked with a bold dot (typically a small black circle).
Unordered list Use <ul> tags
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Property value
Type Disc Solid Circle
Circle Hollow Circle
Square Solid Rectangle

2. The sequence list is also a column of items, and the listing items are marked with numbers. The sequence list starts with the <ol> tag. Each list item starts with the <li> label.
List item items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
The browser appears as follows:
1.Coffee
2.Milk

Property value
Type number, lowercase capital letter, Roman numeral
Start number

3. Custom lists are not just a list of items, but a combination of items and their annotations.
The custom list starts with the <dl> tag. Each custom list item starts with <dt>. The definition of each custom list item starts with <dd>.
<dl>
<dt>Coffee</dt>
<dd>-Black Hot drink</dd>
<dt>Milk</dt>
<dd>-White Cold drink</dd>
</dl>
The browser appears as follows:
Coffee
-Black hot drink
Milk
-White cold drink

11, <div>, <span>

Most HTML elements are defined as block-level elements or inline elements.
Block level (Block-level) is usually started (and ended) with a new line when the browser is displayed.
Example: Inline elements (inline) typically do not start with new lines when they are displayed.
Example: <b>, <td>, <a>,

<div> elements are block-level elements
<span> elements are inline elements

12. <form> label, name attribute, method property, Action property, <input> tag, type property

<form> Label function structure

Property value

Name string

Method Get/post

Action URL

1. Text fields
<input type= "text" name= "" value= "" size= "" maxlegth= "" readonly= "readonly" > tag to set the text field, when the user wants to type in the form the letter, the number and so on the content, The text field will be used.

<form>
First Name: <input type= "text" name= "FirstName" ><br>
Last Name: <input type= "text" name= "LastName" >
</form>

2. Multiple lines of text

<textarea name= "" cols= "Length" rows= "width" >
Text content
</textarea>

3. Password fields
<input type= "password" name= "" value= "" size= "" maxlegth= "" readonly= "readonly" > tags to define password fields:

<form>
Password: <input type= "Password" name= "pwd" >
</form>

4. Radio button (Radio Buttons)
<input type= "Radio" > tag defines the form selection box option

<form>
<input type= "Radio" name= "Sex" value= "male" >Male<br>
<input type= "Radio" name= "Sex" value= "female" >female
</form>

5. check box (checkboxes)
<input type= "checkbox" > Defines the check box. The user needs to select one or several options from several given selections.

<form>
<input type= "checkbox" name= "vehicle" value= "Bike" >i have a bike<br>
<input type= "checkbox" name= "vehicle" value= "car" >i have a Car
</form>

6. Drop-down box

(1) Simple drop-down box

<form action= "" >
<select name= "Cars" >
<option value= "Volvo" >Volvo</option>
<option value= "Saab" >Saab</option>
<option value= "Fiat" >Fiat</option>
<option value= "Audi" >Audi</option>
</select>
</form>

(2) Pre-selection drop-down box

<form action= "" >
<select name= "Cars" >
<option value= "Volvo" >Volvo</option>
<option value= "Saab" >Saab</option>
<option value= "Fiat" selected>Fiat</option>
<option value= "Audi" >Audi</option>
</select>
</form>

(3) Group drop-down box

<form action= "" >
<select name= "" >
<optgroup label= "Huabei area" >
<option value= "" > Hebei </option>
<option value= "" > Tianjin </option>
</optgroup>
<optgroup label= "Southern Region" >
<option value= "" > Shenzhen </option>
<option value= "" > Guangzhou </option>
</optgroup>
</select>
</form>

7. Submit button
<input type= "Submit" > defines the Commit button.
When the user clicks the Confirm button, the contents of the form are transferred to another file. The action properties of the form define the file name of the destination file. This file, which is defined by the action attribute, is usually processed in connection with the input data received. :

<form name= "Input" action= "html_form_action.php" method= "Get" >
Username: <input type= "text" name= "user" >
<input type= "Submit" value= "Submit" >
</form>

8. Login, Reset, empty button
<input type= "Submit" value= "Login"/>
<input type= "reset" value= "reset"/>
<button> Buttons </button>

9. Uploading Files

<input type= "file" name= "filename"/>

13. Frame Set and <iframe label >

Here is an example:

Web pages will be divided into three windows, respectively, Baidu NetEase display Sohu.

A frameset is typically used in a background management system:

First set up the T-page,

The browser appears as follows:

Then set up three HTML pages head.html, left.html, body.html, see below:

After creating three HTML pages for head.html, left.html, body.html, SRC to the previous Admin page, see below:

As shown below, the basic framework has appeared:

Then implement click on the left hyperlink, the right side will appear relevant content. Then create a new people.html, xitong.html:

Then back to the background management T-page, to the right frame named body, see below:

Then go back to left.html and point to xitong.html, people.html, body.html, respectively, in the <a> tab,

Plus target= "Body", see below, which makes clicking on the left side of the hyperlink, will appear in the frame named body.

<iframe> label syntax, setting height and width, removing a table box:
<iframe src= "URL" width= "height=" frameborder= "0" ></iframe>

Example: The page appears in the IFRAME frame when you click on the link, see below:
<body>

<iframe src= "demo_iframe.htm" name= "Iframe_a" ></iframe>
<p><a href= "http://www.runoob.com" target= "Iframe_a" >RUNOOB.COM</a></p>

<p><b> note:</b> because the target property of the A tag is the IFRAME framework named Iframe_a, the page appears in the IFRAME frame when you click the link. </p>

</body>

HTML Basics (iii) Common tags-by Haley