《补充HTML讲座》PPT课件.ppt

《《补充HTML讲座》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《补充HTML讲座》PPT课件.ppt（84页珍藏版）》请在装配图网上搜索。

1、补充内容,HTML语言（2）,换行元素,不换行 例1： 请改变您浏览器窗口的宽度，使 之小于这一行的宽度， 看看这个标记的作用！ 例2： 请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！,分段元素,(Paragraph) (可以看作是空行) 可以有多种属性，常用的属性 aligh# （#left、center、 right） 例: 欢迎学习 JSP程序设计! ,客户端字体, . #=客户端可获得的字体 例： Hellow World!,页面空白,页面左边的空白 #=空白数 页面上方的空白(天头) #=空白数,预格式化文本,预排版文本 html的输出是基于窗口的，因而ht

2、ml文件在输出时都是要重新排版的，若确实不需要重新排版的内容，可以用通知浏览器。浏览器在输出时，对这部分内容几乎不做修改地输出。,示例, 因HTML会忽略多余的空白与行,所以如果想依照所输入的格式显示. 就必须加入PRE的标签. HTML就会依照输入的格式排列. 不再忽略多余的空白与行. ,列表List,列表用于列举事实，常用的列表有3种格式，即无序列表，有序列表和定义列表.,无序列表(ul),无序列表用(ul)开始，每一个列表条目 用引导，最后是。 例 ： WORD编辑技巧WORD排版技巧 EXCEL表格操作 EXCEL高级操作 ,有序列表,有序列表用(ol)开始，每一个列表条目 用引导，最

3、后是。 例 ：WORD编辑技巧WORD排版技巧 EXCEL表格操作 EXCEL高级操作 ,定义列表,定义列表用于对列表条目进行简短说明的场合。它以开始，列表条目用引导，说明用引导。 例： WORD编辑技巧这里介绍WORD的基本操作方法 WORD排版技巧这里介绍WORD的高级操作技巧 EXCEL表格操作这里介绍EXCEL的基本操作方法 EXCEL高级操作这里介绍EXCEL的高级操作技巧 ,改变条目标记,改变无序列表条目标记用type属性修改条目的标记，方法: #=disc、circle、square 例: WORD编辑技巧 WORD排版技巧EXCEL表格操作 EXCEL高级操作 ,改变有序列表条

4、目标记用type属性修改，方法为: #=A, 大写字母a, 小写字母I, 大写罗马数字i, 小写罗马数字l, 缺省,阿拉伯数字,改变有序列表条目的起始数字 用start属性修改，方法: #是条目起始号（缺省情况下是从1开始的）,列表的嵌套,各种列表可以相互嵌套，每一个列表条目都可以是一个单独的列表。每嵌套一层，列表条目的输出就会有更大的缩进。,示例：, WORD编辑技巧 WORD排版技巧 分段 分页 EXCEL表格操作 EXCEL高级操作 ,本次小结, ,本次小结, ,添加注释元素, 注意：注释标签对于浏览源代码的任何 人都是可见的 如： 注释标签有时在标签里,有时在中.,图象元素,插入图象会

5、使页面更加漂亮，但是图象 会导致网络通讯量急剧增大，使访问时间 延长。 在主页(homepage)，不宜采用很大的 图象。,如何加上图像,图象的基本格式为： 或 image-url是图象文件的url。 目前，大部分浏览器支持 .gif 和 .jpg 文件，alt属性告诉不支持图象的浏览器用 text代替该图或在浏览器尚未完全读入图 象时，在图象位置显示的文字。,统一资源定位器URL,URL (uniform Resource Locator) 是文件名的扩展。在Internet上，各个 网络，各台主机的操作系统都不一样，因 此必须指定访问该文件的方法。URL包括 了以上所有的信息。,统一资源定

6、位器URL,URL的构成：protocol:/ machine.name:portdirectoryfilename protocol：访问该资源所采用的协议，即访问该资源的方法，常见的是http(超文本传输协议)；ftp(文件传输协议).,统一资源定位器URL,machine.name：是存放该资源主机的IP 地址,通常以字符形式出现,如 port端口号：是服务器在该主机所使用的端口号。一般情况下端口号不需要指定。只有当服务器所使用的端口号不是缺省的端口号时才指定。 directory和filename：该资源的路径和文件名。,如何得到目标的url,本机资源 其url 可以根据文件的实际情况

7、决定 Internet上的资源 使用浏览器观看时，它的url会在浏览器的地址栏中显示出来，记录下来即可。,图片放置位置,由align属性指定。语法: #=LEFT、 RIGHT、 TOP、 BOTTOM、MIDDLE,例： ,文本与图象的间距,用vspace=#，hspace=#指定， #是整数，单位是象素，前者指定纵向间距，后者指定横向间距。, #是整数，单位是象素，前者指定图像高度，后者指定图像宽度。,图象大小控制,例： ,超文本链接,一个超文本链接指针由两部分组成。一是被指向的目标，它可以是同一文件的另一部分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接指针

8、,指向一个目标,用链接指针指向一个目标。基本格式为：字符串 href Hypertext REFerence)的缩略. 告诉浏览器它指向什么文件，在哪里可以找到它。 统一资源定位器(url)是被指向的目标 “字符串” 充当指针的角色， 点击该字符串，浏览器会将url处的资源显示在屏幕上。,示例,西南交大主页 注意：URL包含在引述标记中，在href 和结束符 中的任何字符之间不能有空格 。用 标签结束一个链接.,标记一个目标,标识一个目标的方法为： text name属性将放置该标记的地方标记 为“name”，name是一个全文唯一的标记 串，text部分可有可无。,标记一个目标,做好标记后，

9、可以用下列方法来指向它，text url是放置标记的html文件的url . name是标记名，对于同一个文件，可以写为text 这时就可以点取text跳转到标记名为name的部分了。,图象链接指针,图象可以做为链接指针。格式为： 例 ,图象地图,使用图象链接指针，每幅图只能指向一 个地点，而图象地图可以把图象分成多个 区域，每个区域指向不同的地点。,举例, ,说明,rect指定一个矩形区域，该区域的位置由左上角坐标和右下角坐标说明。 circle 指定一圆形区域，该区域的位置由圆心的坐标和半径说明。 poly 指定一多边形区域， 该区域的位置由各顶点坐标说明。坐标的写法为：x,y ，各点坐标

10、之间用逗号连接。,邮件链接, ?：Email地址 例： 请多给我发电子邮件,小结及要求,这部分内容小结由同学们自己做出。 先想想，今天学了哪些元素及属性，动手写一写，并记忆。 学了这些内容，可以设计很好的网页。,表格（Table）,. 定义表格 - 定义表行 - 定义表头(标题) - 定义表元(表格的单元格，也 就是具体数据),不带边框的表格, 第一讲 第二讲 第三讲 HTML概念 HTML元素 HTML属性 ,带边框的表格, 第一讲 第二讲 第三讲 HTML概念 HTML元素 HTML属性 ,边框尺寸,边框尺寸设置： 第一讲 第二讲 第三讲 HTML概念 HTML元素 HTML属性 ,表格尺

11、寸, 第一讲 第二讲 第三讲 HTML概念 HTML元素 HTML属性 ,表元间隙, 例： Food Drink Sweet A B C ,表格对齐,使用“align”标签对齐表格 或 设置单元格里内容的对齐方式 设置一行所有单元格里内容的对齐方式 将整个表格进行对齐,举例, 第一讲 第二讲 第三讲 HTML概念 HTML元素 HTML属性 ,垂直对齐,valign=# #=top, middle, bottom 将表格中的所有内容(包括文字,图像等)都向顶端对齐 将一行中所有表格的内容都向顶端对齐,举例, 第一讲 第二讲 第三讲 HTML概念 HTML元素 HTML属性 ,水平合并单元,co

12、lspan=#(水平合并单元格格数) Morning Menu Food Drink Sweet ABC ,垂直合并单元格,rowspan=# (垂直合并单元格格数) Morning Menu Food A Drink B Sweet C ,表格标题, . #=left, center, right,top, bottom HTML讲座 第一讲 第二讲 第三讲 HTML概念 HTML元素 HTML属性 ,表格色彩,单元格、表格的背景色彩和背景图象 ,举例,FoodDrinkAB ,举例, Lunch Food Drink Sweet ABC ,表格边框颜色, 例： FoodDrinkSweet

13、 ABC ,表格边框亮度,(亮框颜色) (暗框颜色) 例子： FoodDrinkSweet ABC ,表格制作按钮例, 网站主页 产品介绍 与我联系 ,表单的用途,表单（Form）可以让网页的浏览者输入数据，然后将数据返回Web服务器，以备登录或查询之用。常见应用：,Web搜索 网络票选 意见调查 报名或在线订购, 在HTML文件中插入表单。该标记应放在之间 标记 在表单中插入输入字段或按钮，如选择钮、 选取方块、单行文本框等，这个标记必须放在标记之间。,表单标记,属性说明,ALIGN= (LEFT、RIGHT、CENTER) 指定图片提交按钮的对齐方式（TYPE=“IMAGE”） CHECK

14、ED 当TYPE=“RADIO”或TYPE=“CHECKBOX”时，此属 性会将选择钮或选取框默认为已选取的状态 NAME=“” 指定表单字段的名称（限英文），此名称不会 显示在网页上，但可作为后端处理用。,MAXLENGTH=“n” 指定单行文本框(TYPE=“TEXT”)或密码字段 (TYPE=“PASSWORD”)的最多字符数 TYPE=TEXT,PASSWORD,RADIO,CHECKBOX, SUBMIT,RESET,FILE,IMAGE,HIDDEN,BUTTON,属性说明, ,示例,标记说明： 在表单内插入按钮，若配合上标记，则可插入图片按钮。,按钮标记,属性说明,ACCESSK

15、EY=“” 指定按钮的按键顺序 DISABLED 取消按钮的功能 NAME=“” 指定按钮的名称（限英文），此名称不会显示在网页，但可作为后端处理用，供Script、表单处理程序使用。,VALUE=“”指定按钮的默认值 TYPE= (#=SUBMIT，RESET，BUTTON) SUBMIT “提交”按钮，按下“提交”按钮，表 单数据会被返回Web服务器； RESET “重新输入”按钮，按下“重新输入” 按钮，表单数据会被清除或恢复 至默认的状态； BUTTON “一般”按钮，无特殊用途，但可另 外指定Script、Applet等处理程序,开始 取消 重新 ,示例,单行文本框,单行文本框允许使

16、用者输入单行的文字语句，如姓名、绰号、联络电话、E-mail、籍贯、国籍、出生地等信息。, 您的姓名: 您的主页的网址: 密码: ,示例, 此文本框的宽度为40可以填入任意长度的字符： 此文本框中只能填入5个字符： ,示例,选择钮,选择按钮只允许使用者选取一个选项，通常利用这个组件列出数个选项，以询问用户的性别、年龄、婚姻状况、最高学历等。, 请选择你的性别： 男 女 ,示例,复选框,复选框允许使用者同时选取多个选项，通常利用这个组件询问使用者喜欢阅读哪几类的书籍、喜欢从事哪几类的活动等可以复选的问题。, 选择你喜欢的水果： 香蕉 苹果 桔子 ,示例,多行文本框,多行文本框允许使用者输入多行的

17、文字语句，如个人意见、自我介绍等信息。 , ,示例,下拉式菜单,下拉式菜单允许使用者从下拉式清单中选择项目，例如嗜好、兴趣、学历、出生地等。 ,必须搭配标记。标记放在标记之间，用来指定下拉式菜单的选项。,MULTIPLE 指定浏览者可以在下拉式菜单中 选取多个选项（复选） NAME=“” 指定下拉式菜单的名称（限英文） READONLY 不允许浏览者更改下拉式菜单的选项 SIZE=“n” 指定下拉式菜单的高度 TABINDEX 设置【TAB】键顺序，也就是当浏览 者按【TAB】键时，光标在表单字段 跳跃的顺序，设置范围在1-999，数 字越小，顺序越高,属性说明：,DISABLED 取消下拉式

18、菜单选项，使之无法存取 SELECTED 指定预先选取的选项 VALUE=“” 指定下拉式菜单选项的值（中英文皆可），当浏览者按下“提交”按钮之后，被选取的下拉式菜单选项的值会被返回表单处理程序，若您没有指定VALUE属性，那么下拉式菜单选项的数据则会被返回表单处理程序,属性说明：, 选择你喜欢的水果： 香蕉 苹果 桔子 ,示例, 选择你喜欢的水果： 香蕉 苹果 桔子 葡萄 ,示例, 选择你喜欢的水果： 香蕉 苹果 桔子 葡萄 ,示例,第二次作业,要求所有的内容均使用HTML语句书写。 至少制作三个网页，一个为主页，另二个为链接。 主页上有图像，有邮件链接，有常用网站链接。 有一个网页至少应有300文字，在页首设置同一页面的目标链接。 尽量多地使用已学过的元素和属性。 内容自定。,