HTML Quick Review

1, emphasizing em with italic
Strong in bold
2,<q> quoted text </q>
blockquote tag Long text reference block-level reference
3,address Add contact address information for Web pages
4,<code> Line Code </code> <pre> Multiline Code </pre>
5, unordered list ul>li with sequence list Ol>li
6,div is a separate section.
7, table tbody,tr row, th table header of a cell, TD a Cell
Summary <table summary= "Table Introduction text" ></table>
Title <table> <caption> Title text </caption></table>
8,<a href= "Destination url" title= "mouse over displayed text" target= "_black" ></a> open in new browser
<a href= "Mailto:[email protected" > Send </a> Send mail
9, image can make gif,png,jpeg image file
10,<form action= "server file; The data entered by the browser is transmitted to another place" method= "Transfer Mode" ></form>
11,<input type= "Text/password" name= "Name: text box named, background programmer use" value= "to set the default value for the text input box"
12, text field <textarea name= "" id= "" cols= "30 Columns" rows= "10 Rows" ></textarea>
13,<input type= "Radio" checked= "checked" value= "submit data to Server value" name= "name the control, background programmer use" > Radio
<input type= "checkbox" checked= "Checked" value= "submit data to Server value" name= "name control, background programmer use" > check box
14,<select name= "" id= "" multiple= "multiple" > <!--dropdown box---
<option value= "Value submitted to Server" Selected= "selected" > Displayed value </option> selected= "selected" is selected by default
</select>
<label for= "Control ID Name" ></label>
CSS Cascading Style Sheets
1, #id选择器. Class Selector
The child selector. Food>li The first generation of child elements is selected.
. First span {} descendant selector
a:hover {color:red;} pseudo-class selector.
Group Selector H1,span
16, text typesetting: text-indent:2em; indent.
Line spacing (row height) line-height:1.5em;
letter-spacing:50px;
Text-align:center; The text in the picture is set horizontally in the center.
Block element: </div>,</p>,h1. H6,ol,ul,dl,table,address,blockquote,form
Inline elements: inline block elements, A,span,br,i,strong,lable,q,var Cite,code
Inline block element, Img,input.

Box Model principle:
BORDER:2PX solid red;
The actual width of an element = left Border + Left box + Left padding + content width + right fill + right Border + right
Layer Model: Absolute positioning: Absolute is absolutely positioned relative to the closest parent containing block with a positional attribute.
Relative positioning: The position of the relative relative to the previous position is left intact before the offset.
Fixed positioning: position:fixed relative coordinates are the view itself
The father of the son.
Font:italic small-caps Bold 12px/1.5em "song Body", Sans-sereif; Font-size and font-family must be specified.
Font:font-style | | Font-variant | | Font-weight | | Font-size | | Line-height | | Font-family

Horizontal Center Summary: variable-width block elements.
1, add table tag Margin:auto;
2, set Display:inline, set the variable width element, text-align:center;
3, set position:relative and left:50%, offset the element to the left by 50% by means of relative positioning, that is, to reach the center.
Vertically centers a single line of text that determines the height of the parent element
Height and line-height are aligned to achieve

Parent element Height-determined multiline text, multiple lines of text picture vertically centered method There are two ways (method one)
Use table, Vertical-align:middle; Set as table cell display
<table> <tr><td> <!--TD Default Vertical-align:center--></td></tr></table>
Method Two:
Display:table-cell; (Set to table cell display) Vertical-align:middle; IE8 or more
Recessive change of display type; position:absolute; 2,float:left/right; The display type of the element will automatically become Display:inline-blok;


Javascript
1,confirm (); message dialog box prompt ();
Opens a new Window window.open ([url],[window name],[parameter string]);
Window.close ();//close this window
< Window object >.close (); Close this window
DOM node---1, element node, 2 attribute node, 3, text node
document.getElementById ("id");
object.innerhtml;
Change the style of HTML object.style.property=new style;
BackgroundColor Setting the background color
Height sets the altitude of the element
Width to set the widths of elements
Color sets the colors of text
Font sets the properties of all fonts on one line
fontFamily Setting the font family of elements
FontSize Setting the font size of an element
Show and Hide
Object.style.display =value;
None this element is not displayed (hidden)
Block this element will be displayed as a block-level element (display)
Object.classname=classname; Control class name
Logical operators: B>a && b<c//&& and the meaning of the short circuit. A false or false.
|| Or maybe it's true.
Precedence between operators
High ———— > Low arithmetic operators > Comparison operators > Logical operators > Assignment operators
One-dimensional array: arr[], arr[][],
Switch must assign an initial value that matches each case
for (); while (Boolean) {//until the condition does not meet} do{//loop body}while (judging condition) executes at least once the loop body; break exits the loop; continue skips this cycle
Event: OnClick Mouse click event
onMouseOver Mouse over Event
onmouseout Mouse Move Event
onchange text Box content Change Event
Onselect text box content is selected event
onfocus Cursor Aggregation
onblur cursor Away
OnLoad Web page Import
OnUnload Close Web page

String charAt (index); Returns the character at the specified position.
IndexOf (Substring,startops) returns the position of the first occurrence of a string within the specified string; no return-1;
Split (the number of times the specified place begins splitting, dividing) splits the string into arrays and returns the array.
SUBSTRING (startpos,stoppos); string interception.
SUBSTR (starting position, intercept length);
Math ceil () rounding up
Floor () Rounding down
Round () rounding
Random () number 0-1 not 1
Array concat (); concatenate; Returns a new array without changing the original array;
Join ()
Reverse () Reverses the elements in the array, and the method changes the original array without rebuilding the new array.
The slice (start, end) method returns the selected element from an existing array, without changing the original array, returning the new array,
Sort (causes elements to be sorted in a certain order) if you do not specify to sort by Unicode
Sort (Funcction (A, B) {return-A-B;})
Window object: Window is the core of the BOM, the Window object refers to the current browser window,

Timer: SetTimeOut () executes code after the specified delay time. Cleartimeout () Cancel the settimeout setting
SetInterval () executes the specified code clearinterval () to cancel the Setintval () setting at every specified time.
Window.history. [Properties | method]
Length: Returns the number of amount URLs in the browser history list;
Back () previous URL ===> equivalent to go (-1)
Forward () Next URL
A specific page in the Go () list
The Navigator object contains information about the browser and is typically used to detect the version of the browser and operating system;
appCodeName a string representation of the browser code name
AppName returns the name of the browser
AppVersion returns the platform and version information of the browser
Platform return to the browser's operating system platform
UserAgent returns the value of the user-agent header of the server sent by the client
function Validb () {
var u_agent = navigator.useragent;
var b_name= "Failed to identify the browser";
if (U_agent.indexof ("Firefox") >-1) {
B_name= "Firefox";
}else if (U_agent.indexof ("Chrome") >-1) {
B_name= "Chrome";
}else if (U_agent.indexof ("MSIE") >-1&&u_agent.indexof ("Trident") >-1) {
B_name= "IE (8-10)";
}
document.write ("B_name:" +b_name+ "<br>");
document.write ("U_agent:" +u_agent+ "<br>");
}

Screen Object
Window.screen.height height of the screen, per pixel
Width of the screen, per pixel
. colordepth the number of color bits represented by the user's browser, usually 32 bits;
. pixeldepth the number of color bits represented by the user's browser, usually 32 bits (number of bits without pixels) (ie not supported);
. avaiheight window can use the screen height, per pixel
. availwidth window can be used for screen width, per pixel
Dom
NodeName returns a string whose content is the name of the given node
NodeType returns an integer that represents the type of the given node
NodeValue returns the current value of a given node
Traversing tree nodes
ChildNodes returns an array that is composed of the child nodes of the given element node
Firschild returns the first child node
LastChild returns the last child node
ParentNode returns the parent of a given node
NextSibling returns the next child node for a given node
Previoussibing returns the previous child node of a given node
DOM Operations
CreateElement (Element) to create a new element node
createTextNode () Creates a new text node with the given text
AppendChild () Adds a new child node after the last child node list of the node is specified
InsertBefore () Inserts a given node in front of a given child node of a given element node
RemoveChild () Removes an auto child node from a given element
ReplaceChild () Replaces one child node in a given parent element with another node

Document.getelementbyname () returns the collection of node objects with the specified name
Document.getelementbytagname () Binding of the Tag node object
GetAttribute (name) Gets the value of the property through the attribute of the element node
SetAttribute (Name,value) can add a specified name and be worth a new attribute, live to set the existing property to the specified value
DOM node gets three important attributes
Name of the 1,nodename node
1, the nodename of the element node is the same as the label name
2, the nodename of the attribute node is the name of the property
3, the nodename of the text node is always #text
4, the nodename of the document node is always #document
The value of the 2,nodevalue node
The nodevalue of the element node is undefined or null
The nodevalue of a text node is the text itself
The nodevalue of the attribute node is the value of the property
Type of 3,nodetype node---read-only
Element type node type
Element 1
Property 2
Text 3
Note 8
Document 9
Access child node ChildNodes accesses the list of all child nodes under the selected element node, and the returned value can be seen as an array that has the length property.
Compatibility issue: The amount of whitespace between nodes, in the Firefox,chrome,opera,safai browser is a text node. IE is not a node

ParentNode Accessing the parent node
FirstChild first Item
LastChild Last Item

Access the node immediately following a sibling node nextsibling a node
PreviousSibling the node immediately before a node
<script>
function get_nextsibling (n) {
var x =n.nextsibling;
while (x.nodetype!=1) {
x=x.nextsibling;
}
return x;
}
</script>
Insert Node appendchild () Adds a new child node after the list of the last child nodes of the specified node
InsertBefore (newNode, node) inserts a new child node before the existing child node
The delete node RemoveChild () method removes a node from the list of child nodes, which returns the deleted node if the deletion succeeds, and returns NUL if it fails;
ReplaceChild replaces the element node, implements the substitution of the child node object, and returns a reference to the substituted object. (Newnode,oldnode)
Create element node createelement (tagName) to create ELEMENT nodes
createTextNode (string); Create text node
Get the size of the browser window = = = (excludes toolbars and scrollbars)
For Ie9+,chrome,firefox,opera and Safari
Window.innerheight the internal height of the browser window
Window.innerwidth The interior width of the browser window
To ie8,7,6,5
Document.documentElement.clientHight represents the current height of the window in which the HTML document resides
Document.documentElement.clientWidth represents the current width of the window in which the HTML document resides
Or
Document.body.clientHeight
Document.body.clientWidth
JavaScript scenarios that are useful in different browsers
var w = document.documentElement.clientWidth | | Document.body.clientWidth;
var h = document.documentElement.clientHeight | | Document.body.clientHeight;


Gets the height of the content area of a Web page scrollheight and ScrollWidth
For IE Opera
ScrollHeight is the actual height of Web content, can be less than clientheight;
Compatibility issues with browsers
var w = document.documentElement.scrollWidth | | Document.body.scrollWidth;
var h = document.documentElement.scrollHeight | | Document.body.scrollHeight;
Gets the height and width of the page content, including edges such as scrollbars, that change as the window's display size changes. ）
Offsetheight =clientheight+ scroll bar + border
Browser compatible
var w = document.documentElement.offsetWidth | | Document.body.offsetWidth;
var h = document.documentELement.offsetHeight | | Document.body.offsetHeight;
Web page curl distance and offset
ScrollLeft: Sets or gets the distance between the left edge of the given object and the leftmost of the window.
ScrollTop:
Offsetleft
Offsethight;

HTML Quick Review