• / 55
  • 下载费用:10 金币  

《PHP网站设计入门》-02-html.ppt

关 键 词:
《PHP网站设计入门》-02-html.ppt
资源描述:
《PHP网站设计入门》,第2章 HTML基础,信息学院 张忠杰 phpwebstart@163.com TermyZhang@163.com,http://phpwebstart.t.sohu.com/,HTML 元素,HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。 开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。,,,HTML 元素语法,HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签中进行关闭(以开始标签的结束而结束)这样的标签成为单标签 大多数 HTML 元素可拥有属性,,,HTML 属性,HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。 属性总是以名称/值对的形式出现,比如:name=“value“。 属性总是在 HTML 元素的开始标签中规定。 属性实例 This is a link,,,文本排版,1. 直接写文本 2. 段落标记 3. 标题标记 4. 预格式化标记,,,3.1.1 文本排版,5. 跑马灯标记 能使其中的文本在浏览器屏幕上不断滚动。 behavior=“alternate”设置滚动方式为来回滚动,设置为scroll表示循环滚动,设置为slide表示滚动到目的地就停止。 direction属性用于控制滚动的方向,可以上下滚动或左右滚动。 loop设置滚动的次数,loop为0表示不断滚动。 scrollamount属性设置滚动的速度, scrolldelay属性设置两次滚动间的间隔时间。,,,文本的换行和空格,1. 文本换行标记 2. 强制不换行标记 … 3. 文本中的空格 4. 水平线标记 ,,,文本中的特殊字符,1. 转义字符HTML的文本中,有些字符是不能直接使用的,如直接使用会被误认为是标记。如果希望浏览器中显示这些字符,则需要使用转义符号。,,,文本中的特殊字符,2. 特殊符号 有些符号是无法用键盘输入的,也可以使用转义字符的方式表示。 转义字符串分成三部分:第一部分是一个&符号,第二部分是实体名称或者是#加上实体编号,第三部分是一个分号。,,,,,文本中的特殊字符,3. 空格符 文字与文字之间的空格,如果超过一个空格,那么从第二个空格开始都会被忽略掉。 如果需要在某处使用多个空格,就需要在文本中用空格的实体名称()和空格交替使用。,,,文本中的特殊字符,4. 在DW设计视图中插入HTML文本元素的一些常用快捷键 (1). 按 Enter 键将插入 。,,,文本修饰标记(字体标记),字体、字号和文字颜色 标签规定文本的字体外观、字体尺寸和字体颜色。在最新的 HTML 版本(HTML 4 和 XHTML)中,字体标签已被废弃,改为使用 CSS 向元素添加样式。 标记的主要属性 face=“face-name“ 定义字体名称。 (face=“Times“) size=“number“ 定义字体大小。 (size=“2“) size=“+number“ 增加字体的大小。 (size=“+1“) size=“-number“ 减少字体的大小。 (size=“-1“) color=“color-value“ 定义字体颜色。 (color=“#eeff00“) color=“color-name“ 定义字体颜色。 (color=“red“),,,文本修饰标记(字体标记),加粗 斜体 下划线 删除线 增加大小 减小大小 上标 下标 ,,,列表标记,为了合理地组织文本,网页中常常要用到列表。在HTML中可以使用的列表标记有无序列表、有序列表和定义列表三种。 无序列表 有序列表 自定义列表 ,,,网页中插入图像的两种方法,网页中插入图像的方法有两种:一是插入一个标记;二是将图像作为背景嵌入到网页中。 由于CSS的背景属性功能很强大,现在推荐将所有的图像都作为背景嵌入。 通过标记插入的图片,在浏览器中可以通过鼠标拖动来选中。而通过背景插入的图片无法用鼠标选中。,,,网页中插入图像的两种方法,是一个行内元素,插入元素不会导致任何换行。 标记的常见属性:,,,网页中支持的图像格式,网页中可以插入的图像文件的类型有jpg格式,gif格式和png格式。这些文件都是压缩格式的图像格式。 BMP格式: Windows系统下的标准位图格式,未经过压缩,一般图像文件会比较大。在很多软件中被广泛应用. JPEG格式:也是应用最广泛的图片格式之一,它采用一种特殊的有损压缩算法,将不易被人眼察觉的图像颜色删除,从而达到较大的压缩比(可达到2:1甚至40:1),因为JPEG格式的文件尺寸较小,下载速度快,所以是互联网上最广泛使用的格式!,,,网页中支持的图像格式,GIF格式:最大的特点是不仅可以是一张静止的图片,也可以是动画,并且支持透明背景图像,适用于多种操作系统,“体型”很小,网上很多小动画都是GIF格式。但是其色域不太广,只支持256种颜色. PSD格式:Photoshop的专用图像格式,可以保存图片的完整信息,图层,通道,文字都可以被保存,图像文件一般较大。 PNG格式:与JPG格式类似,网页中有很多图片都是这种格式,压缩比高于GIF,支持图像透明,可以利用Alpha通道调节图像的透明度,是网页三剑客之一Fireworks的源文件。 WebP格式:Google推出了一种新的图片格式WebP,它可以将图片大小减少40%,目的是替代当前的图片标准JPEG,也想取代PNG格式。,,,超链接标记,超链接是网页的基本元素,网页正是通过超链接而相互链接组织成一个网站,并将internet上的各个网站联系在一起。浏览者通过超链接选择阅读路径。 超链接是通过URL(统一资源定位器)来定位目标信息的。URL包括4部分:网络协议、域名或IP地址、路径和文件名。 URL分为绝对URL和相对URL,,,绝对URL,绝对URL是采用完整的URL来规定文件在internet上的精确地点,包括完整的协议类型、计算机域名或IP地址、包含路径信息的文档名。 书写格式为:协议://计算机域名或IP地址[/文档路径][/文档名] http://www.hyshopgo.com/download/download.gif,,,相对URL,相对URL是相对于包含超链接页的地点来规定文件的地点。 如链接到同一路径下的文档,直接输入文件名即可,如news.htm 如链接到同一路径下子文件夹的文档,则先输入子文件夹名和斜杠(/),再输入文件名,如yule/news.htm 如链接到上一级路径中,要在文件名前输入“/”,如“/news.htm”,其中“”表示上级目录,“.”表示本级目录。,,,相对URL示例,wgzx,yule,index .htm,oa. htm,pop .htm,news .htm,1.href=“yule/news.htm“,2,1,2.href=“/oa.htm“,3.href=“pop.htm”,3,,,相对URL的优势,相对URL方式比较简便,不需输入一长串完整的URL; 相对路径还有一个非常重要的特点是:可以毫无顾忌地修改Web网站的域名或网站在服务器硬盘中的存放目录。,,,超链接的种类-根据源对象划分,1) 用文本做超链接: 首页 2) 用图像做超链接:3) 文本图像混合做链接: 格力空调1型 此方法在商品展示的网站上较常用。,,,超链接的种类-根据href的取值,1) 链接到其他网页或文件(jpg, rar等) 内部链接返回首页 外部链接 网易网站 下载链接点击下载 2) 电子邮件链接 给我留言,,,超链接的种类-根据href的取值,3) 锚链接(链接到页面中某一指定的位置) 当网页内容很长,需要进行页内跳转链接时,就需要定义锚点和锚点链接,锚点可使用name属性或id属性定义。…… 也可以链接到其他网页某个锚点处 …… ,,,超链接的种类-根据href的取值,4) 空链接和脚本链接: …… ……,,,超链接的打开方式(target属性的取值),在本窗口打开:_self (target的默认值) 在新窗口打开:_blank 在父窗口打开: _parent 将链接的文件载入到父框架 在整个窗口打开:_top:将链接的文件载入到整个浏览器窗口中,并删除所有框架 _parent、_top仅仅在网页被嵌入到其他网页中有效,如框架中的网页,所以这两种取值用得很少。,,,超链接的title属性,title属性在很多标记里都有,其作用是在鼠标停留在该元素上时显示设置的说明文字 如格力太阳能喜获,,,超链接制作的原则,1) 可以使用相对链接尽量不要使用绝对链接,如/index.htm 而不是http://www.hynu.cn 2) 链接目标尽可能简单 如http://www.hynu.cn,而不是http://www.hynu.cn/index.jsp,,,表单标记([form]、[input]、[select]),表单是实现动态网页的一种主要的外在形式。它的主要功能是提供给用户输入信息的窗口并收集浏览者填写的信息。它是网站实现互动功能的重要组成部分。 例如在网上要申请一个电子信箱,就必须按要求填写完成网站提供的表单页面,其主要内容是姓名、年龄、联系方式等个人信息。又例如要在某论坛上发言,发言之前要申请资格,也是要填写完成一个表单网页。无论网站使用的是那种形式的语言来实现网站的互动功能,例如ASP、PHP、JSP,表单已经成为它们统一的外在形式,,,表单标记([form]、[input]、[select]),表单和表单元素并不具有排版的能力,表单和表单元素的排版最终还是要由表格组织起来,因此在html代码中,表单标记和表格标记通常是如影随形的。 一个表单的代码至少应包括三个组成部分: (1)表单标记:这里包含了处理表单数据所用动态网页的URL以及数据提交到服务器的方法。 (2)表单元素:包含了文本框、菜单、复选框和单选框等。 (3)提交按钮:将数据传送到服务器上的动态网页。,,,表单标记([form]、[input]、[select]),表单可以用于调查、订购、搜索等功能。一般的表单由两部分组成,一是描述表单元素的html源代码,二是服务器端用来处理用户所填信息的程序(暂时不学),或者客户端的脚本。在html里,我们可以定义表单,并且使表单与CGI或PHP等服务器端的表单处理程序配合。 表单信息处理的过程为:当单击表单中的提交按纽时,输入在表单中的信息就会上传到服务器中,然后由服务器中的有关应用程序进行处理,处理后或者将用户提交的信息储存在服务器端的数据库中,或者将有关的信息返回到客户端浏览器中。,,,表单标记,标记用来创建一个表单域,即定义表单的开始和结束位置,这一标记有几方面的作用。第一,限定表单的范围。所有表单对象,都要插入到表单域之中。单击提交按纽时,提交的也是表单范围之内的内容。 第二方面,携带表单的相关信息,例如处理表单的脚本程序的位置(action)、提交表单的方法(method)等。这些信息对于浏览者是不可见的,但对于处理表单确起着决定性的作用 标记不能嵌套 DW的表单控制面板 和 form标记的属性面板,,,form标记常见属性,method: get或post method属性是设置表单数据提交给服务器的方式。 get方式提交的表单信息是非安全方式,附加在URL地址后面,在地址栏显示。 post方式提交的信息不显示在地址栏中。 action:接一个动态网页名设置action属性后会产生两个作用:1 点击该表单的提交按钮将会链接到该网页2 同时还会将表单中输入的数据发送给该网页进行处理,,,form标记常见属性,target:接收页是否在新窗口打开,和a标记的该属性类似,,,表单数据提交举例,使用php编写简单的表单数据提交处理程序,,,标记,input标记是收集用户输入信息的标记,是一个单标记,其含义由type属性决定。 input标记的type属性总共有10种取值,每种属性的含义不同。 每个表单标记都有一个name属性,用于表示这个标记的名称。表单提交给服务器时,name标记会传送到服务器端,用于区分不同的输入标记。,,,Input标记的type属性值,,,文本域,文本域举例:input标记中的size属性是定义文本域的宽度,,,密码域,密码域和文本域基本相同,只是用户输入的字符以圆点来表示,这样旁边的人就看不到了。 发送表达数据时,密码还是以用户输入的真实字符作为value值的,没有加密。因此,含有密码的form请使用post方式提交。 举例: ,,,单选框,单选框举例: 女性 男性 checked属性设定初始时单选按钮哪项处于选定状态,同一组单选按钮name属性的值必须相同,这样这一组单选框中只有一个能被选中。 多个同名单选框,在提交数据时,只有被选中的那个单选框的名称和值会被传送的服务器。,,,复选框,复选框,可以选中多项。复选框的常见属性是checked,表明用户是否选中这个复选框。提交数据时,只有选中的复选框才会发动到服务器。 举例: 看书 上网 听音乐,,,文件域,举例: 供上传文件用,需要服务器端的上传组件配合 文件域对表单标记form有特殊要求,method必须设为post,MIME类型必须为multipart/form-data,,,隐藏域,在表单上添加一个隐藏字段元素,浏览器不显示。 表单提交时,隐藏字段会传递给服务器。服务器可以通过这种字段在处理时提供标记信息。,,,多行文本,多行文本让浏览者输入多行文本内容,如发表评论或留言。 举例:你好, 这是多行文本的内容 ,,,和标记,标记是下拉菜单框或列表框标记,是一个标记的含义由其size属性决定的元素,如果该标记没有设置size属性,那么表示为下拉菜单框,如果设置了size属性,则变成了列表框,设置了multiple属性,则表示列表框允许多选。下列列表框中的每一项由标记定义,还可使用添加一个不可选中的选项。 例如:湖南广东江苏四川 ,,,按钮,提交按钮(type=“submit“) 将表单中所有具有name属性的元素内容发送到服务器端指定的应用程序 重置按钮(type=“reset“) 用户在填写表单时,若希望重新填写,单击该按钮将使全部表单元素的值还原为初始值 普通按钮(type=“button“) 该按钮没有内在行为,但可用javascript为其指定动作,,,图像域,即图像按钮,用一张图片做按钮,功能和提交按钮相同 举例: ,,,标记的用途,为控件定义一个标签,通过for属性绑定控件。当单击标签时就相当于单击表单控件。 举例:男女,,,字段集标记, 标签将表单内容的一部分打包,生成一组相关表单的字段。 当一组表单元素放到 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。 使用 标签为 fieldset 元素定义标题。,,,字段集举例,health informationheight: weight: ,,,本章结束 谢 谢,信息学院 张忠杰 phpwebstart@163.com TermyZhang@163.com,http://phpwebstart.t.sohu.com/,,,,,
展开阅读全文
  微传网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
0条评论

还可以输入200字符

暂无评论,赶快抢占沙发吧。

关于本文
本文标题:《PHP网站设计入门》-02-html.ppt
链接地址:https://www.weizhuannet.com/p-10025974.html
微传网是一个办公文档、学习资料下载的在线文档分享平台!

网站资源均来自网络,如有侵权,请联系客服删除!

 网站客服QQ:80879498  会员QQ群:727456886

copyright@ 2018-2028 微传网络工作室版权所有

     经营许可证编号:冀ICP备18006529号-1 ,公安局备案号:13028102000124

收起
展开