昨日回顾

超级链接、锚点

<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:beijing2000@126.com”>给我发邮件</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)的内容。(用的最多)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

第三种:Frameset框架型:在这种XHTML中,可以使用框架技术,实现多个网页在一个浏览器窗口中呈现

<!DOCTYPE html 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=“深圳” />

       ……

 

 

表格标记

 

 

 

 

 

 

 

 

 

 

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:合并列的单元格(跨列合并)

 

综合案例:月福首页

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>

       <area shape=“热点的形状” 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>

 

多媒体标记(插入Flash的标记)

多媒体包含:声音、视频、Flash

网页上的多媒体基本上都是Flash格式的,

视频格式.wmv   .dat   .mob   .rmvb等,在网页上不能直接播放,需要安装第三方的插件,才可以播放。

不同的浏览器,播客上述视频格式,所使用插件参数又不一样。

上述格式视频一般文件较大,不利于网络下载播放。

一般情况下,是将其它的视频格式,转成Flash来在网页上播放。转换软件:格式工厂

Flash格式的视频兼容性非常好,Flash格式的文件很小。

 

 

1、多媒体标记<embed>

       主要应用Netscape浏览器,它不是W3C规范。

<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>

 

<embed>的主要属性

Src:Flash的文件地址

       Width:指Flash文件的宽度

       Height:指Flash文件的高度

       Quality:指Flash的播放质量,质量有高有低 hight  low

       Pluginspage:如果指定的Flash插件不存在,则从pluginspage指定的地方进行下载。

       Type:指定Flash的文件格式类型

       Wmode:指Flash的背景是否可以透明,取值:transparent是透明的

 

 

2、多媒体标记<object>

       主要应用IE浏览器,它是W3C规范。

<object classid="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>标记。

<object classid="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等。