HTML Common Tags

Source: Internet
Author: User

HTML Common tags structure of HTML

<body></body>

The properties of the Body tag

<body Property ="attribute value">

Background: Setting a background image for a Web page

BgColor: Setting a background color for a Web page

text and font decoration tags

<b></b> or <strong></strong> font Bold

<i></i> or <em></em> to set the font italic

<u></u> or <ins></ins> Set the font to underline

<s></s> or <del></del> set strikethrough for font

<sup></sup> Font superscript

<sub></sub> Font subscript

<font Property ="attribute value"></font> set color for text, set font size, set font

color sets colors for fonts

Size Sizes Font

Face sets font for font

Typesetting marks

title Tag (1 large 6 Small)

<p></p> paragraph marks

properties:align the contents of the content in the horizontal direction of the alignment value:left( default )/center/right

<br/> line break tag

Horizontal line marker

properties: Color Sets the colors of a horizontal line

Size Sets the thickness of the horizontal line

width Set the horizontal line widths

Align to set horizontal alignment of horizontal lines

NoShade removing Shadows

List

Unordered list

<ul>

<li></li>

<li></li>

</ul>

Ordered list

<ol>

<li></li>

<li></li>

</ol>

Custom list

<dl>

<dt></dt> ( title )

<dd></dd> ( content )

</dl>

Marquee Marking

<marquee></marquee>

Common Properties:

Direction: Scrolling Direction value:left( default )/center/right

Behavior: scrolling Way to value:Scroll ( scroll default )/slide ( Scroll only once )/alternate ( Elastic Motion )

Width: setting widths

Height: Set height

BgColor: Setting the background color

ScrollAmount: Scrolling Step value (the higher the value, the faster)

Head Tag

<title></title>: The function of this tag is to display the title of the page

<meta/>

n It tells the browser what encoding to use to parse the current document

<meta http-equiv= "Content-type" content= "text/html;charset= character encoding "/>

n It can implement Web page refresh

<meta http-equiv= "Refresh" content= "refreshes the current page every specified time"/>

n It can implement Web page jump

<meta http-equiv= "Refresh" content= " Specify the jump time ; page URL to jump "/>

n It can also be optimized for SEO

<meta name= "keywords" content= "keyword list"/>

<meta name= "description" content= "Web description"/>

Super Link

<a><a/>: The hyperlink can be implemented with this tag

Common Properties:

Href: URL address of the link to jump

Target: How the destination file is opened

property value:_self Open in current window (default)

_blank opens in a new window

_top opens in the top window

_parent Open in parent window

Name: the link used to implement the anchor point

Id: the link used to implement the anchor point

Anchor Point Link

To implement an anchor link requires two steps:

First step: To define an anchor point

<a name= "anchor name" ></a> or <a id="anchor name" ></a>

Second step: To find the defined anchor link

<a href= "# Anchor name " > text or picture </a>

Picture Markers

: picture marker

Common Properties:

SRC: Address of the reference image

ALT: text message to display when the picture does not exist

Title: Displays text messages when the mouse is placed in the position of the picture

Border: setting a border for a picture

Width: Setting the picture

Height: Sets the altitude for the picture

Image Hotspots

Format:

name " >

<map name= " It should be the same as the usemap attribute value inside the img tag " >

<area shape coords= "" href= "" title= "the text that appears when the mouse is placed on top of the slice"/>

<area/>

<area/>

</map>

properties of the area tag:

Shape: Represents the value of shapes inside an area:rect ( rectangle ),Circle ( Circle ) , Poly ( polygon )

coords: Coordinate values

if the shape is set to rect ( rectangle ) , then the coordinate value should have 4 : x1,y1,x2,y2

if the shape is set to Circle ( Circle ) , then the coordinate value should have 3 : X1,y1,r

if the shape is set to poly ( polygon ) , then the coordinate value should be determined by how many sides

Multimedia Tagging

<embed/> HTML5

Common Properties:

SRC: The source file address to be introduced

Width: Setting widths

Height: Set height

Table

Format of the table

<table>

<tr>

<td></td>

</tr>

</table>

The markup for the table

<table></table>: represents a table

<tr></tr>: represents a row in a table

<td></td>: represents a cell in a table

<th></th>: represents a header cell in a table,

<caption></caption>: represents a heading in a table

properties of the Table tag

<table></table>

property:border: Set Border Width value:0~n

BorderColor: Set Border color

Width: Sets the table width value: Fixed value or Percentage

Heigh: Set Table height value: Fixed value or Percentage

Align: Sets the horizontal alignment value of the table : Left ( default )/center/right

Background: Setting the background picture of a table

BgColor: Sets the background color of the table

CellSpacing: the distance between cells and cells in a table

CellPadding: The distance between the contents of the cell in the table and the cell border

<tr></tr>

properties:background: Set the background picture of a row

BgColor: Sets the background color of the row

Width: To set the line widths

Height: Sets the heights of the rows

Align: Sets the horizontal alignment value of the row content:left( default )/center/right

valign: Sets the vertical alignment of the line content: Top( top aligned )/middle ( default )/bottom

<td></td> or <th></th>

Properties:width: setting cell widths

Height: Sets the heights of the cells

Background: Setting the background picture of a cell

BgColor: Setting the background color of a cell

Rowspan: merging cells across rows

Colspan: merge cells across columns

Tag of the title

<caption></caption> This is the table 's self-tagging it is used to set the table's caption

Hidden markup for tables

<thead></thead>: represents the head of a table

<tbody></tbody>: indicates that the body part of a table can have more than one

<tfoot></tfoot>: represents the end of a table it is generally used for statistical purposes .

form

<form>

Controls for forms

</form>

properties of the Form tag:

Action: The handler for the form data gives the form's data to "who" for processing

Method: How the form data is submitted:get ( default )/post

Get: display all form data in the browser's address bar

Post: It does not display the form's data in the browser's address bar, it is sent directly to the background

Enctype: form data encoding method generally do not have to write only when the file upload only need to write

value:application/x-www-form-urlencoded The default is its different encryption method

Multipart/form-data Multi-File Upload method

form Controls

Single-line text box:

<input type= "text" name= "name" value= "value" size= "Set width"/>

Single-line Password box:

<input type= "password" name= "name" value= "value" size= "Set width"/>

radio button:

<input type= "Radio" name= "name" value= "value" checked= "Checked" ( selected by default )/>

Multi-Select button:

<input type= "checkbox" name= "name" value= "value" checked= "Checked" ( default selected /) >

Submit button:

<input type= "Submit" Name= " name does not suggest write " value= "value"/>

Reset button:

<input type= "reset" name= " name does not suggest write " value= "value" >

Normal button:

<input type= "button" name= " name does not suggest write " value= "value" >

Picture button

<input type= "image" src= " picture address URL"/>

File Upload button

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

method="POST" enctype= "Multipart/form-data" inside the form tag

Hidden fields:

<input type= "hidden" name= "name" value= "Value" >

Use button this double tab to implement the buttons

Submit button:

<button type= "Submit" > submit </button>

Reset button:

<button type= "reset" > reset </button>

Normal button:

<button type= "button" > general </button>

Note: If the type inside the button tag is not written in the form tag, it has the submit function of the form if the outside the form tag, it's a normal button.

Drop-down list:

<select>

<option> Please select the following provinces </option>

</select>

Text fields:

<textarea rows= "Number of rows" cols= "Number of columns" name= "name" ></textarea>

Structure of frame-type Web pages

<frameset rows= "Set this frame page to up and down" cols= "set this frame page to the left and right type" >

<frame/>

<frame/>

</frameset>

Property:

Frameset This tag it is used to define whether the frame page is up or down or right or left

Rows= "80,*" splits the window into a top-up window that occupies up to three pixels all the rest of the space is given to the next window .

Rows= "80,100,*" splits the window into the upper and lower top window occupies the middle of a window occupying a total of four pixels the rest of the space is given to the next window .

cols= "100,*" splits the window into the left side of the right-hand window occupies up to four pixels all the rest of the space is given to the window .

cols= "100,80,*" splits the window into the left middle right of the left window occupies up to four pixels in the middle of the window occupies A total of all the space left to the right window /c12>

Border: The thickness of the border used to set the frames page

Bordecolor: The border color used to set the frames page

Frame This tag indicates how many small windows in the frame page of a small window will have a frame this tag

SRC: It can be introduced to external HTML pages or other sites can be

Name: Setting the names of small Windows This property is very important

HTML Common 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.