复习：
XHTML
DTD文档类型定义
<meta>
表格标记
<table>的常用属性
<tr> 行的常用属性
<td>或<th>列的属性
综合案例：月福首页
图片热点(图像地图)
多媒体标记(插入Flash的标记)
多媒体标记<object>
<object>的主要属性
复习：
超级链接、锚点
<a>标记属性：
Href：链接目标文件的URL，绝对URL和相对的URL
绝对URL：远程的绝对URL地址，一般都是以http://www.sina.com.cn主机开始
如：http://www.sina.com.cn/about/index.html
本地的绝对URL地址，一般都是file:///开头的一个路径
如：file:///E:/itcast/20140706/lesson/day3/test.html
相对URL：要确定三个条件
当前文件是谁，它在哪里？
目标文件是谁，它在哪里？
当前文件和目标文件的关系：平级关系、下级关系(目标)、上级关系(目标)
Name：设置一个锚点的名称，锚点就是一个“记号”
Target：目标文件的打开方式，取值：_blank（空白）、_self、 _top、_parent
举例：
<a href=“http://www.sina.com.cn”>新浪网</a> <a href=“images/word.exe”>下载Word软件</a> .html .htm .jpg .png .gif .css .js <a href=“mailto:[email protected]”>给我发邮件</a> <a href=“#”>论坛中心</a> <a href=“javascript:void(0)”>论坛中心</a> <a href=“javascript:alert(‘大家好’)”>弹出一个警告窗口</a>
锚点：通过锚点(记号)，可以访问到一个网页的不同地方。
定义锚点：<a name=“top” id=“top”></a>
说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。
链接到锚点：<a href=“news/news.html#top”>锚点链接</a>
XHTML
（1）XHTML介绍
XHTML，Extensible Hypertext Markup Language，可扩展超文本标注语言。
XHTML的主要目的，是为了取代HTML，也可以理解为HTML的升级版。
HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。
XHTML与HTML4.0的标记基本上一样。
XHTML是严格的、纯净的HTML。
（2）编写XHTML的规范
1)所有标记元素都要正确的嵌套，不能交叉嵌套。<h1><font></font></h1>
2)所有的标记都必须小写。
3)所有的标记都必须关闭。
双边标记：<span></span>
单边标记：<br> 转成 <br /> <hr> 转成 <hr /> <img src=“URL” />
4)所有的属性值必须加引号。<font color=“red”></font>
5）所有的属性必须有值。<hr noshade=“noshade”>
<input type=“radio” checked=“checked” />
6）XHTML文档开头必须要有DTD文档类型定义
DTD文档类型定义
DTD，Document Type Definition文档类型定义，是一套标记的规则，理解为一种“验证机制”。
DTD有三种类型：
第一种：Strict严格型：在这种XHTML中，结构中不能出现格式或表现的内容。
格式标记：<font>、<b>、color属性、background属性
这种类型下，在<body>中只有结构标记，不能出现任何的表现。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
第二种：Transitional过渡型：在这种XHTML中，结构中可以出现格式标记或表现(CSS)的内容。(用的最多)
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
第三种：Frameset框架型：在这种XHTML中，可以使用框架技术，实现多个网页在一个浏览器窗口中呈现
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<meta>
（1）<meta>标记的概念
<meta>标记提供一些元信息，比如：关键字、描述信息、作者、网页刷新、网页过期期限、网页字符集等
（2）<meta>的两个属性
http-equiv：相当于http的文件头信息，告诉浏览器如何正确的显示网页的内容。
name：描述信息，指定网页关键字、网页描述、作者、版权信息
（3）常用的<meta>设置
设置网页的字符集：<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />
网页自动刷新：<meta http-equiv=“refresh”content=“3” /> 3秒自动刷新网页
延迟一定时间后跳转：<meta http-equiv=“refresh” content=“3;url=http://www.sina.com.cn” />
设置网页的关键字：<meta name=“keywords” content=“网站建设,广州网站,网站开发”/>
网页描述：<meta name=“description” content=“描述信息” />
网站作者：<meta name=“author” content=“广州传智” />
……
《自动刷新》 2秒 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="refresh"content="2"> <title>无标题文档</title> </head> <body> <h1>213123<h1> </body> </html>
表格标记
1、表格的结构
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>
表格结构的说明：
<table>是表格标记，里面包含<tr>行标记；
<tr>代表一个行
<td>或<th>代表一个单元格(列)，<th>标题单元格(内容居中加粗显示)，<td>普通单元格
2、<table>的常用属性
Width：表格的宽度
Height：表格的高度
Border：表格的边线粗细
Bordercolor：表格的边线颜色
Align：表格的水平对齐方式，取值：left center right
Cellpadding：指单元格边线到内容间的距离(内边距)
Cellspacing：指两个单元格之间的距离(外边距)
bgColor：表格背景色
background：表格的背景图片
注意：在HTML中所有的属性值都不加px单位，但在CSS中所有数值都必须加单位。
3、<tr> 行的常用属性
Height：一行的高度
bgColor：行的背景色
align：一行的内容水平居中显示，取值：left、center、right
valign：行的内容垂直居中，取值：top、middle、bottom
4、<td>或<th>列的属性
Width：单元格的宽度
Height：单元格的高度
bgColor：背景色
background：背景图片
align：单元格内容水平对齐
valign：单元格内容垂直对齐
rowspan：合并行的单元格(跨行合并)
colspan：合并列的单元格(跨列合并)
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>无标题文档</title> </head> <body> <table width="500"border="3" cellspacing="1" cellpadding="12" > <trbgcolor="#FF0099"> <tdbgcolor="#66FF00" height="80" valign="bottom"align="left">文字内容</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <tdrowspan="3"> </td> <!-- 上下合并 --> </tr> <tr> <td>3234214</td> <td>3234214</td> <td>3234214</td> </tr> <trbgcolor="#0000FF"> <!-- 左右合并 --> <tdcolspan="3">align="left" >3234214</td> </tr> </table> </body> </html>
综合案例：月福首页
1、制作网站的一个思路
1） 业务员与客户进行沟通，确定客户的需求。
2） 网站美工来设计一个效果图(Photoshop)，直到客户满意为准。
3） 将效果图源文件，交给排版人员，用HTML+CSS还成效果图所展示的样式。
4）排版人员，将原效果图进行切割成一个一个的小图片，然后用HTML+CSS还原效果图所展示的样式。
5） 后台程序员开始写程序。（在PHP+MySQL阶段讲到）
6） 将前台HTML页面与PHP程序综合排版。（在PHP+MySQL阶段讲到）
2、月福网站的结构
3、排版时需要提前确定的信息
主页的宽度：778px、1000px(现在流行的宽度)
网页背景色：
网页文本的大小：12px
图片热点(图像地图)
<img src=“images/01.jpg” usemap=“#Map” />
图像地图的标记<map>
<map>
<areashape=“热点的形状” coords=“热点在图片上的坐标” href=“URL” alt=“提示信息” />
</map>
<map>标记的属性
Name：指定热点地图的名称；
Id：指定热点地图的名称；
<area>标记的属性
Shape：热点的形状，取值：rect(矩形)、circle(圆形)、polygon(多边形)
Coords：热点形状的坐标，根据热点形状来确定坐标值。
Rect(矩形)：coords=“x1,y1,x2,y2”，左上角和右下角坐标
Circle(圆形)：coords=“x,y,r”，圆心坐标和半径
Polygon(多边形)：coords=“x1,y1,x2,y2,x3,y3,xN,yN”
举例：给图片加热点
<img src=“images/01.jpg” usemap=“#Map” />
<map id=“Map” name=“Map”>
<area shape=“rect” coords=“50,50,100,100” href=“http://www.sina.com” />
</map>
《图像热点》 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>无标题文档</title> </head> <body> <img src="images/01.jpg"width="458" height="302" border="0"usemap="#Map" /> <map name="Map"id="Map"> <area shape="rect"coords="0,0,200,100" href="#" title="第一个热点" /> <area shape="circle"coords="85,187,78" href="#" /> <area shape="poly"coords="258,123,295,29,394,97,408,250,327,200,214,275,290,191,259,123"href="#" /> </map> </body> </html>
多媒体标记(插入Flash的标记)
多媒体包含：声音、视频、Flash
网页上的多媒体基本上都是Flash格式的，
视频格式.wmv .dat .mob .rmvb等，在网页上不能直接播放，需要安装第三方的插件，才可以播放。
不同的浏览器，播客上述视频格式，所使用插件参数又不一样。
上述格式视频一般文件较大，不利于网络下载播放。
一般情况下，是将其它的视频格式，转成Flash来在网页上播放。转换软件：格式工厂
Flash格式的视频兼容性非常好，Flash格式的文件很小。
1、多媒体标记<embed>
主要应用Netscape浏览器，它不是W3C规范。
<embedsrc="images/banner.swf" width="778" height="202"quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"type="application/x-shockwave-flash"wmode="transparent"></embed>
<embed>的主要属性
Src：Flash的文件地址
Width：指Flash文件的宽度
Height：指Flash文件的高度
Quality：指Flash的播放质量，质量有高有低 hight low
Pluginspage：如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载。
Type：指定Flash的文件格式类型
Wmode：指Flash的背景是否可以透明，取值：transparent是透明的
2、多媒体标记<object>
主要应用IE浏览器，它是W3C规范。
<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"width="778" height="202">
<param name="movie"value="images/banner.swf">
<param name="quality"value="high">
<param name="wmode"value="transparent">
</object>
<object>的主要属性
Classid：指定Flash插件的ID号，一般存在于注册表中；
Codebase：如果Flash插件不存在，则从codebase指定的地址下载；
<param>的主要作用，是设置具体的详细参数
3、在网页中插入Flash时，要同时兼容多种浏览器，需要将这两种标记一起使用，但使用的顺序是，<object>中嵌套<embed>标记。
<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"width="778" height="202">
<param name="movie" value="images/banner.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="images/banner.swf"width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"type="application/x-shockwave-flash"wmode="transparent"></embed>
</object>
W3C：是万维网联盟，主要制定Web标准的国际权威机构。XHTML、CSS、JavaScript、 DOM、AJAX等。
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>月福汽车装饰有限公司</title>
<style type="text/css">
body{
margin:0px; /*外边距*/
padding:0px; /*内边距*/
}
</style>
</head>
<body bgcolor="#CCCCCC">
<!--网页头部-->
<table width="778"align="center" border="0" cellpadding="0"cellspacing="0">
<tr>
<td><imgsrc="images/index_01.png" /></td>
<td><imgsrc="images/index_02.jpg" border="0"usemap="#Map" />
<mapname="Map" id="Map">
<areashape="rect" coords="145,55,236,75" href="#"title="E-mail" />
<areashape="rect" coords="145,34,236,54" href="#"title="收藏本站"/>
<areashape="rect" coords="145,13,236,33" href="#" title="设为首页" />
</map>
</td>
</tr>
</table><!--//网页头部-->
<!--导航栏-->
<table width="778"align="center" border="0" cellpadding="0"cellspacing="0">
<tr>
<td><imgsrc="images/index_03.png" /></td>
<td><imgsrc="images/index_04.png" /></td>
<td><imgsrc="images/index_05.png" /></td>
<td><imgsrc="images/index_06.png" /></td>
<td><imgsrc="images/index_07.png" /></td>
<td><imgsrc="images/index_08.png" /></td>
<td><imgsrc="images/index_09.png" /></td>
<td><imgsrc="images/index_10.png" /></td>
<td><imgsrc="images/index_11.png" /></td>
<td><imgsrc="images/index_12.png" /></td>
</tr>
</table><!--//导航栏-->
<!--Flash动画-->
<table width="778"align="center" border="0" cellpadding="0"cellspacing="0">
<tr>
<td><imgsrc="images/index_29.jpg" /></td>
</tr>
<tr>
<td>
<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"width="778" height="202">
<param name="movie"value="images/banner.swf">
<param name="quality"value="high">
<param name="wmode"value="transparent">
<embed src="images/banner.swf"width="778" height="202" quality="high"pluginspage="http://www.macromedia.com/go/getflashplayer"type="application/x-shockwave-flash"wmode="transparent"></embed>
</object>
</td>
</tr>
</table><!--//Flash动画-->
<!--月福新闻-->
<table width="778"align="center" border="0" cellpadding="0"cellspacing="0">
<tr>
<td><imgsrc="images/index_21.png" /></td>
<td><imgsrc="images/index_22.png" /></td>
<tdrowspan="2" bgcolor="#d30001" valign="top">
<imgsrc="images/index_23.png">
<ol>
<fontcolor="#ffffff" size="2">
<li>蓝色征途...</li>
<li>风挡玻璃清洗剂...</li>
<li>月福标准封釉套装 ...</li>
<li>钻石之光...</li>
<li>云南蜡染抱枕...</li>
<li>龟博士白金蜡...</li>
</font>
</ol>
</td>
</tr>
<tr>
<tdalign="center" background="images/line.jpg">
<imgsrc="images/200810311354340.jpg" width="170"height="162" vspace="5" /><br />
<fontsize="2">月福在北京地图</font>
</td>
<tdbgcolor="#ffffff" valign="top">
<!--表格嵌套表格：是在某一个单元格中，来嵌套另一个表格-->
<tablewidth="98%" border="0"cellpadding="0" cellspacing="2">
<tr>
<tdcolspan="3" height="10"></td>
</tr>
<tr>
<tdwidth="20"><img src="images/index_30.jpg"/></td>
<td><fontsize="2">月福机场T2、T3贵宾店即日开业大酬宾...</font></td>
<td><imgsrc="images/index_28.jpg" /></td>
</tr>
<tr>
<tdalign="center"><img src="images/index_30.jpg"/></td>
<td><fontsize="2">北京月福汽车装饰公司关于销售圣罗膜相关情况的说明..</font>.</td>
<td><imgsrc="images/index_28.jpg" /></td>
</tr>
<tr>
<tdalign="center"><img src="images/index_30.jpg"/></td>
<td><fontsize="2">人才招聘--挑战高薪！...</font></td>
<td><imgsrc="images/index_28.jpg" /></td>
</tr>
<tr>
<tdalign="center"><img src="images/index_30.jpg"/></td>
<td><fontsize="2">月福标准封釉套装...</font></td>
<td> </td>
</tr>
<tr>
<tdalign="center"><img src="images/index_30.jpg"/></td>
<td><fontsize="2">月福漆面镀膜...</font></td>
<td> </td>
</tr>
<tr>
<tdalign="center"><img src="images/index_30.jpg"/></td>
<td><fontsize="2">月福在北京地图...</font></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<!--//月福新闻-->
</body>
</html>