27
授授授授 授授授 QQ:41588872 TEL:13589841020 授授授授授授 :http://xin126.cn 第第第 第第第第第第第 HTML 第第 ()

第二章 超文本标记语言 HTML (二)

Embed Size (px)

DESCRIPTION

第二章 超文本标记语言 HTML (二). 授课教师:姬广永 QQ:41588872 TEL:13589841020 学习交流网站 : http://xin126.cn. 文字标签属性 —— 1. 文字属性标记 1. 文字颜色 指定颜色 ... #=RRGGBB 16 进制数码 例: 01.htm. 文字标签属性 —— 2. 文字属性标记 2. 文字字体 ... #= 客户端可获得的字体 01.htm. - PowerPoint PPT Presentation

Citation preview

Page 1: 第二章 超文本标记语言 HTML (二)

授课教师:姬广永QQ:41588872TEL:13589841020学习交流网站 :http://xin126.cn

第二章 超文本标记语言 HTML(二)

Page 2: 第二章 超文本标记语言 HTML (二)

文字标签属性—— 1 文字属性标记

1. 文字颜色 指定颜色 <font color=#> ... </font> #=RRGGBB 16 进制数码

例: 01.htm

Page 3: 第二章 超文本标记语言 HTML (二)

文字标签属性—— 2 文字属性标记

2. 文字字体 <font face=“#, #, ..., #”> ... </font>

#= 客户端可获得的字体

01.htm

Page 4: 第二章 超文本标记语言 HTML (二)

文字标签属性—— 3 文字属性标记

3. 文字大小 <font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#

例: 01.htm

Page 5: 第二章 超文本标记语言 HTML (二)

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

Page 6: 第二章 超文本标记语言 HTML (二)

<basefont> 标签 定义和用法: <basefont> 标签可以为文档中的所有文本

定义默认字体颜色、字体大小和字体系列。 该标签位于 <head> 与 </head> 之间。 <head> <basefont color=“red” size=“5” face = " 宋体 " > </head>

Page 7: 第二章 超文本标记语言 HTML (二)

<basefont> 标签 如 : <BASEFONT SIZE=20> 基本字体大小为

20 , </BASEFONT> <BIG> 加大为 21 </BIG> 基本字体大小为 20 ,

加大为 21 <SMALL> 减小为 19</SMALL> 基本字体减小

为 19 。

Page 8: 第二章 超文本标记语言 HTML (二)

注意: 设定字体的大小分 : 绝对 SIZE 如 : <FONT SIZE=20> 相对 SIZE 如 : <FONT SIZE=+1> ( 以 B

ASEFONT 设定的字体大小做加减 ) 。

Page 9: 第二章 超文本标记语言 HTML (二)

<basefont> 和 <font> 如果 <basefont> 和 <font> 都设置了字体属

性,则按 <font> 中设置的进行显示。 如果 <basefont> 中设置了字体属性,而 <fon

t> 中没有设置,则按 <basefont> 中的设置进行显示。

如 :<head><basefont color="#00FF00" size="50" face=" 黑体 "></basefont></head>

<body> <font color="#FF0000"> 中国人 </font></body>

Page 10: 第二章 超文本标记语言 HTML (二)

浏览器支持

只有 Internet Explorer 支持 <basefont> 标签。应该避免使用该标签。

在 HTML 4.01 中,不赞成使用 basefont 元素;在 XHTML 1.0 Strict DTD 中,不支持 basefont 元素。

Page 11: 第二章 超文本标记语言 HTML (二)

不折行标记与预设折行标记 <nobr> 不折行标记。在 <nobr></nobr

> 标记内的字符不会因浏览器窗口宽窄而自动回行。常用于住址,运算符,一串数字,一行程序等。

02.htm

Page 12: 第二章 超文本标记语言 HTML (二)

预设折行标记 <wbr> 预设折行标记。在浏览器窗口宽

度不能满足完全显示要求时,以预设折行部位开始折行。

02.htm

Page 13: 第二章 超文本标记语言 HTML (二)

HTML 对图片的控制 --1 基本语法 : <img src=“ 图片名称” >

引用图片必须用 <img> 元素标志。 <img> 元素下的基本元素属性是 src 属性, src 的属性值为所引用的图片的 URL 地址。

src 属性是必须的。 Src 的 URL 可以是绝对地址,也可以是相对地址

例: 03.htm

Page 14: 第二章 超文本标记语言 HTML (二)

HTML 对图片的控制 --2 图片的替代文本:1. 图片不能显示时在图片所在位置显示的一段

文本2. 当鼠标移到图片上时也会显示替代文本。 定义图片替代文本的方法是:

<img src=“ 图片名称” alt=“ 这是一张图片”>

例: 03.htm

Page 15: 第二章 超文本标记语言 HTML (二)

HTML 对图片的控制 --3 图片的显示大小

我们可以指定一幅图片在浏览器窗口里的显示大小。 定义图片的显示大小的方法是:<img src="images/fengjing1.jpg" width="600" hei

ght="450" >

例: 03.htm

Page 16: 第二章 超文本标记语言 HTML (二)

HTML 对图片的控制 --4 图片的边框

我们可以为一幅图片加一个边框以突出显示: <img src="images/fengjing1.jpg" border

= " 2 " > border 的属性值为象素数

例: 03.htm

Page 17: 第二章 超文本标记语言 HTML (二)

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

Page 18: 第二章 超文本标记语言 HTML (二)

HTML 对图片的控制 --5 图片的对齐方式

图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是: <img src=“images/shangu.jpg” align=“left”

> <img rc=“images/shangu.jpg” align=“right”

>

例: 04.htm

Page 19: 第二章 超文本标记语言 HTML (二)

HTML 对图片的控制 --7 定义图片与左、右的文本之间的间距

图片在显示时,与左右的文本之间可以有一定的间距

<img src="sample.jpg" hspace=5 vspace=5 > Hspace(horizontal) 定义水平间距; Vspace(vertical) 定义垂直间距。单位都是象素数 .例: 04.htm

Page 20: 第二章 超文本标记语言 HTML (二)

1.4 列表标记 <ol> :有序列表( Ordered List)<ul> :无序列表( Unordered List)<li> :项目标记( Listed Item)

<dl> 、 <dt> 、 <dd> :定义列表( Definition List)

Page 21: 第二章 超文本标记语言 HTML (二)

无序列表 无序列表是由 <ul> 和 <li> 元素定义的 :<ul>

<li>sports</li><li> food </li><li> drink </li><li> friends </li>

</ul>例: 05.htm

Page 22: 第二章 超文本标记语言 HTML (二)

无序列表元素

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

例: 05.htm

Page 23: 第二章 超文本标记语言 HTML (二)

有序列表的顺序编号方式

无序列表的项目符号外观

Page 24: 第二章 超文本标记语言 HTML (二)

有序列表元素

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

Page 25: 第二章 超文本标记语言 HTML (二)

有序列表元素— 2 <ol> 元素也有自己的 type 属性, type 属性

的属性值有 1 、 A 、 a 、 I 、 i 等。例如,我们以 A 、 B 、 C……作为列表的编号例: 06.htm

<ol> 元素还可以定义列表的起始编号,如我们希望列表的第一个编号为 5 ,而不是 1 ,则需要定义 <ol> 元素的 start 属性例: 06.htm

Page 26: 第二章 超文本标记语言 HTML (二)
Page 27: 第二章 超文本标记语言 HTML (二)

END