Home > Developer > Web Develop
After a day of study, the MU net of html/css basic knowledge of learning, notes collation:
1. File structure:
Fixed structure of HTML file:
<body>...</body>
HTML is the root tag
Head defines the document header, including: title, script, style, link, meta
Body is the main content of the webpage, including: H1,h2-h6, P, A, img
2. Recognize the head tag:
<title>...</title> Page Title
<meta>
<link>
<style>...</style>
<script>...</script>
3. Semantics:
Understand the purpose of each label (under what circumstances I can use this label to be reasonable)
For example, the title of the article on the page can be labeled with the title,
The title tag can also be used for each column name on the page.
The paragraph in the article should be placed in the paragraph label, in the article has the want to emphasize the text, you can use the EM tag to express emphasis and so on.
4. Recognize body Tags:
<p> paragraph text </p> put three <p></p> in three segments
<em> italic text (accent) </em> Italic text content
<strong> Bold text </strong> bold display text content
<span> individual style text </span> no semantics, its application is to set up a separate format with the
<q> quoted text </q> quoted text content, double quotation marks are automatically added
<blockquote> large Segment Reference </blockquote> reference large paragraph of text content, the text is preceded by indentation
<br/> line break
Space
<address> Address information </address> address information, typically used for corporate address display
<code> Code content </code> code, usually in one line
<pre> Multi-line code </pre> multiple lines of code, you can use it when you want to pre-display formatting in a Web page
<ul> Ul-li list information, display in dots
<li> Information 1</li>
<li> Information 2</li>
......
</ul>
<ol> Ol-li list information, with the serial number
<li> Information </li>
<li> Information </li>
......
</ol>
<div> typesetting content <div> typesetting, equivalent to a container
Determining logical parts: The logical part is a set of elements that are interrelated on a page, such as a column section
<div id= "section name" >...</div> div with ID number to make it clearer
<table> table contents </table> CREATE table
<caption> Title Text </caption> add title text to a table
<tbody>...</tbody> If this tag is added, the table will be displayed one time (not the page loading point)
<tr> a row in a table </tr> a row in a table
<td> table cells </td> a cell in a table
<th> table Header </th> A cell in the head of a table, table header
<table summary= "Table Summary" >...</table> add a summary to the table, but will not be displayed by the browser
<a href= "Destination url" title= "mouse-over display text" > Link display text </a> link label
target= "_blank" page opens in a new window
mailto: e-mail address in Web page, can take multiple parameters
mailto: Email address
cc= cc Address
bcc= Secret Copy Address
; Multiple email addresses
Subject= Mail Subject
body= Mail Content
Complete example: <a href= "mailto:[email protected" [email protected] &[email protected] &subject= theme &body= message content > Send mail </a>
5. Interacting with the user:
Grammar:
<form method= "transfer Mode" action= "Server file" ></form>
Example:
<form method= "POST" action= "save.php" >
<label for= "username" > User name:</label>
<input type= "text" name= "username"/>
<label for= "pass" > Password:</label>
<input type= "password" name= "pass"/>
</form>
Form controls:
text boxes, text fields, buttons, radio boxes, check boxes
Method
Post/get
1. Text box (text/password)
<form>
<input type= "Text/password" name= "name" value= "text"/>
</form>
Type: There are two types of "text" and "password"
Name: Name text box, easy to use in the background ASP and PHP
Value: text box default value, General cue function
2. Text field (multiple lines)
<textarea rows= "Number of rows" cols= "columns" > Default text Content </textarea>
COLS: Number of columns for multi-line input fields
Rows: Number of lines for multiple line input fields
3. Radio box, check box
<input type= "Radio/checkbox" value= "value" name= "name" checked= "Checked"/>
Type:radio single-Select, CheckBox check box
Value: Submit data to server values, background PHP processing using
Name: Name the control for use by background programs ASP and PHP
Checked:checked= "Checked", this option is selected by default
Note: The same group of radio buttons, name values must be consistent
4. Drop-down list box
<form action= "save.php" method= "POST" >
<label> Hobby:</label>
<select multiple= "multiple" >
<label for= "book> reading </label>
<option value= "reading" id= "book" > Reading </option>
<option value= "Travel" > Travel </option>
<option value= "Sports" > Sports </option>
<option value= "shopping" > Shopping </option>
</select>
<input type= "Submit" value= "Submission" >
<input type= "reset" value= "reset"/>
</form>
Value: Submitting values to the server
Selected: When setting selected= "selected", it is selected by default
Multiple:multiple= "Multiple", you can use CTRL multiple selection, but very ugly
Label: To improve mouse ease of use, mouse click on the text, select the radio
6. Recognize CSS styles:
CSS: Cascading style sheets (cascading style Sheets), used primarily to define the display style of HTML content within a browser
Grammar:
Selector {property: value}
Example:
p{Color:blue}
Selectors: Also called selectors, indicate the elements to which you want to apply style rules, such as Declaration: refers to a colon ":"
Multiple declarations: Using semicolons ";" Separated, preferably with a semicolon in each line
Note: CSS uses the/**/,html annotation to use <!--content--
7. CSS Style classification:
1. Inline type
<p style= "color:red;font-size:12px" > here the text is red. </p>
2. Embedded
A more general category, CSS styles are placed in the <style> tab, and <style> is usually placed in <style type= "Text/css" >
span{
Color:blue;
font-size:12px;
}
</style>
3. External type
Write the CSS code in a separate external file, ending with a. css extension, using <link> tags in <link href= "Base.css" rel= "stylesheet" type= "Text/css"/>
HREF:. css file path
Rel and type:rel= "stylesheet" type= "text/css" are fixed notation and cannot be changed
Priority of three methods:
inline > Embedded > External
Proximity principle, embedded > External There is a premise: the placement of the embedded CSS style must be behind the external
The above rules apply to the same weight value situation
8. CSS class Selector
Grammar:
. class Selector name {CSS style code;}
Example:
<style type= "Text/css" >
. stress{
color:red;
}
</style>
Note: The small dots in front of you must have
Use:
<span class= "Stress" > Timid </span>
9. CSS ID Selector
Grammar:
#ID选择器名称 {CSS style code}
Example:
#setGreen {color:green;}
<span id= "Setgreen" > Timid </span>
Difference:
Start with '. ' and ' # '
Called when class= and id=
The ID selector can be used only once in the document, and the class selector may use multiple
An element can use multiple class selectors to set multiple styles at the same time, and the ID selector is not possible, such as <span class= "Stress bigsize" > third grade </span>
10.CSS Sub Selector
There is also a more useful selector sub-selector, the greater than symbol (>), for selecting the first generation of child elements of the specified label element. Example:
. food>li{border:1px solid Red;}
If the greater than symbol is changed to a space (), select all the descendants of the specified label element, for example:
. First span{border:1px solid red;}
CSS Universal Selector
The universal selector is the most powerful selector that is specified with a (*) number that matches all tag elements in the HTML:
* {color:red;}
At this point, all the elements have a red font
CSS pseudo-Class selectors
A pseudo-class selector that allows you to set a style for a label that does not exist in the HTML (a state of the label), such as when we set the font color for the mouse-over state of a tag element in HTML.
a:hover{color:red;}
At this point, place the mouse over the top of the element and the color will switch to red.
CSS Group Selector
Multiple labels are separated by commas:
h1,span{color:red;}
Equivalent:
h1{color:red;}
span{color:red;}
CSS inheritance
Some styles of CSS are inherited, so what is inheritance? Inheritance is a rule that allows a style to be applied not only to a particular HTML tag element, but also to its descendants
Such as:
p{color:red;}/* Can be inherited by span */
p{border:1px solid red;}/* At this time, span will not inherit, the border appears red */
. CSS particularity (weight)
Weight:
p{color:red;}/* Weighted value 1*/
P span{color:green;}/* Weights 1+1=2*/
. Warning{color:white;}/ * The weight value is 10*/
P span.warning{color:purple;}/* The weight value is 1+1+10=12*/
#footer. Note P{color:yellow;}/* Weights are 100+10+1=111*/
Note: There is also a special weighted value-inheritance also has the right value but very low, some literature proposed it only 0.1, so it can be understood as the lowest weight of inheritance.
Cascade:
With the same weights, the last one will be applied
Importance:
The same weights, using!important will get the highest weight, such as p{color:red!important;}
Style priority is: Browser default style < Page Creator Style < user-set style, use!important priority higher than user's own setting
CSS Text layout
1. Fonts
Body{font-family: "The song Body";}
body{font-family: "Microsoft Yahei";}
2. Font size, color
Body{font-size:12px;color: #666}
3. Bold
P Span{font-weight:bold;}
A{font-weight:bold;}
4. Italic body
P A{font-style:italic;}
P{font-style:italic;}
5. Underline
P A{text-decoration:underline;}
6. Delete a line
. Oldprice{text-decoration:line-through;}
7. Indent
P{text-indent:2em;}/*2em represents twice times the text size */
8. Line Spacing
P{line-height:1.5em;}
9. Word spacing, letter spacing
h1{letter-spacing:50px;word-spacing:50px}/* are letters, word spacing */
19. Align
H1{text-align:center;}/*left, right, and center*/
. CSS Element Classification
Block elements:
<div>, <p>, Inline elements:
<a>, <span>, <br>, <i>, <em>, <strong>, <label>, <q>, <var>, < Cite>, <code>
Inline block elements:
, <input>
1. Block elements:
1. Each block-level element starts with a new line, and the subsequent element also begins a row. (True overbearing, one block-level element exclusive row)
2, the height of the element, width, row height, and the top and bottom margin can be set.
3, the element width is not set, is its own parent container of 100% (and the width of the parent element consistent), unless a width is set.
Note: A{display:block;}/* can convert inline element a to block element */
2. Inline elements:
1, and other elements are on one line;
2, the height of the element, width, row height and the top and bottom margin is not set;
3. The width of the element is the width of the text or Picture it contains, and it cannot be changed.
Note: Display:inline can be converted into inline elements
3. Inline block elements:
1, and other elements are on one line;
2, the height of the element, width, row height, and the top and bottom margin can be set.
Note: Display:inline-block can be converted into inline block
CSS Box Model
1. Border
div{border:2px solid Red;}
Equivalent:
div{
border-width:2px;
Border-style:solid;
border-color:red;
}
Border-style:dashed (dashed line) | Dotted (point line) | Solid (solid line)
Border-color: #888; Don't forget the number in front of the well.
Border-width: With Thin | Medium | Thick (but not very common), most often with pixels (px)
2. Upper and Lower border:
div{border-bottom:1px solid Red;}/*top, Bottom, left, and right*/
3. Height and width
div{
width:200px; /* Width */
height:30px; /* Height */
padding:20px; /* element to border distance, also called "Fill" */
border:1px solid red;
margin:10px; /* Two box distance, also known as "boundary" */
}
CSS Layout model
There are three layout models of elements:
1. Flow model
HTML page elements in the default state of the Web page are distributed according to the flow model.
1th, the block element will spread vertically from top to bottom in the containing element, because the block element has a width of 100% in the default state.
2nd, in the flow model, the inline elements are displayed horizontally from left to right within the containing element in which they are located.
2. Floating model (float)
Now we want to show two blocks of the block side
Any element is not floating by default, but it can be defined as a floating CSS, such as Div, p, table, IMG, etc. can be defined as floating
Example:
#div1 {float:left;}
#div2 {float:right;}
3. Layers Model (layer)
Just like the very popular layer editing feature in Photoshop, each layer can be precisely positioned, but in web design, the layer layout is not hot because of the activity of the page size.
There are three forms of the layer model:
1. Absolute positioning (Position:absolute)
You need to set Position:absolute (for absolute positioning), which will drag elements out of the document stream
The left, right, top, and bottom properties are then used for absolute positioning relative to their closest parent containing block with positional properties
If no such inclusion block exists, then relative to the body element, that is, relative to the browser window
Example:
div{
xxxx:yyyy;
Position:absolute;
right:100px;
top:20px;
}
2. Relative positioning (position:relative)
Position:relative (for relative positioning), which determines the offset of an element in the normal document stream through the left, right, top, and bottom properties
Relative positioning is done by first generating an element in static (float) mode, and the element floats like a layer.
Then moving relative to the previous position, the direction and amplitude of the move are determined by the left, right, top, bottom properties, and the position before the offset is retained
Example:
#div1 {
width:200px;
height:200px;
BORDER:2PX Red Solid;
position:relative;
left:100px;
top:50px;
}
<div id= "Div1" ></div>
3, fixed positioning (position:fixed) such as pop-up window ads
Fixed: Represents a pinned position, similar to the absolute anchor type, but its relative movement coordinates are the view (the page window within the screen) itself
It does not change with the scroll bar of the browser window, unless you move the screen position of the browser window on the screen, or change the display size of the browser window,
As a result, fixed-positioned elements are always located somewhere in the view in the browser window and are not affected by document flow
Example:
#div1 {
width:200px;
height:200px;
BORDER:2PX Red Solid;
position:fixed;
left:100px;
top:50px;
}
Relative combined with absolute:
1. The reference positioning element must be the predecessor element of the relative positioning element
<div id= "Box1" ><!--Reference positioned element (predecessor)---
<div id= "Box2" > Relative reference elements for positioning </div><!--relative positioning elements--
</div>
2, the reference positioning elements must be added position:relative;
#box1 {
width:200px;
height:200px;
position:relative;
}
3, positioning elements to join Position:absolute, you can use top, bottom, left, right to offset positioning
#box2 {
Position:absolute;
top:20px;
left:30px;
}
20. Code Shorthand:
1. Box Model:
margin:10px; Equivalent to margin:10px 10px 10px 10px; (upper right lower left order)
margin:10px 40px; Equivalent to margin:10px 40px 10px 40px; (upper right lower left order)
Padding, border and margin are the same;
2. Color value:
P{color: #000000;} equivalent to P{color: #000;}
P{color: #336699;} equivalent to P{color: #369;}
3. Font:
body{
Font-style:italic;
Font-variant:small-caps;
Font-weight:bold;
font-size:12px;
Line-height:1.5em;
font-family: "Song Body", Sans-serif;
}
Written as:
Body{font:italic small-caps Bold 12px/1.5em "song Body", Sans-serif;}
Attention:
1, use this shorthand method you must specify at least the Font-size and Font-family properties, and the other properties do not specify that default values will be automatically used.
2, in the abbreviation font-size and line-height the middle to join "/" oblique carry.
21. Length Value
1. Pixels
Why are pixels relative units? Because pixels refer to dots on the display (the CSS specification assumes "90 pixels = 1 inches")
2. Em
Assuming that Font-size is set to 14px, then 1em=14px
3. Percentage
p{font-size:12px;line-height:130%}
Front-end Development 〗html/css Basics Learning Notes
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
