Home > Developer > Web Develop
Content: HTML, CSS goal: the ability to master handwritten HTML to achieve the general difficulty of a Web page (such as a website registration form), to lay the groundwork for ASP. Stick to handwritten HTML, visual design is just a means of self-study. Reference books: Zhang Xiaoxiang "javascript Web Development-Experiential Learning tutorial"
HTML (hypertext Markup Language) is a text that describes what a Web page looks like and what content it has.
How to view the description (HTML) of a webpage: using IE, right-click on the page and select "View Source" b/s (browser/server)
The initial reason is that the web just started without a unified HTML standard, and later, although the standard of the Internet organization proposed by the HTML standard, but the individual browser vendors are fragmented, not fully comply with this standard.
First page
Create a Web page using Notepad
Create a new text file with the suffix name changed to. html or. htm input
<title> My first page </title>
<body bgcolor= "Red" background= "bg.jpg" >
Hello World
</body>
HTML page Structure description
All content is within the
<body> is the body of the page, and most of the content is defined here.
All pages should contain at least these parts, because the browser is highly tolerant, so even if it does not include the normal display, but it is best to write completely.
Development tools
Writing a normal HTML page is irrelevant to any background language, and can be written using Notepad, advanced Notepad (editplus,notepad++), Dreamweaver, Expression Web (FrontPage's Makeover), These tools are for the page art, developers use VisualStudio to write HTML is enough.
Do not focus on how to make the interface, formal companies have a dedicated page art, irregular companies are stealing other people's art page, whether it is stealing other people's pages, or using the company's art developed pages, for developers to do "fill the template" work is the same.
Text Format
H tag,
HTML defines
<br> just enter,
<p> is segmented. <p> before and after there will be a larger gap, and <br> is not.
<center> Wisdom Podcast </center> Center display
<b>a</b> bold body.
<i>b</i> Italic
<font></font> Font labels,
<font color= "Red" > Red </font>
<font size= "" color= "Red" > Red </font>
Color size face special character: in HTML <, > has special meaning, the space is not displayed (enter a string with a space to see), so you need a special symbol, equivalent to the ' \ n ' escape character in C #.
< (smaller than, less than);
> (greater than, greater than);
(space, no-break space).
See Remarks.
<pre> pre-formatting to maintain color
HTML does not take "" as a space, because the HTML is often indented, if the indentation of the space in the browser as a space to show, typesetting will be very cumbersome. " " Represents a space.
Why <> want to use <> instead?
That's because <> has a special meaning: the definition of a label.
Color System
The bgcolor property of the body tag can set the background color of the page, <body bgcolor= "#006699" >
#006699这就是HTML中表示颜色的方式, each two is a group, the three groups represent R, G, b values, is 16 binary representation. About RGB See Remarks
You can use the VS built-in color selection dialog box to generate RGB values, or you can use the eyedropper (such as the Debugbar built-in eyedropper: open IE, open the Debugbar toolbar, click the Eyedropper icon), and the HTML also pre-defined some colors: red, black, white, etc. such as bgcolor= "Black".
Color matching is not a professional developer to consider, is the art of things, so for the color of the value do not worry too much, know that there is such a thing on the line.
(Any color is red, green, blue color combination of three colors, three primary colors.) R=red, G=green, B=blue. Any color can be divided into infinitely many points, but the computer cannot represent infinity. To divide a color into 256 parts can basically deceive people's eyes, is the professional artists are not out. For any color you can say what the R value is, what the B value is, and how much G is. Pure red: r=255,g=0,b=0; Pure black: r=255, g=255, b=255, pure white: r=0, g=0, b=0. ）
URLs, hyperlinks
Url:url represents the addresses of resources in the network, such as Http://127.0.0.1/a.htm, Ftp://192.168.88.128/b.zip. There is the concept of the URI, larger than the URL, some classes use URIs, which can be temporarily as the same as the URL line.
Super Link: <a href= "http://www.rupeng.com" > such as Peng Network </a>.
<a> can also nest pictures, so that is click on the image to open the connection
<a href= "http://www.rupeng.com" >
</a>
Hyperlinks in depth
Relative URL: A relative URL represents a resource compared to the current document, "/" means the site root, ". /"Indicates parent directory," ... /.. /"indicates parent directory of parent directory,"./"or does not write any slash to indicate a directory relative to the current path. Site references are best used relative URLs, so that the domain name changes, the directory changes are unaffected.
<a href= "a.htm" ></a>
Set the target property of <a> to "_blank" to open the hyperlink in a new window.
National conditions: Many of the domestic websites are opened by default in a new window.
Anchor: Using the Name property for <a> name: <a name= "Last" > here is the final </a>. This can be done by <a href= "#Last" > go to platform </a> to jump to the part of the hyperlink.
Case: Go to comments, back to the text. Knock a few more returns.
Image
Note that the picture is linked, not inserted, so if the src point of the file does not exist, it will not be able to see. The ALT attribute is the display text when the picture cannot be displayed, the mouse way will also have hover prompt "Click View big picture"; border property specifies a border, border= "0" does not display a border; the width, height property specifies the display size of the picture, or the original size of the picture if not specified.
It is best to specify width, height, even the original size, because if you do not specify the size, the picture will not occupy a position, the picture after the download to resize, will cause the page is very messy.
If you specify width, height, even if the picture is not loaded, the position will be taken up first. If you want to display small images (such as thumbnails) on a webpage, don't just set the width and height to zoom out, because large images will still be downloaded, which makes loading slow.
Easy wrong, do not think the BMP suffix to jpg is to change the file format!
List, table
List:<ul><li> Irrigation Area </li><li> Service Area </li><li> original stickers </li></ul>. Unordered list.
(*) There is an orderly list of <ol></ol>, which is seldom used. Ordered list
Table:<table></table> is a table that creates cells internally through the <tr> create rows,<tr> inside through <td>. You can set the border property of the table to zero to hide the table line.
padding, spacing cellpadding the distance between contents and table edges cellspacing the spacing between cells s
<tr> properties: Align, horizontal alignment, selectable values left, right, center;valign, vertical alignment, selectable top, middle, bottom.
<td> also has align and valign. <tr align= "right" ><td>tom</td><td align= "left" >20</td><td> male </td></ Tr>: Child tags inherit the properties of the parent tag by default, and override the parent tag's property if you specify the property individually.
You can also use rowspan, colspan to merge cells
(*) The table Head TD can be replaced with th, so that the table head bold, centered display.
List Properties
Type = disc, Circle, Square
Type= 1,a,a,i,is
Exercise 1: Use <ol> <ul> show song list,<ol> use a,b,c format to display,<ul> using solid circle display
Exercise 2: Use <table> to make an employee table. Displays employee name, gender, salary, header bold, centered display. Show 4 Employees
Exercise 3: Cross-column across rows. Student results form, student basic information Form
Form
Website form and fill in forms
The <form> label is the form label. If you want to submit the data to the server, you need to put the form elements <input>, <textarea>, <select>, and so on into the form.
<input> is the primary form element, the optional value of type: Submit (Submit button), button (normal button), CheckBox (check box), File (document selection box), Hidden (hidden field), Image (Picture button), Password (password box), Radio (radio button), Reset (reset button), text (textbox). <input type= "File"/>
To open an account in the bank, you need to go to the counter to fill out a table, and then handed to the bank staff, by the bank staff according to your information to carry out the follow-up processing, you can not directly to operate the bank's system to open an account. For the site is the same principle: 163 e-Mail registration, you also fill in the registration page is a table: what the user name, password is what. After clicking the "Register Account" button, IE will submit this form to the 163 backend server for processing. Forms typically interact with server-side programs to work and do not involve server-side programming for the time being.
Input form Detailed
Submit: Click the Submit button the form will be submitted to the server, Chinese IE under the default button text is "Submit Query", you can set the Value property to modify the display text of the button
The Text:size property is width, value is the maxlength is the maximum length that can be entered, ReadOnly is read-only.
<input type= "text" readonly/> (write-only property name, not write property value) or <input type= "text" readonly= "readonly"/> (recommended)
The Checkbox:checked property indicates whether it is selected, <input type= "checkbox" checked/> or <input type= "checkbox" checked= "Checked"/> (recommended) Attributes of an optional value such as checked, ReadOnly, and so on, can omit attribute values.
Radio: The same Name property for a group, different radio set different value values, so that by taking the value of the specified name can know who is selected, not to separate judgment.
File: Using file, the enctype of the form must be set to Multipart/form-data, the method property is post (*)
Image: Use the SRC attribute to specify the address of the image used to implement the "login button" for beautification.
<select> tags
Used to create a ComboBox or a listbox similar to WinForm if the Size property is greater than 1 is the listbox (the value of size is the number of displayed lists), otherwise it is a ComboBox. <select multiple> or <select multiple= "multiple" > (recommended), then you can select the listbox. The item in select is <option>,<option> Beijing </option> can also set the value of the item <option value= "1" > Beijing </option>. Set an option to checked: <option selected>333</option> or <option selected= "selected" >333</option> ( Recommended) This item can be set to select how to implement "Do not select", add a <option value= "1" >--do not select--<option>, and then programmatically determine the value of select Selected if 1 is considered to be not selected. Select grouping option, you can use Optgroup to group data, the grouping itself is not selected, whether for a drop-down list or a list box applies. Note
1<SelectName="Country"Size="Ten">2<optgroup label="Africa">3<option value="gam">Gambia</option>4<option value="Mad">Madagascar</option>5<option value="Nam">Namibia</option>6</optgroup>7<optgroup label="Europe">8<option value="fra">France</option>9<option value="Rus">Russia</option>Ten<option value="UK">UK</option> </optgroup> One<optgroup label="North America"> A<option value="can">Canada</option> -<option value="Mex">Mexico</option> -<option value="USA">USA</option> the</optgroup> -</Select>View Code
Other labels
<textarea> Multiple lines (also form elements):<textarea> text </textarea>,cols, rows property represents the number of rows and columns. <label>: <input type= "text" > can write ordinary text to decorate, but when the modifier text is clicked, input does not get the focus, while the label is OK, the for property specifies the control to be decorated id,< Label for= "TXT1" >asdfad</label> sets a unique ID for the decorated control. <label for= "Ma" > Wedding no </label> <input id= "ma" type= "checkbox"/> Fieldset:groupbox effect, dividing controls into one area, looks more structured <fieldset> <legend> Common </legend> <input type= "text"/> </fieldset> * scrolling Text <marquee> * * Play sound, show Flash, see notes
1Calling WMP's plugin <embed src="Coder.mp3"loop=trueautostart=trueNAME=BGSS width="460"height=" the">2Only WAV and mid formats can be played, only Ie<bgsound src= is supported"Town.mid"loop="true"/>3 4 5 Insert Flash6<ObjectClassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"Codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"Width="760"height=" the">7<param name="movie"Value="light-bot-2205.swf"/>8<param name="Quality"Value=" High"/>9<embed src="light-bot-2205.swf"quality=" High"Pluginspage="Http://www.macromedia.com/go/getflashplayer"Type="Application/x-shockwave-flash"Width="760"height=" the"></embed>Ten</Object>View Code
Practice
Exercise 1: Implement the Login interface, with user name, password, verification code (in lieu of ordinary pictures), "Remember Password" check box, login button, reset button. Use table for layout. Use label to write decorated text. Exercise 2: Implement the registration page, divided into two pages, the first page is the Protocol display page, click the "I agree" hyperlink to enter the second registration page, fill in the content: User name, password, duplicate password, province (drop-down list), gender (male, female, confidential three radio), occupation (student, company staff, Other three radio), hobbies (mountaineering, basketball, football, reading, swimming five checkboxes). Use label to write decorated text. Put a hobby in a few checkboxes into a GroupBox
Head label
<meta> Tag,<meta> has the designation name and the specified http-equiv two usages, <meta name= "First name" content= "value"/>, <meta http-equiv= "name" content= "value"/> Two usages. <meta http-equiv= "Content-type" content= "text/html;charset=utf-8"/> Specify page encoding <meta http-equiv= "Refresh" content= "3"/> Refresh this page after three seconds. <meta http-equiv= "Refresh" content= "3;url=http://www.rupeng.com"/> After three seconds to redirect to a new webpage. Post success Prompt "Post successfully, will turn to post view page." <meta http-equiv= "Cache-control" content= "No-cache"/> prohibit browser cache page.
Practice
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
