`

JavaScript方法和技巧大全

阅读更多

JavaScript方法和技巧大全

JavaScript方法和技巧大全

有些时候你精通一门语言,但是会发现你其实整天在和其它语言打交道,也许你以为这些微不足道,不至于影响你的开发进度,但恰恰是这些你不重视的东西会浪费你很多时间,我一直以为我早在几年前就已经精通Java了,直到目前,我才越来越觉得Java远比我想象的复杂和强大,我开始崇拜它,就像崇拜所有OOP语言一样~
趁着节曰的空隙,把有关Java的方法和技巧整理下,让每个在为Java而烦恼的人明白,Java就这么回事!并希望Java还可以成为你的朋友,让你豁然开朗,在项目中更好的应用~

适合阅读范围:对Java一无所知~离精通只差一步之遥的人
基础知识:HTML


Java就这么回事1:基础知识

1 创建脚本块

1: < language=”Java”>
2: Java code goes here
3: </>



2 隐藏脚本代码

1: < language=”Java”>
2: <!--
3: write(“Hello”);
4: // -->
5: </>


在不支持Java的浏览器中将不执行相关代码

3 浏览器不支持的时候显示

1: <no>
2: Hello to the non-Java browser.
3: </no>



4 链接外部脚本文件

1: < language=”Java” src="/”filename.js"”></>


5 注释脚本

1: // This is a comment
2: write(“Hello”); // This is a comment
3: /*
4: All of this
5: is a comment
6: */



6 输出到浏览器

1: write(“<strong>Hello</strong>”);



7 定义变量

1: var myVariable = “some ”;



8 字符串相加

1: var myString = “String1” + “String2”;



9 字符串搜索

1: < language=”Java”>
2: <!--
3: var myVariable = “Hello there”;
4: var therePlace = myVariable.search(“there”);
5: write(therePlace);
6: // -->
7: </>



10 字符串替换

1: thisVar.replace(“Monday”,”Friday”);


11 格式化字串

1: < language=”Java”>
2: <!--
3: var myVariable = “Hello there”;
4: write(myVariable.big() + “<br>”);
5: write(myVariable.blink() + “<br>”);
6: write(myVariable.bold() + “<br>”);
7: write(myVariable.fixed() + “<br>”);
8: write(myVariable.fontcolor(“red”) + “<br>”);
9: write(myVariable.fontsize(“18pt”) + “<br>”);
10: write(myVariable.italics() + “<br>”);
11: write(myVariable.small() + “<br>”);
12: write(myVariable.strike() + “<br>”);
13: write(myVariable.sub() + “<br>”);
14: write(myVariable.sup() + “<br>”);
15: write(myVariable.toLowerCase() + “<br>”);
16: write(myVariable.toUpperCase() + “<br>”);
17:
18: var firstString = “My String”;
19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”);
20: // -->
21: </>



12 创建数组

1: < language=”Java”>
2: <!--
3: var myArray = new Array(5);
4: myArray[0] = “First Entry”;
5: myArray[1] = “Second Entry”;
6: myArray[2] = “Third Entry”;
7: myArray[3] = “Fourth Entry”;
8: myArray[4] = “Fifth Entry”;
9: var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
10: // -->
11: </>



13 数组排序

1: < language=”Java”>
2: <!--
3: var myArray = new Array(5);
4: myArray[0] = “z”;
5: myArray[1] = “c”;
6: myArray[2] = “d”;
7: myArray[3] = “a”;
8: myArray[4] = “q”;
9: write(myArray.sort());
10: // -->
11: </>



14 分割字符串

1: < language=”Java”>
2: <!--
3: var myVariable = “a,b,c,d”;
4: var stringArray = myVariable.split(“,”);
5: write(stringArray[0]);
6: write(stringArray[1]);
7: write(stringArray[2]);
8: write(stringArray[3]);
9: // -->
10: </>



15 弹出警告信息

1: < language=”Java”>
2: <!--
3: alert(“Hello”);
4: // -->
5: </>



16 弹出确认框

1: < language=”Java”>
2: <!--
3: var result = confirm(“Click OK to continue”);
4: // -->
5: </>



17 定义函数

1: < language=”Java”>
2: <!--
3: multiple(number1,number2) {
4: var result = number1 * number2;
5: return result;
6: }
7: // -->
8: </>



18 调用JS函数

1: <a href=”#” =”Name()”>Link text</a>
2: <a href="/”java:Name"()”>Link text</a>



19 在页面加载完成后执行函数

1: <body =”Name();”>
2: Body of the page
3: </body>


20 条件判断

1: <>
2: <!--
3: var userChoice = confirm(“Choose OK or Cancel”);
4: var result = (userChoice == true) ? “OK” : “Cancel”;
5: write(result);
6: // -->
7: </>



21 指定次数循环

1: <>
2: <!--
3: var myArray = new Array(3);
4: myArray[0] = “Item 0”;
5: myArray[1] = “Item 1”;
6: myArray[2] = “Item 2”;
7: for (i = 0; i < myArray.length; i++) {
8: write(myArray + “<br>”);
9: }
10: // -->
11: </>



22 设定将来执行

1: <>
2: <!--
3: hello() {
4: alert(“Hello”);
5: }
6: setTimeout(“hello()”,5000);
7: // -->
8: </>



23 定时执行函数

1: <>
2: <!--
3: hello() {
4: alert(“Hello”);
5: setTimeout(“hello()”,5000);
6: }
7: setTimeout(“hello()”,5000);
8: // -->
9: </>



24 取消定时执行

1: <>
2: <!--
3: hello() {
4: alert(“Hello”);
5: }
6: var myTimeout = setTimeout(“hello()”,5000);
7: clearTimeout(myTimeout);
8: // -->
9: </>



25 在页面卸载时候执行函数

1: <body onUnload=”Name();”>
2: Body of the page
3: </body>

Java就这么回事2:浏览器输出


26 访问document对象

1: < language=”Java”>
2: var myURL = URL;
3: alert(myURL);
4: </>



27 动态输出HTML

1: < language=”Java”>
2: write(“<p>Here’s some information about this document:</p>”);
3: write(“<ul>”);
4: write(“<li>Referring Document: “ + referrer + “</li>”);
5: write(“<li>Domain: “ + domain + “</li>”);
6: write(“<li>URL: “ + URL + “</li>”);
7: write(“</ul>”);
8: </>


28 输出换行

1: writeln(“<strong>a</strong>”);
2: writeln(“b”);



29 输出曰期

1: < language=”Java”>
2: var thisDate = new Date();
3: write(thisDate.toString());
4: </>



30 指定曰期的时区

1: < language=”Java”>
2: var myOffset = -2;
3: var currentDate = new Date();
4: var userOffset = currentDate.getTimezoneOffset()/60;
5: var timeZoneDifference = userOffset - myOffset;
6: currentDate.setHours(currentDate.getHours() + timeZoneDifference);
7: write(“The time and date in Central Europe is: “ + currentDate.toLocaleString());
8: </>


31 设置曰期输出格式

1: < language=”Java”>
2: var thisDate = new Date();
3: var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
4: var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
5: write(thisTimeString + “ on “ + thisDateString);
6: </>


32 读取URL参数

1: < language=”Java”>
2: var urlParts = URL.split(“?”);
3: var parameterParts = urlParts[1].split(“&”);
4: for (i = 0; i < parameterParts.length; i++) {
5: var pairParts = parameterParts.split(“=”);
6: var pairName = pairParts[0];
7: var pair = pairParts[1];
8: write(pairName + “ :“ +pair );
9: }
10: </>

你还以为HTML是无状态的么?

33 打开一个新的document对象

1: < language=”Java”>
2: newDocument() {
3: open();
4: write(“<p>This is a New </p>”);
5: close();
6: }
7: </>



34 页面跳转

1: < language=”Java”>
2: location = “http://blog.94200.com”;
3: </>



35 添加网页加载进度窗口

1: <html>
2: <head>
3: < language='java'>
4: var placeHolder = open('holder.html','placeholder','width=200,height=200');
5: </>
6: <title>The Main Page</title>
7: </head>
8: <body ='placeHolder.close()'>
9: <p>This is the main page</p>
10: </body>
11: </html>



Java就这么回事3:图像



36 读取图像属性

1: <img src="/”image1.jpg"” name=”myImage”>
2: <a href=”# ” =”alert(myImage.width)”>Width</a>
3:


37 动态加载图像

1: < language=”Java”>
2: myImage = new Image;
3: myImage.src = “Tellers1.jpg”;
4: </>


38 简单的图像替换

1: < language=”Java”>
2: rollImage = new Image;
3: rollImage.src = “rollImage1.jpg”;
4: defaultImage = new Image;
5: defaultImage.src = “image1.jpg”;
6: </>
7: <a href="/”myUrl"” Over=”myImage.src = rollImage.src;”
8: Out=”myImage.src = defaultImage.src;”>
9: <img src="/”image1.jpg"” name=”myImage” width=100 height=100 border=0>


39 随机显示图像

1: < language=”Java”>
2: var imageList = new Array;
3: imageList[0] = “image1.jpg”;
4: imageList[1] = “image2.jpg”;
5: imageList[2] = “image3.jpg”;
6: imageList[3] = “image4.jpg”;
7: var imageChoice = Math.floor(Math.random() * imageList.length);
8: write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
9: </>

TOP

40 函数实现的图像替换

1: < language=”Java”>
2: var source = 0;
3: var replacement = 1;
4: createRollOver(originalImage,replacementImage) {
5: var imageArray = new Array;
6: imageArray[source] = new Image;
7: imageArray[source].src = originalImage;
8: imageArray[replacement] = new Image;
9: imageArray[replacement].src = replacementImage;
10: return imageArray;
11: }
12: var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);
13: </>
14: <a href=”#” Over=”myImage1.src = rollImage1[replacement].src;”
15: Out=”myImage1.src = rollImage1[source].src;”>
16: <img src="/”image1.jpg"” width=100 name=”myImage1” border=0>
17: </a>


41 创建幻灯片

1: < language=”Java”>
2: var imageList = new Array;
3: imageList[0] = new Image;
4: imageList[0].src = “image1.jpg”;
5: imageList[1] = new Image;
6: imageList[1].src = “image2.jpg”;
7: imageList[2] = new Image;
8: imageList[2].src = “image3.jpg”;
9: imageList[3] = new Image;
10: imageList[3].src = “image4.jpg”;
11: slideShow(imageNumber) {
12: slideShow.src = imageList[imageNumber].src;
13: imageNumber += 1;
14: if (imageNumber < imageList.length) {
15: setTimeout(“slideShow(“ + imageNumber + “)”,3000);
16: }
17: }
18: </>
19: </head>
20: <body =”slideShow(0)”>
21: <img src="/”image1.jpg"” width=100 name=”slideShow”>


42 随机广告图片

1: < language=”Java”>
2: var imageList = new Array;
3: imageList[0] = “image1.jpg”;
4: imageList[1] = “image2.jpg”;
5: imageList[2] = “image3.jpg”;
6: imageList[3] = “image4.jpg”;
7: var urlList = new Array;
8: urlList[0] = “http://blog.94200.com”;
9: urlList[1] = “http://blog.94200.com”;
10: urlList[2] = “http://blog.94200.com”;
11: urlList[3] = “http://blog.94200.com”;
12: var imageChoice = Math.floor(Math.random() * imageList.length);
13: write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
14: </>

Java就这么回事4:表单


还是先继续写完JS就这么回事系列吧~
43 表单构成

1: <form method=”post” action=”target.html” name=”thisForm”>
2: <input type=”text” name=”myText”>
3: <select name=”mySelect”>
4: <option =”1”>First Choice</option>
5: <option =”2”>Second Choice</option>
6: </select>
7: <br>
8: <input type=”submit” =”Submit Me”>
9: </form>


44 访问表单中的文本框内容

1: <form name=”myForm”>
2: <input type=”text” name=”myText”>
3: </form>
4: <a href='#' ='alert(myForm.myText.);'>Check Text Field</a>


45 动态复制文本框内容

1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText”><br>
3: Copy Text: <input type=”text” name=”copyText”>
4: </form>
5: <a href=”#” =”myForm.copyText. =
6: myForm.myText.;”>Copy Text Field</a>


46 侦测文本框的变化

1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.);”>
3: </form>


47 访问选中的Select

1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option =”First Choice”>1</option>
4: <option =”Second Choice”>2</option>
5: <option =”Third Choice”>3</option>
6: </select>
7: </form>
8: <a href='#' ='alert(myForm.mySelect.);'>Check Selection List</a>


48 动态增加Select项

1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option =”First Choice”>1</option>
4: <option =”Second Choice”>2</option>
5: </select>
6: </form>
7: < language=”Java”>
8: myForm.mySelect.length++;
9: myForm.mySelect.options[myForm.mySelect.length - 1].text = “3”;
10: myForm.mySelect.options[myForm.mySelect.length - 1]. = “Third Choice”;
11: </>


49 验证表单字段

1: < language=”Java”>
2: checkField(field) {
3: if (field. == “”) {
4: alert(“You must enter a in the field”);
5: field.focus();
6: }
7: }
8: </>
9: <form name=”myForm” action=”target.html”>
10: Text Field: <input type=”text” name=”myField”=”checkField(this)”>
11: <br><input type=”submit”>
12: </form>


50 验证Select项

1: checkList(selection) {
2: if (selection.length == 0) {
3: alert(“You must make a selection from the list.”);
4: return false;
5: }
6: return true;
7: }


51 动态改变表单的action

1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password” name=”password”><br>
4: <input type=”button” =”Login” =”this.form.submit();”>
5: <input type=”button” =”Register” =”this.form.action = ‘register.html’; this.form.submit();”>
6: <input type=”button” =”Retrieve Password” =”this.form.action = ‘password.html’; this.form.submit();”>
7: </form>


52 使用图像按钮

1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password”name=”password”><br>
4: <input type=”image” src="/”login.gif"” =”Login”>
5: </form>
6:


53 表单数据的加密

1: < LANGUAGE='Java'>
2: <!--
3: encrypt(item) {
4: var newItem = '';
5: for (i=0; i < item.length; i++) {
6: newItem += item.charCodeAt(i) + '.';
7: }
8: return newItem;
9: }
10: encryptForm(myForm) {
11: for (i=0; i < myForm.elements.length; i++) {
12: myForm.elements. = encrypt(myForm.elements.);
13: }
14: }
15:
16: //-->
17: </>
18: <form name='myForm' onSubmit='encryptForm(this); alert(this.myField.);'>
19: Enter Some Text: <input type=text name=myField><input type=submit>
20: </form>




Java就这么回事5:窗口和框架


54 改变浏览器状态栏文字提示

1: < language=”Java”>
2: status = “A new status message”;
3: </>


55 弹出确认提示框

1: < language=”Java”>
2: var userChoice = confirm(“Click OK or Cancel”);
3: if (userChoice) {
4: write(“You chose OK”);
5: } else {
6: write(“You chose Cancel”);
7: }
8: </>


56 提示输入

1: < language=”Java”>
2: var userName = prompt(“Please Enter Your Name”,”Enter Your Name Here”);
3: write(“Your Name is “ + userName);
4: </>


57 打开一个新窗口

1: //打开一个名称为myNewWindow的浏览器新窗口
2: < language=”Java”>
3: open(“http://blog.94200.com”,”myNewWindow”);
4: </>


58 设置新窗口的大小

1: < language=”Java”>
2: open(“http://blog.94200.com”,”myNewWindow”,'height=300,width=300');
3: </>


59 设置新窗口的位置

1: < language=”Java”>
2: open(“http://blog.94200.com”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
3: </>


60 是否显示工具栏和滚动栏

1: < language=”Java”>
2: open(“http:


61 是否可以缩放新窗口的大小

1: < language=”Java”>
2: open('http://blog.94200.com' , 'myNewWindow', 'resizable=yes' );</>


62 加载一个新的文档到当前窗口

1: <a href='#' ='location = 'miss.html';' >Open New Document</a>


63 设置页面的滚动位置

1: < language=”Java”>
2: if (all) { //如果是IE浏览器则使用scrollTop属性
3: body.scrollTop = 200;
4: } else { //如果是NetScape浏览器则使用pageYOffset属性
5: pageYOffset = 200;
6: }</>


64 在IE中打开全屏窗口

1: <a href='#' =”open('http://blog.94200.com','newWindow','fullScreen=yes');”>Open a full-screen window</a>


65 新窗口和父窗口的操作

1: < language=”Java”>
2: //定义新窗口
3: var newWindow = open(“miss.html”,”newWindow”);
4: newclose(); //在父窗口中关闭打开的新窗口
5: </>
6: 在新窗口中关闭父窗口
7: opener.close()


66 往新窗口中写内容

1: < language=”Java”>
2: var newWindow = open(“”,”newWindow”);
3: newopen();
4: newwrite(“This is a new window”);
5: newclose();
6: </>


67 加载页面到框架页面

1: <set cols=”50%,*”>
2: < name=”1” src="/”135a.html"”>
3: < name=”2” src="/”blank"”>
4: </set>
5: 在1中加载2中的页面
6: parent.2.location = “135b.html”;


68 在框架页面之间共享脚本
如果在1中html文件中有个脚本

1: doAlert() {
2: alert(“ 1 is loaded”);
3: }

那么在2中可以如此调用该方法

1: <body =”parent.1.doAlert();”>
2: This is 2.
3: </body>


69 数据公用
可以在框架页面定义数据项,使得该数据可以被多个框架中的页面公用

1: < language=”Java”>
2: var persistentVariable = “This is a persistent ”;
3: </>
4: <set cols=”50%,*”>
5: < name=”1” src="/”138a.html"”>
6: < name=”2” src="/”138b.html"”>
7: </set>


这样在1和2中都可以使用变量persistentVariable
70 框架代码库
根据以上的一些思路,我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

1: <set cols=”0,50%,*”>
2: < name=”code” src="/”140code.html"”>
3: < name=”1” src="/”140a.html"”>
4: < name=”2” src="/”140b.html"”>
5: </set>

TOP

index.html文件:
<frameset rows="20%,*">
<frame src="top.html"
name="top">
<frameset cols="30%,*">
<frame src="left.html"
name="left">
<frame src="right1.html"
name="right">
</frameset>
</frameset>
top.html文件:
<center>这是顶部的网页文件</center>
left.html文件:
<p>这是左边的
网页文件</p>
<a
href="right1.html
" target="right">
显示右边的
第一个文档</a>
</p>
<a
href="right1.html
" target="right">
显示右边的第
二个文档</a>
right1.html文件:

这是右边的第
一个网页文件
right2.html文件:
这是右边的第
二个网页文件

●爽仔自编html
●学习资料
●版权所有
●夢見る気分で
●QQ:493549859

html基础爽仔自编教程


第一课
●html语言基础

●html语言高级

●css(级联样式表)

●javascript语法

●dom对象模型编程

●脚本变成技术汇总

●正则表达式
-------------------------分界线------------------------


●-----了解html的一些背景知识

●-----html的全局架构标签

●-----格式标签

●-----文本标签

●-----超连接标签

●-----图象标签

●-----地图标签
-------------------------分界线------------------------


●什么是html

●html规范与版本

●ietf与W3C组织
-------------------------分界线------------------------

观察下面这段文本内容在记事本程序和浏览器程序中的显示与区别:

<marquee behavior="alternate">
<font size=30 color='red'>exipt.tech.topzj.com</font>
</marquee>

●html是英文HyperText Markup Language (超文本标签语言)的缩写

●以"<标签名>"表示标签开始,以“</标签名>”表示标签的结束

●成对标签又称为容器,一对标签中还可以嵌套其他的标签

●单独标签不需要与之配对的结束标签,又称之为空标签,例如<br>

●一个html标签及标签中嵌套的内容就是网页中的一个html元素

●属性设置的一般格式为:属性名=属性值,属性值部分可以用英文的双引号(“)或者单引号(‘)引起来,也可以不使用任何引号

●例子1 滚动的文字--------------------------->返回前面
-------------------------分界线------------------------



html规范与版本

●不同的浏览器之间的不兼容问题

●为什么要指定规范

●谁来制定规范
- IETF
- W3C
●正在使用的html版本
- html4.01
- xhtml
IETF
internet Engineering Task Force (internet工程任务组),由网络设计人员,

操作员,厂商,专家组成的民间组织,主要负责有关ingernet的各种技术标准及接口规范与制定,其网址为

http://www.ietf.org .IETF以RFC(Requests for Comments,请求注释文档)定名所发布的各种标准与协议,

例如,RFC2616 (HTTP/1.1),RFC1521(MIME).
W3C
World Wide Web Consortium (习惯称之为WWW联盟)于1994年成

立,是与web有关的企业机构成立的业界同盟,其网址为http://www.w3c.org.W3C目前的成员

仅限于团体或组织,只要交纳一定的费用,并签署一份保证遵守规则的成员协议,任何公司

均可加入,W3C对web的标准握有生杀大权,负责研究,审定,发布,管理有关web的标准。

例如,html。css等--------------------------->返回前面

-------------------------分界线------------------------

html的全局架构标签

●一个最基本的网页文件组成结构:

<html>
<head>
<title>显示在浏览器左方的标题</title>
</head>
<body bgcolor="red" text="blue">
<p>红色背景、蓝色文本</p>
</body>
</html>

●<html></html>

●<head></head>

●<title></title>

●<body></body>

●Text属性:用于设定整个网页中的文字颜色。
●link属性:用于设定一般超连接文本的显示颜色。
●alink属性:用于设定鼠标移动到超连接上,超连接文本的显示颜色。
●vlink属性:用于设定访问过的超连接文本的显示颜色。
●background属性:用于设定背景墙纸所用的图象文件,可以是gif或jpeg文件的绝对或相对路径。
●bgcolor属性:用于设定背景颜色,当已设定背景墙纸时,这个属性会失去作用,除非墙纸具有透明部分。
●leftmargin属性:设定网页显示画面与浏览器窗口左边沿的间隙,单位为象素。
●topmargin属性:设定网页显示画面与浏览器窗口上边沿的间隙,单位为象素。
●bgsound属性:可以设置网页背景音乐,可以填写文件的相对路径或者绝对路径
<bgsound src="文件地址可以是MP3" loop=infinite>
●class、name、id、style等属性。

●例子 红色背景蓝色字体------------>返回前面



-------------------------分界线------------------------

Visual Studio .NET创建网页文档

●自动创建全局架构标签

●方便设置标签属性

●颜色类型的属性值有两种表达方式:
- 十六进制RGB颜色码使用一个#号后跟六位十六进制数据,例如#FF0000
- html的颜色常量名,例如red

文档类型定义:Document Type Definition, DTD

DTD语法:

<!DOCTYPE HTML PUBLIC "version name" "url">
●html指定文档类型的名称
●PUBLIC表明所依据的DTD文件可对任何人公开访问,而不是某个公司内部的规范文件。
●version name指定该html版本的标识名称。例如,html4.0的标识名称为 “-/W3C//DTD HTML4.01 Transitional//EN”。
对于ISO标准的DTD以“ISO”三个字母开头;被改进的非ISO标准的DTD以加号“+”开头;
未被改进的非ISO标准的DTD以减号“-”开头。
●url指定该html语言的定义规范文件在internet上的位置,例如,http://www.w3.org/TR/html4/loose.dtd。
●loose.dtd、strict.dtd、frameset.dtd。等文件名的区别。

-------------------------分界线------------------------

注释与特殊字符

●用"<!--注释-->"这种格式加入注释

●特殊字符可以用数值码和引用实体两种方式表示,例如:& #169; ©

●注释符号例子


HTML编码 显示或处理结果
&lt; <
&gt; >
& &
" "
® ®
© ©
™ ™

空字符

●在什么情况下需要用&qout表示"
●如果属性值中同时有单引号和双引号,该如何处理呢?假设<body>标签的class属性值为'Z'X''X,那么,
●不使用引号的写法为:<body class='Z'X''X>
●使用单引号的写法为:<body class=''Z'X''X'>
●使用双引号的写法为:<body class='''Z'X''X''>----都是不正确的!X
●正确的写法为:<body class='''Z'X&qout;X''>-------正确的写法!

●思考题:人们又为什么要对&字符安排一个html编码文本代码呢?

雪花代码 -------------------->>>>>返回前面


-------------------------分界线------------------------

格式标签

<p></p>
●创建一个段落|align对齐|右对齐align=right,左对齐align=left,居中align=center

<br>
●网页中换行

<nobr></nobr>
●防止过长的内容换行显示

<blockquote></blockquote>
●在网页中缩近显示

<center></center>
●网页中加入的图片和字居中显示

<marquee></marquee>
●移动显示之间的图形和字
有2个属性|滚动次数behavior=一次"slide"循环"scroll"来回"alternate"|滚动方向-->direction="up""down""left""right"

<dl></dl><dt></dt><dd></dd>
●dl创建普通的列表
●dt列表最上层的显示
●dd列表最下层的显示

<ol></ol><ul></ul><li></li>
●ol创建一个带有数字序号的列表
●ul创建标有圆点的列表
●li只能在ol和ul中使用创建具体的列表项目
●pre预先格式化的策略显示所有的空格和换行

--------------------------------返回前面

-------------------------分界线------------------------

文本标签

<h1></h1>... ...<h6></h6>
●显示字体大小数字越大字体越小

<b></b><i></i><u></u>
●b粗体字
●i斜体字
●u下画线

<sub><sup>
●sub建立文本下标显示比周围的文本低一些
●sup建立文本上标显示比周围的文本高一些

<tt></tt><cite></cite><em></em><strong></strong>
●tt用于打印风格字体显示文本
●cite引用的方式显示文本
●em显示需要强调的文本|斜体加粗体
●strong显示需要加重的文本|黑体粗体

<font></font>
●font可以对显示的文本的字体,字号和颜色的改变<font>标签的三个属性|face字体名称|size字号大小-7~7之间的数字|color颜色

文本标签的综合事例-----------------------返回前面

-------------------------分界线------------------------

超连接标签

●什么是超连接?
●超连接标签:<a href=""></a>
例如,<a href="http://exipt.tech.topzj.com">我的论坛</a>

●什么是url?
url是URL(Uniform Resource Locator)
URL的基本组成:协议,主机名,端口号,资源名。
例如,http://www.xx.com:8080/index.html 如果不是80就要指定端口号才可以访问
相对URL,例如,"/a.html","./a.html","../../a.html","a.html".基准
url是http://www.xx.com/dir1/dir2/,相对URL是index.html,那么最后得到的完成的URL是http://www.xx.com/dir1/dir2/index.html.
URL指定参数,例如,
http://www.xx.com/xxx.htm?name=shuang&password=123?号是参数的分隔符,&是参数之间的分符
带有定位标记的url,例如,http://www.xx.com/index.htm#section2
URL编码
mailto URL,例如,
mailto:exipt@163.com?subect=feedback&body=how%20are%20you!这个格式是电子邮件的格式%20代表空格

●URL编码
规则
●将空格转换为加号(+)
●对0-9,a-z,A-Z之间的字符保持不变
●对于所有其他的字符,用这个字符的当前字符集编码在内存中的十六进制格式表示,
并在每一字节前加一个百分号(%)。如字符“+”用%2B表示,字符“=”用%3D表示,
字符“&”用%26表示,每个中文字符在内存中占两个字节,字符“中”用%D6%D0
表示,字符“国”用%B9%FA表示
●对于空格也可以直接使用其十六进制编码方式,即用%20表示,而不是将它转换成如号(+)
说明:
●如果确信url串的特殊字符没有引起使用上的歧义或冲突,你也可以对这些字符不进行编码,
而是直接传递给服务器,例如。
http://www.xx.com/xxx.html?name=中国&password=123
●如果URL串中的特殊字符可能会产生歧义或冲突,则必须对这些特殊字符进行URL编码,例如。
服务器会将不编码的“中+国”当作“中 国”处理。还例如,当name参数值为“中&国”时
如果不对其中的“&”编码,URL字符串将有如下形式:
http://www.xx.com/xxx.html?name=中&国&password=123
应编码为:http://www.xx.com/xxx.html?name=中%26国&password=123
●http://www.xx.com/example/index.html#section2
可改写成:http://www.xx.com/example%2Findex.html%23section2 %2F解释为/ %23解释为#

●表示要访问的internet地址
src.htm

<a href="dest.htm">
</a> -------dest.htm
●超连接原与超连接目标
<a href=""></a>的target属性.

用<a name"">定义定位标记,例如,<a name="标记1">第一部分
使用<a href="#标记1">跳转到第一部分</a>就可以定位到网页中的"标记1"这个位置.
<a href=javascript基础.htm#标记>在要打开的网页里加入这个标记即可打开侄标记前</a>

●空白的标记
<a href="#">..</a>这个空标记是直接返回自己网页的开头
<a href="">..</a>直接打开这个网页所在的文件夹

超级连接例子 --------------------返回前面


-------------------------分界线------------------------

图象标签
●<img>标签,例如,<img src="MyPhoto.gif">,,还可以
设置alt,align,border,width和height等属性。

●alt 指定当鼠标移动到图象上的时候显示的提示文本
●align 指定图象与周围文本的对齐方式
●border 指定图象边框宽度 可以是大与等于0的整数单位是像素
●width 图象显示的宽度
●height 图象显示的高度如果没指定将显示图象的原始大小

●<img>标签的显示过程
●根据SRC的地址加载图象数据
分析:一个web服务器是如何借助<img>标签来收集其他web站点页面访问次数的?
<img src=http://xxx.xx.com/count.jsp>

●<hr>标签,插入水平线可以设置|size,color,width和noshade等属性
●size 设置水线先粗细
●color 设置水平线颜色
●width 设置水平线宽度
●noshade 不用设置属性值,用来显示水平线有没有阴影



图片标签例子 -------------------->>返回前面



-------------------------分界线------------------------

图象地图

●图象超连接
●格式为:<a href="url"><img src="url"></a>

●图象是地图什么?
把一幅图象分成多个区域,每个区域指向不同的url地址。例如,将一幅中国地图
的图象按照省市划分成若干区域,这些区域被称之为热点,单机热点区域,就可以连接到
与相应省市有关的页面,着就是图象地图。

●怎样产生图象地图
(1)首先必须定义出图象上的各个热点区域的形状,位置坐标,及其指向的url地址等信息
这个过程叫图象热点映射。图象热点映射需要使用<mapname=mapname></map>标签对进行说明。
其中的name属性为该图象热点映射指定了一个名称。

(2)图象热点映射中的各个区域用<area>标签说明,<area>标签的格式为:<area shape="形状" coords="坐标" href="url">
href部分可以用nobref替换,表示在该区域单机鼠标无效,<area>标签还可以有一个target属性,用来指定浏览器
在哪个窗口或桢中显示href属性所指向的网页资源。

(3)定义好了图象热点映射后,接着就要在<img>图象标签中增加一个名为usemap的属性设置
usemap属性指定该图象被用作图象地图,其设置值为所使用的图象热点映射名称,格式为:在<map>标签的name属性设置前
多加一个“#”字符。例如:<img src="lijing.jpg" usemap="#mymap">

●图象地图举例
<img src="lijing.jpg" usemap="#mygf">
<map name="mygf">
<area shape="rect" href="a.html" coords="140,20,280,60">
<area shape="poly" href="b.html" coords="100,100,180,80,200,140">
<area shape="circle" href="c.html" coords="80,100,60">
</map>

shape属性的设置说明:
●rect 定义一个矩形区域,coords属性设置为矩形的左上角,右下角的坐标,
各个坐标值之间用逗号分开;
●poly 定义一个多边形区域,coords属性设置值为多边形各个顶点的坐标值
●circle定义一个圆形区域,coords属性设置值为圆心坐标及半径,前两个参数分别为圆心的横,纵坐标,第三个参数为半径。


图象地图标签例子---------------->>>返回前面

-------------------------分界线------------------------


html语言高级
●表格标签
可以固定文本或图象的显示位置。

●<table></table>属性:bgcolor,border,bordercolor,bordercolorlight,bordercolordark,cellspacing,cellpadding,width,height
●bgcolor 设置表格背景色
●border 设置表格宽度
●bordercolor 设置表格边框颜色
●bordercolorlight 设置表格边框明亮部分的颜色
●bordercolordark 设置表格边框的昏暗部分的颜色 当border值大于1的时候才有效
●cellspacing 设置表格的各个单元格之间的间隔大小
●cellpadding 设置表格的各个单元格边框与表格内部内容之间的间隔
●width 设置表格的宽度 可以是绝对像素值或者百分比
●height 设置表格高度

●<tr></tr>属性:align,valign,bgcolor

●<td></td>创建一行中的一列 属性:width,height,align,valign,colspan设置单元各扩展列数,rowspan设置单元各扩展的行数,nowrap
问题:列中的内容过长,整个表格的宽度会被撑大。

●<th></th>和td完全一样,用来加重主题
●<caption></caption>设置表格标题说明

表格例子

●侦标签
分桢的作用将一个浏览器文档窗口分隔成多个窗口,每个窗口中都可以显示一个独立的网页文件。
------------------------------------------------------------------------



















--------------------------------------------------------------------------
●<frameset>标签定义框架集当中有几个桢不能放在body中也不能包括body
属性:rows,cols,border,frameborder
●rows 属性用来规定框架集规定有几行窗口和大小在frameset最少要用一个
●cols 属性用来规定框架集规定有几列窗口和大小
●border 设置每个桢边框的宽度
●frameborder 设置是否显示桢窗口的边界

●<frame>标签用来定义一个具体的桢窗口
属性:src,name,scrolling,noresize
●src 指定初始装载桢网页文件的url地址
●name 指定了桢窗口的名字
●scrolling 指定桢窗口边框上是否显示滚动条
●noresize 指定用户是否可以拖动之间的分隔线来调整窗口

●<a href="">的target属性
target属性包括:_blank,_parent,_self,_top
●_blank 在新窗口中打开
●_parent 在当前桢的负桢窗口中打开
●_self 在原网页中显示
●_top 在顶层窗口中打开

●<noframes>标签如果浏览器不支持framest时可以在之中加入body 说明
●<iframe>标签 在网页中间插入一个桢窗口 实现画中画的效果


分桢的作用例子

●表单标签的作用

●<form></form>标签对用来创建一个表单。即定义表单的开始和结束位置,属性有action,method,target,title,enctype等

●action 属性用来设置接收和处理浏览器递交的表单内容和服务器程序的url,例如<form action="http://www.xx.com/counter.cgi">

●method 属性用来定义浏览器将表单中的信息递交给服务器的处理程序的方式,取值可以为GET或POST.

●target 属性用来指定服务器返回结果显示的目标窗口或目标桢

●title属性用来设置当网站访问者的鼠标在表单上的任一位置停留过几秒时,浏览器用黄色小浮标显示的文本(如表单的名称或描述)。

●enctype 属性指示浏览器使用哪种编码方式将表单数据传递给www服务器
该属性可以有两种取值:application/x-www-form-urlencoded和multipart/form-data,默认的设置值为"application/x-www-form-urlencoded" 上传的时候才用

●表单字段元素1
●<input type="submit">提交按钮 显示的名字就是它的value属性

●<input type="reset">重置按钮

●<input type="text">创建一个单行输入区域 属性:size,value,maxlength,readonly,disabled
●size 单行宽度显示数量
●value 文本的属性值第一次设置显示在输入区的内容
●maxlength 设置最多能输入的字符个数
●readonly 不能手工更改输入区的值。通过javascript还是可以改变的。
●disabled 灰色显示不能再获得焦点

●<input type="checkbox">在表单中创建一个复选筐按钮 属性:checked不需要复值

●<input type="radio">创建单选按钮

●<input type="hidden">隐藏的表单字段元素

●<input type="password">创建密码输入区域

●<input type="button">创建一个普通的按钮一般和脚本联系
表单标签的作用例子1

●表单字段元素2

●<input type="file">出现单行文本和选择按钮 上传文件功能扩展 重要真正实现这个功能需要把 method="post" enctype="multipart/form-data"

●<input type="image">在表单上创建一个图元素 不再有value元素

●<select></select><option><option>在表单中创建下拉列表框或者是一个可复选的列表框
●select 属性:multiple,size
●multiple 只能单机下拉框中的按钮才能显示所有的选项
●size 在列表框中可以看得见的数目 缺省值为1

●option 标签的属性:value,selected
●value 会与select的属性一起作为参数名和参数值传递给服务器|如果没设置,就会吧option中的参数值传诵给服务器
●selected 设置初始选择效果

●<textarea></textarea>创建能输入多行文本的文本框|属性:cols列数,rows行数

●<label>在表单中使用快捷键属性:for,accesskey

表单标签的作用例子2

●头元素
头元素是指位于<head></head>标签对之间的元素
主要包括:
●<title></title>标签对之间的内容是网页的显示标题显示在标题蓝上的文本信息

●<base>标签 用于指定网页中的超连接的基准地址,以改变网页中所有使用相对应的url的基准地址。
有2个属性,一个是href一个是target;
作用:
●href属性设置该网页中所有使用的http协议的相对url地址的基准地址,若网页中有如<a href="index.html"></a>这样的超级连接。
它不会再象没有使用<base>标签那样表示当前网页相同目录下的index.html,而是制向了http://www.xx.com/techworld/index.html页面。

●超级连接的target属性用于设置网页中所有的超级连接显示的目标窗口在<base>标签中设置target属性,
可省得在所有的超连接的<a>标签总都加上target属性.

●<base>标签通常的使用形式如下:
<base href="http://www.xx.com/techworld" target="_blank">
---------base--------演示---------
<html>
<head>
<base target="_blank">
</head>
<body>
<a href="base1.htm">1</a>
</body>
</html>

——————————————————end

----------------------------------------------------------

●<link>标签
●定义了当前文档和另一个文档或资源之间的关系
几个主要的属性:
●href 包含另外一个文档或资源的url地址

●rel与rev定义了link所连接的2个资源的关系类型在link标签中必须有其中一个
link标签的rel与rev属性设置:
●Contents 指定这个连接所指向的文档将作为这个表格的内容出现
●index 连接所指向的文档中提供的索引
●Glossary 连接所指向的文档提供了一份当前文档的词汇表
●Copyright 连接所指向的文档是当前文档的版权语句
●Next连接指向的是一个文档系列中的下一个文档
●previous 指向的是一个文档系列中的上一个文档
●Start 指向的是这个连接组合中的第一个文档
●Help指向一个帮助文档
●Bookmark 指向一个当前文档的书签
●Stylesheet 指向当前文档的一个外部样式表的文件
例如,<link REL="stylesheet" TYPE="text/css" HREF="URL">
●Alternate 指向的是当前文档中不同版本的文档
●Shortcut lcon 这个连接指向的是一个图标,这个图标将显示在浏览器的地址拦和收藏夹列表中的url前将替换掉浏览器提供的默认图标。
例如,<link REL="Shortcut Icon" href="favicon.ico">

●title 说明2个连接的资源间的关系也可以是描述字符串

●type 给出了目标资源的MIME类型 例如:type="text/css" 在javascript之中type="text/javascript"

●media用于指定目标资源被接收的介质和媒体 设置值:
●screen 提交到计算机屏幕上
●print 输出到打印机上
●projection 输出到投影机上
●aural 用扬声器输出
●braille 输出到触觉介质上
●tty 输出到电传打字机上
●tv 输出到电视机上
●all 输出到所有设备 要让输出到多个都有效的话要使用分隔和逗号


●<meta>标签
●有两种类型的<meta>,不同的属性名来划分,这两种属性名为:name和http-equiv.

<meta name="某个设置值" content="对该设置值进行具体补充说明的信息">

<meta http-equiv="某个设置值" content="对该设置信息进行具体补充说明信息">

●name 属性用与在网页中加入一些有关于网页的描述信息,例如,网页的关键字(可供网页搜索引擎机器人差找,分类),网页描述信息等。
●Keywords 告诉搜索引擎放出的关键字信息
例如,<meta name="Keywords" content="vc,java,培训">

●Description 告诉搜索引擎放出的信息,把content的内容作为描述,放到引擎当中

●Robots 告诉搜索引擎放出的信息,根据值来确定下一步动作|
设置值:index可以检索和收录,|noindex不让索引和收录,|follow顺着超连接继续往下查找,|nofollow不让顺着超连接继续网下查找,|all全让,|none全不让

●Generator 搜索工具的名称

●Author 说明网页作者信息

●Copyright 版权声明



●http-equiv 属性用于在html文档中模拟html协议的响应消息头,例如,
告诉浏览器是否缓存该网页,使用什么样的字符集来显示网页内容,隔多长时间自动刷新网页等等。

●Content-Type 说明网页文档的MIME类型告诉网页用什么来查看
例如,<meta http-equiv="Content-type" content="text/html;charset=gd2312">

●Refresh头 模拟http响应消息头的作用告诉浏览器在指定的时间段自动刷新或跳转
例如,<meta http-equiv="Refresh" content="1;url=http://exipt.tech.topzj.com">

●Expires头 模拟浏览起的http响应消息头,设置网页的到期时间。
例如,<meta http-equiv="Expires" content="Mon,12 My 2001 00:20:00 GMT">,将content设置为0,可以禁止浏览器使用缓存页面。

●Windows-Target
例如,要防止自己的网页被别人当作一个frame也面调用,可以使用<meta http-equiv="Windows-Target" content="_top">

●Pragma头 可以禁止在本地计算机上缓存当前页面
例如,<meta http-equiv="Pragme" content="no-cache">。
<meta http-equiv="Cache-Control" content="no-cache">
●Page-Enter和Page-Exit 用于设置浏览器刚进入某个页面或者退出的时候所显示的效果。
例如,<meta http-equiv="Page-Enter"
content="revealTrans(Transition=23,Duration=1.000)"> 指定特殊效果的持续时间
头部标签演示

●分区标签

●<div></div>
<div>标签可以用来组合其他的html元素,但不能嵌套在段落元素中,
例如,<p>aa<div>bb</div>cc</p>的结果是不确定的.

●<span></span>
在同一行文本内选取一个片段,要将文本"shuangzi"中的前半部分"shuang"单独取出来,
就可以使用<span>shuang</span>zi。

●<div>与<span>的区别举例:
<div id="client-shuangzi" class="client">
<span class="name">Name:</span>shuangzi
<span class="tel">Telephone:</span>13599750476
<span class="email">Email:</span>exipt@163.com
</div>

分区标签的例子--------------------------------------->>返回前面


-------------------------分界线------------------------

●css级联样式

●何为css(层叠样式表)
css是Cascading Style Sheets的简写,他除了可以轻松设置网页元素的显示位置和格式外,甚至还
能产生滤镜,图象淡化,网页淡入淡出的渐变效果,简而言之,css就是要对网页的显示效果实现与word一样的排版控制。

●css的几种设置方式
●内联样式表(lnline styles) text/xsl 来控制一个XML的文档
<meta http-equiv="content-style-type" content="text/css">

●嵌入样式表 (Embedded style sheets)

<head>
<style type="text/css" media="screen,projection">
<!--
p {font-size:20pt;color:blue;font-family:宋体;list-style-type:
circle;text-decoration:underline}
-->
</style>
</head>

在<style></style>标签对中定义的每一条样式规则的基本格式如下:
●selector {property:value;property:value;....}
selector: 当定义一条样式规则时,必须指定受这条样式规则作用的网页元素,在一条规则中定义
的网页元素就是celector(选择器),也就是选择该样式规则作用与的网页元素。
●property:指定那些将要被修改的样式名称,即css属性,如,color,font-size等。
●value:赋给property的值,即css属性值。

●外部样式表 (Linked style sheets) 用于多个网页使用同一个样式的时候

●首先编写一个test.css文件,文件中的内容入下:
p {
font-size:20pt;color:blue;font-family:宋体;
list-style-type:circle;text-decoration:underline
}

接着编写一个要使用这个样式表文件的网页文件,假设网页文件与test.css文件
放在相同的目录中,网页文件中的内容如下:
<html>
<head>
<link rel="StyleSheet" href="test.cs
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics