《WEB前端开发技术实用教程》课件第02章 网站结构描述利器-XHTML语言.pptx

1、1 1目录2.1 XHTML语言特点与概述2.2 XHTML常用标签介绍网站制作技术前端技术 HTML语言 CSS层叠样式 Javascript脚本技术后台程序 PHP(ASP/JSP)WEB编程技术 数据库技术(MySQL,SQL Server,Oracle)页面效果呈现业务逻辑功能Web标准uWEB标准不是某一个标准，而是一系列标准的集合。网页结构structure行为behavior表现Presentation结构化标准语言XHTML和XMLCSS样式表对象模型（如W3C DOM）、ECMAScript这些标准大部分由W3C起草和发布你知道你知道Web标标准吗？准吗？2.1 XHTML语

2、言特点与概述2.1.1 XHTML语言的发展历程2.1.2 XHTML语言的特点2.1.3 XHTML语言的语法概述2.1.4 XHTML文档结构2.1.1 HTML语言的发展历程HTML5就是就是HTML语言语言的的未来未来!2.1.2 XHTML语言的特点p XHTML 指可扩展的超文本标记语言（Extensible HyperText Markup Language）,是用一系列已约定好的标记来对网页文档的结构和内容进行描述的标准语言p XHTML语言是一种W3C标准，它是比HTML语言更严格更纯净的HTML版本p 2008年HTML5版本的开发和发布，及被更多的浏览器的更好兼容，未来能

3、够更好实现网页描述语言的一定非HTML5莫属p 现在我们依然需要XHTML语言作为过渡。1、HTML语言概述语言概述2.1.2 XHTML语言的特点uXHTML语言的目标是取代HTML；uXHTML与HTML4.01几乎相同；uXHTML是更严格更纯净的HTML版本；uXHTML是作为一种XML应用被重新定义的HTML；uXHTML是一个W3C标准。2.1.3 XHTML语言的语法概述（1）XHTML语言定义的网页文档有两部分组成：u 文档描述的内容u 描述内容的HTML标记（2）标签都遵循这样的格式：u，如：（3）标签可分为单标签单标签和双标签双标签两种：u 双标签称为容器标签，可以嵌套其他

4、标签；双标签格式：，如，加斜杠”/”表示标签描述的结束；u 单标签不需要有与之配对的结束标签，格式：，如，等。1、XHTML语言的语法格式语言的语法格式2.1.3 XHTML语言的语法概述 XHTML元素必须被正确的嵌套 XHTML元素必须被关闭 标签名必须用小写 XHTML文档必须拥有根元素，即 属性名称必须小写 属性值必须加引号 每个属性都有属性值，没有属性值的用属性名代替；如 所有的尖括号和特殊符号用编码表示，如”用”>”表示。XHTML元素必须被关闭2、XTHML语言的定义规范：语言的定义规范：2.1.4 XHTML文档结构 一个HTML文档必须以开头，里面包括网页头部内容网页头

5、部内容和网页主网页主体内容体内容，形式如下：2.2 XHTML常用标签介绍（1）新建一个文本文件；（2）输入html文档结构标记；（3）另存此文本文件为.html网页文件；（4）双击此文件在浏览器中查看网页效果。5、如、如何编写何编写XHTML文档文档2.2 XHTML常用标签介绍 标题标签 文本标签 逻辑字体标签 图片标签 列表标记 超链接标签 表格标签 表单标签XHTML语言语言的常用的常用标签2.2 XHTML常用标签介绍标标签签说说明明文文本本类类标签名称标签名称属性属性说明说明示例示例align：对齐方式，值：left，center，right，分别为居左、居中、居右对齐。用于指定不

6、同级别的标题；紧跟其后的内容会隔行显示新闻国内新闻size：字体大小，取值1-7；color：字体颜色，取值为颜色英文单词或#六位十六进制，范围:#000000-#FFFFFF；face：设置字体。定义文字的不同效果4G时代已到来！align：对齐方式，值：left，center，right，分别为居左、居中、居右对齐。段落标记，紧跟其后的内容会隔行显示过年的红包发了吗？,定义逻辑字体；,:加粗；,:斜体；:下标；:上标 2.2 XHTML常用标签介绍标标签签说说明明分分隔隔特特殊殊符符号号类类标签名称标签名称属性属性说明说明示例示例无换行标记，单标记 Width:线的长度；Size:线的粗细

7、；Align:对齐方式，默认居中；Color:线的颜色定义一根直线，单标记。 无空格；能在浏览器中正确解析，不建议用空格键。这些都是特殊字符。<“”符号©“”版权号2.2 XHTML常用标签介绍标标签签说说明明图图片片和和移移动动标签名称标签名称属性属性说明说明示例示例direction：方向left左,right右,up上,down下；behavior：方式，alternate来回走,slide走一圈,scroll循环的向一个方向移动。scrollamount：速度，值越大速度越快设置文字和图片移动标记今天热点播报src:图片存放路径，一般用相对路径；width:图

8、片宽度；height:图片高度；align:图片在页面对齐方式border:图片边框；alt:图片显示后的描述(有些浏览器不支持，可用title)加入图片标记，一般支持jpg，jpeg，gif，png格式的图片。Baby，看过来！2.2 XHTML常用标签介绍标标签签说说明明超超级级链链接接标签标签名称名称属性属性说明说明示例示例href:链接目标地址；name:锚名称；target:目标窗口打开方式，如”new”,”_self”,”_top”,”_parent”;title:链接描述标题定义文字或图片的超链接标记，可以是内部链接或外部链接；外部链接一定是完整的URL地址，一定加上协议，如ht

9、tp:/,ftp:/,mailto:等。进入新闻频道进入淘宝进入FTP服务器下载软件给管理员写信2.2 XHTML常用标签介绍标标签签说说明明列列表表标标签签标签名标签名称称属性属性说明说明示例示例,Type:定义列表符号形式；Circle：圆圈；square：方块；Disc：圆点1：阿拉伯数字序列；A或a：大小写英文字母序列；I或i：罗马数字序列：定义无序列表；：定义有序列表；：定义列表项。列表可以嵌套。(Type=square,disc,circle)新浪新闻凤凰网中华网法制日报光明网(type=1,A,a,i,I)邮局平邮快递公司淘宝快递2.2 XHTML常用标签介绍标标签签说说明明表表

10、格格标标签签表格标记主要由，或来定义：表示定义一个表格；：定义表格中的一行；或：定义一行中的单元格。如要定义一个2行3列的表格，具体写法如下：姓名性别头像张晓伟男 2.2 XHTML常用标签介绍标标签签说说明明表表格格标标签签表格标记属性定义：border：设置表格的边框线粗细；width：表格宽度，单位是像素；也可以用百分比来设置；height：表格高度；align：表格的对齐方式；cellspacing：相邻单元格之间的距离；cellpadding：单元格中的内容距离边框线之间的距离；bgcolor：设置表格的背景颜色；background：设置表格的背景图片。姓名性别头像张晓伟男 2.2

11、 XHTML常用标签介绍标标签签说说明明表表格格标标签签单元格属性：border：设置表格的边框线粗细；width：表格宽度，单位是像素；也可以用百分比来设置；height：表格高度；align：表格的对齐方式；bgcolor：设置表格的背景颜色；background：设置表格的背景图片。colspan：合并相邻右边的单元格 rowspan：合并相邻下边的单元格2.2 XHTML常用标签介绍标标签签说说明明表表格格标标签签购物车信息表编号商品单价数量小计总计1魔鬼经济学20.1120.150.92优雅女人15.3115.33玩转微信15.5115.52.2 XHTML常用标签介绍标标签签说说明

12、明表表单单标标签签表单标记在哪里？文本框提交按钮复选框下拉框2.2 XHTML常用标签介绍标标签签说说明明表表单单标标签签表单主要是为了方便获取用户信息并对用户提交信息进行处理的页面元素，它所包括的表单元素主要有：文本框 密码框 单选按钮 复选框 下拉列表 文本区域 文件域 图像域 普通按钮 提交按钮 重置按钮2.2 XHTML常用标签介绍标标签签说说明明表表单单元元素素标签标签名称名称属性属性说明说明示例示例表单action：用来设置接收和处理表单内容的服务器程序的URL；method：定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：get或post;enctype：指示

13、浏览器使用哪种编码方法将表单数据传送给www服务器，默认的值为“application/x-www-form-urlencoded”2.2 XHTML常用标签介绍标标签签说说明明表表单单元元素素标签标签名称名称属性属性说明说明示例示例文本框type为“text”定义的为单行文本框，用户可输入文本；size：定义文本框的长度；value：文本框中的文本值；name：文本框的名字；maxlength：文本框可输入的最多字符。密码框type：“password”定义为密码框，输入内容不可见；size：定义密码框的长度；value：密码框中的文本值，一般不需要定义；name：密码框的名字；maxlen

14、gth：密码框可输入的最多字符2.2 XHTML常用标签介绍标标签签说说明明表表单单元元素素标签名称标签名称属性属性说明说明示例示例单选按钮Type:radio定义为单选按钮；name：名称，多个单选按钮为一组的话，应该定义为同名；value：单选按钮的值；checked：默认被选中男  女复选框type:checkbox定义为复选按钮；name：名称，多个复选按钮为一组的话，应该定义为同名；value：复选按钮的值；checked：默认被选中上网学习跳舞看书2.2 XHTML常用标签介绍标标签签说说明明表表单单元元素素标签名称标签名称属性属性说明说明示例示例下拉列表:定义

15、一个下拉列表；name:列表名称；size：显示的列表项数目；:定义下拉列表中的选项；value：选项的值selected:默认选中的下拉选项北京上海天津南京重庆2.2 XHTML常用标签介绍标标签签说说明明表表单单元元素素标签名称标签名称属性属性说明说明示例示例文件域type:file定义为文件域；name：文件域名称文本域 name:文本域名称rows：文本域的行数；cols：文本域的列数大家好，我叫XXX图像域type:image定义为图像域src：图像域显示的图像URL地址value：图像域的值图像域显示为按钮形式，点击可提交隐藏域type:hidden定义为隐藏域，此表单元素在页面上

16、不可见；value：隐藏域的值；name：名称；隐藏域一般做传参使用2.2 XHTML常用标签介绍标标签签说说明明表表单单元元素素标签名称标签名称属性属性说明说明示例示例普通按钮type:button定义为按钮；value：按钮上显示的文本；name：按钮名称；提交按钮type:submit定义为提交按钮；value：按钮上显示的文本，默认是“提交查询内容”；name：按钮名称；是功能按钮，可提交用户信息重置按钮type:reset定义为重置按钮；value：按钮上显示的文本，默认是“重置”；name：按钮名称；是功能按钮，可将用户信息重置2.2 XHTML常用标签介绍u表单综合实例 用户名：密码：性别：男  女 2.2 XHTML常用标签介绍u表单综合实例 兴趣爱好：上网 学习 跳舞 看书 爬山 所在城市：北京 上海 天津 南京 重庆 2.2 XHTML常用标签介绍u表单综合实例 个人简介：大家好，我叫XXX 上传照片：   传道，授业，解惑