网页基础 html css javascript DOM Ajax

speed847

浏览: 467486 次
性别:
来自: 北京

最近访客更多访客>>

sqsgalaxys

zhaoyirui

zjsx12

luoyifan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web Frontend

HTML CSS JavaScript Ajax XSL

http://www.cainiao8.com/

=================================================================================

XSTL & XML

xstl功能上和css类似。下面是xstl的例子。再后面有 css & xml 的例子

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
  <html>
   <body>
    <center>
     <table border="1">
      <tr>
       <td>Number</td>
       <td>Name</td>
       <td>GRE Score</td>
      </tr>
      <xsl:for-each select="classmates/student">
       <tr>
        <td>
         <xsl:value-of select="sid" />
        </td>
        <td>
         <xsl:value-of select="sname" />
        </td>
        <td>
         <xsl:value-of select="gre" />
        </td>
       </tr>
      </xsl:for-each>
     </table>
    </center>
   </body>
  </html>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="xml2.xsl"?>
<classmates>
<student>
  <sid>1</sid>
  <sname>name1</sname>
  <gre>1700</gre>
  <toefl>630</toefl>
  <tse>120</tse>
</student>
<student>
  <sid>2</sid>
  <sname>name2</sname>
  <gre>1800</gre>
  <toefl>599</toefl>
  <tse>110</tse>
</student>
<student>
  <sid>3</sid>
  <sname>name3</sname>
  <gre>1880</gre>
  <toefl>700</toefl>
  <tse>130</tse>
</student>
<student>
  <sid>4</sid>
  <sname>name4</sname>
  <gre>1600</gre>
  <toefl>660</toefl>
  <tse>110</tse>
</student>
</classmates>

=================================================================================

XHTML Basic

<html>

<head>

<title>This is the Title.</title>
</head>

<body>

<p>This is one section.</p>

<br/> Change the line.

<hr/> Add a horizontal line.

<strong>fontWeight:bold</strong>
<em>aaaa</em>
<i>aaaa</i>
<b>aaaa</b>

<a href="http://www.cainiao8.com/">Hyperlink</a>

<h1>Inside Link<a id="biaoti"></a></h1>
<a href="#biaoti">????</a>

<table summary="summary">
<caption>table——caption</caption>
<colgroup>
<col id="time" />
<col id="event" />
<col id="person" />
<col id="cost" />
</colgroup>
<thead>
<tr>
   <th scope="col">1th</th>
   <th scope="col">2th</th>
   <th scope="col">3th</th>
   <th scope="col">4th</th>
</tr>
</thead>
<tbody>
<tr class="odd">
   <td>1</td>
   <td>111</td>
   <td>11</td>
   <td>100</td>
</tr>
<tr>
   <td>2</td>
   <td>222</td>
   <td>22</td>
   <td>3000</td>
</tr>
</tbody>
</table>

<form>Name:<input type="text"name="user"/><br/></form>
<form>Password:<input type="password"name="pass"/><br/></form>

</body>

</html>

=================================================================================

CSS Basic

内部样式表

     /* 把标题的大小都定义为12个像素 */
     h2,h4 {font-size: 12px; display:inline;}
     -->
   </style>
</head>
<body>
<h1><a href="http://cainiao8.com/">菜鸟吧</a></h1>
<h2>的站长</h2>
<h3 style="display:none">是大傻瓜！傻瓜</h3>
<h4>爱吃大西瓜！</h4>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>
</head>
<body>
<h1 class="dabiaoti">我是页面最上端的标题1</h1>
<h1 id="daohang">我是页面左侧的标题1，用来导航</h1>
<h1 class="xinwen">我是页面新闻的标题1</h1>
<p class="xinwen">我是新闻的内容。</p>
</body>
</html>

行内样式表（内嵌样式表）

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" />
/*文件位置就是所处在的文件夹相对与当前网页的相对路径*/
</head>

字体属性

文字大小

   ……
   p.f12 { font-size: 12px; }
   p.f16 { font-size: 16px; }
   p.f20 { font-size: 20px; }
       ……
<p class="f12">我12像素</p>
<p class="f16"><span class="16">我16像素</span></p>
<p class="f20"><span class="20">我20像素</span></p>

文字样式

……
p.ita { font-style: italic; }
……
<p>我是正常样式</p>
<p class="ita">我是斜体</p>

文字粗细

       ……
         p.b { font-weight: bold; }
       ……
<p>我是正常的字体。</p>
<p class="b">我是粗体</p>
       ……

首行缩进

{ text-indent: 24px; }

文本颜色

……
p.lv { color: green; }
p.hong { color: red; }
……
<p class="lv">我是绿色的</p>
<p class="hong">我是红色的</p>

文本对齐属性

……
p.zhong { text-align: center; }
p.zuo { text-align: left; }
p.you { text-align: right;}
……
<p class="zhong">我的对齐方式是居中</p>
<p class="zuo"><span class="lv">我的对齐方式是左对齐</span></p>
<p class="you"><span class="lv">我的对齐方式是右对齐</span></p>
……

文本修饰

……
p.shang { text-decoration: overline; }
p.xia { text-decoration: underline; }
p.zhong { text-decoration: line-through;}
a.none { text-decoration:none; }
……
<p class="shang">上划线</p>
<p class="xia">下划线</p>
<p class="zhong">中划线</p>
<p ><a href="http://www.cainiao8.com/" class="none">
我是一个链接，但是没有下划线。</a></p>
……

背景颜色属性

背景图片

背景图片的重复设置

背景图片位置

将背景图片固定在页面的某个位置

无序列表的样式属性

……
<style type="text/css">
.w1 { list-style-type:circle;}
.w2 { list-style-type:square;}
.w3 { list-style-type:disc ;}
</style>
……
<ul class="w1">
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
<ul class="w2">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
<ul class="w3">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
……

有序列表的样式属性

……
<style type="text/css">
   .y1 { list-style-type:decimal ;}
     .y2 {list-style-type:upper-roman ;}
     .y3 {list-style-type:lower-roman ;}
</style>
       ……
<ol class="y1">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
<ol class="y2">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
<ol class="y3">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
       ……

用图片做列表项目符号

……
<style type="text/css">
   .xing { list-style-image:url(../../images/list.gif);}
</style>
       ……
<ul class="xing" >
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
       ……

div和span

相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到<h1></h1>标签，你知道里面是标题，当你看到<p></p>标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样的意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而 span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<style type="text/css">

</style>
</head>
<body>
<div class="box">
<div class="boxhead">我在div内，类为boxhead</div>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
</div>
</body>
</html>

<p><span style="color:red">我在div内，也在span内，</span>属性为box。</p>

边框

.box {
   background-color: #EEFAFF;
   width: 30%;
   float: left;
   border: 1px solid #000000;
   }

.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
border-bottom:1px dashed #000000;
text-align: center;
width: 100%;
color: #FFFFFF;
}

填充 padding

.boxhead {
   font-size: 14px;
   font-weight: bold;
   background-color: #AEC6FD;
   border-bottom:1px dashed #000000;
   text-align: center;
   width: 100%;
   color: #FFFFFF;
   padding:5px;
   }

边界属性

.box {
   background-color: #EEFAFF;
   width: 30%;
   float: left;
   border: 1px solid #000000;
   margin:5px;
   }

相对定位 relative

……
<style type="text/css">
.dingwei{
position:relative;
left:50px;
}
</style>
……
<p>我是一段正常的文本</p>
<p class="dingwei">我本来应该在它的正下方，
可是relative相对定位让我在正常位置的基础上向右移动了50个像素。</p>
</body>
</html>

绝对定位 absolute

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>s
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
       p{
       font-size:24px;
       font-weight:bold;
       }
       .dingwei1{
     position:absolute;
     top:35px;
     left:35px;
     color:#FF0000
     }
     .dingwei2{
     position:absolute;
     left:50px;
     top:50px;
     color:#0000FF;
     }
</style>
</head>
<body>
<p class="dingwei1">CSS</p>
<p class="dingwei2">绝对定位</p>
</body>
</html>

改变整个页面的链接样式

只改变局部的链接样式

#nvbar a:link {
   color: #003366;
   text-decoration: none;
   }
   #nvbar a:visited {
   text-decoration: none;
   color: #000000;
   }
   #nvbar a:hover {

color: #FFFFFF; background-color:#FF0000; } #nvbar a:active {
text-decoration: none;
}

在xml中使用css, 例子

xml1.css

sid
{
color:blue;
font-size:36;
text-indent:2em;
display: block;
}
sname
{
color:red;
font-size:24;
text-indent:2em;
display: block;
}
gre
{
color:red;
font-size:24;
text-indent:2em;
display: block;
}
toefl
{
color:red;
font-size:24;
text-indent:2em;
display: block;
}
tse
{
color:red;
font-size:24;
text-indent:2em;
display: block;
}

xml1.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="xml1.css"?>
<classmates>
<student>
  <sid>1</sid>
  <sname>mavid</sname>
  <gre>1700</gre>
  <toefl>630</toefl>
  <tse>120</tse>
</student>
<student>
  <sid>2</sid>
  <sname>joe</sname>
  <gre>1800</gre>
  <toefl>599</toefl>
  <tse>110</tse>
</student>
<student>
  <sid>3</sid>
  <sname>jane</sname>
  <gre>1880</gre>
  <toefl>700</toefl>
  <tse>130</tse>
</student>
<student>
  <sid>4</sid>
  <sname>qing</sname>
  <gre>1600</gre>
  <toefl>660</toefl>
  <tse>110</tse>
</student>
</classmates>

=======================================================================

Javascript Basic

位置

事件

<button value="点击提交" onclick="displaymessage()">onclick调用函数</button>

<button value="点击提交" onmouseover="displaymessage()">鼠标滑过调用函数</button>

<button value="点击提交" onmouseout="displaymessage()">鼠标移出调用函数</button>

=======================================================================

HTML DOM

getElementById() —— 直接拿下法

<p id="testId">
这个段落是为了展示getElementById()方法访问DOM节点的。<br />
<img src="../../images/logo.gif" alt="展示如何访问DOM" /><br />
</p>

getElementsByTagName()

parentNode. firstChild, listChild

<div>
<p id="test">我是第一个p的文字</p> !! 注意文字也算是一个节点
<p id="test2">我是第二个p的文字，span的文字</p>
</div>

nodeName, nodeValue, nodeType

<div>
<p id="test">test文字</p>
</div>

2 —— 属性节点
3 —— 文本节点
8 —— 注释节点
1 —— 元素节点

遍历文档所有的元素节点

修改DOM--innerHTML

<div id="test">
<p>我是测试段落。</p>
</div>

删除DOM节点--removeChild

<div id="test">
<p>我是将要被删除的节点</p>
</div>

添加DOM节点

========================================================================

JavaScript 面向对象编程

定义javascript对象的两种方法

方法一

var cainiao = new Object();

cainiao.gender = 'male'; // 给对象添加属性

cainiao.yearOfBirth = 1986;

cainiao.name = 'Chen zhe';

cainiao.info = function () {

var str = 'Name : '+ this.name + ' Sex : '+this.gender +' Year of Birth : ' + this.yearOfBirth;

alert(str);

}

方法二

var cainiao = {

gender : 'male',

yearOfBirth : 1986,

name : 'Chen zhe',

info : function() {

var str = 'Name : '+ this.name + ' Sex : '+this.gender +' Year of Birth : ' + this.yearOfBirth;

alert(str);

}

如果想生成多个cainiao类型的对象，可以使用构造函数来实现：

function Person(name,gender,yearOfBirth,site){
this.name = name;
this.gender = gender;
this.yearOfBirth = yearOfBirth;
this.site = site;
this.info = function(){
var str = '姓名：' + this.name + ',性别：' + this.gender
+ ',出生年：' + this.yearOfBirth + '网站:' + this.site;
alert(str);
}
}

使用如下语句来定义多个对象：

var cainiao = new Person('Chen Zhe','male',1986,'www.cainiao8.com');
var gaoshou = new Person('Li Hai','male',1990,'www.u148.net');
var wudi = new Person('不详','不知道','保密','bbs.blueidea.net');

给对象添加静态方法：

cainiao.skill = '会点XHTML，CSS，现在还会说JavaScript了'; // 不会影响到其他对象

给对象定义私有成员，私有方法：

（1）

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
……
var privacy = privacyArg;
……
}
var cainiao = new Person('Chen Zhe','male',1986,'www.cainiao8.com','有10跟脚趾头');
alert(cainiao.privacy); // 这里的调用会出现undefined错误

（2）

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
function insideOnly(){
alert('我只在对象内部可以调用!');
}
}

私有的特点是没有用this把方法绑定到对象上。而私有方法想要引用对象，需要这样做：

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
……
var myOwner = this;

function insideOnly(){

alert(myOwner.name);

}
}

特权方法用来访问私有属性：（this 关键字在这里起关键作用）

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
……
this.showPrivacy = function(){

var str = '秘密:' + this.name + privacy + '!';

alert(str);

};
}
var cainiao = new Person('Chen Zhe','male',1986,'www.cainiao8.com','有10跟脚趾头');
cainiao.showPrivacy();

prototype浅析：

prototype我理解为对父类的修改。看例子：

首先定义对象

var cainiao = new Person('Chen Zhe','male',1986,'www.cainiao8.com');

其次修改类型的prototype

Person.prototype.jump = function(){

var str = this.name + '已经离地5厘米了！';
alert(str);
}

最后调用新加入的方法
cainiao.jump();

结果显示对cainiao确实产生影响。

prototype的失灵：

Person.prototype = {

mark:'Person.Proto'
}
var cainiao = new Person('Chen Zhe','male',1986,'www.cainiao8.com');
Person.prototype = {

mark:'Person.NewProto'
}
alert(cainiao.mark);

这种情况下，cainiao的mark还是老值。新的修改不起作用。

最后的构造函数：

我们可以在构造函数中定义属性，可以在对象外部定义（静态）属性，也可以在对象的prototype中定义属性。下面是我使用的大致格式：

function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
//公有属性
this.name = nameArg;
this.gender = genderArg;
this.yearOfBirth = yearOfBirthArg;
this.site = siteArg;
//私有属性
var privacy = privacyArg;
//特权方法
this.showPrivacy = function(){
};
}
Person.prototype = {
//公有方法
info : function(){

},
func:function(){
}
}

=================================================================================

Ajax Basic

先看一段简单的代码：

XMLHttpRequest对象的属性

readyState

表示XMLHttpRequest对象的当前状态，可取值为0-4，共5个状态。

0 ："未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1 ："发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2 ："发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3 ："正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4 ："已加载"状态；此时，响应已经被完全接收。

onreadystatechange

当readyState属性变化的时候会调用的函数。

responseText

响应的文本内容。当 readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

responseXML

XML响应；Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。

status

HTTP状态代码。仅当readyState值为3(正在接收中)或4(已加载)时，该属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

statusText

HTTP状态的文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

XMLHttpRequest对象的方法

abort()

取消当前请求。把XMLHttpRequest对象复位到未初始化状态。

open()

open(method,url,async,username,password)

方法初始化一个XMLHttpRequest对象。

method参数是必须提供的-用于指定你想用来发送请求的HTTP方法 (GET，POST，PUT，DELETE或HEAD)。

url参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URL。

async参数为布尔值，指定请求是否异步，默认值为true，即异步。

该方法把XMLHttpRequest对象的readyState属性设置为1。

setRequestHeader()

setRequestHeader(header，value)

设置请求的头部信息。必须在调用open()方法后调用这个方法（当readyState值为1时）。

send()

send([content])

把请求发送到服务器。

content函数可选，是要发送到服务器的内容，通常在POST方法的时候使用。

该方法把XMLHttpRequest对象的readyState属性的值设置为2。

getResponseHeader()

getResponseHeader(header，value)方法用于检索响应的头部值。仅当readyState值是3或4

getAllResponseHeaders()

该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部。

使用get和使用post的区别：

get方法

var name = document.getElementById('username').value;
var gender = document.getElementById('gender').value;
url = 'process.php';
query = '?name=' + name + '&gender=' + gender;
url+=query;

post方法

var name = document.getElementById('username').value;
var gender = document.getElementById('gender').value;

query = 'name=' + name + '&gender=' + gender;
//……构建XMLHttpRequest请求的代码……
request.send(query);

初步的ajax框架

</script>

分享到：

代码 - 外汇即时报价 java | Flex 正则表达式字符串匹配例子

2009-07-01 17:26
浏览 1290
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论