Download presentation
Presentation is loading. Please wait.
1
Xhtml常用标记
2
XHTML简介 创建基本网页文档 文档的基本结构 标签规范 常见标记的使用
3
关于XHTML XHTML是 EXtensible HyperText Markup Language(可扩展超文本标记语言) 的英文缩写
2000年1月26日被国际标准组织机构W3C(World Wide web Consortium)定为一个标准，是一种增强了的HTML （
4
手动创建网页文档 打开记事本，输入如下内容，并保存。 <html> <head>
<title>我是这个网页的标题</title> </head> <body> <p>这是我的第一个网页。</p> </body> </html>
5
总结 Xhtml文档是一个文本文件 Xhtml文档由一些”<””>”包含的控制标记（tag）来构成的。
标记的格式：<标记>受标记影响的内容</标记> 标记具有一系列的属性来控制信息的效果 格式：<标记 属性1=“属性值1” 属性2=“属性值2”>受影响的内容</标记> <标记 属性1=“属性值1” 属性2=“属性值2”。。。/>
6
注意以下几点： 每个标记都要用“<”（小于号）和“>”（大于号）括起来且 “<”、“>”与标记名之间不能留有空格或其他字符。 在标记名前加上符号“/”便是其结束标记，表示该标记内容的结束，如</h1>。标记也有不用</标记>结尾的，称之为单标记。 属性可以有多个，而且没有先后顺序。
7
文档结构 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>页面标题</title> </head> <body> 这里是页面的内容部分，注意内容与浏览器边缘的距离</body> </html> 声明文档类型 文档根标记 文档头标记 文档体标记
8
声明文档类型 或者DOCTYPE声明，用来说明你用的XHTML或者HTML是什么版本，放在xhtml文档的最顶部。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
9
XHTML 1.0 提供了三种DTD声明可供选择：
过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "
10
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。 由于xml允许你自己定义自己的标识，不同的人定义的标识可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。 小王和小李都定义了一个<book>标识，如果小王的名字空间是" XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是“ lang="gb2312",指定你的文档用简体中文。
11
Meta标签 ＜meta name=“参数” content=“具体的参数值”＞
name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类。重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词）。 ＜meta http-equiv=“参数” content=“参数变量值”＞ <meta http-equiv="Refresh" contect="n;url=
12
关于文档结构的一些问题 如果文档体进入到文档头，是否能正常显示？ 如果文档头进入到文档体，是否能正常显示？
13
标记规范 1.所有的标记都必须要有一个相应的结束标记 单独不成对的标签，在标签最后加一个"/"来关闭它。 <br />
<img src="../images/bj.gif" />
14
2.所有标签的元素和属性的名字都必须使用小写
XHTML对大小写是敏感的，大小写夹杂也是不被认可的。 <title>和<TITLE>是不同的标签。通常dreamweaver自动生成的属性名字“onMouseOver”也必须修改成“onmouseover”。 用id属性代替name属性
15
3.所有的XML标记都必须合理嵌套 所有的嵌套都必须按顺序，一层一层的嵌套必须是严格对称。
<p><b></p></b> 必须修改为： <p><b></b></p>
16
<input name=guitar type=checkbox value=guitar> ×
4.所有的属性必须用引号""括起来 <height=80>必须修改为： <height="80"> <input name=guitar type=checkbox value=guitar> × <input name="guitar" type="checkbox" value="guitar" /> √
17
5.把所有<和&特殊符号用编码表示 小于号（<），为& l t ; 大于号（>），为& g t ;
与号（&），为& a m p; 空格，为 ；也可以输入中文全角空格 双引号（“），为"； 版权符号（©），为©； 注册符号（®），为®；
![5.把所有<和&特殊符号用编码表示 小于号（<），为& l t ; 大于号（>），为& g t ;](http://slidesplayer.com/slide/14001276/86/images/17/5.%E6%8A%8A%E6%89%80%E6%9C%89%3C%E5%92%8C%26%E7%89%B9%E6%AE%8A%E7%AC%A6%E5%8F%B7%E7%94%A8%E7%BC%96%E7%A0%81%E8%A1%A8%E7%A4%BA+%E5%B0%8F%E4%BA%8E%E5%8F%B7%EF%BC%88%3C%EF%BC%89%EF%BC%8C%E4%B8%BA%26+l+t+%3B+%E5%A4%A7%E4%BA%8E%E5%8F%B7%EF%BC%88%3E%EF%BC%89%EF%BC%8C%E4%B8%BA%26+g+t+%3B.jpg "与号（&），为& a m p; 空格，为 ；也可以输入中文全角空格. 双引号（ ），为"； 版权符号（©），为©； 注册符号（®），为®；")
18
6.给所有属性赋一个值 XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必须修改为： <td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
19
7.不要在注释内容中使用“--” “--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。
<!--这里是注释 这里是注释--> 用等号或者空格替换内部的虚线。 <!--这里是注释============这里是注释-->
20
常见标记的使用 段落标记 文本标记 超链接标记 图像标记 表格标记 表单标记
21
段落标记 1 换行标记<br> /<nobr> 格式： 文字<br />
由于xhtml中Enterprise键产生的换行符会被忽略掉，要换行就必须使用这个标记。 不换行标记<nobr> 格式：<nobr>文字</nobr> 对于输入公式、数字等信息时，会用到。
22
2 段落标记<p>...</p>
段落标记放在一个段落的头尾，用于定义一个段落。<p>...</p>标记不但能使后面的文字换到下一行，还可以使两段之间多一空行，相当于两个<br /><br />标记。 段落标记的格式为： <p align="left|center|right"> 文字 </p> 其中属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）和right（右对齐）。缺省时默认为left。
23
size设定线条粗细，以像素为单位，默认为2。 width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。
3 水平线标记<hr /> 在页面中插入一条水平标尺线，单独一行的形式，并加入一条水平线段。 水平线标记的格式为： <hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" noshade /> size设定线条粗细，以像素为单位，默认为2。 width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。 color设定线条色彩，默认为黑色。可以采用色彩的名称。
24
文字标记 1 标题文字标记<h#>…</h#>
在页面中，标题是一段文字内容的核心，需用加强的效果来表示。标题文字标记的格式为： <h# align="left|center|right"> 标题文字 </h#> #用来指定标题文字的大小，#取1～6的整数值，取1时文字最大，6时文字最小。 该标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。 与用<title>…</title>定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。
25
超链接 浏览网页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子邮件、远程访问等。
超链接（Hyperlink）是网页互相联系的桥梁，超链接可以看作是一个“热点”，它可以从当前网页定义的位置跳转到其他位置。 浏览网页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子邮件、远程访问等。 当网页包含超链接时，网页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记<a>来定义。
26
1 锚点标记<a>...</a>
锚点（anchor）标记由<a>定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的地址（URL）。 锚点标记： <a href="URL" target="打开窗口方式"> 热点 </a> href属性为超文本引用，它的值为一个URL，是目标资源的有效地址。 空链接，用“#”代替URL：<a href="#"> 热点 </a> target属性设定链接被单击后结果所要开始窗口的方式。可选值为：_blank，_parent，_self，_top，mainframe（框架名称）。
27
2 指向其他页面的链接 (1) 链接到同一目录内的网页文件 格式为： <a href="目标文件名.html"> 热点文本 </a> (2) 链接到下一级目录中的网页文件 <a href="子目录名/目标文件名.html"> 热点文本 </a> (3) 链接到上一级目录中的网页文件 <a href="../目标文件名.html"> 热点文本 </a> (4) 链接到同级目录中的网页文件 <a href="../子目录名/目标文件名.html"> 热点文本 </a>
28
<a href="#记号名"> 热点文本 </a> 书签格式为：
3 指向本页中的链接 要在当前页面内实现超链接，需要定义两个标记： 超链接格式为： <a href="#记号名"> 热点文本 </a> 书签格式为： <a name="记号名"> 目标文本附近的字符串 </a> 引申：指向其他页面某处的文本，格式为： <a href="URL#记号名"> 热点文本 </a> 指向其他文件的某一部分，格式为： <a href="目标文件路径/文件名#记号名"> 热点文本 </a>
29
<a href="下载文件名"> 热点文本 </a> 5 指向电子邮件的链接
4 指向下载文件的链接 如果链接到的文件不是HTML文件，则该文件将作为下载文件，其格式为： <a href="下载文件名"> 热点文本 </a> 5 指向电子邮件的链接 单击指向电子邮件的链接，将打开缺省的电子邮件程序，如FoxMail、Outlook Express，并自动填写邮件地址。 格式为： <a href="mailto: 地址"> 热点文本 </a>
30
图像 1 网页的背景 （1） 设置背景色 格式为： <body bgcolor="色彩值"> （2） 用图片作为背景
1 网页的背景 （1） 设置背景色 格式为： <body bgcolor="色彩值"> （2） 用图片作为背景 <body background="图片文件名"> 图片文件可为GIF格式或JPEG格式的文件。 在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。
31
如果不设定图片的尺寸，图片将按照其本身的大小显示。 align属性的取值！！！
2 图像标记<img> 使用图片标记，可以把一幅图片加入到网页中。用图片标记还可以设置图片的替代文本、尺寸、布局等属性。 格式为： <img src="图片文件名" alt="简单说明" width="图片宽度" height="图片高度" border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="环绕方式|对齐方式“ /> 如果不设定图片的尺寸，图片将按照其本身的大小显示。 align属性的取值！！！
32
<a href="URL"> <img src="图片文件名"> </a>
3 用图像作为热点 图像也可作为热点，单击图片则跳转到被链接的文本或其他文件。格式为： <a href="URL"> <img src="图片文件名"> </a>
33
网页中加入其它的媒体 超链接实现 IE中背景音乐实现 内嵌播放插件实现 34
34
超链接实现 IE中的背景音乐实现 可以播放的音频格式：midi音乐、wav音乐、au格式、aiff格式、mp3等
格式：<a href=“文件地址”>热点</a> IE中的背景音乐实现 <bgsound src=“声音文件地址” loop=“播放次数”> Loop=“-1|infinite|整数值” 35
35
内嵌播放插件实现 在浏览器中弹出控制面板进行媒体的播放 格式： <embed src=” 媒体文件地址” /> 其他的属性：
autostart=“true”|“false” 自动播放 loop=“true“|”false“|整数值 重复播放与否或次数，无限次重复设定值为"true" 36
36
starttime=“分:秒” 开始播放的时间 endtime=“分:秒” 结束播放的时间 volume=“0-100” 音乐音量的大小 width|height=“整数” 面板的宽度/高度 align=“top|center|bottom|baseline|left|right|texttop|middle|absmiddle|absbottom” 面板和旁边 文字的对齐方式 controls=“console|smallconsole|playbutton|pausebutton|stopbutton|volumelever” 定制面板，默认值 是console hidden=“true“|”false” 默认值是false EnableContextMenu=“true“|”false” 是否响应右键 菜单 37
37
表格 1 简单表格 最简单的表格仅包括行和列。表格的标记为<table>，行的标记为<tr>，表项的标记为<td>。格式为： <table border="n" width="x|x%" height="y|y%" cellspacing="i" cellpadding="j"> <caption align=“left|right|top|bottom” valign=“top|bottom”>标题</caption> <tr> <th>表头1</th> <th>表头2</th> <th>…</th> <th>表头n</th> <tr> <td>表项1</td> <td>表项2</td> <td>…</td> <td>表项n</td> … </table>
38
2 表格内文字的对齐方式 在缺省下，表项居于单元格的左端。可用列、行的属性设置表项数据在单元格中的位置。 (1) 水平对齐 表项数据的水平对齐用标记<th>、<td>和<tr>的align属性。align的属性值分别为：center（表项数据的居中）、left（左对齐）、right（右对齐）或justify（左右调整）。 (2) 垂直对齐 表项数据的垂直对齐用标记<th>、<td>和<tr>的valign属性。valign的属性值分别为：top（靠单元格顶）、bottom（靠单元格底）、middle（靠单元格中）或baseline（同行单元数据项位置一致）。
39
3 表格在页面中的对齐方式 表格在浏览器窗口中的位置也有三种：居左、居中和居右。格式为： <table align="left|center|right"> 当表格位于页面的左侧或右侧时，文本填充在另一侧。当表格居中时，表格两边没有文本。当align属性缺省时，文本在表格的下面。
40
bgcolor=""色彩或色彩值" 设置背景色彩 background="图片文件名" 设置背景图片
4 表格的色彩和图片背景 在<table>、<th>、<tr>、<td>标记中，使用下面属性可以改变表格的背景和边框的色彩、添加背景图片，也可以为行和单元格改变色彩、添加背景图片。 bgcolor=""色彩或色彩值" 设置背景色彩 background="图片文件名" 设置背景图片 bordercolor="色彩" 设置表格边框的色彩 bordercolorlight="色彩" 设置表格边框亮部的色彩 rules="row,cols或none" 设置表内线的显示方法，none为无内线 如果把属性放到<table>中，其作用范围为整个表格，如果把属性放到<th>中，则作用范围为整个行，如果把属性放到<tr>、<td>中，则作用范围为该单元格。
41
框架（多窗口页面） 1 建立框架 框架的建立使用<frameset>、<frame>两个标记。 基本结构为：
框架（Frames）也称多窗口页面或帧，是在同一浏览器窗口中显示多个相互隔离的XHTML页的结构，每个区域显示一个XHTML文件。 1 建立框架 框架的建立使用<frameset>、<frame>两个标记。 基本结构为： <html> <head>... </head> <frameset> <!-- 划分窗格 --> <frame src="url"> <!-- 定义第1个窗格 --> <frame src="url"> <!-- 定义第2个窗格 --> … </frameset> </html>
42
(1) <frameset>标记
<frameset rows="横向框架数" cols="纵向框架数" border="像素值" bordercolor="色彩值" frameborder="yes|no" framespacing="像素值"> … </frameset> 其中属性： rows 设定横向分割的框架数目 cols 设定纵向分割的框架数目 border 设定边框的宽度 bordercolor 设定边框的色彩 frameborder 设定有∕无边框 framespacing 设置各窗格间的空白
43
<frameset>的rows和cols属性用于设定横向分割和纵向分割的框架数目。例如，要建立有三个横向框架的页面，可写为：
<frameset rows="x1|y1%|z1*, x2|y2%|z2*, x3|y3%|z3*"> 分别的含义： x： y： z：
44
(2) <frame>标记 <frame>标记用于给各个框架指定页面的内容，是一个单标记，格式为： <frame src="源文件名.html" name="框架名" border="像素值" bordercolor="色彩值" frameborder="yes|no" marginwidth="像素值" marginheight="像素值" scrolling="yes|no|auto" noresize> <frame>标记的个数应等于在<frameset>标记中所定义的框架数，并按在文件中出现的次序按先行后列对框架进行初始化。如果<frame>标记数目少于<frameset>中定义的框架数量，则多余的框架为空。
45
2 框架间的链接 在很多网页中，常在一个框架中显示一个所有网页内容的目录，而通过单击其中的某项，在另一个框架中显示相应内容。这些目录是热点文本，需要在框架之间建立超链接，并指明显示的目标文件的框架。 target="_blank"：链接的目标文件被显示在一个新的没有名字的浏览器窗口中。 target="_self"：链接的目标文件被显示在当前框架窗口中，代替正在显示的热点文本所在的那个文件，是省略target属性的默认值。 target="_top"：链接的目标文件被显示在整个浏览器窗口（取消了框架）。 target=“_parent”：当框架嵌套时，链接的目标文件被显示在父框架中；否则，被显示在整个浏览器窗口中。
46
4. Iframe的应用 创建内嵌浮动框架： <iframe name="xyz" width=200 height=200 frameborder=1 scrolling=auto src="second.html"> </iframe>
47
5. 内连接的实现 1）创建若干个div，然后通过样式设置display：none进行隐藏，需要的时候再显示 <a href="javascript:showWin(1)">打开窗口一</a> <div class="win" id="win1">窗口一的内容</div> <script> function showWin(n) { document.getElementById("win"+n).style="block"; } </script> 2）spry实现布局
48
6. Spry布局 插入|spry|spry选项卡式菜单等等
49
表单 1 表单的标记<form>...</form>
网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。在网页中，通过表单交流和反馈信息。格式为： <form name="表单名" action="URL" method="get|post"> <input type="表项类型" name="表项名" value="缺省值" size="x" maxlength="y“ /> … </form>
50
在表项前应加入表项的名称，如“您的姓名”等，以告诉浏览者在随后的表项中输入的内容。
2 文字和密码的输入 使用<input>标记的type属性，可以在表单中加入表项，并控制表项的风格。type属性值为text，则输入的文本以标准的字符显示；type属性值为password，则输入的文本显示为“*”。 在表项前应加入表项的名称，如“您的姓名”等，以告诉浏览者在随后的表项中输入的内容。
51
<input type="reset" value="按钮名“ />
3 重置和提交 如果浏览者想清除输入到表单中的全部内容，可以使用<input>标记中的type属性所设的重置（reset）按钮，当浏览者完成表单的填写，想要发送时，可使用<input>标记的属性type所设的提交（submit）按钮，将表单内容送给action中的网址或函件信箱。格式为： <input type="reset" value="按钮名“ /> <input type="submit" value="按钮名“ /> 当缺省value的设置值时，重置和提交的按钮分别显示为“重置”和“提交查询内容”。
52
4 复选框和单选钮 在页面中有些地方需要列出几个项目，让浏览者通过选择钮选择项目。选择钮可以是复选框（checkbox）或单选钮（radio）。用<input>标记的type属性可设置选择钮的类型，属性value可设置该选择钮的控制初值，用以告诉表单制作者选择结果。用checked表示是否为缺省选中项。name属性是控制名，同一组的选择钮的控制名是一样的。
53
<select size="x" name="控制操作名" multiple> <option …> …
当浏览者选择的项目较多时，如果用选择钮来选择，占页面的区域就会较多。可以用<select>标记和<option>标记来设置选择栏。选择栏可分为两种，即弹出式和字段式。<select>标记的格式为： <select size="x" name="控制操作名" multiple> <option …> … </select>
54
5 选择栏<select> 其中： size 取数字，表示在带滚动条的选择栏中一次可见的列表项数 name 控制操作名 multiple 不带值，加上本项表示可选多个选项，否则只能单选 <option>标记的格式为： <option select value="可选择的内容"> select 加上本项表示该项是预置的 value 指定控制操作的初始值，缺省时初值为option中的内容表示选项值
55
6 多行文字的输入textarea>...</textarea>
<textarea name="控制操作名" rows="行数" cols="列数"> 多行文本 </textarea> 其中的行数和列数是指不用滚动条就可看到的部分。
Similar presentations
