前端部分

前端部分

我们使用两周的时间来学习前端，主要为了学习搭建软件界面，包含了HTML、CSS、JavaScript、jQuery。

HTML（hyperText Markup Language）超文本标记语言

HTML的历史

1990年左右诞生的，（万维网之父），HTML的互联网基石

HTML的版本变迁

HTML1.0 è HTML2.0 è HTML3.0 è html4.0 è html4.01 è xhtml

[if !supportLists]ð [endif]HTMl5

Html网页的编写

    

    标题

  网页内容

HTML的常用标签

b i u del strong em div p span a img video audio header section footer table td thead tbody tr th ol li ul li dl dd dt

form表单

form标签 action属性、method属性 enctype（文件上传）

面试题：http的常见提交方式get post delete put header connect option trace

http://blog.csdn.net/github_33261002/article/details/50821718

Input type：text /password /file /color /checkbox /radio /email /url /number /submit /reset /button /image /hidden /week /year  /datetime /date /time /range

Textarea： cols rows

Select： Option

CSS（cascading style sheet）层叠样式表

css书写位置问题

[if !supportLists]a) [endif]写在标签内部的style属性上

[if !supportLists]b) [endif]Style标签内部

[if !supportLists]c) [endif]*.css文件 使用link标签引入 rel=“stylesheet”

CSS选择器

[if !supportLists]1、 [endif]基本选择器

[if !supportLists]a) [endif]Id选择器 #

[if !supportLists]b) [endif]Class选择器 .

[if !supportLists]c) [endif]标签选择器

[if !supportLists]d) [endif]通配符选择器*

[if !supportLists]e) [endif]逗号选择器

[if !supportLists]2、 [endif]包含（范围）选择器

[if !supportLists]a) [endif]子代选择器>

[if !supportLists]b) [endif]后代选择器空格

[if !supportLists]3、 [endif]属性选择器

[if !supportLists]a) [endif]属性是否存在div[id]

[if !supportLists]b) [endif]属性存在，并且值为xx div[id=’ljh’]

[if !supportLists]c) [endif]*=

[if !supportLists]d) [endif]^=

[if !supportLists]e) [endif]$=

[if !supportLists]4、 [endif]css3选择器

http://www.w3school.com.cn/cssref/css_selectors.asp

CSS常用样式

宽（width） 高（height）边框border圆角效果弧度（border-radius）前景色（color）背景（background） 透明度(opacity) 行高（Line-height）阴影效果（文本阴影text-shadow盒子阴影box-shadow）位置浮动（float）鼠标样式（cursor）display（block ,inline-block）

 font   clear z-index

 定位问题（position）

Div+css网页布局

CSS3动画（变换，过度，关键） 

Div+css的网页布局

项目总结：

电商首页

JavaScript

环境的搭建

开发环境：记事本sublime 、pycharm、hbuilder……

运行环境：浏览器chrome

JavaScript的发展历史（了解）：

Hello world

Alert

Confirm

Prompt

变量

数据类型

基本数据类型：

数字

字符串

Boolean

NaN

undefined

null

复杂数据类型:一切皆对象

常见的运算符

自加和自减（python中没有）

三大流程

顺序、分支（选择）、循环

函数

function funcName([参数列表]) {

   //函数体

   [return 返回值]

}

几个内置对象(掌握)

String：

属性：length 表示字符串长度

方法：indexOf(target) lastIndexOf(target)  charAt(index) substr(start[,length]) substring(start[,end]) slice() concat split

Math:

属性：PI E

方法：abs sin tan random floor ceil round sqrt pow

Date：

Var myDate = new Date([format])

Array：

Push pop shift unshift splice slice concat sort reverse 

BOM和DOM

|-- Window

|-- history

Length

Go(count)

Back()

forward

|-- location

reload()

host

hostname protocol href port search hash

|-- screen

Height

Width

|-- navigator

UA（userAgent）

|-- document

DOM编程

DOM编程

[if !supportLists]1、 [endif]如何获取dom对象

[if !supportLists]2、 [endif]如何操作dom对象的内容

[if !supportLists]3、 [endif]如何操作dom对象属性

[if !supportLists]4、 [endif]如何操作dom对象的样式

事件

事件的三元素

JavaScript绑定事件的几种方式

常规的事件

jQuery：

什么是jQuery

jQuery的选择器：

jQuery的动画：

jQuery的DOM操作

jQuery事件

jQuery的其他函数

TzyU7��3��#5