Home > Developer > Web Develop
Chapter I.
I. HTML definition: Hypertext Tag Language
Role: Making Web pages
Two. Structure:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title> Page Title </title>
<meta name= "keywords" content= "search engine keyword content"/>
<meta name= "description" content= "Search engine description content"/>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "><!--to set character encoding--
<!--Utf-8 International common Chinese and English transcoding gb2312 is also the Chinese and English transcoding, versatility is not utf-8 strong--
<!--meta tags can be omitted without writing---
<body>
Content part of a Web page
</body>
Three. tags
<> is the label,<> is the tag name.
Types of labels
A. Tagged with the subject
< tag name > body content </Tag name >
Example:<title> Page Title </title>
B. Non-subject label self-closing
< tag name/> Example:<br/> C. Tagged with subject-property
< Tag Name property 1 = "Value 1" Property 2 = "Value 2" ></label name >
Example: <table border= "1" ></table>
D. Non-subject-oriented labels
< Tag Name property 1 = "Value 1" Property 2 = "Value 2"/>
Example:
1. Page Title Tag:<title></title>
2. Content Title Tag:3. Paragraph label:<p></p>
4. Line Wrap Label:<br/>
5. Horizontal:6. Bold:<strong></strong>
7. Tilt:<em></em>
8. Underline:<u></u>
9. Note: <!--the contents of the note--
Iv. representation of special symbols in Web pages
1, Space:
2, <: <
3.: >
4, &: &
5, the copyright character:© 6, double quotation mark:"
Five, the picture label
Note: src: relative path and absolute path
1, relative path: is to start looking for the directory where the page is currently open. Pass.. /Find the top level directory, there are several parent directories there are several. /
2, Absolute path: drive letter \ folder name \ Picture name is from the specified drive letter to find
Vi. Links
1. Hyperlinks: links between pages and pages
<a href= "path to link file" target= "How to display the destination file" ></a>
Target= "_self" to open its own window
target= "_blank" new window
2. Anchor Chain Connection
A. Between the same page:
Mark at destination: <a name= "tag name" > Destination </a>
In the key hit place: <a href= "#标记名" > click on the Place </a>
B. Between different pages:
Mark at destination: <a name= "tag name" > Destination </a>
In the key hit place: <a href= "page Path # tag name" > Click Place </a>
3. Functional Links
E-mail: <a href= "mailto: Email address" > contact us </a>
Qq:<a href= "TENCENT://MESSAGE//UIN=QQ" >QQ</a>
4. Pseudo-Link (empty link)
<a href= "#" > Content </a>
Chapter II
List
1. Ordered list
<ol type= "1" >
<li></li>
<li></li> can have multiple Li, all content must be put in Li
</ol>
Type value: 1 digits,
a/a Letter Case
i/i Roman
Do not set type default is number mode
2. Unordered list
<ul>
<li></li>
<li></li> can have multiple Li, all content must be put in Li
</ul>
Type value: Disc solid circle, (default)
Circle Hollow Circle,
Square Solid Squares
3. Definition list: Use when describing a text or a picture
<dl>
<dt> what is described </dt>
<dd> Description of content </dd> can have multiple
</dl>
4. List nesting
A. Unordered list: Nest other lists in the <li> tab, declare the list first (cannot nest the Li tag directly)
Effect: An unordered list is a parent-child relationship to a nested list, and the sub-list is indented, and if the nested list is unordered, the symbol for the list is decremented (solid circle-Hollow Circle-Square)
B. There is a sequence list: As with unordered lists, you can only nest other lists in the LI tag, and declare the list before nesting
Effect: A sequence table is nested with a sequence table, and the sub-list is indented, but the symbol does not decrement
Form
1. Advantages: Clear structure, simple and stable, easy to use
2. Table structure
<table border= "1" height= "$" width= "cellspacing=" 0 "cellpadding=" 0 ">----------form
<TR bgcolor= "Table background color" >-----------Line
<td></td>---cells
</tr>
</table>
Border: The border of the table;
Height: Sets the altitude of the table;
Width: Setting table widths
3. Note: How many rows there are to the TR, how many cells (columns) there are to the TD
CellPadding: The distance used to separate cell contents from the cell border
CellSpacing: Indicates the distance between the cell and the border
4. Table across rows: rowspan= "Number of cross-lines" across rows forever from top to bottom
Cross-column: colspan= "Number of cross-columns" from left to right
5. Cell alignment: Align (horizontal alignment property): Center Center/left left justify/right right
valign (Vertical alignment property): Top top align/middle center align/bottom Bottom align/baseline baseline alignment
If the function is on a table, the entire table will change depending on the value set.
6. Set cell border color: bordercolor= "Color"
7. Table background Image: background= "image Address"
8. Table title:
<caption> title Content </caption> (put in <table> first line below)
Framework:
1. Why Use Frames
So that the head and bottom of the page can be reused, excessive use of the framework is not conducive to search, so less business, more for the Enterprise Management site
Note that:<frameset> and <body> cannot appear at the same time
After the page is divided, each block is a <frame> each <frame> can put a separate page
2. Syntax:
<frameset rows= "25%,50%,*" (split vertically into 25%,50%,25%) bordercolor= "Red" border= "5" cols= "" (Split horizontally) >
<frame src= "... the_first.html" name= "Top"/>
<frame src= "... the_second.html" name= "Middle"/>
.........
</frameset>
Horizontal split to cols longitudinal split to: rows
3. Nesting:
<frameset rows= "50%,50%" >
<frame src= "xxxxx"/>
<frameset cols= "Xx,xx" >
<frame src= "xx"/>
<frame src= "xx"/>
</frameset>
</frameset>
4. Target property in the frame
Set the Name property in the <frame> of the page that the framework needs to open (the setting of the Name property needs to be meaningful), and then set the target= "frame name name" In the <a> tab of our link target
Effect: The target URL of the link can be opened in target <frame>
Grammar:
<frameset cols= "50%,*" >
<frame src= "page path" name= "path"/>
<frame src= "page path" name= "path2"/>
</frameset>
<a href= "page path" target= "path" > Open first page </a>
5. Inline framework
<iframe> Inline Frames (page) </iframe> to be in <body>
<iframe src= "path" (Reference page address)
Name= "Frame identifier name" frameborder= "1/0 (frame has a border)"
Scrolling= "Yes/no" (whether the frame has scroll bars)
Width= "width" height= "height" >
</iframe>
Note: If you want to implement a click link in the inline frame of the jump page, the link
The target property is set to the identity name of the inline frame.
Form
A. Form: Used to submit information
1.<form id= "Form1" method= "Get/post" action= "Submit Address" ></form>
ID: Form identification (similar to ID)
Get: Show submission method, unsafe, submit information displayed on the address bar
There is a limit to the data submitted, the maximum size is 1kb
Post: Implicit submission method, security, information not displayed on the address bar
There is no theoretical limit to the data submitted
2. Form elements
1. Text box: <input type= "text"/>
Name: Define single-line text box names
Size: Defines the width of a single-line text box
MaxLength: Defines the maximum number of characters/bytes that a single line text box can enter
Value: Defines the initial value of a single line of text, on the value passed to the server
2. Password box: <input type= "Password"/> Properties and text boxes
3. Button: Normal button: <input type= "button" value= "normal"/>
Submit button: <input type= "Submit" value= "Commit"/>
Reset button: <input type= "reset" value= "reset"/>
Picture button: <input type= "image" src= "path"/>
4. check box: <input type= "checkbox" checked= "Checked"/> (checked: Set default option)
Note: You can select multiple or no, but check boxes for the same group have the same name property
5. Radio button: <input type= "Radio" Name= ""/> (name used to set select one of the radio buttons)
6. File domain: <input type= "File"/>
In the <form> tag before the file field, add
<form method= "POST" action= "XXXXX" nctype= "Multipart/form-data" >
Because the file has a large amount of information
7. Drop-down list box: <select > (selected set default options)
<option selected= "selected" > Content </option>
</select>
8. Multiline text field: <textarea cols= "width (bytes)" rows= "High" >
Content </textarea>
9. Hidden fields: <input type= "hidden"/>
Two. read-only and disabled
1. Read Only (readonly): Color does not change, can only read, cannot operate
2. Disable (Disabled): Color dimmed, not available
Three. Semantics (put the elements of the form in the box):
1. Function: Reasonable structure code simple
Easy Browser Identification
Easy Search Engine
Meet the specifications
2. Domain and domain headings
<fieldset>--------Domains
<legend> title </legend>----Field Title
Put other content
</fieldset>
3. Text Label:
<label for= "Identification name" ></label>
Note: The identity name is the same as the ID name in the button (radio/check), click the text in the middle of the <label> tab to select the button to enhance the mouse usability
Fourth Chapter CSS Style
First, font style
Font-style: Font style: normal normal/tilt oblique/Italian body italic
Font-weight: Font weight Bold
Font-size: Font Size
Font-family: Font type
Font sets all font properties in a declaration
Font:italic Bold 36px "song Body";
Font Set Order: Wind Coarse type
Font style--font weight--font Size--font type
Two. CSS: Cascading Style Sheets
1. Advantages: Make the page more beautiful
Page and style separation
Make your code more concise
Facilitates search engine searches
Meet the specifications
2. Selector:
A. Tag selector: All of the label content in the entire document implements the style
Syntax: Tag name {style 1;
Style 2;
}
B. class selector: A style that appears in special cases and uses multiple times
Syntax:. class name {Style 1;
Style 2;
}
C.id selector: Style that can only be used once
Syntax: #id名 {style 1;
Style 2;
}
3. Selector Priority: (with the same style by priority, no same style will be used)
ID selector > class selector > tag Selector
Three. Style Sheets
1. Inline style sheet: written in tags
Easy to use, not conducive to post-maintenance
2. Internal style sheet: written in Set the style of a Web page only
3. External style sheet: Create a new CSS file
Multiple pages can share a single CSS page
<link href= "path to CSS page" type= "Text/css" rel= "stylesheet"/>
<style type= "Text/css" >
@import URL ("path to the CSS page");
</style>
4. Precedence of Style sheets: (Nearest principle)
Inline style sheet > internal style sheet > external style sheet
Fifth Chapter beautify page elements
A .<span> range label </span>
<div></div> block-level labels, exclusive line
Two. Text style
Color: Text Colors
Line-height: Row height, function: Center vertically or set line spacing
Text-decoration: Text decoration, underlined underline
Underline Line-through (Strikethrough)
Underline overline
Flashing blink (only available in Firefox browser)
No Add line None
Text-align: Horizontal alignment, left: center in the right:
Vertical-align: vertical Alignment, top
Center Middle
Ju Bottom
Text first line indent setting: Text-indent:2em;
Length unit: Px,em (Chinese Web page usually uses EM as the indent unit)
Text does not change line: white-space:nowrap;
Three. Hyperlink pseudo-Class style
a:link hyperlink not accessed
a:visited Hyperlinks after access
A:hover Hyperlink Suspension
a:active Hyperlink Click Not released
Four. Mouse Shape Style: can act on any label
Cursor:default: Default cursor
Pointer: Pointer to a hyperlink (one hand)
Wait: Busy (funnel)
Help: Assistance (question mark)
Text: literal (cursor)
Crosshar: Cross-shaped
V. Background style +div label
<div></div> is a block-level label with height and width
Use div layout often, div+table one of the classic layouts
Background-color: Setting the background color
Background-image:url (picture name. suffix name);
Background-repeat: Set the image tiling method
There are 4 values:
Background-repeat:repeat//indicates horizontal and vertical
Tile straight in two directions (both horizontal and vertical images are duplicated)
background-repeat:no-repeat//for uneven paving (show only once)
Background-repeat:repeat-x//indicates tile only horizontally
Background-repeat:repeat-y//means tile only vertically
Background-position: Two ways of background positioning
background-position:30% 30%;//Position the first parameter as a percentage to indicate the horizontal direction, the second parameter is the vertical direction
Background-position:left top;
Left (right) center (middle) in horizontal direction
Vertical with top (top) middle bottom (bottom)
Background: color picture displacement tile;
Shorthand: Background: #c00 URL (image address) 205px 10px no-repeat;
Order: Background Color-background image-background positioning-background repetition mode
Six, List style
List-style-type
None unmarked symbol disc solid circle (default type)
Circle Hollow Circle Square Solid Square
Decimal number
List picture instead of tag
List-style-image:url (Image address)
List picture positioning
List-style-position
Two values: Inside outside
Inside: Indicates that the tagged picture is within the text and is aligned around the text marker
Outside: is the default value, which remains on the left side of the markup text, the list item marker is placed outside the text, and the wrapping text is not aligned with the tag.
Sixth Chapter Box model
I. Box model: Contains Border,padding,margin properties
Two. Border: Border (top, right, bottom, left)
1.border-width: Width (border-top-width: Width of top border) 1px
Thin: fine.
Medium: Bold
Thick: Thicker
2.border-style: Style (solid solid, dashed dashed, double line, point dotted ...)
3.border-color: Color (four sides of different colors, clockwise)
4.border: Abbreviations, order can be disrupted
Example: border:1px solid red;
Three. Margin and padding
1.margin: Set the spacing outside the box (outside spacing)
2.padding: Set the spacing between content and box borders (inner spacing)
3. Abbreviation: Margin and padding
padding:10px (10px pitch in four directions)
padding:10px 20px; (10px: Up/down 20px: Around)
padding:10px 20px 30px; (10px: Up 20px: Around 30px: Lower)
padding:10px 20px 30px 40px (upper right lower left) clockwise direction
Four. Display:
1.display:block;/* converts inline elements to block-level elements, displaying element contents */
2.display:inline;/* Convert block-level elements to inline elements */
3.display:none;/* Hidden Elements */
Floating
A. Float: float
Float:left; float to the left
Right floating
none; not floating.
Features: Out of standard document flow
Convert block-level elements to inline elements
Text will be displayed around floating elements
Two. Clear: Clear float (not remove floating, so that subsequent elements are not affected by the above floating elements)
Left: Clears the float of the last floating element
Right: Clears the floating of the last floating element
Both: Clears all floats
Three. Overflow: overflow handling: It specifies what happens when the content overflows the box, such as content that is not clipped and rendered outside the box, the content is clipped, the content is clipped, etc.
Visible: Default, Excess part continues to display
Hidden: Out of section not shown (hidden)
Scroll: Show scroll bars (both landscape and portrait appear)
Auto: Automatically adjusts the appearance of the scroll bar (appears vertically)
Positioning
I. Positioning mode position:
1.absolute; absolute positioning: relative to the browser (previous level element)
2.relative relative positioning: relative to its original position
3.fixed fixed positioning: Positioning to a position, position will not change, less use, many browsers do not recognize
4.static: static positioning, default
5. Note: An element has an absolute positioning, its superior has positioning, then this element is no longer relative to the browser positioning, but relative to the upper position of the element positioning
Two. Z-index: Processing Hierarchy
1. The higher the value the higher the upper, the smaller the lower
2.z-index combined positioning, if no elements are positioned by default
z-index:0; (Note: The value is an integer)
Three. Background element Transparency (the first two settings are set at the same time in order to be compatible with different versions of the browser)
1.opacity:x x value is 0-1 the smaller the more transparent (the version prior to IE9 is not supported)
2.filter:alpha (opacity=x) x value is 0-100 smaller and more transparent
Set background element transparency after 3.HTML5
Background:rgba (0,0,0,0.4) A is an opacity value of 0-1
RGB values can be set to a color value of 0-255
HTML + CSS
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
