网页设计入门

第1页共74页思源社区欢迎你！网页设计入门盐城师范学院·思源驿站2010.10第2页共74页思源社区欢迎你！页思源社区欢迎你！方框属性（盒子模型）5.4样式表的3类应用方式5.4.1内嵌样式5.4.2行内嵌样式5.4.3外部引用5.5总结第6章JavaScript基本语法6.1简介6.2为什么要学习JavaScript6.3什么是JavaScript6.3.1脚本的基本结构6.3.2脚本的执行原理6.4JavaScript的基本语法6.4.1变量的声明和赋值6.4.2运算符号6.4.3逻辑控制语句6.4.4注释6.4.5类型转换6.5JavaScript的高级语法——自定义函数function6.5.1什么是函数6.5.2如何使用函数6.6常见错误6.7总结第7章DOM对象（一）7.1简介7.2DOM模型介绍7.2.1HTML文档的树形结构7.2.2DOM7.2.3浏览器对象7.3window对象常用的属性、方法、事件的介绍7.3.1常用属性7.3.2常用方法第4页共74页思源社区欢迎你！()方法做时钟显示7.4.1date对象常用的方法7.4.2setTimeout()方法7.5history和location对象7.5.1history对象7.5.2location对象7.6总结第8章DOM对象（二）8.1简介8.2document对象的常用属性和方法介绍8.2.1属性8.2.2方法8.3网页选项卡效果8.4全选/全不选/反选效果8.5常见错误8.6总结第5页共74页第1章HTML概述目标会使用HTML的基本结构创建网页会使用文本相关标签实现页面文字修饰和布局1.1简介HTML的英文全称是HyperTextMarkupLanguage，中文叫做“超文本（字）标记语言”。HTML跟一般的文字处理器不同的地方在于，它具有超文字（HyperText）、超链接（HyperLink）、超媒体（HyperMedia）的特性，通过HTTP（HyperTextTransferProtocol）协议，便能够在世界各地通过（WorldWideWeb）的架构进行跨平台的交流。HTML是创建网页的基础语言，也是创建网页的标准语言。网页由网页元素构成，网页元素是由HTML标记（标签）加上属性和内容构成。本章将介绍HTML的基本结构，文本相关标签，图像标签img，链接标签a，滚动标签marquee等。本章重点是文本、图像、链接标签的运用，难点是各种标签的综合应用。1.2HTML基本元素打开Notepad，新建一个文件，输入以下代码，保存为first.html。htmlheadtitle我的第一个网页/title/headbodyHello,bWorld/b！/body/html打开网页，查看显示效果：思源社区欢迎你！页例解：这个文件的第一标签是html，这个标签告诉你的浏览器这是HTML文件的开始，昀后一个标签是/html，告诉浏览器这是文件的结束。在head和/head之间的内容，是网页的Head信息（头信息）。Head信息是不显示在网页中，但不表示它不重要。你可以在Head信息中添加网页关键词，网页描述，网页的样式，脚本语言等等。在title和/title之间的内容，是网页的标题，显示在浏览器的标题栏。在body和/body之间的内容，是网页的主体部分。在b和/b之间的文字会被加粗，b即bold。HTML源文件是文本文件，里面包含HTML标签，告诉网页如何显示这个文件。1.3元素简介HTML元素（HTMLElement）由HTML标签、内容和标签的属性构成。HTML标签分为成对标签和独立标签。成对标签以“标签名”开始，以“/标签名”结束，属性写在开始标签里标签名的后面，内容写在开始标签与结束标签之间。独立标签写成“标签名/”，属性写在标签名的后面。HTML代码不区分大小写，但是我们今天处在HTML向XML过渡的XHTML时期，作为初学者一定要严格要求自己，养成良好的习惯，遵循代码小写、标签闭合等规范，注意代码缩进。标签属性扩展了HTML元素的能力，比如你可以通过改变body标签的bgcolor属性值来改变网页背景颜色。htmlheadtitle我的第一个网页/title/headbodybgcolor=yellowHello,bWorld/b！/body/html显示效果：思源社区欢迎你！页思源社区欢迎你！放在文档的开头和结尾文件标题title/title必须放在文件头文件头head/head网页的描述信息总类（所有HTML文件都有的）文件主体body/body网页的主体内容标题h?/h??的值从1到6，有六层选择层div/div如今网页中昀常见的标签，通常与CSS使用引文区块blockquote/blockquote通常会缩进强调em/em通常以斜体显示特别强调strong/strong通常加粗显示引文cite/cite通常以斜体显示代码code/code显示原始码样本samp/smap键盘输入kbd/kbd变数var/var定义dfn/dfn有些浏览器不识别地址address/address大字big/big结构性定义（由浏览器控制显示风格）小字small/small加粗b/b斜体i/i下划线u/u有些浏览器不识别删除线s/s有些浏览器不识别下标sub/sub上标sup/sup打字机字体tt/tt用单空格字型显示预定格式pre/pre保留代码中的空格剧中center/center文字和图片都适用闪耀blink/blink有些浏览器不识别与外观相关的标签字体font/font第8页共74页思源社区欢迎你！=”url”/a图片imgsrc=”url”/站点地图mapName=”???”/map链接与图片内嵌物件embedsrc=“url”/将物件插入页面段落p/p段落与段落之间通常是双倍行距换行br/单倍行距水平线hr/不可换行nobr/文档标签（分隔）可换行处wbr/如果需要，可在此断行无序列表ulli/li/ul有序列表olli/li/ol定义式列表dldd/dt/dldt项目，dd定义1.4.2常用标签下面是一些常用标签组成的网页的代码。htmlheadtitle我的第一个网页/title/headbodybgcolor=yellowHello,bWorld/b£¡pbHello,World!/b/ppiHello,World!/i/phr/puHello,World!/u/ppsHello,World!/s/ppHello,br/World!/pph1Hello,World!/h1/pph2Hello,World!/h2/pph3Hello,World!/h3/pph4Hello,World!/h4/pph5Hello,World!/h5/p第9页共74页ph6Hello,World!/h6/ppbsHello,World!/s/b/p/body/html显示效果：在HTML文件里，你可以写代码的注释，解释说明你的代码，这样有助于你和他人更好地理解代码。注释写在“!--”和“--”之间，注释内容不会显示在网页里。HTML文件会自动截取多余的空格，不管你有多少个空格，都会被浏览器解释成一个。有些标签能够将文本自成一段，不需要使用p标签分段，例如h1。思源社区欢迎你！图像标签适当地使用图像能给网页增添无限生机，吸引更多的浏览者。图像格式有很多，网页上常见的有4种，即jpg、gif、bmp、png。1.5.1基本语法img标签用于在HTML文档中插入图像。htmlheadtitle我的第一个网页/title/headbodybgcolor=yellowimgsrc=logo.png//body/html显示效果：1.5.1图片align属性用align属性可以改变图片的垂直对齐方式和水平对齐方式。htmlheadtitle我的第一个网页/title/head思源社区欢迎你！=yellowp图片的垂直对齐方式/ppimgsrc=logo.pngalign=top//ppimgsrc=logo.pngalign=middle//ppimgsrc=logo.pngalign=bottom//pp图片的水平对齐方式/ppimgsrc=logo.pngalign=left//ppimgsrc=logo.pngalign=center//ppimgsrc=logo.pngalign=right//p/body/html显示效果：思源社区欢迎你！图片的大小在缺省情况下，图片显示原有大小，你可以通过img的width和height属性来设置图片的显示大小。htmlheadtitle我的第一个网页/title/headbodybgcolor=yellowpimgsrc=logo.png//ppimgsrc=logo.pngwidth=360height=130//ppimgsrc=logo.pngwidth=360/ imgsrc=logo.pngheight=130//ppimgsrc=logo.pngwidth=750height=130/