Some HTML tags that a novice webmaster must understand

Source: Internet
Author: User

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Basic Concept:

Web pages, Web sites, browsers, Ie/netscape

HTML: Hypertext Markup Language, what is hypertext, what is markup language.

HTML content is displayed.

two, HTML syntax:





Three, <body> properties:

What is an attribute:

text: Sets the color of the text in the entire page

Link: The display color used to set general hyperlink text

ALink: Used to set the mouse to move to the hyperlink and press the mouse is a hypertext display color

vlink: Sets the color of a hyperlink that has been visited

background: Set background picture, can be absolute or relative path.

bgcolor: The user sets the background color, this property will lose its effect when the background is set

LeftMargin: Left margin

topmargin: Top margin

IV, annotations and special characters:


The contents of the
annotation are not displayed

annotations cannot be nested.

< <

> >

& &

 " '


Copyright Symbol



five, format label

<p></p&gt: Used to create a paragraph, you can set the alignment of a paragraph with align

<br/&gt: Single Mark adds a "/" to the end tag directly before ">", showing a newline

<center></center&gt: The graphic or text between pairs is centered horizontally

<marquee></marquee&gt: Move a picture or text. Direction property: The movement direction of the content (left,right,down,up); behavior: Specifies the movement behavior of the content (Scroll,alternate,slide)

<dl></dl><dt></dt><dd></dd&gt: Used to create a plain list.

<ol></ol><ul></ul><li></li>:<ol></ol> Create a list marked with numbers; <ul ></ul> have a dot for the created list;<li></li> can only be used between <ol></ol> or <ul></ul> to represent list items

<PRE></PRE&GT: Pre-format Text processing

Vi. Text Tags:

<h1></h1>......<h6></h6&gt: The text is displayed as a caption.

<b></b><i></i><u></u&gt: respectively corresponding to bold, italic, underline

<sub></sub><sup></sup&gt: respectively corresponding to the next superscript display

<cite></cite&gt: A font of references, usually italic

<em></em&gt: Displays text that needs to be emphasized, usually italic bold

<strong></strong&gt: Used to show heavier text, usually bold display

<font></font&gt: Change font, size, color. Face properties: Font;  Size is Born: Color Genus: Colour

Seven, image tags:


src attribute: necessary to set the location of the image file.

Alt Property: When the mouse moves to the prompt text displayed on the image, the display replaces the text when the image cannot be displayed

Align Property: Sets the alignment of the image to the surrounding text. Top,bottom,left,right

Border Property: Sets the border width of the image

width and Height: Setting the width and height of the image

<hr/&gt: Adds a horizontal line to the HTML document.

Size: Line weight

Color: The colors of the line

width: Length of line

NoShade: Shadow display

Eight, Hyperlink tags:

Resource Locator: URL;


http: protocol used; WWW: host name to be accessed; 80: Port number

<a href= "" ></a&gt: To display the contents of the intermediate tag as hyperlinks, and the content of the href as a hyperlink after clicking on the page.

: <a href= "" > Bigfoot </a>

<a href= "" <img src= "Image/hy.gif" ></a>

href attribute is indispensable;

Target property: Indicates which window in the browser opens a new page.

<a name= "": Anchor point tag, set multiple anchor points in the same Web page for hyperlinks to browse.

such as: <a href= "#标记1" > Jump to First Mark </a>

mailto: Open e-mail:

<a href= " subject=hello&body= Hello" > contact us </a>

Nine, <map name= "" ></map&gt: Image map divides an image into parts, each part points to a different link.

<area shape= "shape" coords= "coordinates" href= "url": Divide the image into blocks

shape property can be of the following shapes:

rect: Rectangle, at which point the coords is the coordinates of the lower-right corner of the rectangle's upper-left corner

Poly: A polygon, at which point the coords is the vertices of a polygon

Circle: Circle, at this time coords for the circle of learning coordinates and RADIUS


<img src= "chinagif" usemap= mymap "/>"

<map name=mymap>

<area shape= "rect" href= "a.html" coords= "140,20,280,60" >

<area shape= "poly" href= "b.html" coords= "100,100,180,80,200,400" >

<area shape= "Circle" href= "c.html" coords= "10,100,60" >


10, form label:<table></table><tr></tr><td></td>

The three-tab hierarchy:

<table></table&gt: Define the start and end of a table

<tr></tr&gt: Define the start and end of a line

<td></td&gt: Defines the start and end of a cell

<table></table> Properties:

bgcolor: Set the background color of the table

border: Sets the width of the table's border

bordercolor: Set table border color

bordercolorlight: Sets the color of the bright part of the table border

Bordercolordark: Sets the color of the dim portion of the table border

cellspacing: Sets the spacing between cells

cellpadding: Sets the spacing between the contents of the cell and the border

width: Table widths

Height: Table Heights


align: The contents of the entire row of cells are horizontally aligned left,center,right.

valign: The contents of the entire row of cells vertical alignment top Middle,bottom

bgcolor: Set the color of this line


Width: Cell width (size)

Height: Cell Heights

align: horizontal alignment of content within a cell

valign: Vertical alignment of contents within a cell

colspan: Sets the number of columns a cell spans

rowspan: Sets the number of rows a cell spans

nowrap: Prevent the contents of a cell from wrapping automatically

<th></th> is similar to <td></td> except that the contents shown are centered in boldface

11, Frame label <frameset></frameset><frame></frame&gt:

What is a frame: split a window into multiple sections, each showing a separate page.

frame is just a split window.

<frameset></frameset> Define a frameset:

Rows: Scales the window vertically to the size of the window

cols: Splits the window horizontally by the size of the window

<frame></frame> define a specific frame window:

src: To display the URL of a Web page

Name: The name of the frame window

Taget: The hyperlink in the frame defaults to open the window _blank,_parent,_self,_top.

scrolling: Whether scroll bars appear on the edge of the frame Yes,no,auto

noresize: Prevents the user from dragging the divider line to resize the frame, just put it on.

<iframe></iframe> inserts a simple frame window on a web that is used to display another file.

Name: The name of the frame window

src: The new Web page displayed in the frame window

12, form label:

What's the form?

<form></form&gt: Define the start and end position of the form < briefly >

action: The URL of the server program that handles the content of the form

method: How to submit to the server to process form information

get: Attach the form information as a URL parameter to the action's URL

set: Sends form information as an HTTP message entity to a Web server

Target: Sets the window to display the results of the server return

title: When the mouse is placed on the form with a yellow bubble to prompt

<input type= "Submit": Define a Submit button

Action: Specifies the server program specified by the URL

value: Text on the button

<input type= "reset": Define a re-fill button.

value: Text on the button

<input type= "text": Define a single-line text box

Size: The width of the input area, in number of characters

Value: The contents of the text box

maxlength: Maximum string length that a user can enter

ReadOnly: When a property exists, the text box can get the focus, but the user cannot change the contents.

disable: When a property exists, the text box does not have the focus and cannot change the contents.

<input type= "checkbox": Define a check box

Name: The names of the check boxes, with the same set of check boxes with the same name

checked: This check box is selected

value: Specifies the background value of this checkbox when the check box is selected

<input type= "Radio": Define a radio button

Name: The name of the radio button, the same group of radio buttons with the same name

value: Specifies the background value of this radio button when the radio button is selected

<input type= "hidden": Add an implicit field element to the form, and the browser will not display this field

Name: Name Child


will be submitted to the server as Name=value when the form is submitted.

<input type= "button": Define an ordinary button on the form that is usually associated with a script code

<input type= "password": Define a password input area on the form.

<input type= "file": Used to transfer files from native to server

<input type= "image": Creates an image element on the form.

The source file for the
image is specified by the SRC attribute, and it has no value attribute.

image elements can be used in lieu of the submit button in some cases

Click on the image element to send the form information to the server along with the X,y value that was clicked

<select></select> Create a drop-down list box or a list box that you can check.

Size: Sets the number of visible options in the list box. The default value is 1, which displays a Drop-down list box.

Mutiple Property: This is an unassigned property that defines whether a list box can be selected more than once.

defines items in a list box that are implemented with <option></option>.

<option></option> Add items to the list box

value: Background value of the project

selected: Specifies whether the item is selected

<textarea></textarea> Create a text box that allows you to enter multiple lines of text

cols: The number of columns in the text box

rows: Number of columns in the text box

13, partition label:

<div></div&gt: Area label, Layer

<span></span&gt: Area label

14, head element:

<base> Tags: used to specify the base address of a hyperlink in a Web page. The relative addresses of all hyperlinks in a Web page are based on that address.

the label can only be placed between <head></head> tags.

: <base href= "" target= "_blank" >

<meta> Tags: commonly used between <head></head> of files. There are two main types of <meta&gt, which are divided by different attribute names (NAME,HTTP-EQUIV).

The Name property is mainly used to add some descriptive information about the Web page to the Web page, such as keywords for the Web page, description of the Web page, etc.

Http-equiv property is primarily used to simulate HTTP headers in an HTML document.

what is an HTTP header?

by accessing the Web page, the server, in addition to returning the contents of the Web page file itself (that is, in the browser to see the source files), it also returns the contents of the Web page file, the transfer of part of the content called HTTP headers to the browser, this part of the meat is in the browser to see the source file can not The contents of the HTTP header are equivalent to some code instructions that the server sends to the browser, informing the browser of the character encoding that should be used when viewing the page, whether the local cache, the expiration time of the Web page, whether to refresh the page after a certain amount of time, or to jump to another page.


Name property setting:

Keywords: Keywords for Web pages to facilitate the collection of information in search engines.

<meta name= "keywords" content= "software engineer training, Tsinghua it, Hua Yu International" >

Description: Web description letter for easy search.

Generator: The name of the tool used to edit this page, and the content to fill in the Web editing software used.

Author: Used to describe the author of a Web page, fill in the author's name in the content.

: For copyright notices, content to fill in your copyright notice.

http-equiv property setting:

Content-type: Describes the type of Web page content and the character set encoding used for text content.

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

refresh: Tell the browser to automatically refresh the Web page

<meta http-equiv= "Content-type" content= "1;url=" >

notify the browser after a second jump to the blood hero online.

Expires: Used to set the expiration time for a Web page. For efficiency, the browser can be set to cache previously accessed pages, and when accessed again, the browser does not visit the server, but is read directly in the local cache. Setting its content to 0 prevents browsers from using cached pages.

<meta http_equiv= "Expires" content= "" Mon,12,may,2007 Unlimited gmt>

windows-target: Forces the page to appear in a window. For example, to prevent others from calling your page as a Frame page:

<meta http-equiv= "Windows-target" content= "_top" >
Related Article

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