tags (space-delimited): Javaweb
Original address DTD document model and HTML base
<!doctype html>
is the most popular document model, that is, the HTML5 model. the meaning of common labels
<meta charset= "Utf-8" > indicates that the encoded character set for the specified document is utf-8.
<m eta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no" >
Viewport is used to configure some of the parameters of the user's portal, mainly for setting parameters such as the zoom ratio of the mobile end, which is specified as the width of the device, Maximum-scale is used to specify the scaling, and is specified as 1.0 to indicate that scaling is not allowed. of Semantics
Semantics refers to the use of HTML tags when we should pay attention to choose the right label to express, such writing will make our HTML structure clear, logical , greatly facilitate the reading and future maintenance . Common Labels
To develop a good habit of writing more notes, the HTML hierarchy is clear.
Such as:
<!--header-->Such annotations apply to scenarios where a clear structure cannot be seen directly through HTML elements.
Alt and Title attribute in the picture label.
The Alt property is the picture that is displayed when the picture cannot be displayed, and title is the text that appears when the mouse hovers.
The target property of a label is used to indicate how the link is opened: _blank opens in a new window. _self opens in the original window.
<ol> is a sequential table. (Ordered list)
<ul> is an unordered list. (Unorderd list)
<table> Form
<tr> Line
<td> a cell
<th> Table Header Cell
The RowSpan property is a merged row
The Colspan property is a merged columnIt is common for tables to be designed with tools such as Dreamweaver, but now it is rare to use a table.
The <iframe> tag represents an inline frame that can be understood as a browser in the browser . form Controls
Note: All form controls should be placed in the <form></from> tab.
| Control | Description |
|---|---|
| < select > | Dropdown selection Box |
| < CheckBox > | Multi-selection box |
| < CheckboxGroup > | Grouping for multiple-selection boxes |
| < Radio > | radio button |
| < radiogroup> | Single select group |
| < textarea> | Large area of text |
| < input type= "file" > | Uploading files |
| < fieldset> | Group the controls to be made |
| < input type= "hidden" > | An input control that is not visible, but can pass values to the background |
| < input type= "image" > | Picture buttons |
< input type= "TEL" > < input type= "number" > Digital type and telephone type input, however, support is not good.
< input required> indicates that the input box requires a required fill.
< input autofocus> represents automatic focus.
< label for= "Input_name" > indicates that the label text is clicked to focus on the control input_name. CSS Basics three ways to use CSS in inline styles \
<table style= "font-size:20px;" > Internal style written in < head> tags
<style type= "text/css" ></style> external style
<link rel= "stylesheet" type= "Text/css" "href=" "> CSS selector
6 types of common selector tag selectors
Table {
color:red;
}Style class selector for all table in the page
. btn{
line-height:15px;
}Styles < input class= "BTN" > ID selector for all BTN classes
#navBtn {
bgcolor: "Orange";
}Represents a style with an ID of navbtn <input id= "navbtn" > Descendant inheritance Selector
. container table{
margin:0px;
Represents the style group selector for all table under class container
. container. wrapper{
padding:0px;
Represents a Style property selector that both the container class and the wrapper class have
Input[type= "text"]{
color:red
}The style that represents the input space for the Type property to text. Pseudo class Selector
A:link{color: #FF0000}/////* A:visited{color: #00FF00}/* The link that has been visited, such as the red/A in the midpoint of the Baidu search result
: Hover{color: #FF00FF}/* The style of mouse hover * * * * *
a:active{color: # #0000FF}/* After clicking on the
/p:before/after{/* insert content before/after each P element, and set the style for the inserted content * * Content
: "Lines:-";
Background-color:yellow;
color:red;
Font-weight:bold;
}priority of CSS selectors
Important > Inline > Id > class > Attributes CSS core model floating float
Let the original elements out of the normal document flow, to achieve the left and right arrangement, without setting the width of the width will become the minimum width. If a div is set to float, then the width becomes minimal and no longer the entire row.
Just like waiting in line to buy a ticket, suddenly someone flew up and rode to someone else's neck. Positioning position
Relative: relative positioning, refers to the position after the offset, the original location also occupies the document flow, offset position is relative to the original position.
Absolute: After the offset, the original position is gone, the element is separated from the document stream, and is offset by the position of the element that is absoute or relative in its nearest parent container, and is not normally used in its parent element to locate the absolute/relative. So it's relative to the entire document < body> offset.
Fixed: fix positioning, no matter how the browser scrolls, the position is unchanged.
Static: The default positioning, that is, document flow positioning. Row Gao Line-height
Normal: Default reasonable row height
Number: Sets numbers, which are multiplied by the current font size
Length: Fixed line spacing
%: Based on the percentage of the current dimension size
Inherit: Inherits from parent node level, vertically centered
Text-align:center Text Center
Margin-left:auto;margin-right:auto; can also be centered
Valign:middle Vertical Center
Align:middle horizontally centered cell TD used in table
Example: Using div to simulate the center of a table cell
. outer{
display:table;
inner{
Display:table-cell;
Vertival-align:middle; /* Vertical Center */
}Note: The width of an element is set particularly large, so it is limited by the parent element, and the height is unrestricted.
Example: How to center a div relative to the parent element.
. middle_div{
width:200px;
height:200px;
top:50%;
left:50%; /* Center The top left corner of the box, where 50% is relative to the parent element * *
margin-left: -100px;
Margin-top: -100px; /* Set Margin-top and margin-left to -0.5 * Height and -0.5 * Width to ensure the center of the box is centered/
position:absolute;/* Absolute positioning, the original location disappears, Need to be aware that the parent element must have positon:absolute/relative otherwise it is relative to the entire page center * *
The default elements have their own margin and padding, and if you need to remove the defaults before you develop them, you need the following code:
*{
margin:0;
padding:0;
}Standard/Weird box model
Standard box Model (the Consortium model):
The width or height of the Width/height model is computed as follows: = content.
Bizarre box model (ie box model is generally used for mobile end layout):
The width or height of the bizarre box model is computed as follows: Width/height = content + padding + border.
If we calculate the length and width of a box, we are generally the thickness of the box itself, plus the space in the box, in the IE box model and the model of the universal box, we will feel that the IE box model is more in line with the logic.
And we take advantage of a CSS3 attribute Box-sizing:content-box | Border-box | Inherit, the default value is the Content-box standard box model, width or height only limits the width and height of the content, the actual width or height of the box is the width of the content + padding value + border value. If the value is Border-box, then the element is a weird box model, and the width and height limit the size of the box and will not be affected by padding and border.
If the page uses the standard/weird box model as a whole, the following styles are required.
*{
-webkit-box-sizing:content-box; Compatible with chrome and Safari
-moz-box-sizing:content-box; Compatible with Mozilla browser
box-sizing:content-box;
}CSS Elastic box model
Double Wing layout Javascript Basics
JavaScript is a dynamic, weakly typed, prototype based, interpretive language. Variable Type
JS variables are weakly typed, all variable types are objects, that is, everything .
However, you can also view specific types by typeof ().
Generally, there are several types:
| type name | Description |
|---|---|
| Number | Digital |
| String | String |
| Boolean | Boolean value |
| Object | Object |
| Array | Array |
| function | Function |
| Undefined | Not defined |
The declarations of several of the above variables:
var x = 123; typeof (X): number
x = "Zhang San Feng"; typeof (X): string
x = ture; typeof (X): boolean
x = ["Wang Yangming", "Xin Qiji", 1.618]; typeof (X): Object
x = function (x, y) {
//...
}
var y; typeof (Y): type of undefined when not assigned<script type= "Text/javascript" >
console.log ("Hello js!");
</script>nomenclature for variables and functions<script type= "Text/javascript" src= ". /script/jquery.min.js "></script>
Hump-style nomenclature: MyName, GetData; Switch Statement
Switch (true) {case
score <= && score >=: Level
= "C";
break;
Case score > && score <=: Level
= "B";
break;
Case Score > && case <=-level
= "C";
break;
Default: Break
;
}
The above notation is often used to simplify the IF Else statement
//case through Usage
switch (true) {case
score >=: Case
score >=:
Rate = "Pass";
Type or operation in if
//if (Score >= | | score >=)
}var str = "Hello"; alert (str.length); The Length property is a string of lengths var ret = parseint (str); The parseint global method is used to convert a string to an integer ret = parsefloat (str); Parsefloat is used to convert a string to a floating-point type Console.log (Str.charat (1));
The Charat method is used to get characters at a specific position of the string, only for string type str.substring (4,9); Str.substring (9,4); The effect is the same (4,9)/(9,4) from the 4th character of the string (subscript starting from 0) to intercept 5 characters to the 9th position before Str.substr (4,9); The substr is to intercept the specified length of the string from the specified location, where the result is that 9 of the characters from the beginning of 4 substr are not in the standard and do not recommend the use of Str.slice (4,9); The slice method is also used to take the string between the start position and the end position, and the argument can be negative u, when negative, where the position is computed from the tail of the string Str.slice (-3); Takes the three characters at the end of the string, and does not specify an ending position, which defaults to the tail str.indexof ("he"); Look backwards at the first position where a substring appears str.lastindexof ("ll"); Look for the first occurrence of a substring before you think of it. Return-1 Str.trim () when the lookup is not found;
Remove the space on either side of the string var matches = "Fat,sat,cat". Match ("at"); Matches.index; 1 matches.input; "Fat,sat,cat" Str.replace ("L", "P"); Heplo, just replace the first matching substring str.replace (/l/g, "P"); Using regular/g global matching can realize replaceall var strarray = "Hello|javascript|hahah". Split ("|"); Splits the string, returns an array of strings Hello, JavaScript, hahah StrarRay = "Hello|java|script". Split ("|", 2); Splits the string and returns an array length of 2, that is, Hello,java var arr = new Array (4);
Object declaration, using the new keyword var arr = ["Small East", 3, "large macro"];//array definition, defined by [], {} is object var obj = {name: macro, age:28}; ARR[1] = [0,1,2]; Array can be nested arrays, when the structure of the array into ["Small East", array, "macro"], through arr[1][0] to access the array arr.length;
The array length at this point is still 3 because typeof ([0,1,2]) is an object
Array Object
var a = [1,2,3]; A.tostring (); "1,2,3" A.push (4); Adds an element at the end of the array that returns the length of the array 4, similar to the stack LIFO a.pop (); Pop-up end of the element, similar to the stack a.join ("| |"); with | | Each element of an array assembled as a spacer is a string 1| | 2| | 3 A.join (); When no parameters are used by default, splicing, return "1,2,3" A.concat (b); Returns a two array of a,b concatenated array a.shift (); Deletes and returns the first element of the array, similar to the column of the queue, FIFO a.unshift ("1");//Insert an element in the head of the array, and return the length of the array a.slice (1,3);
Returns the child array [2,3] slice (start, end); A.slice (-2); Returns a child array of the end two elements [2,3] A.splice (index, Howmany, item1,..., itemx); For Add/Remove items in an array, returns the deleted item: index Specifies the deletion/Add location, Howmany specifies the number of items deleted, the item is selected, and the new item A.splice (1,2) is added to the array; Delete two items from 1-bit a.splice (1,0,4); Do not delete items from 1-bit, add an item 4 a.sort (); Each item in an array is sorted in character order, changing the array itself//ecmascript 5.0 new Array Method Arr.map (Callback[,thisarg]);
Callback will be automatically passed in three parameters: the array element, the element index, the original array itself a = [1,4,9]; var roots = A.map (MATH.SQRT);
The map method returns a new array of the return values of each element of the original array, called a specified method, which can be used to find the square root of each element in the group [1,2,3];
Arr.filter (Callback[,thisarg]); The filter method returns a new array of elements that match each element of the original array with the specified filtering rule, var filtered = Arr.filter (function (ele) {return ele > 2;
)//This will filter each element, and the elements that conform to the filter Rule form a new array as the return value [4,9];
Arr.some (Callback[,thisarg]);
The some method invokes a conditional function on each element, returning a true function IsBiggerThan10 (element, index, array) {return element > 10;} If one satisfies the condition. [1,2,11].some (ISBIGGERTHAN10); True [1,2,3,,6,8].some (ISBIGGERTHAN10);
False Arr.every (Callback[,thisarg]); The Every method invokes a conditional function on each element and returns true only if all elements satisfy the condition [11,12,13,5,15].every (ISBIGGERTHAN10); False [12,51,52,43,15].every (ISBIGGERTHAN10);
True Arr.reduce (Callback,[initialvalue]);
The Reduce method applies a function (left to right) for each value of the accumulator and array to reduce it to a single value. Callback is a function that executes each value in the array, containing four parameters accumulator: The value returned by the last call callback//or the supplied initial value initialvalue;currentvalue: The element being processed in the array; currentindex
: The index that is being processed in the array; array: a call to reduce. var sum = [0,1,2,3,4].reduce (function (a,b) {return a + B;}, 0); '//sum result is var flattened = [[0,1],[2,3],[4,5]].red
UCE (function (A.B) {return a.concat (b);}, []);
Flattened result is [0,1,2,3,4,5]; Arr.reduceright (Callback,[initialvalue]); With reduce, just right to left
JS objects and Functions
var obj = {
name: "Micheal Scofield",
age:28,
"function": "Blank", //member properties can be enclosed in quotes, you can use
the keyword "print": F Unction (prefix) {//member method
console.log (prefix + "\nname:" + THIS.name + "\nage:" + this.age + "\ngender:" + this.gender );
}
};
obj["location"] = "Fox River"; Add member
console.log (obj);
Console.log (Object.keys (obj)); Returns all the member keys, similar to the keyset
obj.print ("Hello JavaScript") in the map;all values in JavaScript are 64-bit floating-point decimals.
JS Small and medium calculation error, for accurate operation to be careful, such as 0.3/0.1 = 2.99999999999996
Nan represents a non-numeric value, but Nan!= nan, which is not equal to any value, and determines whether the isNaN (value) method is used for non-numeric values
Nan does Boolean operations as false, with 0, null, undefined, Nan, ""
isNaN (NaN) is true and is the only case of true.
Console.log (0.3/0.1); 2.999999999996
Console.log (isNaN (NaN)); Ture
Console.log (isfinite (Infinity)); False
Clog (parseint ("2.11"));//2
Clog (parseint (". 3")); NaN
Clog (parsefloat ("3.141582653e5"));//314158.2653
Clog (number ("3.5")); Forces the conversion of string to number
function Clog (v) {
console.log (v);
}Mounted on a prototype
Number.prototype.huawen = "Test"; Mounts a Huawen member
var t = new Number ("1") for the prototype of the number object;
Clog (T.huawen); Test
Object.prototype.huawen = "pattern"; Mount a Huawen member on the prototype for all objectsConstants: MATH.E Math.PI
Common methods:
math.round (3.5); Math.Round ("3.5"); 4 Rounded Math.Abs (-3); 3 Absolute Value math.min (1,2,3); 1 Find the minimum value math.min ([1,2,3]); NaN cannot pass array math.max (1,2,3); 3 Find the maximum value Math.min.apply (null, [1,2,3]); Each element in the array can be treated as a parameter Math.floor (3.7);//floor function, go to the lower bound integer 3 Math.ceil (3.1); Ceiling function, go upper bound integer 4 math.random 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
