From today on, I will post several articles on web development skills. I hope to help you! This article mainly introduces the use of HTML and CSS. later articles will contain JavaScript, JSP, and other articles related to web development.
Html
Introduce some common code for your reference:
I. Color Code
If you want to use a certain color, you can obtain its color value. For example, if you want to change the color of some text, you can use the following code: <font color = # ffc060 size = 2> change # the color of the Code after the symbol </font>
Ii. Bold and skewed code
◆ The code for bold text is: <B> Hello </B> ◆ the code for text skew is: <I> hello! </I> ◆ Bottom Line: <u> </u>
3. Text Link code
If you want to click a text field to connect to another webpage, This is a hyperlink and the code is as follows:
<A href = "website address";> shared space </A> if you click this text and open a window again, the code is: <a href = "website address"; target = "_ blank"> shared space </a>
4. Code for placing images on the website
The Code is as follows:
Adjust the size of the Image Based on the number.
V. Image link code
The link code for opening a website is as follows:
<A href = "http://www.163.com/";> </a>
You can open a link to a website and open a new window. The Code is as follows:
<A href = "http://www.163.com/"; target = "_ blank"> </a> the preceding numbers can be used to adjust the image size.
6. line feed code
If you want to wrap a line, you cannot directly use the Enter key. You need to enter the line feed position. <br>
In this way, it will be divided into two lines to show that the entire website does not look like a large film, but a clear section.
7. The text movement code is
<Marquee> write text here </marquee>
8. Mobile Image Code
<Marquee> <marquee>
Replace the image address in it with yours. If you want to put another image, insert it in the middle of the format:
Set the image address.
9. Background Music code
If you want to put a nice background music on your website, the code is: <bgsound src = "http://xxxxx.com/xxx.mid"; loop = 10>
<Bgsound src = "http://www.midifan.com/midi/music.ASP? Id = 3073 "; loop = 30> you can replace the background music address.
The front is the music address. Generally, the number after the end is in the form of mid or mp3 is the number of playback times.
Http://www.midifan.com/midi/
This website has good background music.
10: the code for inserting a Flash animation on the website is
<Embed width = 200 Height = 200
Src = "http://flash.shangdu.com/view/2/fff.swf";> the animation address in your. animation address must end with SWF. Note This.
11. Welcome word code displayed when opening the website
<Body onload = alert ("Hello, welcome to visit this website! ")>
12: When the website is closed
<Body onUnload = "window. Alert ('Thank you for coming, we invite you to join. Please remember this site Domain Name: http://www.yz126.com/Webmaster mailbox: *** @ yahoo.com.cn welcome to consult')">
13: Make an advertisement in the pop-up window when you open the website.
<Script language = "JavaScript">
VaR timerid = 1;
Window. Open ('HTTP: // 163.com '/;, '', 'width = 600, Height = 300, Left = 100, Top = 50 ');
</SCRIPT>
Inside the http://163.com/This is a Web page you prepared in advance, the following number is to adjust the size and position of your own experiment several times.
14: the code for changing the mouse font to Red is as follows: between <body> </body>
<Style type = text/CSS> TD {
Font-size: 12px
}
Body {
Font-size: 12px
}
Input {
Font-size: 12px
}
A: link {
Color: #000000; text-Decoration: None
}
A: visited {
Color: #000000; text-Decoration: None
}
A: active {
Color: Blue; text-Decoration: None
}
A: hover {
Color: red; text-Decoration: underline
}. So {
Border-Right: 1px Ridge; border-top: # ffffff 1px Ridge; font-size: 12px; border-left: # ffffff 1px Ridge; border-bottom: 1px Ridge; background-color: # cccccc
}
</Style>
15th: prohibit others from copying your webpage code:
<Body bgcolor = "# ffffff" oncontextmenu = "Return false" onselectstart = "Return false">
16th: code for placing other webpages into your own webpages:
<IFRAME name = smw.align = center src = ".. /.. /replace it with the URL "frameborder = 0 width = 760 scrolling = No Height = 300> </iframe>
Multi-Window and Application
| 1. What is multi-window | ||||||||||||||||||||||||||||||||
| We use an example to describe the concept of multi-window. The home page of this article is a multi-window webpage with three windows. The window above has two windows and the window below has a scroll bar in the lower left. We can see from the screen that there is a certain relationship between the three windows. The window at the top of the screen is a big classification of office phones. Office phones are divided into six categories, each of which is represented by a rectangle icon. When you click a class in the window above, the content in the lower-left window changes, and the lower-left window lists the department of this type of phone. When you click a department in the lower-left corner, the phone number of the Department appears in the lower-right window. Compared with a single window screen, the amount of information in multiple windows is increased, which is easy to operate and intuitive. | ||||||||||||||||||||||||||||||||
| Ii. Split the window | ||||||||||||||||||||||||||||||||
| How does one split multiple windows on the screen? The following describes how to use HTML to Write multi-window formats. In HTML, <frameset> is used as the tag to split the window. <Frameset> is a bidirectional flag with a start and end mark. | ||||||||||||||||||||||||||||||||
| <Frameset> A <frame> symbol is used in the tag to specify the content of each window. The HTML document containing <frameset> cannot contain the <body> tag. If the <body> tag is used in the <frameset> definition, the browser only interprets the content contained in <body>, while ignoring <frameset>. | ||||||||||||||||||||||||||||||||
| Use <frameset> ...... </Frameset> replace <body> ...... </Body> after marking, you can arrange multiple windows on the screen. | ||||||||||||||||||||||||||||||||
| 1: Split the window horizontally | ||||||||||||||||||||||||||||||||
| The Rows attribute of <frameset> indicates the horizontal split of the window. The Rows equals signs are followed by a string of numbers separated by commas. Several numbers are divided into several windows, there are obvious separation lines between windows. The numbers following rows can be used in combination with pixel values, percentages, or residual values. The following uses the percentage table to explain the horizontal split of the window. | ||||||||||||||||||||||||||||||||
| The percentage after the rows equal sign is the most intuitive. Each percentage number indicates the percentage of the window in the total window. For example, the percentages after rows are 20%, 40%, and 40%. Generally, the values are between 1% and 100%. If the sum of values of several windows exceeds, each window is scaled down proportionally. If the number is less than, each window is scaled up proportionally. | ||||||||||||||||||||||||||||||||
| Example 29 the code is as follows: | ||||||||||||||||||||||||||||||||
| <HTML> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <Title> example 29 </title> </Head> <Frameset rows = "20%, 40%, 40%"> <Frame src = "file1.htm"> |
||||||||||||||||||||||||||||||||
| The display result is to divide the screen horizontally into three windows with a ratio. Note the dark green text in this Code. | ||||||||||||||||||||||||||||||||
| 2: Vertical Split horizontal window | ||||||||||||||||||||||||||||||||
| The Vertical Split Window is implemented by using the Cols attribute in the <frameset> tag. The use of Cols is the same as that of rows. For example, the screen is vertically divided by percentage based on the horizontal split window method. | ||||||||||||||||||||||||||||||||
| For example, 30 Vertical Split Window, the Code is as follows: | ||||||||||||||||||||||||||||||||
| <HTML> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <Title> example 30 </title> </Head> <Frameset Cols = "20%, 40%, 40%"> <Frame src = "file4.htm"> <frame src = "file5.htm"> <frame src = "file6.htm"> </frameset> <noframes> </noframes> |
||||||||||||||||||||||||||||||||
| (Note the dark green font code) <fram> In the code is explained below. | ||||||||||||||||||||||||||||||||
| 3: Split the window vertically and horizontally | ||||||||||||||||||||||||||||||||
| <Frameset> Nesting is required if vertical and horizontal separation is performed on the same screen. The format is as follows: | ||||||||||||||||||||||||||||||||
| <Frameset Cols =...> | ||||||||||||||||||||||||||||||||
| <Frameset rows =...> | ||||||||||||||||||||||||||||||||
| </Frameset> | ||||||||||||||||||||||||||||||||
| <Frameset rows =...> | ||||||||||||||||||||||||||||||||
| .......... | ||||||||||||||||||||||||||||||||
| </Frameset> | ||||||||||||||||||||||||||||||||
| .... | ||||||||||||||||||||||||||||||||
| </Frameset> | ||||||||||||||||||||||||||||||||
| For example, you can set a window with the rows and Cols attributes to vertically divide the screen into the left and right sides. The left is divided into the upper and lower windows, and the right is divided into the upper and lower windows. | ||||||||||||||||||||||||||||||||
| Example 31 split the window horizontally and vertically. | ||||||||||||||||||||||||||||||||
| <HTML> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <Title> example 31 </title> </Head> <Frameset Cols = 50%, 50% "> |
||||||||||||||||||||||||||||||||
| You must carefully understand the meaning of the dark green font. <Fram> is explained below. | ||||||||||||||||||||||||||||||||
| In this example, 31 divides the screen vertically into two parts, with each part accounting for 50%. The left half is divided into two parts by the <frame> statement, with each part accounting for 50%; the right half is divided into three parts by the <frame> statement, each of which accounts for 33%. Therefore, the execution result of this statement is that there are five windows on the screen, two on the left and three on the right. | ||||||||||||||||||||||||||||||||
| 3. Window Modification | ||||||||||||||||||||||||||||||||
| After dividing the window with frameset, you need to add content in the window and modify the window. Here we introduce a new tag <frame> to complete these two functions, this section describes how to use <frame> to modify a window. | ||||||||||||||||||||||||||||||||
| <Frame> is a unidirectional tag. To confuse and write it between the start and end tags of <frameset>, it describes each window style with six attributes. These six attributes are: SRC, name, marginwidth, marginheight, scrolling, and noresize. | ||||||||||||||||||||||||||||||||
| The format of the application <fram> is: | ||||||||||||||||||||||||||||||||
| <Frameset ROLS……> | ||||||||||||||||||||||||||||||||
| <Frame...> | ||||||||||||||||||||||||||||||||
| 1: The following describes the <frame> six attributes. | ||||||||||||||||||||||||||||||||
| ①: SRC Properties | ||||||||||||||||||||||||||||||||
| The src attribute is used to link an HTML file in the following format: | ||||||||||||||||||||||||||||||||
| Src = "url" | ||||||||||||||||||||||||||||||||
| If a <frame> file does not have the src attribute, the window is blank. | ||||||||||||||||||||||||||||||||
| ②; Name attribute | ||||||||||||||||||||||||||||||||
| The name attribute indicates the name of the window. This attribute is optional. | ||||||||||||||||||||||||||||||||
| ③: Marginwidth attribute | ||||||||||||||||||||||||||||||||
| The marginwidth attribute is used to control the distance between the content displayed in the window and the left and right sides of the window. This attribute is a pixel value. The default value is 1. If the value is set to less than 1, this attribute is optional because the content distance between each window is too close and the display effect is poor. The format is as follows: | ||||||||||||||||||||||||||||||||
| Marginwidth = N | ||||||||||||||||||||||||||||||||
| ④: Marginheight attribute | ||||||||||||||||||||||||||||||||
| The marginheight attribute is used to control the distance between the displayed content and the upper and lower edges of a window. It is also optional if it is the same as marginwidth. The format is as follows: | ||||||||||||||||||||||||||||||||
| Marginheight = N | ||||||||||||||||||||||||||||||||
| ⑤: Scrolling attributes | ||||||||||||||||||||||||||||||||
| Scrolling attribute, used to describe whether the window has a scroll bar. It can have yes/no/auto values. Yes indicates that a scroll bar exists in any situation; no indicates that no scroll bar exists in any situation; Auto indicates whether a scroll bar exists based on the actual situation. That is to say, the first two values indicate that the scroll bar has nothing to do with the content of the window, while the third value indicates that the scroll bar is available only when the content is full of windows. This attribute is optional. The default value is auto. The format is as follows: | ||||||||||||||||||||||||||||||||
| Scrolling = yes or no or auto | ||||||||||||||||||||||||||||||||
| ⑥: Noresize attribute | ||||||||||||||||||||||||||||||||
| The noresize attribute is a tag with no value. It indicates whether the user can adjust the window size with the mouse. If the noresize attribute is set, the window cannot be adjusted. By default, you can adjust the window size. | ||||||||||||||||||||||||||||||||
| 2: Use of the <noframes> flag | ||||||||||||||||||||||||||||||||
| The <noframes> tag is a bidirectional tag that contains content between <noframes> tags. It is intended for users who cannot use multiple windows but who can use multiple windows, you cannot see content between <noframes>. | ||||||||||||||||||||||||||||||||
| For example, the <noframes> statement prompts the reader that if the reader uses a browser with a lower version, the content marked by the statement is displayed. The format is as follows: | ||||||||||||||||||||||||||||||||
| <Noframes> | ||||||||||||||||||||||||||||||||
| If you see this information, your browser cannot read the content of the frame window. Please change the browser version. | ||||||||||||||||||||||||||||||||
| </Noframes> | ||||||||||||||||||||||||||||||||
| 4. Put the file content in the corresponding window | ||||||||||||||||||||||||||||||||
| After multiple windows are created, the corresponding content should be placed in each window. As described in the previous example in this chapter, each window on the screen corresponds to a frame statement. The file is linked with the src attribute in the <frame> flag, and the file content is displayed in the <frame> window. The content of each window can be independent or associated. For this page, the right side is a list of directories. When you click a directory, the content of the Directory appears in the right window. | ||||||||||||||||||||||||||||||||
| For example 32, the screen is vertically divided into two windows. The content of one file is in the left window, and the content of the other file is in the right window. The content of the two windows is independent of each other. The Code is as follows: | ||||||||||||||||||||||||||||||||
| <HTML> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <Title> example 32 </title> </Head> <Frameset Cols = "50%, 50%"> <Frame src = "UntitledFrame-1.htm"> <Frame src = "UntitledFrame-2.htm"> </Frameset> <noframes> </noframes> </Html> |
||||||||||||||||||||||||||||||||
| If the content between windows is associated, move the mouse over a window, and the content of another window changes accordingly, you need to establish a link between windows. How to implement this link? Here we will introduce a new attribute TARCET. This attribute can be used in multiple HTML tags. The following methods are commonly used: | ||||||||||||||||||||||||||||||||
| 1: written in the <A> MARK:In addition to writing the linked file, you also need to write the name of the window to be displayed in the linked file. | ||||||||||||||||||||||||||||||||
| The format is as follows: | ||||||||||||||||||||||||||||||||
| <A href = "url" TARCET + "Name of the linked file"> | ||||||||||||||||||||||||||||||||
| 2: written in the <base> MARK | ||||||||||||||||||||||||||||||||
| If you want to display the content of multiple links in the same HTML file in the same window, you can add a statement to the HTML file, use the <base> tag to write it in the | ||||||||||||||||||||||||||||||||
| The format is as follows: | ||||||||||||||||||||||||||||||||
| <Base trget = "file name"> | ||||||||||||||||||||||||||||||||
| V. Summary of this Chapter | ||||||||||||||||||||||||||||||||
| This chapter focuses on creating multiple windows and introduces two labels: <frameset> .... </frameset> and <frame>, as well as their attributes. In addition, the application of an attribute target is extended. | ||||||||||||||||||||||||||||||||
| <Frameset> and <frame> are used to divide the window and define the name and size of each window. By using the properties of <frameset>, you can divide any window based on your needs. The content displayed in each window is marked with <frame>. | ||||||||||||||||||||||||||||||||
| The TARCET attribute can be used in many tags. This chapter describes how to use it in the <A> and <base> tags. | ||||||||||||||||||||||||||||||||
| This chapter describes the tags and attributes that you need to be familiar. | ||||||||||||||||||||||||||||||||
|
Five methods for using CSS style sheets on webpages
I. Use the style attribute
Add the style attribute directly to individual component labels. <component (Label) style = "Property (attribute) 1: Set Value 1; Property (attribute) 2: value 2 ;...}
For example:
<TD style = "color: Blue; font-size: 9pt; font-family:" "; line-Height: 150%>
The advantage of this usage is that the style can be applied to various labels smartly, but the disadvantage is that there is no "uniformity" of the entire file 』.
Ii. Use style labels
Write the style rules in the <style>... </style> label.
<Style type = "text/CSS">
<! --
Style rule table
-->
</Style>
For example:
<Style type = "text/CSS">
<! --
Body {
Color: blue;
Background: # ffffcc;
Font-size: 9pt}
TD, P {
Color: green;
Font-size: 9pt}
-->
</Style>
Generally, the entire <style>... </style> structure is written in the
3. Use link labels
Write the style rules in the. CSS style file, and then introduce them with the <link> label.
Assume that we save the sample rules into an example.css file. We only need to add
<LINK rel = stylesheet type = "text/CSS" href = "example.css">
You can apply the style specified in the style file. The link tag is usually written in the
4. Use @ import to introduce
It is similar to link usage, but it must be placed in <style>... </style>.
<Style type = "text/CSS">
<! --
@ Import URL (the address, path, and file name of the imported style sheet );
-->
</Style>
For example:
<Style type = "text/CSS">
<! --
@ Import URL (http: // yourweb/example.css );
-->
</Style>
Note that the semicolon at the end of the line is absolutely indispensable!
5. Use the <span> </span> label to introduce the style.
Example: <span style = "Font: 12px/20px #000000;"> webpage tutorial Network </span>
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
