Home > Developer > Web Develop
First Class
HTML Basics Enhancement Class
l What is a browser?
1. The browser is to accept the action of the viewer (open a URL, click on a link, click a button), and then help the viewer to the Web server to request the content of the Web page (HTML format return), and then show the adult eye can understand the visual page of the software.
L ie= Browser? This statement is wrong. IE is a browser, as well as Firefox, Opera, Charome, etc., pay attention to travel (Maxthon), the window of the world, Sogou browser, 360 browser and so on is not a browser independent of IE, its kernel or IE core, but it is a shell just changed, So with the use of roaming can not laugh with IE, or worrying, try to use webrowse space to develop a browser.
L WebBrowser Controls
Double-click the button:
Here's how:
WebBrowser1.Navigate (TextBox1.Text);
The HTM file code is as follows:
<body>
<font color= "Red" >hello</font>
<a href= "http://www.itcast.cn" >itcast</a>
</body>
Operation Result:
L so-called Trident engine is Webbrosder space, now many non-IE core browser with WebKit engine, such as roaming 3 or Sogou dual-core, Chrome, Safari. Doing browser development is quite simple.
L HTML is a text that describes what a Web page looks like and what content it has. How to view the description of the Web page: using IE browser, right click on the page, select "View Source file"
L Browser compatibility issues: The description file is a unified, but like the translation of oral English, different translations of the things are also differences, so the same Web page in IE and Firefox may look like it is not the same, The most obvious is the previous QQ space on the page in Firefox on-line problems, and even some Web pages in IE6, IE7, IE8 on the same. Therefore, one of the most important problems in Web development is browser compatibility, testing Firefox (FF), Chrome and other browsers to install their own software, testing different versions of IE can be used ietester.
L As long as can run IE and Firefox OK.
Small knowledge:
Browser compatibility test: Acid. Test criteria: For a given number of pages to test, Google's Firefox100 points, ie 98 points.
Browser development engine WebKit, Trident, Gecko.
QQ, Storm, thousands of listening and other pop-up news Center is a web page, is embedded in the browser framework. You can develop it with Visual Studio.
static pages, dynamic pages
L site pages are divided into static pages and dynamic pages of two
N Static page: There is an HTML page file saved on the server, the browser to this page when the server will send this page file to the browser;
N Dongguan Taiwan page: There is no face on the server to see the page, but the server dynamically generated HTML page sent to the browser, dynamic language service side is also easy to use C#,vb.net, PHP, Java, C and other writing.
L write normal HTML pages and any background language independent, you can use Dreamweaver, Expression Web and other tools to write, these tools are for the page art, developers with Visual Studio to write HTML is enough, Do not focus on how to make the page look good, the formal company has a dedicated page art, irregular companies are stealing other people's art page, whether it is to steal someone else's page, or use the art company developed pages, for developers to do "fill the template" work is the same.
Lesson Two
Pre-class Instructions:
L Content: HTML, CSS
L Objective: To master the ability of handwritten HTML to achieve the general difficulty of Web pages (such as website registration form), to lay the groundwork for ASP. Adhere to handwritten HTML, visual design knowledge a means of self-study.
L Reference: Zhang Xiaoxiang "javascript Web Development-Experiential Learning tutorial"
First page
Mainstream programmers use Visual Studio 2008, which can be downloaded on the website. A Little big, 3.7 g.
L New Web project (new →asp.netweb application), new HTML page (add → new item →web→html page)
L View Page Mode
n Switch to "design" view, you can see the preliminary preview effect here, it is not very accurate, you can "design" to try to drag and drop space visualization in the Toolbox design, the design of complex pages rarely direct visual design
n Right, select "View in Browser". debugging is not possible.
n Set the page to be viewed as the Start page (right click on the file "set as Start Page"), then click "Start Debugging" to Debug.
L Learn to use "view in Browser" without JS or C # code. Modify the page without closing the browser and then open, refresh can be.
Lesson Three
Html page Structure Description
L All content within the
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 the whole.
Color System
The bgcolor property in the body tag can set the background color of the page, <body bgcolor= "#006699" >
L #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 to generate RGB values, or you can use the eyedropper (such as the debug built-in color picker; open ie, open the Debugbar toolbar, click the eyedropper icon); The HTML sea defines some colors: red, black, white, etc. such as bgcolor= "Black".
L color 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.
Html and the relationship between XML,
L Xhtml
L attribute value: The attribute value in HTML can be enclosed in single quotation marks, enclosed in double quotation marks, or even without quotation marks (not recommended), and single pairs are paired together.
L Note: HTML uses the same <!-annotation content as XML to annotate.
L Special characters: < in HTML, > has a special meaning, the space will not be displayed (enter a string with a space to try), so you need a special symbol, equivalent to the "\ n" escape character in C #. < (less than);> (greater than sign); (space);
L Format Label <p></p> create paragraph;<br/> carriage return, can also be written as <br> there are some tags in HTML that do not have to be closed,<br> is one, which is different from XML, But to follow the XHTML specification, it is recommended to close as tightly as XML. <br/>
L 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 troublesome. " " Represents a space.
L <pre> is not a panacea. Limited functionality.
Text Format
L <br> Just enter (that is, line break),<p> is the segment,<p> before and after a larger gap, and <br> does not.
L <center> Network Innovation Group </center> Center Display
L h Tag, HTML defines
L <b> Network Innovation Group </b> Bold
L <font></font> Font label, <font color= "Red" > Red </font> <font size= "" color= "Red" > </ Font>
URL , Hyperlinks
L URL: Represents the address of the resource in the network, such as
Http://127.0.0.1/a.html, Ftp://192.168.88.128/b.zip. There is the concept of the URI, larger than the URL, some can use the URI, can be temporarily as the same as the URL as large as the line.
L Hyperlink: <a href= "http://www.hao123.com" > Good 123</a>
Click to go directly to the "Good 123" website
L <a> can also nest pictures, so that is click on the image to open the connection <a href=www.hebiace.edu.cn ></a>
Hyperlinks in depth
Relative URL: The relative URL represents the resource compared to the current document, "/" represents the site root directory, ". /"Indicates parent directory," ... /.. /"indicates parent directory of parent directory," ... /"Or do not write any slashes that represent the directory relative to the current path. The site reference is best used relative URL, so that the domain name changes, directory changes are unaffected.
<a href= "a.htm" ></a>
L Set the target property of <a> to "_blank" to open the hyperlink in a new window. Domestic websites are opened by default in a new window.
L Hyperlink: <a href= "http://www.baidu.com" >baidu</a>
L use <a> 's target property for <a> name: <a name= "Last" > This is the final </a>
This allows you to jump to the part of the hyperlink by <a href= "#last" > Jump to Platform </a>.
L Case: To comment, back to the text. Knock a few more returns.
Image
L Note that the picture is connected, not inserted, so if the src point of the file does not exist, it will not be able to see. The alt attribute for the picture cannot be displayed so that the text is displayed, the mouse mode will also have a hover hint "click to view large image"; 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 if not specified.
L Better specify width, height, even if the original size, because if you do not specify the size, the picture does not occupy a position, the picture is resized after downloading, will cause the page is very messy. If you know the width, height even if the picture is not loaded, the position will be taken up first.
<a href= ". /images/00.jpg "></a>
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 a large image will still be downloaded, making it slow to load.
List, table
List:<ul><li> Irrigation Area </li><li> Service Area </li><li> Original stickers </li></ul>
L (unordered list)
L
L There is also a sequence table <ol></ol>, which is seldom used. Ordered List
L table:<table></table> is a table that creates cells internally using <tr> creating rows,<tr> internal through <td>. The Border property of table can be said to be set to zero to hide the table line
N <tr> properties: Align, horizontal alignment, selectable values left, right, center;valign, vertical alignment, selectable top, middle, bottom.
N <td> also has align and valign. <tr align= "right" ><td>tom</td><td align= "left" >20</td><td> male </td> : The child tag inherits the properties of the parent tag by default, and overrides the parent tag's properties if the property is set on its own.
n can also make rowspan, colspan to do cell merging, vs visual function to do it.
The TD of the N-head can be replaced with th, which will indicate the bold and centered display.
N suggest <><thead> replace header with <tr>
Form
L Site Form Chanyu filling
L <form> tag is a 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.
L <input> is the primary form element, the optional value of type: Submit (Submit button), button (normal button), CheckBox (check box) file (File selection box), Hidden (hidden field), IMG (Picture button), Password (password box), Radio (radio button), Reset (reset button), Text (textbox)
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.
<input type= "Text"/>
<input type= "checkbox"/>
<input type= "button" value= "register"/>
<input type= "Submit" value= "register for the next"/>
<input type= "checkbox" checked= "Checked"/>
</br>
<input type= "Radio" name= "gender"/> Male
<br>
<input type= "Radio" name= "gender"/> Female
</br
<br>
<input type= "Radio" name= "gender"/> Secrecy
</br>
<input type= "Radio" name= "Habit"/> Basketball
<br>
<input type= "Radio" name= "Habit"/> Soccer
</br
<br>
<input type= "Radio" name= "Habit"/> Volleyball
</br>
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. The Submit button, which is implemented by the picture, also submits the coordinates of the user clicking on the image.
<select> tags
Used to create a ComboBox or ListBox similar to WinForm
If the Size property is greater than 1, it is the listbox (the value of size is the number of displayed lists) or the ComboBox. <select multiple> or <select multiple= "multiple" > (recommended) Multiple has only one value, so it is a listbox that can be selected more than once.
<select >
<option> Beijing </option>
<option> Shanghai </option>
<option> Nanjing </option>
</select>
<select size= "2" >
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Size controls how many values are displayed at one time
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) You can set this item as a selection
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. See Remarks.
<form>
<select name= "City" size=9>
<optgroup label= "municipality" >
<option> Beijing </option>
<option> Shanghai </option>
<option> Tianjin </option>
</optgroup>
<optgroup label= "Guangdong" >
<option> Shenzhen </option>
<option> Foshan </option>
<option> Guangzhou </option>
</optgroup>
<optgroup label= "Special Economic Zone" >
<option> Xiamen </option>
<option> Zhuhai </option>
<option> Hainan </option>
</optgroup>
</select>
</form>
Other labels
L <textarea> Multiple lines (also form elements):<textarea> text </textarea>,cols= "50", rows= "15" attribute represents the number of rows and columns.
L <textarea cols= "Ten" rows= "ten" >
L <LABEL>: <input type= "text" can be written in normal text to decorate, but when you click on the modifier text, input does not get the focus, and with a label, the for property specifies the control to be decorated id,< Label for= "Txt1" >asdfad</label>; "txt1" sets a unique ID for the decorated control. (Label's accesskey= "R" attribute specifies shortcut keys, FF is not supported)
L
L Name: <input type= "text"/>
L Marriage No: <input type= "checkbox"/>
L </br>
L <label for= "name" > Name: </label><input id= "name" type= "text"/>
L <label for= "Ma" > Marriage No: </label><input id= "ma" type= "checkbox"/>
Use the label mainly click "Name", "Married No", the mouse will be inside the box.
L <label for= "Ma" > Wedding no </label> <input id= "ma" type= "checkbox"/>
L Fieldset:groupbox effect, divides control into one area, looks more regular
<fieldset style= "set style" >
<legend> Common </legend>
<input type= "Text"/>
</fieldset>
<fieldset>
<legend> ®?</legend> for regular ¡ê
<input type= "Text"/>
<input type= "Text"/>
<input type= "Text"/>
<input type= "Text"/>
<input type= "Text"/>
</fieldset>
L Submit (Submit), reset (revert to default)
L * Scrolling Text <marquee>
L * Play sound (add media → plugin in DW), display Flash, see Remarks.
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.
<table border= "1" >
<tr><td><label for= "username" > User name: </label></td><td><input id= "username" Type= "Text"/></td ></tr>
<tr><td><label for= "password" > Password: </label></td><td><input id= "Password" Type= "Text"/></td ></tr>
<tr><td><label for= "Remember" > Remember password: </label></td><td><input id= "Remember" type= "checkbox"/></tr>
</table>
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 several checkboxes into a fieldset (GroupBox)
Style sheets, CSS
CSS (cascading style sheet, cascading style Sheets) is used to beautify the page, can be more detailed settings of the page elements, the style mainly describes the elements of the font color, background color, border, and so on. CSS is the skin that describes the elements.
Benefits of using CSS:
Aesthetic layout, positioning
Style sheet allows for separation of content and style and facilitates team development
Convenient and unified definition of the format, modification is also convenient.
The appearance style of HTML tags is relatively single
Page color is not vivid
Style modification Inconvenient
What style sheets do: Set the appearance of a Web page, which is the equivalent of gorgeous clothes.
For example: Background color:
<input type= "text" value= "123" style= "background-color:red"/>
Border color:
<input type= "text" value= "123" style= "border-color:red"/>
Three ways to use CSS
CSS mainly has elements inline, page embedding and external references three ways to use. CSS is the skin that describes the elements!
Element inline (inline style sheet), directly writes the style to the element's style property, <input type= "text" readonly= "readonly" style= "Background-color: #FF00FF"/> Applies to situations where the style is not reusable.
Page embedding (inline style sheet): adding in head
<style type= "Text/css" >
input{border-color:yellow;color:red;}
</style>
Indicates that all input on the page takes the specified style. Suitable for style reuse, reducing page volume
External reference (external style sheet), which writes CSS content to a CSS suffix file
Textarea{background:yellow}
Then refer to it in the page and add it to the head
<link type= "Text/css" rel= "stylesheet" href= "S1.css"/>
Suitable for multiple pages to share CSS.
A column displays all colors:
Layer (DIV)
Text color:
Grammar:
<style>
p{}
</style>
<p></p>
Declare the CSS in a file
Div Layer (block-level element), Span (inline Element)
Div:<div></div> the content into the layer, it treats the content as a whole, such as the whole hiding, the whole movement and so on. Div is very powerful and often used. A panel similar to WinForm.
Span:div is the placement of content into a rectangular chunk that affects the layout (wrapping ends), and span simply defines a piece of content as a whole, but does not affect the layout, display (No line breaks on both ends). Demo: A line of text with span and Div intercept part of the difference between the text.
Div is used very much in page layouts.
Span is typically used to circle a small piece of text and set different styles. Why not use the <font> tag, because you can set the style by using the <span> CSS.
Where do I find HTML tags? MSDN Catalog →web Development →html and css→html and DHTML reference→objects
Common CSS Styles
The key-value pairs of CSS style properties are separated by a ":" (colon), and the different attributes are ";" (semicolon) separated.
CSS Unit of measure: In CSS, the width, distance, there are several units of measurement: px (pixels), 30% (percent), EM (relative units) and so on. width:20px.
background-color:red; background color;
Color: Text Colors
Border-style:solid, border style, solid line (default is not), and dotted (point) equivalent;
Border-color: Border color;
Border-width: Border Width (default is 0).
Example: style= "border-color:red;border-width:1px;border-style:dotted;"
Display: Whether the element is displayed, an optional value of none (not shown), block (shown as a block-level element with a newline character before and after this element). ), inline (displayed as inline elements, no line breaks before or after the element, add display:inline to the Div; the style is consistent with the span display.) Note: "
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Cursor,style cursor: The pointer icon that appears when the mouse is over an element, an optional value: The cursor (the default cursor), the pointer (the hand on the hyperlink), the text (input bean), the wait (busy hourglass), help, and so on. You can also use the Cursor:url (Dinosau2.ani) custom cursor picture in ANI, cur format.
Li does not display dots: list-style-type:none; generally located on LI or UL
Set the cursor (the format must be ANI or cur)
Margin (similar to the CellSpacing property of a table), padding (similar to the table's cellpadding. )
margin: value 1; Upper right bottom left is the value 1.
Margin: value 1 value 2; The upper and lower values are 1, and the left and right values are 2.
Margin: value 1 value 2 value 3; On the value of 1 or so for the value of 2 under the value 3;
Margin: value 1 value 2 value 3 value 4; Each value is: upper right lower left; (clockwise direction)
For example:
Style is inline
Style Selector
For non-element inline styles, you need to define a style selector, which is popular for which elements, three kinds: Tag Selector, class selector, and ID selector.
Tag Selector input{border-color:yellow;color:red;}, with a uniform style for the specified label
Class selector to define a named style and then use it to set the class property of the element as the name of the style, and to set multiple classes at the same time, with spaces between the names
The style name starts with "."
. Warning{background:yellow;}
. Highlight{font-size:xx-large;cursor:help;}
<TABLE><TR><TD class= "Highlight" >aaa</td><td class= "Warning" >bb</td><td class= "Highlight Warning" >ccc</td></tr></table>
Multiple class selectors (spaces separated) can be applied to the same label. If the style sheet
Style= "Background-color:green" takes precedence over
<style>
. Warning{background:yellow;}
. Highlight{font-size:xx-large;cursor:help;}
</style>
class, so the background turns green and the original class is set to yellow.
Label +class Selector
Class selector can also be used for different labels, the same style name for different labels have different styles, as long as the style name before the name of the tag.
input.accountno{text-align:right;color:red;}
Label.accountno{font-style:italic;}
<input class= "Accountno" type= "text" value= "11111111111"/>
<label class= "Accountno" >333333333333333333</label>
Perform:
ID Selector
Sets the style for the element that specifies the ID, plus the ID before the #
#username
{
font-size:10px;
}
<input id= "Usersname" type= "text" value= "Aaaaaaaaaaaa"/>
Style, class can be combined with
<input id= "username" class= "Accountno" style= "font-size:40px;color:red" type= "text" value= "Aaaaaaaaaaaa"/>
More Selectors (*)
Contains selectors:
P strong{Background-color:yellow}
Represents the style used in the contents of the strong tag within the P tag
<strong>fadsfasdfads</strong>
<p><strong>adfasfd</strong></p>
Combine selectors and set a style for multiple labels at the same time
H1,h2,input{background-color:green}
<input type= "text" value= "test"/>
(*) Other CSS selectors: div > P (sub-selector), Div + p (adjacent selector) 、...。 IE7 not supported below. You will learn in jquery.
Pseudo Selector
Pseudo selector: Sets different styles for different states of the label:
a:visited: Hyperlink clicked Style, A:active: Style when Hyperlink is selected, A:link: state when hyperlink is not accessed, a:hover: state when Mouse is moved to hyperlink.
a:visited {Text-decoration:none}
a:active {Text-decoration:none}
a:link {Text-decoration:none}
a:hover {Text-decoration:underline}
Description: Text-decoration:none indicates that the hyperlink does not display an underscore.
Not all elements support pseudo-selectors. (Different browser support situation is not the same, IE7 the following does not support Input:hover and other tags.) ), most are currently used only on the A-label.
Note Browser caching issues.
Thinking: Some hyperlinks on the page are red by default and some hyperlinks are white by default. How to do it? (. Myanchor:link)
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
