javascript和css和html,html、css和javascript简介

前言

如果把一个B/S架构的软件比作为一个人的话，那么html就构成了这个人身体内的骨头，css则构成了人体中的皮肤，JavaScript则构成了人的肌肉和脂肪。

HTML

html在页面中的角色可以看做是人体内的骨架，一个页面中的基本html结构为：

Portal

在我们的开发中，使用的最多的标签就是div，在了解div之前需要先了解html中块级元素与行内元素之间的区别，一般情况下，块级元素只能独占一行，不能与其他任何元素并列，而行内元素则可以在一行内有多个存在。但是通过样式的设置可以却让两个块级元素并排显示

CSS

css在页面中的角色可以看做一个人的皮肤，一般称作样式表，它决定了页面中标签的样式，包括标签的宽度、高度、填充背景(可以是颜色或者图片)、边框等等，例如我们要将上方div的宽度设置为200像素，高度设置为100像素，背景色设置为红色则可以些为：

div .box-class{

weight : 200px;

height : 100px;

background-color : #FF0000

}

css中的选择器

在这里我用到了css中的类选择器，类选择器通过符号点开头，选择标签中已经定义好的类名，此处我写作div .box-class则意为"选择所有div中class为box-class的标签"，css中还有很多选择器包括id选择器，属性选择器，标签选择器，详情见css选择器的介绍，不过在我们的项目中大多使用的是类选择器。

在css中还有个很重要的概念就是盒模型，盒模型分为标准盒模型与IE盒模型，详细信息见标准盒模型与IE盒模型的区别

JavaScript

JavaScript在页面中的角色可以看做一个人的肌肉，主要负责一些动作的完成，也就是我们常用到的与页面的交互，我们可以通过js来对页面中的html标签进行操作，可以为标签修改样式，也可以为标签绑定事件，JavaScript与css一样同样有多中选择器，最常见就是ID选择器了:

var boxElement = document.getElementById("box_id");

boxElement.onclick = function sayHello(){

alert("Hello");

}

这里我们就通过id选择了一个id为"box_id"的标签,同时为它绑定了鼠标点击事件

但是在我们的项目中，对于标签的操作基本不会用到上面这种原生js写法，更多的则是用到js框架jquery.JavaScript的更多语法可以参考链接JavaScript标准参考教程

jQuery

如果说JavaScript是肌肉的话，那么jQuery则是肌肉群，通过不同的肌肉群的配合可以打出华丽的组合拳。运用jQuery我们可以更方便的选择到一个节点

$("#box_id").bind('click',function(){

alert();

});

id选择器是目前我们使用的最多的选择器，更多的选择器可以参考链接jQuery选择器

目前我们的Ajax请求也都是调用jQuery中的方法，例如：

$.ajax({

type : "POST",

url : '/Portal/categorys/',

data : JSON.stringify({

'name' : docSortName,

'pid' : pid

}),

dataType : 'json',

contentType : "application/json"

});

关于$.ajax()更多的介绍可以参考链接jQurey.Ajax