Home > Developer > Web Develop
Previous Paragraph Basics:
Here are three things we need to know:
HTML Hypertext Markup Language (page structure)
CSS Cascading Style sheets (page styles) can set static pages through HTML+CSS
JS JavaScript (page behavior)
Common centralized software development tools:
Subline, Webstorm, Dreamweave;
Basic style:
<! DOCTYPE html>
<meta Charset=utf-8 "/>
<title> Untitled Document </title>
<body>
</body>
A Web page has head (body) and body (content) part
<! DOCTYPE html> declaring document type
! Statement note
Document documents
Type types
<meta charset = "Utf-8" >
Code encoding format
Utf-8 International Standard
gb2312 Chinese Simplified Standard
Different standards, the same character corresponding to the encoding is different!
<div> blocks </div>
Internal style sheet: The style is separated from the label and written in the head section;
HTML inside annotation format:<!--Content--
Comment Styles within CSS
/*
*content
*/
Generally use external style sheet, convenient for web page maintenance; internal and inline styles are not conducive to maintenance
Inline style: Write the style in the label row
</div style = "background:red; width:200px;height:400px; " >
#box {
width:400px;
}
XX:??;
Attribute: property value;
/attributes: width, height;
Background background (can be a color can be a picture)
Repeat repeat no-repeat non-repetitive repeat-x transverse repeat repeat-y longitudinal repetition
；
Example: Backgtound:blue url (picture name) no-repeat 10px (transverse position can be used as a percentage cent er, etc.) (vertical position) fixed (fixed);
Composite properties: One property has multiple property values called composite properties
Fixed fixed on the page, does not change with the page up and down
！！！ The front end is an explanatory language that needs to be interpreted by the viewer, so write the code as thinly as possible!
Common styles:
Border (border):
Border-width: Border Width
Borde-style: Border Style
Border-color Border Color
Border Style:
Solid Solid Line
Dashed dashed line
Dotted dot Line
Border Composite properties: line left and right border thickness, style and color;
Inner margin: (padding)
Note: padding is equivalent to adding a fill thickness to a box that affects the size of the box
There are upper and lower left and right margins;
If you have padding-top, etc.
can also up and down such as padding:10px 10px;
The compound must be bottom left by pressing top right;
Margins: (margin)
Upper and lower margins will be superimposed;
Parent-child margin-top are passed to the parent (the inner margin overrides the margin) can be implemented with the padding (padding)
Margin-left:auto; This code automatically calculates the distance to the right, all to the left, regardless of the adjustment to the right.
Margin-left:auto; and Margin-right:auto;
Will be the border is always in the middle
Compound of margin:
Margin:top right bottom left;
650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M01/8E/8C/wKioL1jE_XnxamF1AA46dH81vZc654.jpg-wh_500x0-wm_ 3-wmp_4-s_1348230152.jpg "title=" 2017_03_12_15_09.23.jpg "alt=" Wkiol1je_xnxamf1aa46dh81vzc654.jpg-wh_50 "/>
The size of the box =border+padding+wudth/height;
The width of the box =border-left+padding-left+width+padding-right+border-ringt;
The height of the box is =border-top+padding-top+width+padding-bottom+border-bottom;
Content styles outside the structure of a page are called text styles:
Font-size text size: even; default 12px
font-family text font: default Arial; You can separate multiple fonts with commas. Indicates that if there is no font, the following font is displayed;
Text color: (You can use the PS eyedropper color and into 16, 16 before the "#" Example: color:#?????; ）
Line-height Line Height: The text is centered at the height of the row;
Text-align: Text alignment (center, etc.)
Text-indent: First line indent (); EM unit; indent several words;
Font-weight: Writing emphasis;
Font-style: Text style (italic style);
Text-decoration: (overline downline line-through None) text decoration;
letter-spacing: Word spacing;
Word-spacing: English word spacing;
！！！ Summarize:
Common composite Properties:
Background
Border
Padding
Margin
font:font-size|font-weight|font-size/line-height|font-family;
(Font understanding)
The tour is recommended to pack several IETester
Standard Explorer: Firebox (Firebug 1.12.4) often used for debugging
, Chrome, Safara, Oprea. such as
HTML Learning Summary (1)
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
