Full HTML solution (2)

■ <CENTER>:
<CENTER> a center tag. Purpose: Display words, paintings, and tables in the middle.
This mark was originally defined by Netscape, and is supported by other browsers later, but you will find many parameters that Mark existing align = "CENTER". <CENTER> seems to be redundant, in fact, it is still one of the commonly used tags. It is easy to use and often used in text. The <TABLE> mark that has the align = "CENTER" parameter must also be left centered, the align = "CENTER" parameter in the <TABLE> flag is not supported by multiple browsers in the region.

■ <PRE>:
<PRE> it is called a preset format mark. Purpose: display the file according to the original code.
This mark allows you to retain the blank space and Return you entered in the original code. By looking at the following examples, you can see the power of this tag. In addition to using a large number of table tags, you can only use this tag to achieve this effect.

It is superior to generate the effect with the <PRE> mark, or to generate more than one blank line!

■ <DIV>:
<DIV> it is called a segmentation tag. Purpose: set the placement of words, paintings, tables, and so on.
<DIV> applied to Style Sheet (Style table) is more powerful. The ultimate goal is to provide the designer with another organizational capability, such as Class, Style, title, ID, and other attributes, it will be detailed in the Style Sheet section. This section describes only one attribute setting.
Take <DIV align = "center"> as an example:

Align = "center"
Optional values: center; left; right. Determines the center, left, or right of a word, painting, or table.
<DIV align = "center"> serves the same purpose as the CENTER mark <center>. The former is a standard that begins with HTML3.0, and the latter is a long-used labeling method.

■ <NOBR>:
<NOBR> it is a non-discounted row mark. Purpose: Make some text appear in the same line or the next line without being too long. It is particularly useful for address, mathematical formula, a line of numbers, code and so on.
Example: (Chris's Creation of Webpage will not be separated and displayed in the same row .)

■ <WBR>:
<WBR> it is a suggested line mark. Purpose: preset the part of the line.
It does not infringe the responsibility of <BR>, but only serves as a suggestion. If the viewer's system resolution is high enough, it will not be broken down.

Font mark
<STRONG> <B>
<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>
<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
<H1> <H2> <H3> <H4> <H5> <H6>
<FONT> <BASEFONT>
■ Entity tag and logical Tag:
In this section, you must first specify the differences between the object tag and the logical tag. Otherwise, you may wonder why different tags have the same effect. The two are divided into the following two parts:
OBJECT tags have a fixed display effect, while logical tags vary with browsers.
For example, <EM> the text marked by different browsers may not have italic effects, but may be bottom line, bold, or reversed, therefore, this section describes their effects in IE and NC.

Multiple entity tags can also be used to mark the same sentence. Logical tags are usually not used by the old browser to display multiple tags.
For example, when two logical tags <EM> and <STRONG> both mark a word, the old browser often loses its role.

Entity tags include:
<I> <B> <U>
Logical tags include:
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>
If the results are true, it is better to mark them with entities.

■ <STRONG> <B>:
Both of them can produce a bold font effect, but it must be noted that when the file is set to gb2312 Encoding, the text marked by the two will not show the BOLD effect on Netscape Netvigator.

■ <I> <EM> <VAR> <CITE> <DFN> <ADDRESS>:
These tags are italic in Internet Explorer, but only </DFN> Netscape Netvigator does not work. Only <ADDRESS> is special. because it includes the line feed effect, you do not need to add the <BR> mark before it.

■ <TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
In order to facilitate comparison and recognition, we will mark ten items for introduction.
<TT> <SAMP> <CODE> <KBD> Each letter can have an equal width and slightly wider distance between each letter. But this is not true for NC.
<U> it is the bottom line mark. Some special browsers do not support it, and the link may be confused due to concerns.
<STRIKE> added the strikethrough mark.
<BIG> increase the font size.
<SMALL> reduce the font size.
<SUB> is a subscript, <SUP> is an upper mark, and only the mathematical mark is left.

■ <H1> <H2> <H3> <H4> <H5> <H6>:
These are title tags, which gradually decrease from <H1> to <H6> thickening and widening. The words marked by each title are exclusive to one line and a blank line is left up or down.

■ <FONT> <BASEFONT>:
In this section, only the two tags have parameter settings, and the parameter settings are the same. They are used to set the text size, font shape, and color, but they are useful. See the following comparison:
<BASEFONT> can be used to start a file, that is, the position between <HEAD> and </HEAD>, which affects the full-text sentence and is an empty mark, used to change the font display value.
<Font> is the internal part of the file, that is, the position between <body> and </body>. It only affects the words marked and is a blocking mark.
The two tags can exist at the same time. Only words not marked by <font> are directly affected by <basefont>, while <font> is also affected by <basefont>.
<Font> parameter settings:
Example: <font face = "Arial" size = "+ 2" color = "#008000"> creation of webpage </font>

Face = "Arial"
Set the font of the text. Arial is a commonly used font. Do not use a font other than the built-in shape of the window. If no Chinese webpage is set to gb2312 encoding, Netscape netvigator does not display any Chinese characters specified by this flag.
Size = "+ 2"
Set the text size. The value can be absolute or relative,
The absolute meaning is to mark the size of the text, which is not affected by <basefont>, as shown in
Size = "5" indicates that the size is 5, while the value in HTML is 3, that is, size = "3" is the same as that in HTML.
The relative meaning is to increase or decrease the size series on the basis of the specified value 3. For example, size = "+ 2" is equivalent to the size = "5" of the representation ", however, if <basefont size = "N"> is set, the actual size of the system is n + 2, not 3 + 2. <Basefont> only absolute notation is supported.
Color = "#008000"
Set the text color. #008000 indicates greenList tag
■ <Ol> <li>
<Ol> it is called a sequential list tag. <Li> indicates the configuration items.
The order list is to add the numbers 1, 2, 3... and so on before each item, also known as the number list.
<Ol> parameter settings (commonly used ):
Example: <ol type = "I" Start = "4"> </OL>

Type = "I"
How can I set the number of diamond and diamond Zheng argon to comfort me? In the right table, the value is type = "1 ".
Start = "4"
Set the start number. No matter which number is set, which of the following is the first? 1, 2, 3... and other integers, which are set to start = "1 ".

<Li> parameter settings (commonly used ):
For example: <li type = "square" value = "4">

Type = "square"
It is applicable only to the non-sequential list and has three types of Character styles. The values are set to type = "disc" as follows ":
SymbolIs the column symbol when type = "disc.
SymbolIf "width = 10 Height = 10 border = 0> is the column symbol when type =" circle.
SymbolIt is the column entry symbol when type = "square.
Value = "4"
This parameter is only applicable to the sequential list. It sets the number of this item. Subsequent items increase progressively as the starting number, but the previous items are not affected. The value can only be 1, 2, 3 .. and has no internal value.

■ <Ul>:
<Ul> it is called an unordered list tag.
The unordered list is to add, and other symbols before each item, so it is also called the symbol list.
<UL> parameter settings (commonly used ):
Example: <UL type = "square">

Type = "square"
Set the symbol style. The values are as follows ":
SymbolIs the column symbol when type = "disc.
SymbolIt is the column symbol when type = "circle.
SymbolIt is the column entry symbol when type = "square.
Note: because both <UL> and <LI> have the type parameter, use either of them as much as possible.

■ <MENU> <DIR>:
These two tags are not accepted by W3C. We hope that the user can replace them with <ul> and <ol>.
<MENU> and <DIR>, which are basically the same as <ul>, may show <ol> effects in some special browsers, in earlier versions, the IE or NC flag <DIR> does not display symbols or numbers. The usage of the two tags is exactly the same as that of <ul>.

■ <DL> <DT> <DD>:
<DL> it is called the definition list tag. <DT> identifies the definition entry, and <DD> identifies the definition content.
The so-called definition list is a two-layer project list with unique symbols and numbers.
None of the three tags have common parameters. <DT> <DD> can be used independently, but some old browsers are not supported, such as IE 3.0. For example, the <DD> mark can be used to create a blank before the first word of a paragraph.Table tag
■ <Table> <tr> <TD>:
These three tags are the most important tags for defining a table. It can be said that learning only these three tags is sufficient.
<Table> is a container tag, which indicates that it is used to declare that this is a table and that other table tags only apply within its range. There are other container tags.
<Tr> used to mark table columns (ROW)
<TD> used to mark the cell)
<Table> parameter settings (commonly used ):
For example: <Table width = "400" border = "1" cellspacing = "2" cellpadding = "2" align = "center" valign = "TOP" background = "myweb.gif" bgcolor =" # 0000ff "bordercolor =" # ff00ff "bordercolorlight =" #00ff00 "bordercolordark =" #00 FFFF "Cols =" 2 ">

Width = "400"
The table width, which accepts absolute values (such as 80) and relative values (such as 80% ).

Border = "1"
The Border thickness of the table. Different browsers have different internal values, so please specify.

Cellspacing = "2"
The thickness of the table grid line, which is thickened to 5.

Cellpadding = "2"
The distance between text and grid lines, that is the padding to 10.

Align = "center"
Table placement position (horizontal); optional values: Left, right, center. See example 5 or 6. The table is placed in the middle, for fear that some browsers do not support it, therefore, the center mark <center> is only guaranteed by multiple layers. Of course, you can only use <center>.

Valign = "TOP ".
Placement position (vertical) of text and painting in the Table. Optional values: Top, middle, and bottom.

Background = "myweb.gif"
Table paper, which is different from bgcolor.

Bgcolor = "# 0000ff"
The background color of the table, which is different from that of background,

Bordercolor = "# ff00ff"
The border color of the table. NC and IE have different effects,
Bordercolorlight = "#00ff00"
The color of the border to the light part of the table, "only applies to ie 』

Bordercolordark = "#00 FFFF"
The color of the background part of the table border. See example 2. When bordercolorlight or bordercolordark is used, bordercolor will become invalid. "Only applies to ie 』

Cols = "2"
The number of table columns, which is used by the browser to draw the entire table before downloading the table.
<Tr> parameter settings (commonly used ):
Example: <tr align = "right" valign = "Middle" bgcolor = "# 0000ff" bordercolor = "# ff00ff" bordercolorlight = "#808080" bordercolordark = "# ff0000">

Align = "right"
Placement position (horizontal) of the calligraphy and painting in this column. Optional values: Left, center, and right.

Valign = "Middle"
Placement position (vertical) of the text and painting in this column. Optional values: Top, middle, and bottom.

Bgcolor = "# 0000ff"
Background color of this column,

Bordercolor = "# ff00ff"
The border color of this column. "only applies to ie 』

Bordercolorlight = "#808080"
The color of the border to the light part of this column ,. "Only applies to ie 』

Bordercolordark = "# ff0000"
The color of the background part of the border. When bordercolorlight or bordercolordark is used, bordercolor will become invalid. "Only applies to ie 』
<TD> parameter settings (commonly used ):
For example: <TD width = "48%" Height = "400" colspan = "5" rowspan = "4" align = "right" valign = "bottom" bgcolor = "# ff00ff" bordercolor = ""#808080" bordercolorlight = "# ff0000" bordercolordark = "#00ff00" background = "myweb.gif">

Width = "48%"
The storage space width, which accepts absolute values (such as 80) and relative values (such as 80% ).

Height = "400"
The storage height.

Colspan = "5"
Number of columns that can be connected to the right of a bucket. Rowspan = "4"

The number of columns in the bucket.

Align = "right"
The placement position (horizontal) of the font and painting in the bucket. Optional values: Left, center, and right.

Valign = "bottom"
The placement position (vertical) of the font and painting in the storage space. Optional values: Top, middle, and bottom.

Bgcolor = "# ff00ff"
The background color of the storage Grid

Bordercolor = "#808080"
The border color of the bucket. See example 3. "Only applies to ie 』

Bordercolorlight = "# ff0000"
The color of the border to the light part of a cell. See example 3. "Only applies to ie 』

Bordercolordark = "#00ff00"
The color of the backlights of the cell border. When bordercolorlight or bordercolordark is used, bordercolor will become invalid. "Only applies to ie 』

Background = "myweb.gif"
This bucket is used with bgcolor.
■ <TH>:
<TH> the same as <TD> indicates a bucket. The only difference is that the text in the bucket marked by <TH> appears in bold, it is usually used in the first column of the table to mark the column. It can be used to replace <TD>. For parameter settings, see <TD>.
Of course, if the text in the bucket marked by <TD> is added with the bold mark <B>, the effect is as shown in <TH>.

■ <CAPTION>:
<CAPTION> marks a title column for the table, as if you add a non-grid column to the top of the table. Of course, it can also be placed below, usually used to store the table title.
<CAPTION> parameter settings (commonly used ):
Example: <caption align = "TOP" valign = "TOP"> </caption>

Align = "TOP"
Position (horizontal) of the title column of the table relative to the table. Optional values: left, center, right, top, middle, bottom, if align = "bottom", the title column will appear below the table, regardless of whether the <caption> is placed in the header or tail of the <table> in your original code.

Valign = "TOP"
The position (up and down) of the title column of the table relative to the table. The optional values are top and bottom. It is the same as align = "TOP" or align = "BOTTOM". Although the features are repeated, if you want to place the title column below and to the right or left, then the two parameters can be used. Align is preferred when only one parameter is used, because valign is a parameter form tag starting from HTML 3.0.
■ <FORM> <INPUT>:
<FORM> is called a FORM tag. It is used to declare this as a FORM mode and belongs to a container tag, indicating that other FORM tags must be valid only in its surrounding mode. <INPUT> is one of them, the method used to set various input materials. It is an empty tag.
<FORM> parameter settings (commonly used ):
Example: <form action = "http://your.isp.com/cgi-local/example.cgi"; method = "POST">

Action = "http://your.isp.com/cgi-local/example.cgi ";
The form is usually used with CGI. The parameter action is used to specify the location of the CGI program so that the information entered in this form can be correctly transmitted to CGI for processing. If no CGI is fed for testing, you can set this parameter to ACTION = "mailto: your@email.com" so that the information entered in the form will be sent to this e-mail address (red part ).
Method = "POST"
The method for transmitting data to CGI. The optional values are POST and GET. You only need to remember that POST allows a large amount of data to be transmitted, but GET only accepts less than 1 kb of data, so if you have read the original form code of someone else, you will find that the application form uses POST and the searcher uses GET.
<INPUT> parameter settings (commonly used ):
Because the first parameter type has many options, different options indicate different input methods, and other parameters also differ, different input methods and other parameter settings are described as follows.

Type = "Text"
Optional values: Text, Radio, Checkbox, Password, Submit/Reset, Image, File, Hidden, and Button.

--------------------------------------------------------------------------------
Input Method 1: Text (single line Text box)
For example, <input type = "Text" name = "age" value = "20" align = "center" size = "2" maxlength = "255">

Type = "Text"
The input mode is Text. A single line of Text box can be generated, up to 255 characters.
Name = "Age"
This line of text box name is the most important one. It is convenient for CGI to identify the information sent from the form. Although it can be named casually, it is usually specified in CGI programs, if you switch to another name, you need to modify the CGI program. The name can be an English or number without any special characters. If the names are case-insensitive, you can write them as your_age, if a visitor fills in 40 in this text box in this form, the string passed to CGI is your_age = 40.
Value = "20"
The value in the text box of this single line. If not entered, the text box is blank. Wait for the visitor to enter the text box. If value = "20", 20 will appear in the text box. Of course, the visitor can modify it.
Align = "Middle"
Value Options: Top, middle, bottom, left, right, texttop, baseline, and absmiddle.
Size = "2"
The length of the text box displayed in this single line. If big5 encoding is used, you must be careful. The NC of the text box of the same size is longer than that of IE.
Maxlength = "255"
The maximum number of characters that can be entered in this single-line text box. To facilitate data arrangement or avoid incorrect input, you should set the maximum number. For example, you can set 8 for the input phone number or ICQ uin, the age is 2.

Input Method 2: Radio (single choice)
Example: <input type = "radio" name = "gender" value = "female" align = "center" Checked>

Type = "radio"
The input method is Radio, which generates a single choice for clicking.
Name = "gender"
This radio name is described in the text section.
Value = "female"
Internal value. Each radio must have only one value. Generally, two or more Radio input methods with different values of the same name are used at the same time, so you can choose one of them.
Align = "MIDDLE"
Optional values: top, middle, bottom, left, right, texttop, baseline, and absmiddle.
Checked
Set this Radio to set to selected. Only one Radio with the same name can be used, or none of them can be used.

Input Method 3: Checkbox (confirmation box)
For example: <input type = "Checkbox" name = "idol" value = "Leon" align = "RIGHT" checked>

Type = "Checkbox"
The input method is Checkbox, which generates a confirmation box for selection.
Name = "idol"
The name of this Checkbox. For more information, see the Text section.
Value = "Leon"
Internal value. Each Checkbox must have only one value. When it is deselected, this value will be passed to CGI, for example, the input string idol = Leon.
Align = "RIGHT"
Optional values: top, middle, bottom, left, right, texttop, baseline, and absmiddle.
Checked
Set the Checkbox as the selected variable. Each Checkbox is independent, so each one can use this parameter, unlike Radio.

Method 4: Password (Password box)
Example: <input type = "password" name = "PW" value = "999" align = "center" size = "5" maxlength = "9">

Other parameters of password are the same as those of text. For more information, see text.
The two have different functions. The characters entered by password are all expressed.

Input Method 5: Submit and reset)
This is an important two buttons on the form. The two parameters are the same, but they are of little use.

Example: <input type = "Submit" name = "other_funtion" value = "OK" align = "center">
<Input type = "reset" value = "clear" align = "center">

Type = "Submit"
Set the input mode to submit or reset.
Name = "other_funtion"
The submit function varies with the name and must be used with CGI. If you only need a normal transfer key, it is set internally and you do not need to use this parameter.
Value = "OK"
This value is not lost to CGI, but is displayed on the key. You don't need it. The transfer key's internal value is submit query, and the clearing key's internal value is reset.
Align = "Middle"
Value Options: Top, middle, bottom, left, right, texttop, baseline, and absmiddle

Input Method 6: image (image button)
This is usually used to replace the submit and reset buttons. Because the buttons generated by the program are not beautiful, this image parameter allows you to use self-made buttons.

For example: <input type = "image" name = "Submit" align = "bottom" src = "ex_icon.gif">

Type = "image"
The input format is image.
Name = "Submit"
The buttons to be represented can be submit, reset, or others.
Align = "bottom"
Optional values: Top, middle, bottom, left, right, texttop, baseline, and absmiddle.
Src = "ex_icon.gif"
Click the image source. If the image file is not in the same directory as the HTML file, add relative or absolute paths.

Input Method 7: File
Example: <input type = "file" name = "Upload" align = "bottom" size = "20" maxlength = "100" Accept = "text/html">

Input type = "file"
The input format is image. It is usually used to transmit files.
Name = "Upload"
This file transfer name is used for identification.
Align = "bottom"
Optional values: Top, middle, bottom, left, right, texttop, baseline, and absmiddle.
Size = "20"
The length of the displayed text box.
Maxlength = "100"
Maximum number of characters that can be entered.
Accept = "text/html"
There are 26 types of accepted files, but they are not set.

Input Method 8: Hidden
For example: <input type = "Hidden" name = "ID" value = "6618">

Type = "Hidden"
The input mode is hidden or inner. It does not display any input interface, but an internal value is transmitted along with the form to CGI, such as the membership number generated by CGI, you can also pass in modifiable parameters to adjust CGI to avoid modifying the CGI code.
Name = "ID"
This file transfer name is used for identification.
Value = "6618"
The value is passed to CGI in the form of ID = 6618.
Example: ("Hidden" is not displayed, so an additional "Submit" Key is placed here, indicating that the fixed value within Hidden will be pushed along with the submit key and passed to CGI)

Input Method 9: Button
Example: <input type = "Button" name = "useless" value = "Back">

Type = "Button"
The input mode is normal. Java Script is often used as the startup button.
Name = "useless"
This file transfer name is of little use.
Value = "Back"
Key display name.
Example: Here onclick = "history. go (-1); return true; is a JAVA event.

■ <SELECT> <OPTION>:
<SELECT> indicates the scroll menu tag. Each OPTION is marked by <OPTION> and can be used as a barrier tag or empty tag.
<SELECT> parameter settings (commonly used ):
Example: <select name = "where" size = "6" multiple>

Name = "where"
The name of the scroll menu for identification will be passed to CGI.
Size = "6"
The number of columns in the scroll menu, that is, the height. Modify the number by yourself. If this parameter is used, no Pop Up effect is available.
Multiple
This scroll menu allows multiple options.
<OPTION> parameter settings (commonly used ):
Example: <option value = "tw" selected>

Value = "tw"
The value of this option will be passed to CGI. You can modify the parameters on your own, but different options must have different values.
Selected
Set this option to "selected. One single choice scroll menu can only be selected with one or zero options.

■ <TEXTAREA>:
<TEXTAREA> is a form text block mark. It is often used in bug reports, feedback, and other scenarios that require a large amount of information.
<TEXTAREA> parameter settings (commonly used ):
Example: <textarea name = "comments" cols = "40" rows = "4" wrap = "VIRTUAL">

Name = "comments"
The name of the text block for identification will be passed to CGI.
Cols = "40"
Modify the width of the text block.
Rows = "4"
The number of columns in the text block, that is, its height. Modify the number by yourself.
Wrap = "VIRTUAL"
Set the value to off, physical, or virtual. Off indicates that this attribute is not used. physical forces the Liu browser to send data to CGI (Web Server) along with the line breaks in the real text, if it is set to virtual, a continuous string of words is sent (unless the user presses the RETURN/ENTER on the keyboard ).Graphic Markup
■ :
graphic tags are mainly used to insert images into webpages. for other purposes, such as video files and video maps (Image maps or multiple links) as mentioned in this section, see [image map] and [other tags ].
General parameter settings:

For example,

Src = "logo.gif"
Image Source, In. gif,. jpg and. png formats. The first two have been in use for a long time, and the latter has been developed since 96 years and will replace the first two in the future. If the image file and the html file are in the same directory, write only the file case name. Otherwise, the correct path must be added, which is relatively and absolutely acceptable.
Width = 100 height = 100
Sets the image size. The width and height are usually measured in pixels. It is usually set to the actual size of the image to avoid distortion. To change the image size, it is best to use the image editing tool in advance.
Hspace = 5 vspace = 5
Set the image edge to blank to avoid text or other images being too close. The relationship between the left and right sides of the image is set, and the relationship between the vspace and the upper and lower spaces of the image is set. The unit of height is pixels.
Border = 2
Border thickness.
Align = "top"
Adjust the text position next to an image. You can control the text displayed on the top, middle, bottom, left, and right of the image. Optional values: top, middle, bottom, left, right, botom. Netscape also supports texttop, baseline, absmiddle, absbottom,
Texttop indicates that the image and text are based on the top line,
Baseline indicates the bottom line value of the image to the current text line,
Absmiddle indicates that the image is absolutely central to the current text line,
Absbottom indicates the absolute bottom of an image to the current text line (the absolute bottom refers to the bottom edge of y, g, q, and other words ).
Alt = "Logo of PenPal Garden"
This is the text used to describe the image. If you use a text browser, because images are not supported, these texts will be displayed instead of images. If the browser supports image display, the text will be displayed when you move the cursor over the image.
Lowsrc = "pre_logo.gif"
Set to display a low-resolution image first. If a large image is added and the image is downloaded for a long time, the image will be displayed first to avoid browsing loss and interest, use it as the gray-scale version of the original image