Home > Developer > Web Develop
HTML Tags Daquan
First, the text
1. Title Text 2. Font Changes <font>..........</font>
"1" Font size <fontsize=#>..........</font> #=1~7; The bigger the number.
"2" specifies font <font face= "typeface name" >..........</font>
"3" Text color <fontcolor= #rrggbb >..........</font>
RR: Table red color code
GG: Table Green color code
bb: Table Blue color code
RRGGBB also available in 6-bit color code numbers
3. Display small font <small>..........</small>
4. Display large font <big>..........</big>
5. Bold characters <b>..........</b>
6. Italic character <i>..........</i>
7. Typewriter Font <tt>..........</tt>
8. Bottom line <u>..........</u>
9. Delete Line <strike>..........</strike>
10. Subscript Word <sub>..........</sub>
11. Superscript Word <sup>..........</sup>
12. Text Blink effect <blink>..........</blink>
13. Line break (also called carriage return) <br>
14. Segmentation <p>
15. Alignment of text <palign= "#" > #号可为 Left: Table aligned (default) Center: Table aligned Right: table to the right p.s.<p align= "#" > The text will be displayed in the alignment Until another <palign= "#" appears > changes its alignment direction, the 16. Divider Line Thickness of "1" divider Width of "2" divider "3" Divider Alignment Direction #号可为 Left: Table-aligned (default) Center: Table Aligned Right: table aligned to the right
Color of the "4" Divider line "5" Solid divider line <HR noshade>
17. Center Alignment <center>..........</center>
18. Display according to the original style <pre>..........</pre>
Properties of the 19.<body> directive
"1" Background color--bgcolor <body bgcolor= #rrggbb >
"2" background pattern--background <body background= "graphic file name" >
"3" Set background pattern does not scroll--bgproperties <bodybgproperties=fixed>
"4" File content text color-text <bodytext= #rrggbb >
"5" Hyperlink text color--Link <bodylink= #rrggbb >
"6" is the selected hyperlink text color--Vlink <bodyvlink= #rrggbb >
"7" Linked hyperlink text color--ALink <bodyalink= #rrggbb >
20. Text Move Command <MARQUEE>..........</MARQUEE>
The movement speed instruction is: scrollamount=# #最小为1, the speed is the slowest, the larger the number moves the faster.
The move direction instruction is: direction=# up, down, left, right.
Instruction Example: <marquee scrollamount=3direction=up>..........</marquee>
Second, the picture
1. Insert Picture
2. Set frame--border
3. Set the graphics size--width, height
4. Set the graphics up and down left and right--vspace, hspace
5. Graphical notes
6. Pre-loaded images
p.s. Two graphs with the best graphics size;
7. Image map (IMAGEMAP) <map name= "graph name" >
<area shape= Shape coords= area coordinates list href= "URL of link Point" >
<area shape= Shape coords= area coordinates list href= "URL of link Point" >
<area shape= Shape coords= area coordinates list href= "URL of link Point" >
<area shape= Shape coords= area coordinates list href= "URL of link point" ></map <
"1" Define shape--shape
Shape=rect: Rectangle shape=circle: Round shape=poly: Polygon
"2" Definition area--coords
A. Rectangle: must use four digits, the first two digits are the upper left corner coordinates, the last two digits is the lower right corner coordinates
Example: <area shape=rectcoords=100,50,200,75 href= "URL" >
B. Circle: Must use three digits, the first two digits are the coordinates of the center, the last digit is the radius length
Example: <area shape=circlecoords=85,155,30 href= "URL" >
C. Arbitrary graphics (polygons): Fill in the shape each inflection point coordinate
Example: <area shape=polycoords=232,70,285,70,300,90,250,90,200,78 href= "URL"
Third, form related
1. Table headings
<caption>..........</caption>
Table title Position--align
<caption align= "#" > #号可为 Top: Table header above table (default)
Bottom: Table headings are placed below the table
2. Define Columns <tr>
3. Define the field "1" <TD>: Left-justified
"2" <TH>: Snap to Ⅱ Bold
"1" horizontal position--align <th align= "#" >
#号可为 left: Align center right: Align Right
"2" vertical position--align <th align= "#" > #号可为
Top: Align up middle: align to Middle bottom: align down
"3" Field width--width <th width= points or percentages >
"4" Column vertical merge--rowspan <th rowspan= to merge the number of fields >
"5" Field horizontal merge--colspan <th colspan= to merge the number of fields >
Iv. main properties of the table
1. Key attributes of the <table> tag
Align defines the alignment of a table with three attribute values Center,left,right
Background defines the background pattern of the table, the property value is the address of the picture
bgcolor defines the background color of the table, the property values are various color codes
Border defines the border width of the table, the property value is a number
BorderColor defines the color of the table border, the property values are various color codes
cellpadding defines the distance between the cell contents and the cell border, and the property value is a number
CellSpacing defines the distance between cells in a table
Height defines how tall the table is, and the value of the property is numeric
Width defines the widths of the table, the value of the property is a number
2. <tr> tags, a table is a row of,<tr> tags that are composed of multiple rows and columns that define a row of the table, whose attribute values define the rows in the table, with the main properties and property values as follows:
Align defines the alignment, the property value and the
Background define background pattern bgcolor define background color
3. <td> mark. The elements of the table are represented by the contents of the <td> mark. The main attribute is the same as the property value and the <table> tag, complementing the code of two merged columns and rows:
colspan defines the number of columns for a merged table, and the property value is a number
RowSpan defines the number of rows in a merged table, the property value is a number
Five, FRAME
1. Split Windows command <frameset>..........</frameset>
"1" vertical (up/down) split--rows
<frameset rows=#> #号可为点数:
If you want to split into 100,200,300 three windows, then <frameset rows=100,200,300>;
can also be represented by *, such as <framesetrows=*,500,*>
Percentage: such as <frameset rows=30%,70%>, the sum of the best is 100%;
"2" horizontal (left/right) split--cols <frameset cols= points or percentages >
2, the designated window Content--<frame>
<frameset cols=30%,70%> <frame> <frame> </frameset>
"1" Specifies the file name of the window--src <frame src=html filename >
"2" defines the name of the window--name
<frame name= window name >
The distance between the "3" setting file and the top and bottom border--marginheight
<frame marginheight= points >
The distance between the "4" setting file and the left and right border--marginwidth
<frame marginwidth= points >
"5" Set split window reel--scrolling
<frame scrolling=#> #号可为 Yes: fixed occurrence reel
No: Scroll not present
Auto: Automatically determine the file size requires no reel (default)
"6" Lock the size of the split window--noresize <framenoresize>
IV: Page layout
Because the browser does not recognize the formatting in the text, the text is continuously displayed on the screen, what format needs to be displayed,
must be formatted with the control, such as "BR" is the line break control. Also used is the paragraph character "P", with "P"
not only the future text to the downstream, but also insert a blank line. If used with two "BR" "BR" and replaced by a
"P" can do the same function. The
also has a forced non-newline directive <nobr> to a </nobe> middle character is displayed on a single line.
The browser has a blank space in the text, regardless of how much. It is necessary to change the "half-width"
in the input bar to "full-width", that is, the "half-moon" shape to the "Full Moon" shape and then enter the space, the browser is recognized,
because this "space" is actually completely different from the western space, which is in the Han font in a non-display with
Two ASC code of one character, so the browser can completely retain this space. In the HTML code also has a special
space code, that is, the space, but it is troublesome, ordinary people are not used. Only in the Western input
there is no "full-width" space, only use, each to represent a half-width space.
Sometimes you need to slice the content in the page, "HR" is a line-drawing instruction, and in this directive you can set
line size and color. The horizontal dimension of the line we are accustomed to call "Length", here we call "wide", is the screen for the
, our screen is called "wide", vertical is called high, so also the horizontal size of the line is called "wide." The instruction format
is as follows:
"HR size=xxpx width=xxpx color=xxxxxx>"
where "size=" Portrait size, "width=" horizontal dimension, "color=" line color. The "px" table
Shows "points", that is, how many "points" to define the dimensions. Or someone asked how big this one "point" is! This
depends on your display, your current display mode is "600x800", horizontal view your screen is 800
points, each point size you calculate it. If you do not know, I will draw you a line to see: This line is the longitudinal size
4 points, the horizontal dimension 400 points, the color is red, the code is: "HR size=4 width=400color=ff0000".
--------------------------------------------------------------------------------
There are spaces between the parameters, note that this is a "half-width" space. Note later that all characters when writing code
Must be entered in the "half-width" state, such as the misuse of the "full-width" character, the system is not recognized. In addition, the beginner Also
To remind you that some servers are sensitive to large and lowercase characters, i.e. uppercase and lowercase of the same character,
The system is considered to be two different characters, which should be noted when writing a webpage.
In the page two lines of text also need to set the spacing, the use of the command is: "Style=line-height:xx"
where "XX" can be the number of points per line height on the screen, or it can be the proportion of text. To make each row high
Degree is 1.5 times times the height of the text, set the "style=line-height:150%", so that line and between the lines have half a word
Space. It is also possible to set the number of points, "style=line-height:20px", which means that the size of each row occupies a height of 20 points.
Set parameters can be placed in the <body>, which is valid for the entire page, such as "body style=line-height:20px", can also be placed in the paragraph character, only the section set, such as "pstyle=line-height:20px".
In order to format a certain part of the content, to use a defined area of the directive, "div" defines the area,
End With "/div".
In the "div" can put a lot of settings parameters, such as the above line height can also be placed in the "div":
"Div style=line-height:20px".
The "div" can also be arranged on the left, on the right, the center, the instruction format is:
"Div align=left, Divalign=right, Divalign=center"
Note: The contents of the quotation marks, the use of both ends to be replaced by <>, here in order to be able to display the "" instead.
Lecture Five: Pictures, audio, and scrolling subtitles
One: the use of pictures
1. Insert a picture in the page
Insert a picture in the page < img> tag, control the picture by adjusting the property value of the tag
The exact display in the page. The format is as follows:
The properties of a picture are mainly height (height), width, alignment (align), and so on, property values
Mainly the number, the attribute value of the alignment is: Center,left. Right
2. Use a picture as a hyperlink
Images can be used as hyperlinks for hot content. This is used in conjunction with the a tag in the following format:
<a herf= "filename of HYPERLINK" ></a>
Second: the use of audio
It mms.http.rtsp. Just look at the suffix end file is asf.wma.wmv.wmv.rm. All can be applied to the following
Code: Embed src= "song address" width= "350,80%" height= "60,80%" >
Third: The use of mobile subtitles
Mobile subtitles use <MARQUEE> tag, its basic format: <marquee Property = property value > Scrolling content </marquee>
Its main properties and their property values are as follows:
Alignment (align) whose property value is Center,left,right
The background color (bgcolor) property value of the move character is the color code.
The number of loop property values for moving characters is numeric.
Move mode (behavior) property value is: Scroll: Text One-way, side: Move to Boundary stop, alternate: Move backward after border
Text height and width, in pixels (width height) attribute values are numbers.
The character left left white length (hspace) attribute value is a number.
The character up/down white length (vspace) property value is a number.
The character's move speed (ScrollAmount) property value is a number.
The character moves each step of the delay (Scrolldelay) property value to a number.
Four: the use of video
1.[Video] Syntax can also be like this (paste rm,wmv format) code: <embedsrc= "Song address" width=400 height=300>
2. This code is required to click to play, for the Audition (RM/MP3/RA/WMA) code:
<embed src= Song name Volume= "" "Width=39 height=18 hidden=" FALSE "autostart=" Fault "type=" Audio/x-pn-realaudio-plugin " controls= "PlayButton" ></embed>
3. This code is played automatically and is also used for audition (type ibid) code:
<embed src= "song address with http" width= "" height= "autostart=" true "hidden=" false "loop=" Infinite "align=" center " Volume= "type=" Audio/x-pn-realaudio-plugin "controls=" PlayButton "autostart=" true ">
Paste inside the background formula:
<*center><*table cellpadding=0 cellspacing=0 border=0 width=100% align=centertable background= "Inside background image Address" Width=720><*tr><*td><*center>
。。。。。。
(The content to be pasted--pictures or text)
Stickers: (Two methods)
The correct format for the map is:
(1) <*center><*img src= "(Image address)" >
(2) [*img] (picture [*/img]
。。。。。。
<*td><*/table> (end)
Move the picture to the left
<*marquee directio=left><8img src= "Picture address" ><*/marquee>
Text moves to the left
<*marquee Directio=left><*font size=? Color=?> text Section <*/font><*/marquee>
Paste Flash
<*embed src= "★" width= "660" height= ">"
Song
<*embed src= "★" Hidden=trueautostart=true loop=true>
External background basemap for posts
<*body background= "Address" >
Outer background basemap does not move
<*body background= "Address" bgproperties= "fixed" >
Center picture
<*center><*img src= "Picture Address" >
Paste Player
<*embedsrc= "Http://mp3.baidu.com/r?url=http://fchen.sosoo.net/music/pop/469.mp3" width=480 height=35 controls= ControlPanel loop=true autostart=true volume=100type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types= Mime.types>
A butterfly dancing alternately
<*font color=green><*marqueebehavior= "Alternate" Scrollamount=8direction=right><*b><*font color= #7700bb size=6><*fontcolor=red><*marquee behavior=alternate direction=up height=150width=50> <*img Src=http://www.fyj.cn/dhome/dimg/4013.gif><*/marquee><*fontcolor=orange><*marquee Behavior=alternate Direction=up height=200width=50><*imgsrc=http://www.fyj.cn/dhome/dimg/4013.gif><* /marquee><*fontcolor=fuchsia><*marquee behavior=alternate direction=up height=150width=50><* Imgsrc=http://www.fyj.cn/dhome/dimg/4013.gif><*/marquee><*fontcolor=olive><*marquee behavior= Alternate Direction=up Height=200width=50><*imgsrc=http://www.fyj.cn/dhome/dimg/4013.gif><*/marquee ><*font color=green><*marqueebehavior=alternate direction=up height=150 width=50><*imgsrc=http:/ /www.fyj.cn/dhome/dimg/4013.gif><*/marquee><*fontcolor=red><*marquee behavior=alternate DireCtion=up height=200width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif>
***************************************************************
Background with a frame
<*center><*table border= "5" background=http://szg01.myrice.com/bg5.gif width= "height=" >
<*td><*/table>
Text roll up note the text branch and open line: <*marqueedirection=up scrollamount=3>
<*center><*font color= "Lime" size= "5" face= "Official script" > Friends of Fate Good <*/font>
<*/marquee>
Friends of the fate of you good
Text Roll Down
<*marquee Direction=down scrollamount=3>
<*center><*font color= "Lime" size= "5" face= "Official script" > Wish friends in the fate of fun <*/font>
<*/marquee>
I wish my friends have fun in the fate
Setting the speed of text movement:
Note the red attribute in the following statement (text moves to the left, 250 is better)
Hello everyone!
IE default value is 60 (in milliseconds)
The larger the value, the slower the move (less than 60,ie still defaults to 60).
Value 60 value 100 value 150 value 200 value 250
Common fonts:
Arial black body Italic _gb2312 imitation _gb2312
The new song body and the young Circle script founder Shu Body
Chinese new Wei Chinese xingkai Chinese fine black Chinese colorful cloud
Common Font Color:
Light green----AQUA----black blue----Blue fuchsia----fuchsia,
Gray----gray green----green----lime tea----maroon,
Deep Blue----navy olive----olive purple----pourple Red---
Silver----Silvery green----teal----white YELLOW----yellow
Purple--purple
Text Example: (centered)
Welcome, your friend.
fonts (font) tags (tags)
Header Font (header)
<*h#> ... <*/h#> #=1, 2, 3, 4, 5, 6
<*h1> The weather is really good today! <*/h1> The weather is really good today!
<*h2> The weather is really good today! <*/h2> The weather is really good today!
<*h3> The weather is really good today! <*/h3> The weather is really good today!
<*h4> The weather is really good today! <*/h4> The weather is really good today!
<*h5> The weather is really good today! <*/h5> The weather is really good today!
<*h6> The weather is really good today! <*/h6> The weather is really good today!
? <*hn>---<*/hn> These tags display bold characters.
? <*hn>---<*/hn> These tags automatically insert a blank line without having to use <8p>
Mark and then add a blank line.
Therefore, you cannot use a different size font in a row.
Font size
<*font size=#> ... <*/font> #=1, 2, 3, 4, 5, 6, 7 or +#,
-#
<*basefont size=#> #=1, 2, 3, 4, 5, 6, 7
<*font size=7> The weather is really good today! <*/font> The weather is really good today!
<*font size=6> The weather is really good today! <*/font> The weather is really good today!
<*font size=5> The weather is really good today! <*/font> The weather is really good today!
<*font size=4> The weather is really good today! <*/font> The weather is really good today!
<*font size=3> The weather is really good today! <*/font> The weather is really good today!
<*font size=2> The weather is really good today! <*/font> The weather is really good today!
<*font size=1> The weather is really good today! <*/font> The weather is really good today!
Specifies a combination of "font size" and "specified font" tags for use with
<*i><*font size=5>
<*b> Today <*/b> Weather <*font size=6> really good! <
*/font>
<*/font><*/i>
It's a nice day today!
Font Color
Specify color <*font color=#> ...<*/font>
#=rrggbb 16 binary, or the following predefined colors:
Black, Olive,
Teal, Red, Blue,
Maroon, Navy,
Gray, Lime,
Fuchsia, White,
Green, Purple,
Silver, Yellow,
Aqua
**********************
Map:
The correct format for the map is: <*center><*imgsrc= "Http://yftk.voline.net/images/LOGOZZ.GIF" >
Move the picture back and forth: (Note specify width and height)
Background image syntax: <*bodybackground= "Http://www.binghe.com/s/yinyue/mid/images/star_back.gif" ><*/body>
Text Center:
Add <*center> in front of text
This is the transparency effect, everyone try to paste the * number to be removed. <*img src= "http://forums.zol.com.cn/new/book_new_img/16739.img" width=300 height=250 style =filter:alpha (opacity=100,style=2);>
Common HTML Tags Daquan
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
