1、JavaScript网页特效案例教程,主编：杨旭超 副主编：丁之彦 王伟民 刘秀芹机械工业出版社,HTML语法,1 HTML入门 2 文本 3 列表 4 超链接 5 图像 6 表格 7 表单 8 多媒体,1. HTML入门,本章首页,HTML（HyperText Markup Language）中文是“超文本标记语言” ，是一种专门用来设计网页的计算机描述语言。其扩展名为.html(或.htm),任何一个Web页面都离不开HTML，HTML也是Web应用开发的基础。HTML语言是大多数浏览器都能识别的语言。,常用HTML编辑工具1.任何一个文档编辑器都是HTML编辑器。2.很多公司设计了专用的
2、网页编辑器，像Dreamweaver，FrontPage，CutePage，QuickSite等，是专门用来制作网页的，利用它们可以很容易的编写出精美的网页，具有所见即所得的功能。,HTML文档的结构 头部信息正文部分,这是标题部分。你好，这是正文部分！,HTML基本结构以及书写规范,HTML的标记HTML语言中用于描述功能的符号称为“标记”。如“HTML”、“BODY”、“TITLE”等，标记在使用时必须用尖括号“”括起来。,1.大部分标记是双标记，也就是成对出现。其中：开始标记是“”，结束标记是“”, 比如： 这是一段内容。 这里以粗体文字显示。 2.也有少量标记是单标记，只需要在尖括号里
3、输入标记名就可（即“”），没有范围之界定。比如： 这是一段的第一行。 一条水平线 ,许多单标记和双标记的开始标记内包含一些属性，通过这些属性可以对这些标记进行更进一步的设置，其语法格式如下：注意：各个属性之间没有先后顺序。,HTML标准单位,1.长度单位 长度单位可以用来定义页面可见标记对象（如水平线、表格、图片等）的长、宽、高等一系列属性。长度的表示有两种方式，绝对长度和相对长度。 相对单位： em：相对于字母高度的比例因子。 en：相对于字型大小的比例因子。 %：相对于长度单位的百分比例。 绝对单位： in：英寸 cm：厘米 mm：毫米 px：像素 pc：印刷活字单位 pt：像点 注意：1
4、 in=6pc=72pt=2.54cm,2.颜色单位(colorvalue)网页颜色的表示共有五种方式 （1）#RRGGBB：每种颜色取值范围00FF （2）#RGB：每种颜色取值范围0F （3）rgb(R,G,B)：每种颜色取值范围0255 （4）rgb(R%,G%,B%)：相对比例 （5）Color_Name：有141种标准色 例如BlackNavyGrayLimePurpleSliver等等,3.URL路径URL（Uniform Resource Locator：统一资源定位器）是WWW页的地址。有绝对路径：和相对路径：,2. 文本,在网页中，文本是核心的内容，只有设置适当的文本格式，才
5、能得到绚丽多彩的网页。设置文本的格式包括：设置标题和文字的字体、字号、字型、颜色，段落格式、文本布局等。,本章首页,HTML常用标记 1HTML文本标记 格式： 功能：标志文档开始和结尾的标记。 3HTML文件头标记 格式： 功能：用于包含文件的基本信息。 3HTML文件主体标记 格式： 功能：文件主体标记。,1. 文档头标记HTML文档的HEAD部分是文档头，在文档头中常用的一些标记有：（1）标记 用于定义网页标题栏上的显示内容。例如：这是标题部分。 ,（2）标记：放于与之间的标记，功能为： 1）定义该网页的关键字，可以使搜索引擎根据关键字搜索到我们网站的页面。 例 其中name=“Keyw
6、ords” 说明要定义关键字， Chris,Web,Music,photo是给搜索引擎搜索的关键字 2）页面刷新和自动跳转其中refresh表示设置页面的刷新，10表示10秒，url指明刷新后要跳转到的页面,1 设置的属性,标记属性,功能,background=URL,设置网页的背景图片,bgcolor=colorvalue,设置网页的背景颜色,text=colorvalue,设置文本的颜色,link=colorvalue,设置尚未被访问过的超文本 链接的颜色，默认为蓝色,vlink=colorvalue,设置已被访问过的超文本 链接的颜色，默认为紫色,alink=colorvalue,设置超
7、文本链接在被单击 瞬间的颜色，默认为红色,bgproperties =fixed,设置背景是否随滚动条滚动,leftmargin=size,设置网页左边的空白,topmargin=size,设置网页上方的空白,margingwidth=size,设置网页空白的宽度,marginheight =size,设置网页空白的高度,接上页,段落格式化 1标题标记格式：，功能：设置各种大小不同标题的标记。 3段落标记格式：功能：设置段落标记。 3预定义格式标记格式：功能：原样显示。,4分区显示标记格式：功能：分区显示标记。 5换行标记格式：功能：强制换行。 6水平线标记格式：功能：插入水平线标记。 7注释
8、标记格式：功能：注释标记。,标记的使用三种标记的使用！我在中间！中间我在左边！左边我在右边！右边,字符的格式化 1字体设置标记格式：功能：设置字体格式标记。, 设为上标 设为下标加强强调,常用页面标记, 段落标记单标记-换行标记空格标记,水平线标记, 水平线标记-单标记 其属性有： align 控制水平线对齐方式,有 left/right/center width 控制水平线长度,值为数字或百分比 size 控制水平线粗细,值为数字 color 控制水平线颜色 noshade 取消水平线预设的3D阴影例如 ,3. 列表,有序列表 无序列表,1有序列表/标号列表格式：OL的start属性：设定从
9、何数值开始标号，默认为1。 LI 的type属性：用来设定标号的样式，例如数字（1，2）、大写英文字母（A，B）、小写英文字母（a，b）、大写罗马字母（I，II）和小写罗马字母（i，ii），默认的序号是数字。,2无序列表/项目列表格式：LI 的type属性：可以为disc（实心圆点）、circle（空心圆点）、square（方块）和自定义图片，默认为实心圆点。, 网络系列中文IE5.0使用实例FLASH 4.0应用实例集绘图系列中文Photoshop5.02图像处理实例中文Photoshop5.02特效字制作实例,4. 超链接,超链接是从一张网页跳转到另外一张网页的途径，它就如同人的神经，把网
10、站的所有信息有机地结合在一起。 加入超级链接 格式：,本章首页,加入超级链接 格式： 功能：在当前页和其他页间建立超链接。,给定链接目标的位置,标记属性,功能,href=URL,target=frametarget,设置显示链接目标的框架,accesskey=character,设置快捷键,tabindex=num,设置Tab键的顺序,rel=linktype,设置到链接的关系,列表的项目符号：苹果芒果葡萄列表的编号：水果颜色花,格式： 功能：在网页中加入图像在网页中，目前我们比较适合采用的图像格式是 JPEG、GIF和PNG，这几种格式文件格式较小，传输速度快，图片效果也还不错。,5. 图像
11、,1插入图像,标记属性,功能,src =URL,通过URL给出图像来源的位置，不可缺省,width=size,设置图像宽度,height =size,设置图像高度,align=alignstyle,设置对齐方式。取值为：top， middle，bottom，left，right,border= size,设置图像边框，缺省为0,hspace=size,设置图片左右边沿空白,vspace=size,设置图片上下边沿空白,alt= text,设置在图像未载入前 图片位置显示的文字,表格可以把文字和图片等内容按照行和列排列起来，使整个网页更加清晰，利于信息的表达。,本章首页,6.表格,美化表格-标记
12、所含的属性,标记属性,功能,border=size,表格边框粗细（=0时边框隐藏）,background =URL,表格背景图片,cellspacing=size,表格内框线的间距,cellpadding =size,表格内容与单元格边框之间距离,bordercolor =colorvalue,表格边框颜色,适用标记,width= size,表格/单元格的宽度,height=size,用是设表格水平对齐方式用设单元格文字水平对齐方式,Align =alignstyle,bgcolor =colorvalue,表格/单元格的高度,设置背景色,功能,标记属性,标记属性,功能,valign=vali
13、gnstyle,设置垂直对齐方式，值 可以是top/middle/bottom,该属性适用标号：,表单是用户和Web应用程序、Web数据库等进行交互的界面。在Web上，通过表单可以完成用户和计算机或服务器间的信息交换。,本章首页,7.表单,表单的格式： 其中 action属性：指定服务器端处理此表单程序所在位置； method属性：处理方式，默认值GET ； name属性：表单名,form里常用标记：一、单行文本框 格式： input type=cdata name=“fieldname” sizenum valuecdata maxlengthnum disabled,name= cdata
14、,设文本框的名称,size=num,设文本框的显示长度,maxlength =num,设允许输入的最大字符数,value=cdata,设文本框的初始值,标记属性,功能,type=cdata,Type=text时表示单行文本框 Type=password时表示密码 输入内容用星号显示,disabled,加入该属性会使得无法输入文本,二、单选按钮 input type=“radio” name=cdata valuecdata checked disabled同一组单选按钮的name是相同的。 加上 checked属性，该按钮初始为选中。 当表单数据提交时，被选中按钮的value属性值会送出,三、
15、复选框 input type=“checkbox” name=cdata valuecdata checked disabled由于每个复选框是独立的，所以name不要相同,请选择您最常用的搜索引擎YahooSohuInfoseek ,请选择您上网浏览时感兴趣的内容：时事新闻体育比赛文学艺术 ,四、多行文本框|滚动文本框格式： ,不会自动换行，30*4,其中 off-必须按Enter键才换行physical-自动换行，数据传送时传出换行字符virtual-自动换行，但是不传出换行字符,留言栏：,五、下拉式菜单 格式：选项一选项二 ,属性：,属性：,标记属性,功能,value=cdata,设定该
16、选项被选中后，传送到 服务器的值,selected,有该属性，此项初始为选中,标记属性,功能,name=cdata,设下拉菜单的名字,size=num,设下拉菜单大小（不下拉时可见选项个数）,multiple,有该属性，下拉菜单可多选,SIZE=1 ,SIZE=3,性别（单选）：男女,兴趣（复选）：运动唱歌阅读,六、按钮 input type=“buttontype” name=cdata valuecdata Value来设置按钮上显示文字 Name为按钮命名Type可以是submit提交、reset重置、button普通按钮,8.多媒体,1.跑马灯标记用来设置文字、图片等的滚动该标记常带参
17、数： direction-滚动的方向 ,可以设为left/right/up/down loop-文本滚动的次数，设为-1（默认）时，表示无限次。 behavior-滚动的方式，可设的值如下：scroll 完全滚动，从一端消失后，在另一端出现并滚动slide 滚动一次 alternate 从一端到另一端后又反向,2 添加多媒体文件在网页中加入音乐或者视频文件:首先我们要在客户端装上运行这些文件的播放器，然后使用下面标记：,标记属性解析： 1.其中width和height属性必须设置，单位是像素，否则无法正确播放。2.另外，还有一些属性： autostart: 是否自动运行。取值True自动运行，取值False表示不自动运行。 Loop:是否循环播放。取值True则无限次循环播放，取值False表示只播放一次。 hidden:是否隐藏。取值True则隐藏面板，取值False【默认值】显示面板。,
