HTML instructions
Starting with HTML ..... I want to renew it myself. haha. you can find a good one on the Internet. forget it. let's change it. although it is not difficult to get started with HTML, you still need to rely on good examples and read the source function of the browser. The technology will soon be refined.
Structure
<HTML>
<Head>
<Title> title <title>
</Head>
<Body> ...... the content of the file ..........
</Body>
</Html>
----------------------------------------------
Title
1. File title
<Title> ...... </title>
2. file update -- <meta>
[1] automatically updated once in 10 seconds
<Meta http-equiv = "refresh" content = 10>
[2] automatically link to another file in 10 seconds
<Meta http-equiv = "refresh" content = "10; url = URL of the file to be linked">
3. Query Form -- <isindex>
To set the prompt text before the query field:
<Isindex prompt = "prompt text">
4. preset reference path -- <base>
<Base href = "URL of the host where files are stored">
Layout
1. Title text
2. font changes <font> ...... </font>
[1] font size <font size = #> ...... </font> # = 1 ~ 7. The larger the number, the larger the number.
[2] specify the font <font face = "font name"> ...... </font>
[3] text color <font color = # rrggbb> .......... </font> RR: Table red color code GG: Table green color code BB: Table blue color code
3. Show the small font <small> ...... </small>
4. display the large font <big> ...... </big>
5. Bold Chinese characters <B> ...... </B>
6. Italics <I>... </I>
7. typewriter font <tt> ...... </tt>
8. Bottom line <u> ...... </u>
9. strikethrough <strike> ...... </strike>
10. subscripts <sub> ...... </sub>
11. superscript <sup> ...... </sup>
12. Text flashing effect <blink> ...... </blink>
13. line feed <br>
14. Segmentation <p>
15. the text align direction <p align = "#"> # can be left: The table is left aligned (default value) center: The table is center aligned right: The table is right aligned p.s. <p align = "#"> the subsequent text is displayed in the alignment mode until another <p align = "#"> change its alignment direction appears, or when the <HR> ⅱ
16. separation line <HR>
[1] separator width <HR size = points>
[2] split line width <HR size = points or percentage>
[3] separation line align direction <HR Align = "#"> # Left: Table to left (default value) center: Table to center alignment right: Table to right alignment
[4] separator color <HR color = # rrggbb>
[5] solid separation line <HR noshade>
17. Align to the center <center> ...... </center>
18. Display <PRE> ...... </PRE> according to the original style
19. <body> command attributes
[1] background color -- bgcolor <body bgcolor = # rrggbb>
[2] background pattern -- background <body background = "graphic file name">
[3] set the background pattern to not scroll -- bgproperties <body bgproperties = Fixed>
[4] text color of the file content-text <body text = # rrggbb>
[5] hyperlink text color -- Link <body link = # rrggbb>
[6] The text color of the hyperlink being selected -- vlink <body vlink = # rrggbb>
[7] the color of the hyperlink text that has been linked-alink <body alink = # rrggbb>
Image
1. Insert an image
2. Set the image frame-border
3. Set the image size -- width ⅱ height
4. Set the left and right sides of the image to be left blank -- vspace ⅱ hspace
5. graphic note
6. Pre-upload images
p.s. The image sizes of the two images are best consistent.
7. Image Map <Map Name = "image name">
<Area shape = shape coords = region coordinate list href = "link URL">
<Area shape = shape coords = region coordinate list href = "link URL">
<Area shape = shape coords = region coordinate list href = "link URL">
<Area shape = shape coords = region coordinate list href = "link URL"> </map>
[1] define shape-shape
Shape = rect: rectangular shape = circle: circular shape = poly: Polygon
[2] define a region-coords
A. rectangle: four digits are required. The first two digits are the coordinates in the upper left corner, and the last two digits are the coordinates in the lower right corner.
Example: <area shape = rect coords =, 50, href = "url">
B. Circle: three digits must be used. The first two digits are the coordinates of the center, and the last digit is the radius length.
Example: <area shape = circle coords = 85,155, 30 href = "url">
C. Any image (polygon): Fill in the coordinates of each turning point of the image in order
Example: <area shape = poly coords = 232,70, 285,70, 90, 78 href = "url"
Table
1. Define the table <Table> ...... </table>
[1] set the Border thickness-border
<Table border = points>
[2] set the grid width -- cellspacing
<Table cellspacing = points>
[3] set the distance between data and grid-cellpadding
<Table cellpadding = points>
[4] adjust the table width -- width
<Table width = points or percentage>
[5] adjust the table height-height
<Table Height = points or percentage>
[6] set the background color of the table-bgcolor
<Table bgcolor = # rrggbb>
[7] set the border color of the table-bordercolor
<Table bordercolor = # rrggbb>
2. display grid line <Table Border>
3. Table title
<Caption> ...... </caption>
Table title location-align
<Caption align = "#"> # Top: The table title is placed above the table (default value)
Bottom: The table title is placed below the table
4. Define a column <tr>
5. Define a column
1 <TD>: Align to the left
2 <TH>: align with the center in bold II
[1] horizontal position -- align <TH align = "#">
# Left: Align to left
Center: Align to center right: Align to right
[2] vertical position -- align <TH align = "#"> # can be
Top: Align up middle: Align to center
Bottom: Bottom alignment
[3] column width -- width
<TH width = points or percentage>
[4] column vertical merge-rowspan
<TH rowspan = number of columns to be merged>
[5] column horizontal merge-colspan
<TH colspan = number of columns to be merged>
HTML instructions 2
List
I. Directory List
<Dir> <li> Project 1 <li> Project 2 <li> Project 3 </dir> p.s. directory list each item cannot exceed 20 characters (that is, 10 Chinese characters)
Ii. Option List <menu> <li> Project 1 <li> Project 2 <li> Project 3 </menu>
Iii. List with serial numbers <ol> <li> Project 1 <li> Project 2 <li> Project 3 </OL>
[1] serial number form -- type <ol type = #> or <li type = #> # Can Be A: the table can be uppercase letters a ⅱ B ⅱ C ⅱ d... project No. A: The table is a lowercase English letter, a ⅱ B ⅱ C ⅱ d... as project No. I: The table uses uppercase and lowercase roman numerals as the project No. I: The table uses lowercase roman numerals as the project No. 1: The table uses Arabic numerals as the project No. (default value)
[2] Start number -- start <ol start = the ordinal number to start counting>
[3] specify number -- value <li value = ordinal number to be specified>
Iv. List without serial numbers <ul> <li> Project 1 <li> Project 2 <li> Project 3 </ul>
[1] project symbol form -- type <ul type = #> or <li type = #> # Can Be disc: solid dot (default value) circle: hollow dot square: solid square
[2] original list -- plain <ul plain>
[3] configuration arrangement method-warp 1 List vertical arrangement <ul warp = vert> 2 list horizontal arrangement <ul warp = horiz>
5. definition list <DL> <DT> Project 1 <DD> Project 1 Description <DT> Project 2 <DD> Project 2 Description <DT> Project 3 <DD> Project 3 description </dl>
Close arrangement -- compact <DL compact> p.s. in this way, the content of <DT> is in the same line with the content of <DD>, separated by only a few spaces without line breaks. However, if the text of <DT> exceeds a fixed length, the role of compact disappears!
Form
I. Basic Architecture <form action = "CGI program URL for data processing" or "mailt Email Address URL" method = "Get or post"> ...... ........................ </form>
2. Enter the file form <form action = "url" method = "Post"> <input> ................ .... </form>
[1] column type -- type <input type = #> # Can be text: text input password: Password checkbox: multiple selection buttons radio: single button submit: accept button Reset: reset button image: Graphical button hidden: Hide Column
[2] column name -- name <input name = ""> p.s. If the type is submit ⅱ reset, the name does not need to be set.
[3] File preset value -- value <input value = "preset string">
[4] set the column width -- size <input size = number of characters>
[5] Limit the maximum length of input strings -- maxlength <input maxlength = number of characters>
[6] initial values of the preset checkbox or radio -- checked <input type = checkbox checked> <input type = radio checked>
[7] specify the image URL -- SRC <input type = image src = "image name">
[8] image-text align <input type = image align = "#"> # Top: Text alignment; top: middle of text alignment; buttom: bottom of text alignment Image
Iii. Select form <form action = "url" method = "Post"> <SELECT> <option> .............. ...... </SELECT> </form>
A. Attributes of <SELECT>
[1] column name -- name <select name = "column 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 options -- selected <option selected>
4. Enter the text area form in multiple columns <form action = "url" method = "Post"> <textarea> .................... </textarea> </form>
[1] variable name in the 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] preset strings in the input area <textarea> preset text </textarea>
[5] automatic line feed or not -- wrap <textarea wrap = #> # No. can be off: when the text entered in the table exceeds the column width, it will not automatically wrap (default value) virtual: the text entered in the table is automatically wrapped when the column width is exceeded.
Link
1. link to other files <a href = "url"> description text or image </a>
2. Link to a certain part of the file (external link)
Starting Point of 1
<A href = "file name # name"> ...... </a>
Destination of Article 2 <a name = "name">
3. Frame hyperlinks
[1] open a new browser to display the linked file -- _ blank <a href = "url" target = _ blank>
[2] display the linked file in the current frame -- _ Self <a href = "url" target = _ Self>
[3] The split window at the preceding layer displays the linked file -- _ parent <a href = "url" target = _ parent>
[4] display the linked file in a 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 the window command <frameset> ...... </frameset>
[1] vertical (up and down) segmentation-rows
<Frameset rows = #># number can be used as the number of points. to divide the number into three windows: 100,200,300
<Frameset rows = 100,200,300>; it can also be represented by *, such as <frameset rows = *, 500, *>
Percentage: for example, <frameset rows = 30%, 70%>, the sum of each item is preferably 100%.
[2] horizontal (left and right) segmentation-cols <frameset Cols = points or percentage>
Ii. Specify the window content -- <frame>
<Frameset Cols = 30%, 70%> <frame> </frameset>
[1] specify the file name of the 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 file and the upper and lower borders -- marginheight
<Frame marginheight = points>
[4] set the distance between the file and the left and right borders -- marginwidth
<Frame marginwidth = points>
[5] scrolling
<Frame scrolling =#># yes: Fixed Scroll
No: No scroll. Auto: automatically determines the file size. Scroll is not required (default value)
[6] Lock the size of the split window-noresize <frame noresize>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
