Web-front-end knowledge Learning for easy iOS development

First, the HTML

1. What is HTML

Each display on the page is a label, the entire page is made up of tags,html Code content control is the content of the page display, the content of the code is presented in the form of tags. The tag element is the most fundamental thing in HTML.

1. tags, properties ----- can be learned by looking at www.w3school.com , which has a detailed tutorial
2. Relationships between Tags: one tag is called a parent-child relationship, or a sibling relationship in another label.
3. Type of label (element)

A) block-level element(block): Exclusive row, can be arbitrarily modified size

b) inline element (inline): Multiple inline elements can be displayed on the same line, cannot be modified, size depends on the content

c) inline block-level elements (inline-block): Multiple inline block level can be displayed on the same line, can be arbitrarily modified size, not set the size, the default size depends on the content of how much

1. Box model: The elements of the tag are displayed in a box model, with border (margin), bounding box (Border), padding (padding) , the contentsof which are set up one layer at a level. Specific illustrations can be Baidu.
2. Common Properties

A) Font-size: the size of the font

b) Color: Text color

c) Background: Background

d) Display: The type of block,inline,inline-block, None

e) Padding

f) Margin

1. Standard flow: The layout of a Web page is a top-to-bottom, left-to-right arrangement, which is a "standard" arrangement, so called a standard flow.
2. Out of standard flow: some content does not want this kind of the normal way, need to break away from the standard flow, to form a free or absolute position, there is a departure from the standard flow.

A) float(float):left, right property, used to set the window around

b) Absolute positioning :p osition:absolute,right:0px,bottom: 0px This setting is in the lower right corner of the position, set the parent node positon to reletive, Then the relative object becomes the parent node, and when set, the principle is: the child is the absolute Father

Second, CSS

1.html Code content control isthe content of the display,HTML content, display style is controlled by CSS

2.CSS Style control - selector

A) Tag Selector : TagName

b) class selector:. ClassName

c) Id selector:#id

d) descendant selector ( separated by spaces between multiple selectors ):tagname. ClassName. ClassName tagname

e) Group selector (separated by multiple selectors):TagName,. ClassName, TagName tagName

f) Direct descendant selector ( > separate between multiple selectors ):tagname >. classname

G) Property selector:tagName"arrtname = "attributevalue""

h) Selector combination (multiple selectors glued together):tagname.classname#id

i) numerical control of the numerical priority: each selection of the controller has a value to control, the combination of the highest value to choose who,! Important is the largest.

j) Pseudo-class: Primarily controls the display of its elements under certain conditions : TagName:hover

Third, JS

1. JS is a lightweight programming language, is a scripting language, is the sequential implementation of the language, do not need to be edited to execute, mainly in the browser to perform
2. The base of the node
3. This operation (CRUD Additions and deletions)

A) Create:

var div = document.createelement (' div ');

Document.body.appendChile (' div ')

b) Read:

Var div = document.getelement (' div ');

Var div = document.getelementsbytagname (' div ') [0];

And so on.

c) Update

' var img = document.getElementById (' logo ');

IMG.SRC = ' Imges/01.png '

D) Delete

' var img = document.getElementById (' logo ');

Img.parentNode.removeChild (IMG);

Iv. JQuery : Powerful JS frame, inside use JS encapsulates a number of controls and features

Baidu Search "JQuery Chinese Document" There is a lot of detailed content

1. Finding elements through selectors

A) $ (' selector ')

b) JQuery supports most CSS selectors

1. Property manipulation

A) Get the attribute:$ (' selector '). attr (' attribute name ')

b) Set the property : $ (' selector '). attr (' attribute name ', ' attribute value ');

1. Show and Hide

A) Display:$ (' selector '). Show ()

b) Hide:$ (' selector '). Hide ()

c) Show and hide switch back and forth : $ (' selector '). Toggle ();

1. Event Bindings

A) Click events

$ (' selector '). Click (function () { Write what you need to do here })

Chained programming:$ (' selector '). Click (function () {Write what you need to do here }). Show

Five. HTML5 Framework (mostly written for mobile devices)

1. Concept

A) There is a HTML5 Framework, write a simple few lines of JS Code, you can achieve a very beautiful phone interface

b) Html Framework encapsulates the operation of a large number of DOM nodes, encapsulating a large number of CSS styles

c) The requirements of JS is relatively high, the requirements for CSS is not high

1. The common HTML5 Framework
2. Photogap
3. JQuery Mobile
4. Sencha-touch

Web-front-end knowledge Learning for easy iOS development