1、HTML:Hypertext Markup Language 超文本标记语言HTML 只不过是组合成一个文本文件的一系列标签。HTML 文件的编写方法1 手工直接编写:记事本2 使用可视化软件:FrontPage DreamWeaver3 由 WEB 服务器一方实时动态生成:Asp Php第一节 页面标记、一 HTML 文件结构(Document Structures).网页标题 HTML 文件的正文 JavaScript 和 CSS 一般都是定义在 HEAD 头中。一般来说,位于头部的内容都不会在网页上直接显示,而是通过另外的方式起作用。二背景色彩和文字色彩bgcolor - 背景色彩 ba
2、ckground- 背景图片text - 非可链接文字的色彩 在浏览器默认的情况下,链接文字的颜色为蓝色,访问过后为紫红色.这有助于用户判断是否单击过该链接.link - 可链接文字的色彩 alink - 正被点击的可链接文字的色彩 vlink - 已经点击(访问)过的可链接文字的色彩 #=rrggbb色彩是用 16 进制的 红绿蓝(red-green-blue, RGB) 值来表示。16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. 三 页面空白(Margin) 页面左边的空白 页面上方的空白(天头) #=margin amount五 标尺线#=left,
3、 right#=rrggbb 16 进制 RGB 数码,或者是下列预定义色彩:Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 空格:第二节 字体标记一标题字体(Header). #=1, 2, 3, 4, 5, 6今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!标记属性属性 描述Face 字体Si
4、ze 字号color 颜色二字体大小. #=1, 2, 3, 4, 5, 6, 7 or +#, -#今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!三字体颜色 指定颜色 . #=rrggbb 16 进制数码,或者是下列预定义色彩:Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow,
5、 Aqua White & White 四物理字体(Physical Style)今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!今天天气真好! 今天天气真好!五指定“字体大小”的标记和“指定字体”的标记的组合使用今天 天气 真好!今天 天气 真好! White & White 第三节 文字布局标记一行的控制 1 段(Paragraph) (可以看作是空行) 你好吗?很好。 你好吗? 很好。2 换行 你好吗?很好。 你好吗?很好。二文字的对齐(Alignment)
6、 . #=left, center, rightHelloHello HelloHello三文字的分区(Division)显示 . Can you feel happiness without unpleasant? Please show me your smile.Can you feel happiness without unpleasant?Please show me your smile. . Can you feel happiness without unpleasant?Please show me your smile. . Can you feel happiness
7、without unpleasant?Please show me your smile. 超链接(Link)一超链接的概念每个网页都有独一无二的地址URL:uniform resource locator 统一资源定位器二链接标记1 链接标记的属性属性 描述href 指定链接地址name 给链接命名target 指定链接的目标窗口2 关于路径1绝对路径:http:/2相对路径1 基本语法 . 这是一个链接的例子。 点一下带下划线的文字!这是一个链接的例子。 点一下带下划线的文字!2 跳转到页面的另外一个地方. . 跳转到下一个“链接点“下一个链接点 跳转到下一个“链接点“下一个链接点3 跳转
8、到另一个页面的某个地方. . 跳转到另一个页面的某个地方。跳转到另一个页面的某个 地方。4 开一个新的(浏览器)窗口 (Target Window) . 开一个新窗口!开一个新窗口!5 外部链接1 链接到外部网站搜狐2 发送 E-mail给我来信3 下载文件文字4 脚本链接关闭窗口7 空链接文字第四章 图象标记一图象格式常用:JPEG、GIF二插入图片1 标记属性 描述src 图像的源文件alt 提示文字width height 宽度、高度border 边框三利用标记插入 AVI 文件属性 描述dynsrc AVI 的源文件属性loop 设定 AVI 文件循环次数属性注:loop 为 infi
9、nite,实现无限次循环。四图片的超链接五图像映射一张图片可以拥有多个超链接,一幅图像被切分成不同的区域,每一个不同的区域可以链接到不同的地址,这称为图像的热区。每一个热区可以有各自的链接地址 ,浏览者单击热区后,就会转到相应的地址。这就是图像映射。表格链接是一个网站的灵魂,表格是网页排版的灵魂。一制作表格表格标记标记 描述 表格标记 行标记 单元格标记1制作表格网页图像软件Fireworks网页制作软件Dreamweaver网页动画软件Flash2 表格的边框属性 BORDER3 表格的宽度和高度属性 WIDTH,HEIGHT4 表格的边框色属性 BORDERCOLOR5 表格的背景颜色属性
10、 BGCOLOR6 表格的背景图像属性 BACKGROUND7 单元格间距属性 CELLSPACING8 单元格边距属性 CELLPADDING9 表格的水平对齐属性 ALIGNLEFT RIGHT CENTER二表格的标题与表头1 表格标题2 表格标题的水平对齐属性 ALIGNLEFT RIGHT CENTER3 表格标题的垂直对齐属性 VALIGN4 表格的表头表头是指表格的第一行,其中的文字居中并加粗(这是与的唯一不同)三行标记属性行标记的属性和标记的属性非常相似,用于设定表格中某一行的属性。表格的标记属性标记 描述ALIGN 水平对齐VALIGN 垂直对齐BGCOLOR 行的背景颜色B
11、ORDERCOLOR 行的边框颜色四单元格标记属性标记的属性和标记的属性非常相似,用于设定表格中某一单元格的属性。表格的标记属性标记 描述ALIGN 水平对齐VALIGN 垂直对齐BGCOLOR 单元格的背景颜色BACKGROUND 单元格的背景图像BORDERCOLOR 单元格的边框颜色WIDTH 单元格的宽度HEIGHT 单元格的高度1 跨行属性 ROWSPAN2 跨列属性 COLSPAN五表头标记属性标记的属性和标记的属性非常相似,用于设定表格中某一表头的属性。表格的标记属性标记 描述ALIGN 水平对齐VALIGN 垂直对齐BGCOLOR 单元格的背景颜色BACKGROUND 单元格的
12、背景图像BORDERCOLOR 单元格的边框颜色WIDTH 单元格的宽度HEIGHT 单元格的高度1 跨行属性 ROWSPAN2 跨列属性 COLSPAN六表格嵌套一个表格内部可以套入另一个表格原因:网页的排版有时很复杂,在外部需要有一个表格控制总体布局。如果这时一些内部排版的细节也通过部表格来实现,容易引起行高列宽等的冲突,给表格制作带来麻烦。因此,引入表格嵌套。由总表格负责整体排版,由嵌套的表格负责各个子栏目的排版,并插入到部表格的相应位置中。这样一来各司其职,互不冲突。下图就是一个典型的嵌套表格。标志 广告条内容一内容二内容三导航条版权等信息网页设计师网页设计软件网页图像软件Firewo
13、rks网页制作软件Dreamweaver网页动画软件Flash第 章多媒体页面第一节滚动文字一基本语法. 啦啦啦,我会移动耶! 二文字移动属性的设置1 滚动方向属性 direction 滚动方向属性值Direction 属性值 描述up 向上down 向下Left 向左right 向右2 滚动方式属性 behavior滚动方式属性值Direction 属性值 描述scroll 循环往复slide 只进行一次滚动alternate 交替进行滚动3 滚动速度属性 ScrollAmount4 循环 loop=次数;若未指定则循环不止(infinite)5 滚动范围属性 width height6 滚
14、动背景颜色属性 bgcolor第二节嵌入多媒体内容标记标记属性embed 属性 描述src 源文件Width height 宽度、高度hidden 播放面板的显示和隐藏autostart 多媒体是否自动播放loop 是否循环播放Hidden 属性值Hidden 属性值 描述true 隐藏面板no 显示面板autostart 属性值autostart 属性值 描述true 自动播放no 不自动播放loop 属性值loop 属性值 描述true 无限次循环播放no 仅播放一次1 嵌入 flash 动画2 嵌入 mp3 音乐3 嵌入 MPG 电影4 嵌入 AVI 视频第三节背景音乐 它以 midi
15、为主。midi 特点是数据量相当小,非常适合因特网传输。1 标记 bgsound基本语法: 2 循环次数属性 loop使用框架结构一什么是框架框架的作用就是把浏览器窗口划分为若干个区域,每个区域可以显示不同的网页。框架技术普遍应用于页面导航。二框架集标记框架主要包括两部分,一个是框架集,另一个是框架。框架集是在一个文档内定义一组框架结构的 HTML 网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。而框架则是指在网页上定义的一个显示区域。框架集页面中,标记被取代1 左右分割窗口属性 COLS2 上下分割窗口属性 ROWS3 嵌套分割窗口4 框架集边框颜色属性 Bord
16、erColor三框架标记1 框架页面源文件属性 SRC2 框架边框显示属性 FrameBorder 0 为不显示边框 1 为显示边框3 框架滚动条显示属性 scrollingscrolling 属性值 描述YES 滚动条显示NO 滚动条不显示Auto 根据页面的长度自动判断是否显示四浮动框架标记属性标记属性 描述SRC 源文件WIDTH 宽度HEIGHT 高度NAME 浮动框架的名称frameborder 框架边框显示属性scrolling 框架滚动条显示属性五框架与链接使用框架的重要目的就是不同的框架中显示不同的页面每个链接都有一个 Target 属性,设置不同的 Target 属性可以使链
17、接的页面在不同的框架或者窗口中显示。1 普通框架与链接2 浮动框架与链接表单标记第一方面,限定表单的范围第二方面,携带表单的相关信息基本语法01 02 03 标记属性属性 描述NAME 表单的名称METHOD 定义表单结果从浏览器传送到服务器的方法:get 和 postACTION 用来定义表单处理程序(一个 ASP,CGI等程序)的位置(相对地址或绝对地址)ENCTYPE 设置表单资料的编码方式TARGET 设置返回信息的显示方式FORM标记内的标记标记 描述INPUT 表单输入标记菜单和列表标记菜单和列表项目标记文字域标记 如下代码:01 FORM02 030405 0607输入标记基本语
18、法标记属性属性 描述Name 域的名称type 域的类型type 属性值type 属性值 描述text 文字域password 密码域checkbox 复选框radio 单选框file 文件域submit 提交按纽reset 重置按纽hidden 隐藏域image 图像域1 文字域 text文字域属性文字域属性 描述Name 文字域的名称maxlength 文字域的最大输入字符数size 文字域的宽度value 文字域的默认值2 密码域 password密码域属性文字域属性 描述Name 密码域文字域的名称maxlength 密码域的最大输入字符数size 密码域的宽度value 密码域的默认
19、值3 复选框 checkbox基本语法语法解释checked 表示此项被默认选中。Value 表示选中项目后传送到服务器的值。4 单选框 radio基本语法语法解释checked 表示此项被默认选中。Value 表示选中项目后传送到服务器的值。5 文件域 file四浮动框架标记属性标记属性 描述SRC 源文件WIDTH 宽度HEIGHT 高度NAME 浮动框架的名称frameborder 框架边框显示属性scrolling 框架滚动条显示属性五框架与链接使用框架的重要目的就是不同的框架中显示不同的页面每个链接都有一个 Target 属性,设置不同的 Target 属性可以使链接的页面在不同的框架或者窗口中显示。1 普通框架与链接2 浮动框架与链接菜单和列表标记,基本语法选项选项语法解释菜单和列表标记属性菜单和列表标记属性 描述name 菜单和列表的名称size 显示的选项数目multiple 列表中的项目多选value 选项值selected 默认选项文字域标记基本语法语法解释文字域标记属性文字域标记属性 描述Name 文字域的名称Rows 文字域的行数cols 文字域的列数value 文字域的默认值