Website Construction and Webpage Design references
HTML Tag details
HTML document structure
<Html> // start of webpage resolution
<Head> // start the web page header definition
<Title> title <title> // define the title displayed in the title bar of the browser
</Head> // The web page head definition ends.
<Body> // The webpage subject definition starts.
Webpage subject content
</Body> // The webpage subject definition ends.
</Html> // web page resolution ends
The following are the specific tag descriptions.
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] set the webpage transition effect. Such as entry and exit
For example: <metahttp-equiv = "page-enter" content = "revealtrans (duration = 2, transition = 2)">
The meanings of each word are as follows:
Equiva (equivalent): equivalent, equivalent;
Page-enter or page-exit: indicates the page Transition operation;
Revealtrans: display; indicates the effect displayed on the webpage;
Duration: continuous. The following number indicates the display time;
Transition: conversion and transition. The following number indicates the transition effect of the webpage. You can enter a number ranging from 1 to 25.
4. preset reference path -- <base> <base href = "URL of the host where the file is 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>: hexadecimal value
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, the default align to left is automatically set when you encounter a
16. Horizontal line (separator line)
[1] separator width
[2] split line width
[3] separation line align direction
[4] separator color
[5] solid separation line
17. Align to the center <center> ...... </center>
18. display according to the original style (predefined format) <pre> ...... </pre>
19. <body> tag attributes
[1] background color -- bgcolor <bodybgcolor = # rrggbb>
[2] background pattern -- background <bodybackground = "graphic file name">
[3] set the background pattern to not scroll -- bgproperties <body bgproperties = fixed>
[4] text color of the file content-text <bodytext = # rrggbb>
[5] hyperlink text color -- link <bodylink = # 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>
20. annotation <! -- ...... --> (Vertices indicate comments)
Symbol
Syntax
<
& Lt
>
& Gt
&
& Amp
"
& Quot
Blank (Space)
& Nbsp
Copyright
& Copy
Registered Trademark
& Reg
Pound
& Pound;
21. Special Character notation (the following are common examples)
Image attributes
1. Insert an image
2. Set the image frame-border
3. Set the image size -- width and height
4. Set the number of empty points in the upper, lower, and lower layers of the image.-vspace and hspace
5. graphic note
6. Pre-upload images
P.S. The image sizes of the two images are best consistent.
7. (Map Link) image map (ImageMap)
<Map name = "Graph 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 = rect: rectangular shape = circle: circular shape = poly: Polygon
[2] define the 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 = rectcoords =, 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 = circlecoords = 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 = polycoords = 232,70, 285,70, 90, 78 href = "/URL">
Table-related attributes
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 = "#"> # No. Can be 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 center and bold
[1] horizontal position -- align <th align = "#">
# Align left: Align center: Align 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>
List related attributes
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 <oltype = #> or <litype = #> # Can Be A: The table can be uppercase letters A, B, C, D... project No. a: The table contains lowercase letters a, B, c, and 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 <ulwarp = 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 <dlcompact> P.S. in this way, the content of <dt> is in the same line as that of <dd>, and only a few spaces are separated without line breaks. However, if the text of <dt> exceeds a certain length, the role of compact disappears!
Form-related attributes
I. Basic Architecture <form action = "URL of CGI program for data processing" or "mailto: URL of the email address "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 or 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 = checkboxchecked> <input type = radiochecked>
[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. hyperlink to the frame
[1] open a new browser to display the linked file -- _ blank <a href = "/URL" target = _ blank>
[2] display the link file to overwrite 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 link file in a specific window -- <a href = "/URL" target = "specific window name"> such as right
_ Parent: load the linked file into the parent framework set or parent window containing the linked framework. If the frame containing the link is not nested, load the link file in the full screen window of the browser.
_ Top: Open the linked document in the current entire browser window, so all frameworks will be deleted.
FRAME attributes
I. Split the window tag <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>
<Noframe> </noframe> frame display is not supported.
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
