Detailed explanation of HTML tags-HTML Tutorial-php.cn

-- Detailed explanation of HTML tags
Detailed explanation of HTML instructions
Structure
＜html＞
＜head＞
＜title＞Title＜title＞
＜/head＞
＜body＞......File content. .........
＜/body＞
＜/html＞
1. File title
＜title＞.....＜/title＞
2. File update--＜ meta＞
　【1】Automatically update once after 10 seconds
　＜meta http-equiv="refresh" content=10＞
　【2】Automatically link to another file after 10 seconds
　＜meta http-equiv="refresh" content ="10; URL=URL of the file to be linked"＞
3. Query form--＜isindex>
　If you want to set the prompt text before the query field:
　＜isindex PRompt="Prompt text"＞
4. Default base path--＜base>
＜base href="URL of the host where the file is placed"＞
Layout
1. Title text ＜h#＞............＜/h#＞ #=1~6; h1 is the largest font, h6 is the smallest font
2. Font changes ＜font＞......................＜/font＞
【1】Font size ＜font size=#＞. .........＜/font＞ #=1~7; The larger the number, the larger the font
【2】Specify the font ＜font face="font name"＞..... ..＜/font＞
【3】Text color ＜font color=#rrggbb＞............＜/font＞ rr: stands for red (red) color code gg: stands for green (green) color Code bb: blue color code
3. Display small fonts ＜small＞.....＜/small＞
4. Display large fonts ＜big＞..... ...＜/big＞
5. Bold font ＜b＞.....＜/b＞
6. Italic font ＜i＞..........＜/ i＞
7. Typewriter font ＜tt＞............＜/tt＞
8. Bottom line ＜u＞.....＜/u＞
9. Strikethrough ＜strike＞..........＜/strike＞
10. Subscript ＜sub＞..........＜/sub＞
11. Superscript ＜sup>. .......＜/sup＞
12. Text blinking effect ＜blink＞..........＜/blink＞
13. Line break ＜br＞
14. Segmentation ＜p ＞
15. The alignment direction of text ＜p align="#"＞ Number # can be left: table aligned to the left (default value) center: table aligned to the center right: table aligned to the right P.S.＜p align="# The text after "" will be displayed in the set alignment until another

appears to change its alignment direction, or when the

ⅱ tag is encountered, it will be automatically set back to the default aligned to the left.
16. Divider line ＜hr＞
【1】Thickness of the divider line ＜hr size=points＞
【2】Width of the divider line ＜hr size=points or percentage＞
【3】Alignment direction of the divider line ＜hr align= "#"＞ The # sign can be left: the table is aligned to the left (default value) center: the table is aligned to the center right: the table is aligned to the right
【4】The color of the dividing line ＜hr color=#rrggbb＞
【5】 Solid dividing line ＜hr noshade＞
17. Align to the center ＜center＞......................＜/center＞
18. Display in original style ＜pre＞.......... ＜/pre＞
19. Properties of the command
【1】Background color -- bgcolor ＜body bgcolor=#rrggbb＞
【2】Background pattern -- background ＜body background="graphic file name"＞
【 3】Set the background pattern so that it does not scroll -- bgproperties ＜body bgproperties=fixed＞
【4】The color of the document content text -- text ＜body text=#rrggbb＞
【5】The color of the hyperlink text -- link ＜ body link=#rrggbb＞
【6】The text color of the hyperlink being selected -- vlink ＜body vlink=#rrggbb＞
【7】The text color of the hyperlink that has been linked -- alink ＜body alink=#rrggbb＞
20. Annotation ＜!--..........--＞21. Special character representation
Symbol 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　logue in &ｑｕｽｔ
Blank 　　&ｎｽｽｐｐ

Pictures
1. Insert picture ＜img src="graphic file name"＞
2. Set frame -- border ＜img src="graphic file name" border=points ＞
3. Set graphic size -- widthⅱheight ＜img src="Graphic file name" width=width points height=height points＞
4. Set the top, bottom, left and right spaces of the graphic - vspaceⅱhspace Number of empty points＞
5. Graphic notes ＜img src="Graphic file name" alt="Explanation text"＞
6. Preload pictures
＜img src="High-resolution graphic file name" lowsrc="Low-resolution graphic File name"> P.S. It is best to have the same size of the two pictures
7. Image Map Detailed explanation of HTML tags ＜area shape=shape coords=area coordinate list href="URL of connection point"＞
＜area shape=shape coords=area coordinate list href="URL of connection point"＞
＜area shape=shape coords =area coordinate list href="URL of connection point"＞
＜area shape=shape coords=area coordinate list href="URL of connection point"＞＜/map＞
【1】Define shape -- shape
shape =rect: rectangle shape=circle: circle shape=poly: polygon
[2] Define the area -- coords
a. Rectangle: Four numbers must be used, the first two numbers are the coordinates of the upper left corner, and the last two numbers are Coordinates of the lower right corner
Example: ＜area shape=rect coords=100,50,200,75 href="URL"＞
b. Circle: Three numbers must be used, the first two numbers are the coordinates of the center of the circle, and the last number is the radius length
Example: ＜area shape=circle coords=85,155,30 href="URL"＞
c. Any shape (polygon): fill in the coordinates of each turning point of the shape in order
Example: ＜area shape= poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"＞
Table
1. Define table ＜table＞..........＜/table＞
【1】Settings The thickness of the border -- border
＜table border=points＞
【2】Set the width of the grid -- cellspacing
＜table cellspacing=points＞
【3】Set the distance between the data and the grid -- cellpadding
＜ table cellpadding=points＞
【4】Adjust table width -- width
＜table width=points or percentage＞
【5】Adjust table height -- height
＜table height=points or percentage＞
【6】Set table Background color -- bgcolor
＜table bgcolor=#rrggbb＞
【7】Set table border color -- bordercolor
＜table bordercolor=#rrggbb＞
2. Display grid lines ＜table border＞
3. Table title
＜ caption＞........................＜/caption＞
Table title position -- align
＜caption align="#"＞ Number # can be top: the table title is placed above the table (default value)
bottom: The table title is placed below the table
4. Define columns ＜tr＞
5. Define fields «1» ＜td＞: Align to the left
«2» ＜th>: Align to the center ⅱ Bold
【1】 Horizontal position -- align ＜th align="#">
# number can be left: align to the left
center: align to the center right: align to the right
【2】Vertical position -- align ＜th align="#" ＞ The # number can be
top: align upwards middle: align to the middle
bottom: align downwards
【3】Field width -- width
＜th width=points or percentages ＞
【4】Fields are merged vertically -- rowspan
＜th rowspan=Number of columns to be merged＞
【5】Horizontal merging of columns -- colspan
＜th colspan=Number of columns to be merged＞
List
1. Directory list
＜dir＞＜li＞Item 1 ＜li＞Item 2 ＜li＞Item 3 ＜/dir＞ P.S. Each item in the directory list cannot exceed 20 characters (i.e. 10 Chinese characters)
2. Option list ＜menu＞＜li＞Item 1 ＜ li＞Item 2 ＜li＞Item 3 ＜/menu＞
3. List with serial numbers ＜ol＞＜li＞Item 1 ＜li＞Item 2 ＜li＞Item 3 ＜/ol＞
【1】Serial number format -- type ＜ol type=#＞ or ＜li type=#＞ The # number can be A: The uppercase English letters AⅱBⅱCⅱD... are used as the project number. a: The lowercase English letters aⅱbⅱcⅱd... are used. .As the project number I: The table uses uppercase Roman numerals as the project number i: The table uses lowercase Roman numerals as the project number 1: The table uses Arabic numerals as the project number (default value)
[2] Starting number - - start ＜ol start=The ordinal number to start counting＞
【3】Specify the number -- value ＜li value=The ordinal number to be specified＞
4. List without serial number ＜ul＞＜li＞Item 1 ＜li＞Item 2 ＜li＞Item 3 ＜/ul＞
【1】Bullet mark form -- type ＜ul type=#＞or ＜li type=#＞ The # number can be disc: solid dot (default value) circle: hollow circle Point square: solid square
【2】Original list -- plain ＜ul plain＞
【3】List arrangement -- warp «1»The list is arranged vertically ＜ul warp = vert＞ «2»The list is arranged horizontally ＜ul warp = horiz＞
5. Definition List ＜dl＞＜dt＞Item 1 ＜dd＞Item 1 Description ＜dt＞Item 2 ＜dd＞Item 2 Description ＜dt＞Item 3 ＜dd＞Item 3 Description ＜/dl＞
Close Arrangement -- compact

and the content of: can be placed on the same line, separated by only a few blank spaces without line breaks. However, if the text of
exceeds a certain length, , the effect of compact disappears! Form 1. Basic structure ＜form action="URL of the CGI program used to process data" or "mailto: URL of the e-mail" method="get or post"＞.......... ........ ..... ＜/form＞ 2. Input file form ＜form action="URL" method="post"＞＜input＞＜input＞ .. ........ ..... ＜/form＞ 【1】Field type -- type ＜input type=#＞ Number # can be text: text input passWord: password checkbox : Multi-select button radio: Radio button submit: Accept button reset: Reset button image: Graphic button hidden: Hidden field 【2】Field name -- name P.S. If type For submitⅱreset, the name does not need to be set. 【3】Default value on the document -- value ＜input value="Default string"＞ 【4】Set the width of the field -- size ＜input size=word Number of characters＞ 【5】Limit the maximum input string length -- maxlength ＜input maxlength=number of characters＞ 【6】Default the initial value of checkbox or radio -- checked ＜input type=checkbox checked＞＜input type =radio checked＞ 【7】Specify the URL of the graphic -- src ＜input type=image src="image file name"＞ 【8】Align image and text -- align ＜input type=image align="#"＞ # The number can be top: text aligned to the top of the image middle: text aligned to the middle of the image buttom: text aligned to the bottom of the image 3. Selective form ＜form action="URL" method="post"＞＜select＞＜option＞＜ option＞ .......... ........... ＜/select＞＜/form＞ A, ＜select＞'s attributes 【1】Field name -- name ＜select name="data field name"＞ 【2】Set the number of displayed options -- size ＜select size=number＞ 【3】Multiple options -- multiple ＜select multiple＞ B, ＜option＞ attributes 【1】Define the return value of the option -- value ＜option value="return value"＞ 【2】Pre-selected option -- selected ＜option selected＞ 4. Multi-column input text area form ＜form action ="URL" method="post"＞＜textarea＞ ........... ＜/textarea＞＜/form＞ 【1】Variable name of text area -- name ＜textarea name=variable name＞ 【2】Set the width of the text input area -- cols ＜textarea cols=number of characters＞ 【3】Set the height of the text input area -- rows ＜textarea rows=number of columns ＞ 【4】Set the default string in the input area ＜textarea＞ Default text ＜/textarea＞ 【5】Wrap automatically or not --wrap # can be off: when the text entered in the table exceeds the column width, it will not wrap automatically (default value) virtual: the text entered in the table exceeds the column width It will automatically wrap when Link 1. Link to other documents ＜a href="URL"＞Description text or pictures＜/a＞ 2. Link to a certain place in the document (external link) 《1》Starting point ＜a href="File name#name"＞..........＜/a＞ 《2》End point ＜a name="Name"＞ Three. The hyperlink of frame 【1】Open New browser to display link files -- _blank ＜a href="URL" target=_blank＞ 【2】Display link files in the current frame -- _self ＜a href="URL" target=_self＞ 【3 】Display the link file in the split window of the upper layer -- _parent ＜a href="URL" target=_parent＞ 【4】Display the link file in the full window -- _top ＜a href="URL" target=_top＞ 【 5】Display the linked file in a specific window --＜a href="URL" target="Specific window name"＞ FRAME 1. Split window command ＜frameset＞............＜/frameset＞ 【1】Vertical (up and down) division -- rows ＜frameset rows=#＞ The number # can be the number of points: if you want to divide it into three windows of 100, 200, 300, then ＜frameset rows=100,200,300＞; it can also be represented by the * sign, such as ＜frameset rows=*,500,*＞ Percentage: For example, ＜frameset rows=30%,70%＞, the sum of each item is best 100% 【2】Horizontal (left and right) split -- cols ＜frameset cols=points Or percentage＞ 二ⅱSpecify the window content -- ＜frame＞ ＜frameset cols=30%,70%＞＜frame＞＜frame＞＜/frameset＞ 【1】The file name of the specified window -- src ＜frame src =HTML file name＞ 【2】Define the name of the window -- name ＜frame name=Window name＞ 【3】Set the distance between the document and the upper and lower borders -- marginheight ＜frame marginheight=points＞ 【4】 Set the distance between the document and the left and right borders -- marginwidth ＜frame marginwidth=points＞ 【5】Set the scroll of the split window -- scrolling ＜frame scrolling=#＞ Number # can be yes: Fixed scroll appears no: No Scroll appears auto: Automatically determine whether the file size requires a scroll (default value) 【6】Lock the size of the split window -- noresize ＜frame noresize＞ The above is the detailed explanation of HTML tags, please pay attention to more related articles PHP Chinese website (www.php.cn)!