第二章超文本标记语言 HTML （二）

第二章超文本标记语言HTML（二） 授课教师：姬广永 QQ:41588872 TEL:13589841020 学习交流网站:http://xin126.cn

文字标签属性——1 • 文字属性标记 • 1.文字颜色 • 指定颜色 ... • #=RRGGBB 16 进制数码例：01.htm

文字标签属性——2 • 文字属性标记 • 2.文字字体 • ... #=客户端可获得的字体 01.htm

文字标签属性——3 • 文字属性标记 • 3.文字大小 • ... • #=1, 2, 3, 4, 5, 6, 7 or +#, -# 例：01.htm

练习1 • 编写一个网页：要求显示效果如下

<basefont> 标签 • 定义和用法： <basefont> 标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。 • 该标签位于<head>与</head>之间。 • <head> • <basefont color=“red” size=“5” face = "宋体" > • </head>

<basefont> 标签 • 如 : <BASEFONT SIZE=20> 基本字体大小为 20，</BASEFONT> • <BIG> 加大为 21 </BIG> 基本字体大小为 20，加大为 21 • 减小为19 基本字体减小为19。

注意： 设定字体的大小分 : 绝对SIZE 如 : 相对SIZE 如 : ( 以 BASEFONT 设定的字体大小做加减 )。

<basefont> 和 • 如果<basefont> 和都设置了字体属性，则按中设置的进行显示。 • 如果<basefont> 中设置了字体属性，而中没有设置，则按<basefont> 中的设置进行显示。 • 如:<head><basefont color="#00FF00" size="50" face="黑体"></basefont></head> <body> 中国人</body>

浏览器支持 • 只有 Internet Explorer 支持 <basefont> 标签。应该避免使用该标签。 • 在 HTML 4.01 中，不赞成使用 basefont 元素；在 XHTML 1.0 Strict DTD 中，不支持 basefont 元素。

不折行标记与预设折行标记 • 不折行标记。在标记内的字符不会因浏览器窗口宽窄而自动回行。常用于住址，运算符，一串数字，一行程序等。 • 02.htm

预设折行标记 • 预设折行标记。在浏览器窗口宽度不能满足完全显示要求时，以预设折行部位开始折行。 02.htm

HTML对图片的控制--1 • 基本语法: • <img src=“图片名称”> • 引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。 • src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址例：03.htm

HTML对图片的控制--2 • 图片的替代文本： • 图片不能显示时在图片所在位置显示的一段文本 • 当鼠标移到图片上时也会显示替代文本。 • 定义图片替代文本的方法是： • <img src=“图片名称”alt=“这是一张图片”> 例：03.htm

HTML对图片的控制--3 • 图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。 • 定义图片的显示大小的方法是： <img src="images/fengjing1.jpg" width="600" height="450" > 例：03.htm

HTML对图片的控制--4 • 图片的边框 • 我们可以为一幅图片加一个边框以突出显示： • <img src="images/fengjing1.jpg" border= " 2 " > • border的属性值为象素数例：03.htm

HTML对图片的控制--6 • 图片的对齐方式定义图片的垂直对齐方式： <img src="images/shangu.jpg" align="top" > <img src="images/shangu.jpg" align="middle"> <img src="images/shangu.jpg" align="bottom" > 对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。例：04.htm

HTML对图片的控制--5 • 图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是： • <img src=“images/shangu.jpg”align=“left” > • <img rc=“images/shangu.jpg”align=“right”> 例：04.htm

HTML对图片的控制--7 • 定义图片与左、右的文本之间的间距 • 图片在显示时，与左右的文本之间可以有一定的间距 <img src="sample.jpg" hspace=5 vspace=5 > • Hspace(horizontal)定义水平间距； • Vspace(vertical)定义垂直间距。单位都是象素数. 例：04.htm

1.4 列表标记 <ol>：有序列表（Ordered List） <ul>：无序列表（Unordered List） <li>：项目标记（Listed Item） <dl>、<dt>、<dd>：定义列表（Definition List）

无序列表 • 无序列表是由<ul>和<li>元素定义的: <ul> <li>sports</li> <li> food </li> <li> drink </li> <li> friends </li> </ul> 例：05.htm

无序列表元素 • 无序列表的默认符号是圆点。<ul>元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块） • 例： 05.htm

有序列表的顺序编号方式 • 无序列表的项目符号外观

有序列表元素 有序列表由<ol>和<li>定义: <ol> <li>sports</li> <li> drink</li> <li> friends</li> </ol> 例：06.htm

有序列表元素—2 • <ol>元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C……作为列表的编号例： 06.htm • <ol>元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义<ol>元素的start属性例：06.htm

END

第二章超文本标记语言 HTML （二）