HTML的设计和应用.ppt

附加一HTML的设计与应用,预习检查,HTML的主体结构是怎样的？创建一个表格都需要哪些标签？form表单都有哪些表单项？,本章任务,1.网页制作概述2.HTML语言的语法3.HTML文件的主体结构4.HTML文档头部元素5.HTML文档主体标记6.文字版面的编辑7.创建图像和链接8.使用XHTML表格9.HTML框架结构10.HTML表单设计,1.网页制作概述,1.1 HTML基础1.2 简单HTML实例制作,1.1 HTML基础,HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编译,直接由浏览器执行 HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀 HTML是大小写不敏感的,HTML与html是一样的 HTML是由W3C的维护的,1.2 简单HTML实例制作,本页面的标题 这是第一个HTML实例 本页显示黑色背景，白色的文本,2.HTML语言的语法,2.1 HTML标签和元素2.2 HTML语法不区分大小写2.3 HTML标签属性2.4 HTML颜色值的设置2.5 HTML文档注释2.6 HTML代码格式2.7 HTML字符实体,2.1 HTML标签,标签是HTML中最基本单位,也是最重要组成部分。通常要用两个角括号括起来:“”。标签都是闭合的（两种形式：成对与不成对）标签是大小写无关的,跟表示意思是一样的，标准推荐使用小写，这样符合XHTML标准,内容如：即分起始和结束 如：,html-定义html文档 body-定义文档体body head-定义文档头信息head title-定义文档的标题title a-html链接标签a img-html图像标签img div-html层div table-定义html表格table tr-定义表格行tr td-定义表格列td form-html表单标签forminput-定义表单的输入域input,常用HTML标签,2.2 HTML语法不区分字母大小写,HTML标签名和属性都是不区分大小写的，例如、或都是定义相同的标记，但推荐全部使用小写字母书写。,2.3 HTML标签属性,HTML属性一般都出现在HTML标签中,是HTML标签的一部分。标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。标签可以拥有多个属性。属性由属性名和值成对出现。语法：示例：,兄弟连网址,2.4 HTML颜色值的设置,大多数的浏览器都支持颜色名集合，颜色值是一个关键字或一个RGB格式的数字，在网页中用得很多。主要有以下两种：使用英文单词作为颜色值：如：red、green、blue、black、maroon、whilte、yellow.可以使六位十六进制的颜色值：如：#000000-#ffffff其中前两位表示红色，中间两位表示绿色，最后两位表示蓝色。,2.5 HTML注释,HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便查找,方便比对,方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等.,语法：,2.6 HTML代码格式,任何回车或空格在源代码中都是不起作用，所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以“Tab”键为准。,2.7 HTML字符实体,特殊字符（实体）：用数值码和引用实体两种方式表示例如：在什么情况下需要用&qout表示？,如果属性值中同时有单引号和双引号，该如何处理呢？假设标签的title属性值为zx”x,那么，不使用引号的写法为：使用单引号的写法为：有错使用双引号的写法为：有错特殊字符的写法为：正确思考题：人们为什么要对&、字符安排一个HTML编码文本代码呢？,3 HTML文档的主体结构,我的第一个网页 欢迎来到LAMP兄弟连！,网页标题,网页内容，可以是文本、图像等,头部,主 体 部,HTML网页,文档结构中的标签,4.HTML文档头部元素,head标签代表HTML文档的头信息，以开始,结束。头(head)包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在HTML文档中的.head元素包含的常用标签:,title标签-代表HTML文档的标题 base标签-将相对URL转换为完整的绝对URLmeta标签-用于定义文件信息的名称、内容等信息link标签-当在文档中声明使用外接资源(如CSS)时使用此标签 style标签-在文档中声明样式时使用此标签 script标签-在文档中使用JavaScript脚本,LAMP兄弟连-易第优教育|PHP|PHP培训|LAMP|LAMP培训 body margin:0px;padding:0px;background:red;color:green;,5.HTML文档主体标记,body标签的常用属性,6.文字版面的编辑,6.1 格式标签6.2 文本标签,6.1 格式标签,格式标记测试网页 一段文本 这行文本在网页中居中显示 上边 左边 右边 下边 无顺序列表：第一项 第二项 第三项 有顺序列表：第一项 第二项 第三项,6.2 文本标签,文本标记测试网页 使用标记输出大型的字体,7.创建图像和链接,7.1 插入图片7.2 建立锚点和超链接,7.1 插入图片,img标签-代表HTML图像 img标签是单独出现的：，img是image(图像)的缩写 常用属性:alt-代表图像的替代文字 src-代表一个图像源(就是图像的位置)border 代表图片边框的宽度 height-代表一个图像的高度 width-代表一个图像的宽度 设计网页时经常使用的图片有三种格式：GIF-最多支持256色,支持透明,支持多帧动画显示效果.JPEG-支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.PNG-是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.,鼠标移到图像上，出现的提示性文字,图像的位置,图像的宽度,图像的高度,为图像添加的提示性文字,map标签-定义图像点击区域的集合 map标签是成对出现的,即,而且必须配合area标签使用。map标签中name与id属性指定的值必须与定义图像点击区中图像(img)的usemap属性指定的值一致。属性 id-定义map的名称。name-定义map的名称。area标签-定义图像点击区域,area标签是单独出现的,area标签必须使用在map标签中，而且必须配合img标签使用。属性 accesskey-链接的快捷键访问方式 alt-图像的提示文字 coords-定义可点击区域图形的坐标 href-HTML链接源的URL nohref-图像点击排除的区域，当不使用href时应使用nohref shape-可点击区域的形状 tabindex-使用Tab键的遍历顺序 target-链接目标,与标签应用实例,rect定义一个矩形区域，coords属性设置值为矩形的左上角、右下角的坐标,poly定义一个多边形区域，coords属性设置值为多边形各顶点的坐标值,circle定义一个圆形区域，coords属性设置值分别为圆心的横、纵坐标，第三个参数为半径,7.2 建立锚点和超链接,a标签-代表HTML链接a,是anchor(锚)的第一个字母，a标签是成对出现的,即。常用属性：href-代表一个url链接源(就是链接到什么地方)url除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。url还可以是指向HTML文件中的一个位置。url还可以是Email地址。target-用来指出哪个窗口或框架应该被此链接打开 target=_blank：将链接内容在新的浏览窗口中打开。target=_parent：将链接的内容，当成文件的上一个画面。target=_self：将链接的内容，显示在目前的窗口中。target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。title-代表链接的附加提示信息 链接语法：,显示的文字,定位网页内部的链接（锚点链接）：用定义，例如：第一部分，使用跳转到第一部分超链接就可以定位到网页中的“第一部分”这个位置。注意：与的区别URL(Uniform Resource Locator)的基本组成：协议名:/主机名:端口号/资源名。例如：http:/:8080/index.html为URL指定参数例如：?name=zhangsan&password=123带有定位标记的URL例如：#section2,超链接范例:网站链接：PHP专家电子邮件链接：写信给我ftp链接：下载档案有三种类型的链接路径：绝对路径（例如）文档相对路径（例如 adver/contents.html）站点根目录相对路径（例如/support/app/customer.html，其中“/”表示根目录）,链接路径,文档相对链接alex/blue.html,WWW,home.html,根文件夹相对链接/photo/alex/blue.html,绝对链接,8.使用HTML表格,8.1 表格标签常见标签8.2 表格标签常见属性8.3 综合示例,8.1 表格中常用标签,列,行,单元格,表格的基本结构：,表格首行为表头,表格的基本语法,单元格内容,border用来设置表格边框尺寸大小,8.2 表格标签常见属性,table标签属性:width-代表表格的宽度height-代表表格的高度 border-代表表格边框(此属性应该使用CSS实现)cellspacing-代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)cellpadding-代表内容填充的宽度(此属性应该使用CSS实现)th、td标签属性：width与height 代表宽度与高度colspan-一行跨越多列 rowspan-一列跨越多行 align-代表水平对齐方式(left(左对齐)|center(居中对齐)|right(右对齐)|justify)(此属性应该使用CSS实现)valign-代表垂直对齐方式(top(顶部对齐)|middle(中部对齐)|bottom(下部对齐)|baseline(基线对齐)(此属性应该使用CSS实现)tr标签属性：align与valign具体解释详见上面。,如何使用填充、间距属性,border(边框的厚度),cellpadding(单元格填充),cellspacing(单元格间距),8.3 综合示例,学员表 学员基本信息 成 绩 姓 名性 别 专 业课 程 分 数 小 峰男 计算机 PHP开发 86 小 影 女98,9 HTML框架结构,9.1 HTML框架简述9.2 HTML框架标签9.3 HTML框架示例,9.1 HTML框架简述,HTML框架简述一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)。也就是将一个浏览器文档窗口分隔成多个窗口，每个窗口都可以显示一个独立的网页文件。框架页使用了表格的方式组合，可以分为数行与数列。框架的优点 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)。方便制作导航栏。框架的缺点 会产生很多页面，不容易管理。不容易打印。浏览器的后退按钮无效。代码复杂,无法被一些搜索引擎索引到。多数小型的移动设备（PDA 手机）无法完全显示框架。多框架的页面会增加服务器的http请求。由于上面诸多缺点，因此不符合标准网页设计的理念.已被标准网页设计抛弃,9.2 HTML框架标签,标签-代替body标签定义了框架页,并且定义了框架将分为多少行与多少列。常用属性如下:cols-定义了框架含有多少列与列的大小(每个值使用逗号分隔),取值为象素px或者百分比%rows-定义了框架含有多少行与行的大小(每个值使用逗号分隔),取值为象素px或者百分比%border-定义frame定义的框架页的边框(单位像素),使用css实现frameborder-定义框架页是否边框(此属性应写在frame标签内部,不应在此出现)framespacing-定义框架页之间间隔的距离,使用css实现标签可为那些不支持框架的浏览器显示文本，和组合使用 标签创建一个包含另外一个文档的内联框架，iframe标签内的内容可以做为浏览器不支持iframe标签时显示。,frame标签-定义frameset标签中每个框架页的内容 frame标签是单独出现的，常用属性:frameborder-定义了内容页的边框,取值为(1|0),缺省值为1 1-在每个页面之间都显示边框 0-不显示边框 name-在一个框架页链接到另一框架页时使用(另一个框架页可以使用target定义链接页)noresize-定义了浏览者是否可以通过拖拽改变框架页尺寸,取值为(noresize)scrolling-定义是否有滚动条,取值为(yes|no|auto),缺省值为auto yes-显示滚动条 no-不显示滚动条 auto-当需要时再显示滚动条 src-定义了内容页URLborder 设置边框粗细,9.3 HTML框架示例,使用框架定义后台管理平台模型 您的浏览器不支持框架，请升级浏览器,10.HTML表单设计,10.1 HTML的form标签10.2 HTML的input标签10.3 HTML的textarea标签10.4 HTML的select标签,10.1 HTML的form标签,问：网站怎样与用户进行交互?答案:使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.比如,bbs,blog的登陆系统,购物车系统等.form 标签-代表HTML表单 form标签是成对出现的,以开始,以结束 常用属性.action-浏览者输入的数据被传送到的地方,如一个PHP页面(dofm.php)method-数据传送的方法get-此方式传递数据量少,但是传递的信息显示在网址上。post-此方式传送信息多,而且不会把传递信息显示在网址上 enctype-表示将数据发送到服务器时浏览器使用的编码类型 application/x-www-form-urlencoded-窗体数据被编码为名称/值对.这是标准的编码格式.默认的。multipart/form-data-窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分.text/plain-以纯文本形式进行编码,其中不含任何控件或格式字符,10.2 HTML input标签,input 标签-代表HTML表单的单行输入域 input标签是单独出现的,属性.type-代表一个输入域的显示方式(分为输入型,选择型,点击型)name 此表单项名称value-输入域的值 size-输入域的长度 maxlength-输入域最多可以输入文字的长度 checked-如果是选择型的输入域,代表已经被选择，值为checkedreadonly-输入域可以选择,但是无法修改，值为readonlydisabled-输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用。如：disabled=disabled accesskey-表单的快捷键访问方式，如值为h即按Alt+h快捷键。tabindex-输入域的tab键遍历顺序 src-当使用图片来表示按钮时,代表图片的位置(URI)alt-用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)提示信息。,type属性-代表HTML表单,单行输入域(框)的表现方式 type属性取值:text-文字输入域(输入型)password-也是文字输入域,但是输入的文字以密码符号*显示(输入型)file-可以输入一个文件路径(输入型)checkbox-复选框.可以选择零个或多个(选择型)radio-单选框.只可以选择一个而且必须选择一个(选择型)hidden-代表隐藏域,可以传送一些隐藏的信息到服务器 button-按钮(点击型)image-使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src属性)(点击型)submit-提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性来显示按钮上的文字(点击型)reset-重置按钮,可以把表单中的信息清空(点击型),8.3 HTML的textarea标签,textarea 标签-代表HTML表单多行输入域 此标签是成对出现的,即以开始,以结束 属性：cols-多行输入域的列数 rows-多行输入域的行数 name 此表单项名称accesskey-表单的快捷键访问方式 disabled 无法获得焦点,无法选择,灰色显示,表单中无效 readonly 输入域可以选择,但是无法修改 tabindex 输入域,使用tab键的遍历顺序,自我评介：,8.4 HTML的select标签,select 标签-选择列表标签select标签是成对出现的,以开始,以结束 此标签中的每对option标签代表一个选择项 属性:name 表单项名称 size-选择域的高度 multiple-可以有多个选择 disabled-以灰色显示,在表单中不起任何作用 tabindex-使用tab键的遍历顺序 option 标签-代表选择列表的一个选择项 option标签是成对出现的,以开始,以结束 属性:label-说明选择项 value-说明选择项的值 selected-此选择项已经被选择 disabled-输入框无法获得焦点,以灰色显示,在表单中表示禁用 tabindex-使用tab键的遍历顺序,表单包含的控件,单行文本输入框(text),单选按钮(radio),复选框(checkbox),下拉列表(select),重置按钮(reset),提交按钮(submit),多行文本框(textarea),密码框(password),DTD文档类型,DTD：（Document Type Definition,DTD）HTML指定文档类型的名称，为了说明这个页面使用了何种HTML规则，或者结构。PUBLIC表明所依据的文件可对任何人公开访问，而不是某个公司内部的规范文件。version name指定该HTML版本的标识名称。例如，HTML4.0的标识名称为”-/w3c/DTD HTML 4.01 Transitional/EN”.对于ISO标准的DTD以”ISO”三个字母开头；被改进的非ISO标准的DTD以加号“”开头；没被改进的非ISO标准的DTD以“”开头。url指定该HTML语言的定义规范文件在internet上的位置，例如，.规范文件：loose.dtd、strict.dtd、frameset.dtd等文件名的区别。,小结,表单中提交数据的方法有那两种及其区别？表单里有哪些常用的表单元素？创建一个框架页面至少需要哪两个标签？target设定目标资源所要显示的窗口，其取值可以为哪些？简述创建一个多框架页面所需的主要步骤。,小结,熟练掌握XHTML的基本语法。掌握常用的XHTML标签如：文本、图片、链接、表格、框架、表单等。掌握标签中常用的属性如：背景、颜色、定位、宽、高、类型等。了解XHTML的版本与规范等信息。创建表格最少需要那三个标签？简述表格的基本结构。跨行跨列的表格，主要在什么情况下使用？给你一个表格，你会从哪些方面进行美化？,总 结,本章必须掌握的知识点：HTML语言的全部语法HTML文档的主体结构HTML头部中各元素的作用及使用的意义HTML全部格式标记及属性HTML全部文本标记及属性HTML图像标签的应用HTML的超级链接和锚点的应用HTML的表格应用HTML框架标签的应用HTML表单及每一个表单项的使用,谢 谢,