### Detailed Analysis and Explanation of HTML Code
#### Structure
```html
Title
.......... File Content ..........
```
1. **File Title**
```html
..........
```
2. **File Update - ``**
- **[1] Automatically refresh after 10 seconds**
```html
```
- **[2] Redirect to another file after 10 seconds**
```html
```
3. **Search Form - ``**
- **Set prompt text before the query field:**
```html
```
4. **Default Base Path - ``**
```html
```
---
### Layout
1. **Heading Text**
```html
.......... (# = 1~6; h1 is the largest, h6 is the smallest)
```
2. **Font Changes**
- **Font Size**
```html
.......... (# = 1~7; larger numbers produce larger fonts)
```
- **Specify Font Type**
```html
..........
```
- **Text Color**
```html
..........
(rr: red code, gg: green code, bb: blue code)
```
3. **Small Font Display**
```html
..........
```
4. **Large Font Display**
```html
..........
```
5. **Bold Text**
```html
..........
```
6. **Italic Text**
```html
..........
```
7. **Typewriter Font**
```html
..........
```
8. **Underline**
```html
..........
```
9. **Strikethrough**
```html
..........
```
10. **Subscript**
```html
..........
```
11. **Superscript**
```html
..........
```
12. **Blinking Effect**
```html
..........
```
13. **Line Break**
```html
```
14. **Paragraph**
```html
```
15. **Text Alignment**
```html
(# can be left: aligns left [default], center: aligns center, right: aligns right)
```
*Note: After setting alignment with ``, all subsequent text will follow this alignment until another `` changes it or a ``/`` tag resets it to default left alignment.*
16. **Separator Line**
- **Thickness**
```html
```
- **Width**
```html
```
- **Alignment**
```html
(# can be left: aligns left [default], center: aligns center, right: aligns right)
```
- **Color**
```html
```
- **Solid Separator Line**
```html
```
17. **Center Alignment**
```html
..........
```
18. **Display in Original Format**
```html
..........
```
19. **Attributes for `` Tag**
- **Background Color**
```html
```
- **Background Image**
```html
```
- **Fixed Background Image**
```html
```
- **Content Text Color**
```html
```
- **Hyperlink Text Color**
```html
```
- **Selected Hyperlink Text Color**
```html
```
- **Already Linked Hyperlink Text Color**
```html
```
20. **Comment**
```html
```
21. **Special Characters Representation**
- Symbol | Syntax
- `` | `>`
- `&` | `&`
- `"` | `"`
- Space | ` `
---
### Images
1. **Insert Image**
```html
```
2. **Set Border -- border**
```html
```
3. **Set Image Size -- width/height**
```html
```
4. **Set Margins Around Image -- vspace/hspace**
```html
```
5. **Image Caption**
```html
```
6. **Preload Image**
```html
*(Note: The sizes of both images should ideally match.)
```
7. **Image Map (Image Map)**
```html
```
- **Define Shape -- shape**
- `shape=rect`: Rectangle
- `shape=circle`: Circle
- `shape=poly`: Polygon
- **Define Region -- coords**
- **Rectangle**: Requires four numbers, the first two are the top-left coordinates, the last two are the bottom-right coordinates.
Example:
```html
```
- **Circle**: Requires three numbers, the first two are the center coordinates, the last one is the radius.
Example:
```html
```
- **Polygon**: Sequentially fill in the coordinates of each corner point.
Example:
```html
```
---
### Tables
1. **Define Table**
```html
..........
```
- **Border Thickness**
```html
```
- **Cell Spacing**
```html
```
- **Cell Padding**
```html
```
- **Table Width**
```html
```
- **Table Height**
```html
```
- **Table Background Color**
```html
```
- **Table Border Color**
```html
```
2. **Show Gridlines**
```html
```
3. **Table Caption**
```html
..........
```
- **Caption Position**
```html
(# can be top: caption above table [default], bottom: caption below table)
```
4. **Define Row**
```html
```
5. **Define Column**
- **Left-Aligned**
```html
```
- **Center-Aligned & Bold**
```html
```
- **Horizontal Alignment**
```html
(# can be left: align left, center: align center, right: align right)
```
- **Vertical Alignment**
```html
(# can be top: align top, middle: align middle, bottom: align bottom)
```
- **Column Width**
```html
```
- **Merge Columns Vertically**
```html
```
- **Merge Columns Horizontally**
```html
```
---
### Lists
1. **Directory List**
```html
Item 1
Item 2
Item 3
*(Note: Each item in a directory list cannot exceed 20 characters [or 10 Chinese characters].)*
2. **Menu List**
```html
Item 1
Item 2
Item 3
```
3. **Ordered List**
```html
Item 1
Item 2
Item 3
```
- **Numbering Style -- type**
```html
or
(# can be A: uppercase letters, a: lowercase letters, I: uppercase Roman numerals, i: lowercase Roman numerals, 1: Arabic numerals [default])
```
- **Start Number -- start**
```html
```
- **Specify Number -- value**
```html
```
4. **Unordered List**
```html
Item 1
Item 2
Item 3
```
- **Bullet Style -- type**
```html
or
(# can be disc: solid dot [default], circle: hollow dot, square: solid square)
```
- **Original List -- plain**
```html
```
- **List Arrangement -- warp**
- **Vertical Arrangement**
```html
```
- **Horizontal Arrangement**
```html
```
5. **Definition List**
```html
Item 1
Item 1 Description
Item 2
Item 2 Description
Item 3
Item 3 Description
```
- **Compact Arrangement**
```html
*(Note: This makes the content of `` and `` appear on the same line separated by a few spaces instead of breaking lines. If the `` text exceeds a certain length, the effect of `compact` disappears!)*
---
### Forms
1. **Basic Framework**
```html
..........
```
2. **Input Form**
```html
..........
```
- **Field Type -- type**
```html
(# can be text: text input, password: password, checkbox: checkbox, radio: radio button, submit: submit button, reset: reset button, image: image button, hidden: hidden field)
```
- **Field Name -- name**
```html
*(Note: If type is submit/reset, name does not need to be set.)*
```
- **Default Value -- value**
```html
```
- **Field Width -- size**
```html
```
- **Maximum Input Length -- maxlength**
```html
```
- **Default Checkbox/Radio Initial Value -- checked**
```html
```
- **Specify Image URL -- src**
```html
```
- **Image Alignment -- align**
```html
(# can be top: text aligns with the top of the image, middle: text aligns with the middle of the image, bottom: text aligns with the bottom of the image)
```
3. **Selection Form**
```html
..........
```
- **Attributes of ``**
- **Field Name -- name**
```html
```
- **Number of Options to Display -- size**
```html
```
- **Multiple Selections -- multiple**
```html
```
- **Attributes of ``**
- **Return Value -- value**
```html
```
- **Preselected Option -- selected**
```html
```
4. **Multi-line Input Text Area Form**
```html
..........
```
- **Variable Name for Text Area -- name**
```html
```
- **Set Text Input Area Width -- cols**
```html
```
- **Set Text Input Area Height -- rows**
```html
```
- **Set Default String in Input Area**
```html
Default Text
```
- **Automatic Wrapping -- wrap**
```html
(# can be off: no automatic wrapping when text exceeds column width [default], virtual: automatic wrapping when text exceeds column width)
```
---
### Links
1. **Link to Other Documents**
```html
Description Text or Image
```
2. **Link to a Specific Point Within a Document (External Link)**
- **Start Point**
```html
..........
```
- **End Point**
```html
```
3. **Frame Hyperlinks**
- **Open in a New Browser Window -- _blank**
```html
```
- **Display in Current Frame -- _self**
```html
```
- **Display in Parent Split Window -- _parent**
```html
```
- **Display in Full Window -- _top**
```html
```
- **Display in Specific Window --**
```html
```
---
### Frames
1. **Split Window Command**
```html
..........
```
- **Vertical (Top-Bottom) Split -- rows**
```html
(# can be pixels: e.g., if split into three windows of 100, 200, 300,
then ; also can use * as a placeholder, e.g., )
Percentage: e.g., , total preferably adds up to 100%
```
- **Horizontal (Left-Right) Split -- cols**
```html
```
2. **Specify Window Content -- ``**
```html
```
- **Specify File Name for Window -- src**
```html
```
- **Define Window Name -- name**
```html
```
- **Set Distance Between Document and Top/Bottom Borders -- marginheight**
```html
```
- **Set Distance Between Document and Left/Right Borders -- marginwidth**
```html
```
- **Set Scrollbars for Split Window -- scrolling**
```html
(# can be yes: fixed scrollbars, no: no scrollbars, auto: automatically determine if scrollbars are needed based on document size [default])
```
- **Lock Split Window Size -- noresize**
```html
```