便于iOS开发的网页前端知识学习

一、HTML

1. 何为html

 页面上每一个显示的内容都是标签，整个页面都是由标签构成的，html的代码内容控制的是页面显示的内容，这些内容的代码呈现方式都是标签。标签元素是html最根本的东西。

1. 标签，属性 -----可以通过查看www.w3school.com来学习，里面有详细的教程
2. 标签之间的关系 ： 一个标签在另一个标签的里面叫做父子关系，或者是平级的兄弟关系
3. 标签（元素）的类型

a) 块级元素（block）：独占一行，能够随意的修改尺寸

b) 行内元素（inline）：多个行内元素能够显示在同一行，不能修改尺寸，尺寸决定于内容的多少

c) 行内块级元素（inline-block）：多个行内块级能够显示在同一行，能随意修改尺寸，不设置尺寸，默认的尺寸取决于内容的多少

1. 盒子模型：标签的元素都是以盒子模型的方式进行显示的，有边界（margin）、框边（border）、填充（padding）、内容（content）一层一层的套起来的。具体图示可百度。
2. 常用属性

a) Font-size : 字体的大小

b) Color：文字颜色

c) Background：背景

d) Display：显示的类型block，inline，inline-block，none

e) Padding 

f) Margin 

1. 标准流：网页的布局方式都是一种从上到下，从左到右的一种排列方式，这是一种“标准”的排列方式，所以叫做标准流。
2. 脱离标准流：有些内容不想要这种中规中矩的摆列方式，需要脱离标准流，形成一种自由的或是绝对的位置，这里就出现了脱离标准流。

a) Float（浮动）：left、right属性，用来设置靠窗口的左右

b) 绝对定位:position:absolute、right：0px、bottom：0px 这样设置是在右下角的位置，设置父节点的positon为reletive，那么相对的对象就成了父节点，设置的时候遵守的原则就是：子绝父相

 

二、CSS

1.html的代码内容控制的是显示的内容，html只管内容，显示的样式就是由CSS控制

2.Css样式的控制-选择器

a) 标签选择器:tagName

b) 类选择器：.className

c) Id选择器：#id

d) 后代选择器(多个选择器之间用空格隔开)：tagname .className .classname tagName

e) 群组选择器（多个选择器之间用，隔开）：tagName, .className , tagname tagname

f) 直接后代选择器（多个选择器之间用>分开）：tagname > .classname

g) 属性选择器：tagName【arrtname = “attributeValue”】

h) 选择器组合（多个选择器黏在一起）：tagName.className#id

i) 数值控制的数值优先：每一个选择控制器都有一个值来控制，组合起来值最大就选择谁， ！Important是最大的。

j) 伪类：主要控制其元素在某些特定状况下的显示效果 :tagName：hover

 

三、JS

1. JS是一门轻量级的编程语言，是一门脚本语言，是顺序执行的语言，不需要编辑就可以执行，主要是编浏览器进行执行
2. 节点的基
3. 本操作（CRUD增删改查）

a) Create: 

var div = document.createElement(‘div’)； 

document.body.appendChile(‘div’)

b) Read:

Var div = document.getElement(‘div’);

Var div = document.getElementsByTagname(‘div’)[0];

等等方法

c) Update

`var img = document.getElementById(‘logo’);

Img.src = ‘imges/01.png’

d) Delete

`var img = document.getElementById(‘logo’);

img.parentNode.removeChild(img);

 

四、JQuery：功能强大的JS框架，里面使用JS封装了许多的控件和功能 

百度搜索“JQuery中文文档”里面有非常多详尽的内容

1. 通过选择器查找元素

a) $(‘选择器’)

b) jQuery支持绝大部分的css选择器

1. 属性操作

a) 获得属性：$(‘选择器’).attr(‘属性名’)

b) 设置属性: $(‘选择器’).attr(‘属性名’，‘属性值’)；

 

1. 显示和隐藏

a) 显示：$(‘选择器’).show()

b) 隐藏：$(‘选择器’).hide()

c) 显示和隐藏来回切换:$(‘选择器’).toggle();

1. 事件绑定

a) 点击事件

$(‘选择器’).click(function(){ 这里写你需要做的事情 })

链式编程：$(‘选择器’).click(function(){ 这里写你需要做的事情 }).show

五．HTML5框架（大部分都是为移动设备而写的）

1. 概念

a) 有个html5框架，编写简易的几行JS代码，就能实现非常漂亮的手机界面

b) Html框架封装了大量的DOM节点的操作，封装了大量的css样式

c) 对JS的要求比较高，对CSS的要求并不高

 

1. 常见的HTML5框架
2. PhotoGap
3. jQuery Mobile
4. Sencha-touch