HTML总结

Html（HyperText Mark-up Language）即超文本标记语言或超文本链接标 示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图 形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。

另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面！

超级链接的target属性

target的取值有_blank、_self、_parent、_top，其中_parent和_top适合于超级链接位于框架页面的帧中。target属性值也可以取不同帧的name值。

1._blank

代表新打开窗口显示链接页面。

2._self

代表链接页面覆盖原来的页面。

3._parent

代表链接页面只覆盖帧所属的框架页面。

4._top

代表链接页面覆盖整个浏览器窗口。

CSS总结

div元素

默认情况下，一行只能容纳一个div标签。无论宽度多小，一行始终只有一个div标签。margin-left属性和margin-right属性分别设置div的左右边距，当设置div左外边距和右外边距的值为auto时，左外边距和右外边距将相等。

margin:0px auto; 0px和auto之间是空格，而不是逗号。

float属性

float属性也称为浮动属性，可以使多个块状元素并列于一行。对前面的div元素设置浮动属性后，当前面的div元素留有足够的空白宽度时，后面的div元素将自动浮上来，和前面的div元素并列于一行。float属性的值有left、right、none和inherit。

注：使2个div并列于一行的前提是：这一行有足够的宽度容纳2个div宽度。

clear属性

clear属性的值有none、left、right和both，默认值是none。当多个块状元素由于第一个设置浮动属性而并列时，如果某个元素不需要被“流”上去，即可设置相应的clear属性。

line_height属性

表示行间距，line_height大于或等于div高度时，文本上下居中对齐。

border属性

设置边框样式，边框属性值有3种：边框尺寸（像素）、边框类型和边框颜色（16进制）。border:20px solid #333;表示边框尺寸是20px，边框类型是solid类型，边框颜色是#333；

border:10px groove #ff0; //所有边框的属性

border-left:10px groove #ade; //左边框

border-right:10px solid #450; //右边框

border-bottom:10px dashed #f00; //下边框

border-top:10px dotted #ff0; //上边框

margin属性

用来设置外边距。设置外边距后在元素的周围会产生空白区域。margin属性也有margin-left、margin-right、margin-top和margin-bottom属性，分别用来设置左、右、上和下外边距。

设置div水平居中：margin:0px auto;

padding属性

用于设置内边距，类似于html中表格单元格的填充属性，即盒子边框和内容之间的距离。padding属性也有padding-left、padding-right、padding-top和padding-bottom属性，分别用来设置边界与内容区之间左、右、上和下的空白宽度。

postion属性

用于设置容器的定位。postion属性有4个值，分别是：static、absolute、fixed、relative。

（1）absolute用于容器的绝对定位，使用绝对定位的容器浮于其它容器之上。定位的方法是在CSS中设置容器的top、bottom、left和right值，这4个值得参照对象是浏览器的4条边。同一位置只会显示最上面的容器，CSS绝对定位容器的z-index属性的值越大，容器越靠上。

（2）Fixed用于容器的固定定位，固定定位和绝对定位非常类似，不过被定位的容器不会随着滚动条的拖动而变化位置。不过IE6.0版本的浏览器不支持fixed值得postion属性，网上类似的效果都是采用javascript脚本编程完成的。

（3）reletive用于设置容器的相对定位，相对定位也是独立出来浮在上面，不过相对定位的容器的top、bottom、left、right属性参照的对象是其父容器的4条边，而不是浏览器窗口。

background-color属性

用于设置背景色。

background-image属性

设置背景图片，编写格式为：background-image:url(“图片路径”); 控制背景平铺的属性为background-repeat，其值有repeat（默认，平铺背景图片）、no-repeat（不平铺，只是显示一张图片）、repeat-x（水平方向平铺）、repeat-y（垂直方向平铺）。

当背景图片设置为不平铺时，可以使用background-position定位背景图片的位置。有2种编写方法：

第一种方法：Background-postion:左右位置 上下位置;

左右位置取值为left、right和center，上下位置取值为top、bottom和center。希望上下左右都居中时只需要设置background-postion属性值为center即可。

如：background-postion:righttop;

第二种方法：Background-postion:左边距 顶边距;  左边距和顶边距可以用像素单位或百分比单位。

如：background-postion:15px20px;或background-postion:10%90%

background-attachment属性

background-attachment:fixed;用来定位背景图片，常用于页面主体背景。

background属性

用于背景属性缩写设置。其值由多个背景控制的属性值组合而成，编写方法为：

background:背景色背景图片路径 背景平铺方式 背景是否固定 背景定位;

如：background:#ff0url(“bg.gif”) repeat-x center;

a属性

a:hover表示当鼠标悬停在超链接上时，a:active表示鼠标点击超链接，a:visited表示鼠标点击超链接之后。

a:hover .tips{…}表示当鼠标悬停在超链接上时此样式才有效。

display:none;

表示内容不显示。

display:block;

表示内容以块状显示。

text-decoration:none

表示去除了超链接默认的下划线。

List-style

如：list-style：circle inside；

用于设置列表的样式。若使用图片做项目列表符号，不推荐使用list-style属性，而是使用背景样式，使用前需要设置列表元素的list-style属性为none，即禁用列表默认项目符号。

Text-indent属性

设置元素内含文本缩进的值。如text-indent属性设置。

em单位

font-size常用到em做单位，font-size=1.2em表示此文字大小是其它文字的1.2倍。

Font属性

Font-family属性用于设置所用字体，font-variant属性用于设置英文字母，使小写转换成大写，并且高度不变。Text-transform属性可统一设置内含英文文本的大小写。

设置小型大写字母：font-variant：small-caps;

设置英文为开头字母大写：text-transform：capitalize；

设置为大写字母：text-transform：uppercase；

设置为小写字母：text-transform：lowercase；

Letter-spacing属性

用以设置英文及中文文字间的间距。

Word-spacing属性

用于设置英文单词间的间距，对中文段落无效。

Layout-flow属性

取值为horizontal即为横向排版，取值为vertical-ideographic即为纵向排版。

图片裁切方法

（1）      使用图片父容器的over-flow属性，over-flow：hidden；可裁切容器的内容。

（2）      可通过边距属性margin取负值来实现。

Filter属性

CSS滤镜属性的选择符，需配合相应的滤镜名称及参数才能生效。

不同版本的IE浏览器兼容问题的解决办法

使用条件注释方法，条件注释是IE5.0到IE7.0浏览器的专有功能，其条件注释编写于XHTML结构代码中，编写方法为：

<!-[if条件]>其中内容只有满足条件的浏览器能解析<![endif]-->

IE和Filrefox之间兼容问题解决办法

（1）      属性选择符

（2）      子对象选择符

（3）      符号修饰选择符

JavaScript总结

 

JavaScript与Java的区别体现在：
　　 首先，它们是两个公司开发的不同的两个产品，Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。

　　其次，JavaScript是基于对象的，而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。

　　第三，两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。

　　第四，两种语言所采取的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。

　　第五，代码格式不一样。Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。

　　第六，嵌入方式不一样。在HTML文档中，两种编程语言的标识不同，JavaScript使用<script>...</script>来标识，而Java使用<applet> ... </applet> 来标识。

　　第七，静态绑定和动态绑定。Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查，如不经编译则就无法实现对象引用的检查。JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查。

 

onOroff= document.forms[0].sex[0].checked  ？

<formοnclick="showSex()">

<inputtype="radio" name="sex">帅哥

<inputtype="radio" name="sex">美女

</form>

//获取当前时间

<script>

var now = new Date();

var month=now.getMonth();

var date=now.getDate();

var hour=now.getHours();

var minute=now.getMinutes();

var second=now.getSeconds();

var day=now.getDay();

 

document.write("时间："+now+"<br>");

document.write("月份："+(month+1)+"<br>");

document.write("日期："+date+"<br>");

document.write("小时："+hour+"<br>");

document.write("分钟："+minute+"<br>");

document.write("秒："+second+"<br>");

document.write("星期："+day+"<br>");

</script>

<Script>

with语句： （对象操作语句）

• 功能：为一段程序建立默认对象。
• 格式：
  with (<对象>){
  　　<语句组>
  ｝
• 例１：
  with (document) {
      write ("限时抢购物品：");
      write ("<Li>ViewSonic 17\" 显示器。");
      write ("<Li>EPSON 打印机。");
  }

构造函数和for … in

<Script>
functionmember(name, sex) {//构造函数member
    this.name= name;
    this.sex= sex;
}

functionshowProperty(obj, objString) {
var str ="";
for (var i in obj)  //i表示 name或sex
    str+= objString + "." + i + " = " + obj[i] +"<BR>"; //obj[i]表示值
 return str;
}

papa = newmember("杨宏文", "男生");//建立对象实例papa
document.write(showProperty(papa,"papa"))

</Script>

执行结果为：papa.name= 杨宏文
papa.sex = 男生

完美地关闭窗口

Window.opener=null;

Window.open(‘’,’_self’);

Window.close();