第三章 HTML 标记功能详述 ( 第 1 部分 )

第三章 HTML标记功能详述(第1部分)

本章要点 • 文本格式标记 • 文本修饰标记（字体标记） • 列表标记 • 超链接标记 • 图像和多媒体标记

HTML标记基础 • 什么是标记？ • 标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。 • 标记可以具有相应属性即各种参数，如size、color、 text、 width和noshade等。 • 例如：<p> <font size="+1" color="red"></font></p>

文本格式标记 网页中添加文本的方法

网页中添加文本的方法 文本格式标记是网页中定义文本格式的标记 1）直接写文本<div>文本</div>、<td>文本</td>、<body>文本</body>、<li>文本</li> ； 2）用段落标记<p>……</p>格式化文本，各段落文本将分行显示； 3）用标题标记<hn>……</hn>格式化文本，作用：定义第n号标题字体，n=1~6，n值越大，字越小；文本将变为粗体显示，可看成特殊的段落标记； 4) 用预格式化标记<pre>……</pre>格式化文本，标记内的文本将按原来的格式显示，保留文本中的所有空格、换行和定位符；

用标题标记<hn>……</hn>格式化文本 <h1>第1号标题字体</h1> <h3>第3号标题字体</h3> <h4>第4号标题字体</h4> <h5 align="center">第5号标题字体（居中）</h5>

标题标记和段落标记 <body> <h1 align="center">1号标题</h1> <p>第一段</p> <h3>3号标题</h3> <p>第二段</p> <h5 align="right">5号标题</h5> <p align="right">第三段</p> </body>

用预格式化标记<pre>…</pre>格式文本 <pre> 网页设计师这一职业在今后来说还是有需求的。因为随着网络越来越普及，像我国的房地产市场</pre>

文本的强制换行<br /> 电子商务顾名思义就是在internet上做生意，<br />商品展示，广告宣传、发布供求信息等活动实现的途径就是网页。 • 强制不换行标记<nobr>……</nobr>，常用英文人名 • <nobr>Bill Gates</nobr>

文本中的空格 • 标记(<pre>除外)内字符前的空格浏览器将全部忽略，字符与字符间的空格浏览器将只保留一个空格显示，回车视为一个空格， • 块级元素之间忽略所有空格。 • 如果要输入多个空格或需要在字符之前输入空格需在源代码中插入（表示一个半角空格）。 • 行内元素可看成一个字符

文本中的转义字符 • 在HTML源代码中，有些字符有特别的含义，比如小于号“<”就表示HTML 标记的开始，html源代码中的“<”是不会在浏览器中显示的，如果要浏览器显示这些字符，就需要输出他们对应的转义字符。 • 例如：<表示< , >表示> , &quot表示“ , &表示& , 表示空格等；通常，一个字符实体是由三部分组成的：（1）一个“&”符号（2）字符专用名称或者字符代号（3）一个“;”符号在DW的设计视图中输入这些特殊字符，DW会自动在代码视图添加它们对应的转义字符

DW中插入HTML文本元素的快捷键 • Enter 插入<p> </p> （硬回车） • shift＋enter插入<br /> （软回车） • Ctrl＋shift＋space插入一个

综合实例 <html> <head> <title>分段换行与预格式</title> </head> <body> <h3>以下是直接写文本的情况：</h3> 星期一、星期二、星期三、星期四、星期五、星期六、星期日。 <h3>以下是使用了三个换行标记的情况：</h3> 星期一、星期二、<br />星期三、星期四、<br/> 星期五、星期六、星期日。<br /> <h3>以下使用分段标记（分为两段）：</h3> <p>星期一、星期二、星期三、</p><p>星期四、星期五、星期六、星期日。</p> <h3>以下使用预格式：</h3> <pre> 星期一、星期二、星期三、星期四、星期五、星期六、星期日。 </pre> </body></html>

跑马灯<marquee>标记 • 一个特殊的文本标记，能使其中的文本在浏览器屏幕上不断滚动。 • 其中behavior=“alternate”设置滚动方式为来回滚动，设置为scroll表示循环滚动，设置为slide表示滚动到目的地就停止。direction属性用于控制滚动的方向，可以上下滚动或左右滚动。loop设置滚动的次数，loop为0表示不断滚动。scrollamount属性设置滚动的速度，scrolldelay属性设置两次滚动间的间隔时间。

<marquee>示例 <marquee direction="up" behavior="scroll" scrollamount="10" scrolldelay="4" loop="-1" align="middle" onmouseover=this.stop() onmouseout=this.start() height="120"> 测试:网页设计与制作学习：可以将swf文件下载下来用flash播放器全屏播放以达到最好效果，也可以在IE浏览器中按F11键达到全屏效果. </marquee>

水平线标记<hr /> • <hr/>标记是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。noshade属性用来加入一条没有阴影的水平线。 • <hr size="3" width="85%" color =“red" noshade="noshade" align="center" />

文本修饰标记（字体标记）

文本修饰标记 • 文本修饰标记是对文本的外观进行修饰的标记，如让文字变色，加大，变粗体，添加下划线等。 • 1）font标记：定义文字的各种属性。例：<font face="fontname" size= "n" color= "#0066CC">……</font> •

加粗、倾斜与下划线标记 • 2）加粗、倾斜与下划线的定义标记（b、i、u） <b>……</b>  <i>……</i>  <u>……</u>  <em>……</em>  <strong>……</strong>  使用加粗、倾斜与下划线标记（b、i、u）的组合，可对文本文字进一步修饰。如：<b><font color="red" size="5">此处以红色五号字粗体显示</font></b>

上标（sup）和下标（sub）标记 • 用于书写数学公式或分子式。 • 如：H<sub>2</sub>O  X<sup>2</sup>  • 由于字体标记属于对文本外观进行修饰的标记，是由于当时CSS语言尚未出现时html定义的表现的范畴，随着CSS的出现，这些表现功能均可以由CSS完成，所以不含有语义的字体标记慢慢过时了。

列表标记

列表标记 • 为了合理地组织文本，网页中常常要用到列表。在HTML中可以使用的列表标记有无序列表、有序列表和定义列表三种。 • 无序列表(Unordered List) <ul>, <li> • 有序列表(Ordered List) <ol>, <li> • 定义列表(Defined List) <dl>, <dt>, <dd>

嵌套的无序列表示例 <ul id="nav"> <li><a href="">文章</a> <ul> <li><a href="">CSS教程</a> </li> <li><a href="">DOM教程</a></li> <li><a href="">XML教程</a></li> </ul> </li> <li><a href="">参考</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">XML</a></li> <li><a href="">CSS</a></li> </ul> </li> </ul>

有序列表(Ordered List) <ul id="nav"> <li><a href="">文章</a> <ol> <li><a href="">CSS教程</a> </li> <li><a href="">DOM教程</a></li> <li><a href="">XML教程</a></li> <li><a href="">Flash教程</a></li> </ol> </li></ul>

定义列表(Defined List) <dl> <dt>湖南城市</dt> <dd>长沙</dd> <dd>衡阳</dd> <dd>常德</dd></dl> <dl> <dt>湖北城市</dt> <dd>武汉</dd> <dd>襄樊</dd> <dd>宜昌</dd> </dl>

超链接标记<a>

超链接标记<a> • 超链接是网页的基本元素，网页正是通过超链接而相互链接组织成一个网站，并将internet上的各个网站联系在一起。浏览者通过超链接选择阅读路径。 • 超链接是通过URL（统一资源定位器）来定位目标信息的。URL包括4部分：网络协议、域名或IP地址、路径和文件名。 • URL分为绝对URL和相对URL

绝对URL • 绝对URL是采用完整的URL来规定文件在internet上的精确地点，包括完整的协议类型、计算机域名或IP地址、包含路径信息的文档名。书写格式为：协议：//计算机域名或IP地址[/文档路径]［/文档名］ • 例如：http://www.hyshopgo.com/download/download.gif

相对URL • 相对URL是相对于包含超链接页的地点来规定文件的地点。 • 如链接到同一路径下的文档，直接输入文件名即可，如news.htm • 如链接到同一路径下子文件夹的文档，则先输入子文件夹名和斜杠（/），再输入文件名，如yule/news.htm • 如链接到上一级路径中，要在文件名前输入“../”，如“../news.htm”，其中“..”表示上级目录，“.”表示本级目录。

相对URL示例 wgzx oa. htm yule index .htm 2 1 pop .htm news .htm 3 1.href="yule/news.htm" 2.href="../oa.htm" 3.href=“pop.htm”

相对URL的优势 • 可以看出相对URL方式比较简便，不需输入一长串完整的URL；另外相对路径还有一个非常重要的特点是：可以毫无顾忌地修改Web网站的域名或网站在服务器硬盘中的存放目录。

超链接的种类－根据源对象划分 1) 用文本做超链接： <a href="index.htm" target="_blank">首页</a> 2) 用图像做超链接： <a href="index.htm"><img src="images/info.gif" title="返回首页" border="0"/></a> 3) 文本图像混合做链接： <a href="brand1.htm"><img src="green.gif" /><br />格力空调1型</a> 该方法在商品展示的网站上较常用。使用图像做超链接后，图像会自动增加边框，可设置边框为0去掉

超链接的种类－根据源对象划分2 4) 热区链接：使用map在图像上定义一幅地图，地图上可包含多个热区，每个热区用area单标记定义，area的shape属性定义了热区的形状，coords定义了热区的坐标点，href定义了热区链接的文件。同时img标记用usemap指明用了哪幅地图 <img src="images/163227.png" width="600" height="518" border="0" usemap="#Map" /> <map name="Map" id="Map"><area shape="rect" coords="51,131,188,183" href="default.asp" /> <area shape="rect" coords="313,129,450,180" href="#h3" /></map>

超链接的种类－根据href的取值 1) 链接到其他网页或文件（jpg, rar等）内部链接<a href="../index.htm">返回首页</a> 外部链接<a href="http://www.163.com"> 网易网站 </a> 下载链接<a href="software/wybook. rar">点击下载</a> 2) 电子邮件链接 <a href="mailto:xiaoli@163.com"> 给我留言</a> 如果IE不能打开该文件，则会弹出文件下载的对话框比普通链接多了个”mailto:”

超链接的种类－根据href的取值2 3) 锚链接（链接到页面中某一指定的位置）当网页内容很长，需要进行页内跳转链接时，就需要定义锚点和锚点链接，锚点可使用name属性或id属性定义。 <a id="yyyy"></a>  <a href="#yyyy">……</a>  也可以链接到其他网页某个锚点处 <a href="intro.htm#yyyy">……</a>  4) 空链接和脚本链接: <a href=“#”>……</a>  <a href="JavaScript:alert('确定删除吗')">……</a>

超链接的打开方式（target属性的取值） • 在本窗口打开：_self （target的默认值） • 在新窗口打开：_blank • 在父窗口打开： _parent 将链接的文件载入到父框架 • 在整个窗口打开：_top：将链接的文件载入到整个浏览器窗口中，并删除所有框架 • _parent、_top仅仅在网页被嵌入到其他网页中有效，如框架中的网页，所以这两种取值用得很少。

超链接的title属性 • title属性在很多标记里都有，其作用是在鼠标停留在该元素上时显示设置的说明文字 • 如<p><a href="定义列表.html" title="格力太阳能喜获国家免检产品称号">格力太阳能喜获…</a></p>

超链接制作的原则 1) 可以使用相对链接尽量不要使用绝对链接，如../index.htm 而不是http://www.hynu.cn 2) 链接目标尽可能简单如http://www.hynu.cn，而不是http://www.hynu.cn/index.jsp

课后思考 url（统一资源定位器） • url一般作为哪些属性的取值？ href=“index.asp” src=“logo.gif” • url的种类相对url 绝对url • url格式的类型协议名://主机ip或域名/文件目录/文件名

url协议的类型 • 常见的url协议的类型 • http • ftp • file://192.168.88.6/web/wy.gif 当在DW中建立网站目录后，那么网站目录内的文件之间建立链接就会自动采用相对链接的方式，相对链接以网站目录为基准。若没建立网站目录，DW则采用file协议方式，以磁盘根目录为基准，建立链接，而这是我们应该避免的

图像标记<img />

图像标记<img> • 图像标记：<img src=“图像文件名” />将图形文件嵌入到网页文档中的当前位置 • 说明：网页中插入图像有两种方法，一是插入一个<img>元素，二是将图像作为背景嵌入到网页中 • 由于CSS的背景属性的功能很强大，现在更推荐将所有的图像都作为背景嵌入。

网页中支持的图像文件格式 • 网页中可以插入的图像文件的类型有jpg格式，gif格式和png格式。这些文件都是压缩格式的图像格式，其中jpg格式适合用于网页中较大尺寸的真彩色图片，是一种有损压缩的格式；gif格式一般用于较小尺寸的图片，是一种无损压缩的格式，只支持256色，GIF在存储非连续色调的图像或具有大面积单一色彩的图像方面比较出色，gif格式的特点是可以实现gif动画，和gif全透明的图像；png格式可以用于alpha透明效果，但IE6不能够支持。

<img>标记的常见属性 • <img>是一个行内元素，插入<img>元素不会导致任何换行。下面是<img>标记的常见属性：

在单元格中插入图像的方法 • 对于表格布局的网页，所有的元素都是放置在单元格中的，图像也不例外，要在单元格中插入图像，且单元格的边框和图像之间没有间隙。那么必须将该单元格的宽和高设置为图片的宽和高，且表格中其它单元格的大小也必须固定，然后确保<td>与</td>之间只有<img>标记，没有空格和换行符，否则单元格会被空格撑开。如： • <td width="768" height="132"><img src="images/info.gif" /> </td>

<img>插入图像的对齐方式 • <img>标记的对齐方式仍然通过align属性实现，但其取值多达9种，其中要实现图片和文本混排可使用“左对齐”或“右对齐”，要实现文本和图片顶部对齐可使用“文本上方”。 • <img src="images/info.gif" width="158" height="41" align="left"/>，但通常是将图片放在表格里，通过表格定位来实现文本和图像的混排。

复习题 • a标记的常用属性有哪些 href target name title • img标记的常用属性有哪些 src width height alt title

实验(作业): • 用DW制作一个个人求职的网页，要求用表格布局，网页中必须包含图像、文本、列表、链接及表格等基本元素。 • 或者直接用编写代码的方式制作该网页。 • 下次上课前必须交，否则扣平时成绩。

媒体元素插入标记<embed /> <object> </object>

插入flash的两种方法 • 方法一：执行菜单命令：“插入－媒体－flash”，在代码视图中可看到插入flash元素是通过同时插入object标记和embed标记实现的，以确保在IE5和Firefox中都获得应有的效果 • 方法二：执行菜单命令：“插入－媒体－插件”，此方法在代码视图中仅插入了embed元素。由于IE6和Firefox都能正常显示效果，而代码更简洁，所以推荐用这种方式（但不能用来插入透明flash，否则IE浏览器中没有object标记的parm属性不会透明）

第三章 HTML 标记功能详述 ( 第 1 部分 )