[工学]02第二章 Web客户端开发技术.ppt

第二章 Web客户端开发技术 引入：浏览器可以解释哪些内容 HTML （Hyper Text Marked Language）语言 CSS（Cascading Style Sheet） JavaScript 图片 VBScript（微软的，很少用作客户端脚本） Flash ActiveX控件（一般用C++或VB编写） Applet（浏览器中运行的java类） 等等 本章主要内容 HTML CSS JavaScript 一、HTML 1、HTML入门 2、HTML常用标记 3、HTML表格 4、HTML表单 5、HTML窗口分割 1、HTML入门 HTML Web的第一语言，包含不到一百个标签。 超文本 (文字+图片+动画+音频视频+链接…) 标记语言 (浏览器根据标记显示内容) 专注于在Web上传递信息 是写给浏览器的语言 参看实例： HTML文档结构 htmlhead title典型HTML/title/headbody 我会努力的！/body /html !-- 中间的内容为注释 -- 2、HTML常用标记 title文字/title “文字”将显示在浏览器标题栏上 meta：用于设置一些头信息 meta http-equiv=“content-type” content=“text/html;charset=gb2312” meta http-equiv=“refresh” content=“3;url=” meta name=keywords content=your keywords meta name=description content=your description 例 2-3.htm 查看表2-1 Script language=“”…/Script 用于定义脚本，Eg. Javascript 图形标记、换行标记、分段标记、字体标记 图形标记 img，4个常用属性 src 图片路径 height和width 图片长和宽 border 图片边宽 Alt 图片无法显示时显示的文字 html换行、分段与字体标记 br/ 换行 p/p 分段 font 字体标记 color 颜色 size 字号 face 字体 字体设置 font face=“” size=“” color=“”…/font face定义字体 size 1 2 3 4 5 6 7 实际 8 10 12 14 18 24 36（pixels） Color可以使用预定义的名字,也可以使用数字 red、blue、black… tt/tt通常是打字机风格字体 cite/cite通常是引用方式（斜体） em/em强调（通常是斜体加粗体） 设置文字显示 特殊字符(查看：ISO Latin-1字符集 ) 列表标记 OL/OL 有序列表 UL/UL 无序列表 例 2-7.htm 标题字体大小--h# h#…/h# #=1、2、3、4、5、6 按标题级别用黑体字显示标题内容 自动插入空行 h1最大 h6最小 例： 参看09.htm 超级链接标记 a/a 超级链接，跳转到另一文件 a href=“url” target=“TargetWindow”文字 /a 当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转，参看表2-2。 _self 本窗口 _blank 新窗口 _parent 父窗口（本窗口的上一级窗口） _top 浏览器窗口 锚点标记a a name=AnchorName/a 在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置 路径问题 本地路径 c:\dir1\dir2\… 绝对路径 /img_url.jpg 相对路径 images/01.jpg ../../images/01.jpg /images/01.jpg = http://mysite/images/01.jpg Eg. a href=“”/a Eg. img src=“”/ span、div、pre标记 span和div可以在html中定义一个范围，结合CSS和JavaScript控制其格式、内容、行为 span文字/span div文本块/div pre/pre标记可以将源代码中的格式保留到浏览器中 3、H