模块 HTML基础.ppt

《模块 HTML基础.ppt》由会员分享，可在线阅读，更多相关《模块 HTML基础.ppt（65页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScript网页特效案例教程主编：杨旭超副主编：丁之彦 王伟民 刘秀芹机械工业出版社 HTML语法1 HTML入门2 文本3 列表4 超链接5 图像6 表格7 表单8 多媒体 1.HTML入门 本章首页本章首页 HTML HTML（HyperText Markup HyperText Markup LanguageLanguage）中文是）中文是“超文本标超文本标记语言记语言”，是一种专门用来设，是一种专门用来设计网页的计算机描述语言。计网页的计算机描述语言。其扩展名为其扩展名为.html(.html(或或.htm).htm)任何一个Web页面都离不开HTML，HTML也是Web应用开

2、发的基础。HTML语言是大多数浏览器都能识别的语言。常用HTML编辑工具1.任何一个文档编辑器都是HTML编辑器。2.很多公司设计了专用的网页编辑器，像Dreamweaver，FrontPage，CutePage，QuickSite等，是专门用来制作网页的，利用它们可以很容易的编写出精美的网页，具有所见即所得的功能。HTML文档的结构 头部信息 正文部分 这是标题部分。你好，这是正文部分！HTML基本结构以及书写规范HTML的标记的标记 HTML语言中用于描述功能的符号称为“标记”。如“HTML”、“BODY”、“TITLE”等，标记在使用时必须用尖括号标记在使用时必须用尖括号“”括起来括起来

3、。1.大部分标记是双标记双标记，也就是成对出现。其中：开，也就是成对出现。其中：开始标记是始标记是“”，结束标记是，结束标记是“”,比如：这是一段内容。这里以粗体文字显示。2.也有少量标记是单标记单标记，只需要在尖括号里输入标，只需要在尖括号里输入标记名就可记名就可（即“”），没有范围之界定。比如：这是一段的第一行。一条水平线 许多单标记和双标记的开始标记内包含一些单标记和双标记的开始标记内包含一些属性属性，通过这些属性可以对这些标记进行更进一步的设置，其语法格式如下：注意：各个属性之间没有先后顺序。HTML标准单位标准单位 1.1.长度单位长度单位长度单位可以用来定义页面可见标记对象（如水平

4、线、长度单位可以用来定义页面可见标记对象（如水平线、表格、图片等）的长、宽、高等一系列属性。长度的表表格、图片等）的长、宽、高等一系列属性。长度的表示有两种方式，绝对长度和相对长度。示有两种方式，绝对长度和相对长度。相对单位：相对单位：emem：相对于字母高度的比例因子。：相对于字母高度的比例因子。enen：相对于字型大小的比例因子。：相对于字型大小的比例因子。%：相对于长度单位的百分比例。：相对于长度单位的百分比例。绝对单位：绝对单位：inin：英寸：英寸 cmcm：厘米：厘米 mmmm：毫米：毫米pxpx：像素：像素 pcpc：印刷活字单位：印刷活字单位ptpt：像点：像点注意：注意：注意

5、：注意：1 in=6pc=72pt=2.54cm1 in=6pc=72pt=2.54cm1 in=6pc=72pt=2.54cm1 in=6pc=72pt=2.54cm2.2.颜色单位颜色单位(colorvalue)(colorvalue)网页颜色的表示共有五种方式网页颜色的表示共有五种方式（1 1）#RRGGBB#RRGGBB：每种颜色取值范围：每种颜色取值范围00FF00FF（2 2）#RGB#RGB：每种颜色取值范围：每种颜色取值范围0F0F（3 3）rgb(R,G,B)rgb(R,G,B)：每种颜色取值范围：每种颜色取值范围02550255（4 4）rgb(R%,G%,B%)rgb(R

6、%,G%,B%)：相对比例：相对比例（5 5）Color_NameColor_Name：有：有141141种标准色种标准色例如例如BlackNavyGrayLimePurpleSliverBlackNavyGrayLimePurpleSliver等等等等3.URL3.URL路径路径 URLURL（Uniform Resource LocatorUniform Resource Locator：统一资源定位器）是统一资源定位器）是WWWWWW页的地址。页的地址。有绝对路径：有绝对路径：a href=a href=和相对路径：和相对路径：IMG src=IMG src=2.文本 在网页中，文本是核

7、心的内容，只有设置适当的文本格式，才能得到绚丽多彩的网页。设置文本的格式包括：设置标题和文字的字体、字号、字型、颜色，段落格式、文本布局等。本章首页本章首页HTML常用标记 1HTML文本标记格式：功能：标志文档开始和结尾的标记。3HTML文件头标记格式：功能：用于包含文件的基本信息。3HTML文件主体标记格式：功能：文件主体标记。1.文档头标记文档头标记 HTMLHTML文档的文档的HEADHEAD部分是文档头，在文部分是文档头，在文档头中常用的一些标记有：档头中常用的一些标记有：（1）标记标记用于定义网页标题栏上的显示内容。用于定义网页标题栏上的显示内容。例如：例如：这是标题部分。这是标题

8、部分。（2）标记：放于标记：放于与与之间的之间的标记，功能为：标记，功能为：1）定义该网页的关键字，可以使搜索引擎根据关定义该网页的关键字，可以使搜索引擎根据关键字搜索到我们网站的页面。键字搜索到我们网站的页面。例例其中其中name=“Keywords”说明要定义关键字，Chris,Web,Music,photo是给搜索引擎搜索的关键字是给搜索引擎搜索的关键字2）页面刷新和自动跳转页面刷新和自动跳转其中其中refresh表示设置页面的刷新，表示设置页面的刷新，10表示表示10秒，秒，url指明刷新后要跳转到的页面指明刷新后要跳转到的页面1 设置的属性标记属性标记属性功能功能background

9、=URL设置网页的背景图片设置网页的背景图片bgcolor=colorvalue设置网页的背景颜色设置网页的背景颜色text=colorvalue设置文本的颜色设置文本的颜色link=colorvalue设置尚未被访问过的超文本设置尚未被访问过的超文本链接的颜色，默认为蓝色链接的颜色，默认为蓝色vlink=colorvalue设置已被访问过的超文本设置已被访问过的超文本链接的颜色，默认为紫色链接的颜色，默认为紫色alink=colorvalue设置超文本链接在被单击设置超文本链接在被单击瞬间的颜色，默认为红色瞬间的颜色，默认为红色bgproperties=fixed设置背景是否随滚动条滚动设置

10、背景是否随滚动条滚动leftmargin=size设置网页左边的空白设置网页左边的空白topmargin=size设置网页上方的空白设置网页上方的空白margingwidth=size设置网页空白的宽度设置网页空白的宽度marginheight=size设置网页空白的高度设置网页空白的高度接上页段落格式化1标题标记 格式：，功能：设置各种大小不同标题的标记。3段落标记 格式：功能：设置段落标记。3预定义格式标记 格式：功能：原样显示。4分区显示标记 格式：功能：分区显示标记。5换行标记 格式：功能：强制换行。6水平线标记 格式：功能：插入水平线标记。7注释标记 格式：功能：注释标记。标记的使用

11、 三种标记的使用！我在中间！中间 我 在 左 边！左 边 我在右边！右边 字符的格式化1字体设置标记 格式：功能：设置字体格式标记。标记属性功能size=size文字的大小（17默认3，+1表示大一号）face=fontstyle字体（例如“楷体”，Arial,TimersNewRoman）color=colorvalue设置文字的颜色其他标记格式功能给字符加下划线给字符加下划线给字符上加横线，表示删除给字符上加横线，表示删除设定字符为粗体设定字符为粗体将字符设置成斜体将字符设置成斜体标记使得其中的文字产生闪烁的效果标记使得其中的文字产生闪烁的效果 设为上标 设为下标 加强强调常用页面标记 段

12、落标记段落标记 单标记单标记-换行标记换行标记  空格标记空格标记水平线标记 水平线标记-单标记其属性有：align 控制水平线对齐方式,有 left/right/centerwidth 控制水平线长度,值为数字或百分比size 控制水平线粗细,值为数字color 控制水平线颜色noshade 取消水平线预设的3D阴影例如3.列表有序列表无序列表1有序列表/标号列表格式：OL的start属性：设定从何数值开始标号，默认为1。LI 的type属性：用来设定标号的样式，例如数字（1，2）、大写英文字母（A，B）、小写英文字母（a，b）、大写罗马字母（I，II）和小写罗马字母（i

13、，ii），默认的序号是数字。2无序列表/项目列表格式：LI 的type属性：可以为disc（实心圆点）、circle（空心圆点）、square（方块）和自定义图片，默认为实心圆点。网络系列 中文IE5.0使用实例 FLASH 4.0应用实例集 绘图系列 中文Photoshop5.02图像处理实例 中文Photoshop5.02特效字制作实例 4.超链接 超链接是从一张网页跳转到另外一张网页的途径，它就如同人的神经，把网站的所有信息有机地结合在一起。加入超级链接 格式：本章首页本章首页加入超级链接 格式：功能：在当前页和其他页间建立超链接。给定链接目标的位置给定链接目标的位置标记属性标记属性功能

14、功能href=URLtarget=frametarget设置显示链接目标的框架设置显示链接目标的框架accesskey=character设置快捷键设置快捷键tabindex=num设置设置Tab键的顺序键的顺序rel=linktype设置到链接的关系设置到链接的关系列表的项目符号：苹果 芒果 葡萄 列表的编号：水果 颜色 花 格式：功能：在网页中加入图像 在网页中，目前我们比较适合采用的图像格式是 JPEG、GIF和PNG，这几种格式文件格式较小，传输速度快，图片效果也还不错。5.图像1插入图像标记属性标记属性功能功能src=URL通过通过URL给出图像来源的位置，不可缺省给出图像来源的位置

15、，不可缺省width=size设置图像宽度设置图像宽度height=size设置图像高度设置图像高度align=alignstyle设置对齐方式。取值为：设置对齐方式。取值为：top，middle，bottom，left，rightborder=size设置图像边框，缺省为设置图像边框，缺省为0hspace=size设置图片左右边沿空白设置图片左右边沿空白vspace=size设置图片上下边沿空白设置图片上下边沿空白alt=text设置在图像未载入前设置在图像未载入前图片位置显示的文字图片位置显示的文字 表格可以把文字和图片等内容按照行和列排列起来，使整个网页更加清晰，利于信息的表达。本章首页

16、本章首页 6.表格美化表格-标记所含的属性 标记属性标记属性功能功能border=size表格边框粗细（表格边框粗细（=0时边框隐藏）时边框隐藏）background=URL表格背景图片表格背景图片cellspacing=size表格内框线的间距表格内框线的间距cellpadding=size表格内容与单元格边框之间表格内容与单元格边框之间距离距离bordercolor=colorvalue表格边框颜色表格边框颜色适用标记适用标记width=size表格表格/单元格的宽度单元格的宽度height=size用是设表用是设表格水平对齐方式格水平对齐方式用设用设单元格文字水平对单元格文字水平对齐方式

17、齐方式Align=alignstylebgcolor=colorvalue 表格表格/单元格的高度单元格的高度设置背景色设置背景色 功能功能标记属性标记属性标记属性标记属性功能功能valign=valignstyle设置垂直对齐方式，值设置垂直对齐方式，值可以是可以是top/middle/bottom该属性适用标号：该属性适用标号：表单是用户和Web应用程序、Web数据库等进行交互的界面。在Web上，通过表单可以完成用户和计算机或服务器间的信息交换。本章首页本章首页 7.表单表单的格式：其中action属性：指定服务器端处理此表单程序所 在位置；method属性：处理方式，默认值GET；nam

18、e属性：表单名form里常用标记：一、单行文本框格式：input type=cdata name=“fieldname”sizenumvaluecdata maxlengthnumdisabledname=cdata 设文本框的名称设文本框的名称size=num设文本框的显示长度设文本框的显示长度maxlength=num 设允许输入的最大字符数设允许输入的最大字符数value=cdata设文本框的初始值设文本框的初始值标记属性标记属性功能功能type=cdataType=text时表示单行文本框时表示单行文本框Type=password时表示密码时表示密码输入内容用星号显示输入内容用星号显示

19、disabled加入该属性会使得无法输入文本加入该属性会使得无法输入文本二、单选按钮input type=“radio”name=cdata valuecdata checked disabled同一组单选按钮的name是相同的。加上 checked属性，该按钮初始为选中。当表单数据提交时，被选中按钮的value属性值会送出三、复选框input type=“checkbox”name=cdata valuecdata checked disabled由于每个复选框是独立的，所以name不要相同 请选择您最常用的搜索引擎 Yahoo Sohu Infoseek 请选择您上网浏览时感兴趣的内容：时

20、事新闻 体育比赛 文学艺术四、多行文本框|滚动文本框格式：不会自动换行，30*4标记属性标记属性功能功能name=cdataname=cdata设设文本域文本域的名称的名称rows=num设文本域的行数设文本域的行数cols=num设文本域的列数设文本域的列数wrap=changetype指指定定文文字字换换行行方方式式，可可以以是是off/physical/virtual(off/physical/virtual(默认默认)其中 off-必须按Enter键才换行 physical-自动换行，数据传送时传出换行字符 virtual-自动换行，但是不传出换行字符 留言栏：五、下拉式菜单格式：选

21、项 一 选项二 属性：属性：属性：属性：标记属性标记属性功能功能value=cdata 设定该选项被选中后，传送到设定该选项被选中后，传送到服务器的值服务器的值selected有该属性，此项初始为选中有该属性，此项初始为选中标记属性标记属性功能功能name=cdata设下拉菜单的名字设下拉菜单的名字size=num设下拉菜单大小（不下拉时可见选项个数）设下拉菜单大小（不下拉时可见选项个数）multiple有该属性，下拉菜单可多选有该属性，下拉菜单可多选SIZE=1 ,SIZE=3 性别（单选）：男 女 兴趣（复选）：运动 唱歌 阅读 六、按钮input type=“buttontype”nam

22、e=cdata valuecdata Value来设置按钮上显示文字Name为按钮命名Type可以是submit提交、reset重置、button普通按钮 8.多媒体1.1.跑马跑马灯灯标记标记用用来设来设置文字、置文字、图图片等的片等的滚动滚动 该标记该标记常常带参数带参数：direction-direction-滚动滚动的方向的方向 ,可以可以设为设为left/right/up/downleft/right/up/downloop-loop-文本文本滚动滚动的次的次数数，设为设为-1-1（默（默认认）时时，表示无限次。，表示无限次。behavior-behavior-滚动滚动的方式，可的方

23、式，可设设的的值值如下：如下：scroll scroll 完全完全滚动滚动，从从一端消失后，在另一端出一端消失后，在另一端出现现 并滚动并滚动 slide slide 滚动滚动一次一次 alternate alternate 从从一端到另一端后又反向一端到另一端后又反向2 添加多媒体文件 在网页中加入音乐或者视频文件:首先我们要在客户端装上运行这些文件的播放器，然后使用下面标记：标记属性解析：1.其中width和height属性必须设置，单位是像素，否则无法正确播放。2.另外，还有一些属性：autostart:是否自动运行。取值True自动运行，取值False表示不自动运行。Loop:是否循环播放。取值True则无限次循环播放，取值False表示只播放一次。hidden:是否隐藏。取值True则隐藏面板，取值False【默认值】显示面板。