当前位置:文档之家› 网页制作案例教程-清华大学

网页制作案例教程-清华大学



3、格式标签

1)常用格式标签 在HTML文档中,通常我们要通过格式标签来设定文本 显示格式,常用的一些格式标签如表3-2-2所示

2)特殊字符 为了避免那些和HTML的关键字或保留字冲突,有些字 符需要用特殊方法表示才能够正确的在浏览器中显示 。
案例3-11特殊字符应用

3)闪烁标签<blink> <blink> 使得被标记的文字闪烁,使用的格式为 <blink>文字内容</blink>
3.2.2 文本属性设置

1、文本对齐方式属性(align) 该属性用来设置文字的对齐方式,可以是标题也 可以是一般文字,对齐方式共三种:左对齐、居 中对齐和右对齐,默认情况下为左对齐。三种对 齐方式的属性值分别为left、center和right。
案例3-12文本字体属性应用

2、文本字体、大小、颜色属性(face、size、 color)
3.4.3超链接的应用

1、内部链接

内部链接是指链接的对象是在同一个网站内部不同页 面之间的链接关系,内部链接一般使用相对路径进行 链接比较好。

2、书签链接
建立书签的语法格式为: <a name=”书签名称”>文字</a> 这里的书签名称就是为了跳转建立的书签代号,文字是 指跳转过来的位置指定。

使用<ul>标签建立无序列表,每个列表项前使 用<li>,无序列表的type属性有三个可选值,这 三个可选值必须用小写,分别是disc表示实心圆 ,circle表示空心圆,square表示小方块。如果 不选择type属性默认为空心圆。
案例3-16无序列表标签应用
3.3.3 嵌套列表
案例3-17 嵌套列表标签应用


<hi>设置网页内容标题标签,通过<hi>…..</hi>标签 配对使用设置HTML网页内容标题,标题标签共分6种 ,分别表示不同字号的标题,i可以取值为1-6。 在<hi>中可以在使用属性<align>来设置标题对齐方 式,如果没有设置<align>属性,默认对齐方式是left (左对齐)。
<h1 align=“对齐方式”>…..</h1> <h2>…..<h2> <h3>…..<h3> <h4>…..<h4> <h5>…..<h5> <h6>…..<h6>

文本字体、大小、颜色属性,主要是通过在<font>标签 中设置face、size、color的值,设置文本的字体、大 小和颜色。
案例3-13文本字体属性应用

3、<hr>标签的属性
ห้องสมุดไป่ตู้

在<hr>标签中,通过设置width和size属性,用来控制 水平线的长度和宽度,默认情况下,水平线的宽度是 100%,1像素的高度,在设置宽度和高度时可以是确 定的像素值也可以是占窗口的百分比。 color属性可以设置水平线的颜色,颜色表示和字体 颜色的表示相同.

2、<ol>标签属性

<ol>标签有两个属性,分别是start和type。start用来 设置标签首项的开始值,如果省略该属性值则从第一 个字符开始,也可以在<li>中设置value值来改变表行 项目的特定编号。而type用来设置项目编号的类型。
案例3-15 有序列表标签应用
3.3.2 无序列表标签<ul>

Coords属性是用来定义区域的坐标的,它的取值和 shape的形状有关系。
Shape= rect,则coords包含4个参数,分别为left、 top、right和bottom。前两个数字为左上角座标,后 两个数字为右下角座标。 案例3-22 图像超链接应用
案例3-4 换行标签应用

3)取消换行标签nobr
案例3-5 取消换行标签应用

4)原样显示文字标签pre
案例3-6原样显示文字标签pre应用

5)右缩进标签blockquote 案例3-7 右缩进标签应用
6)居中对齐标签center 案例3-8 居中对齐标签应用

7)文字的分区显示标签div 案例3-9 文字的分区显示标签应用

表格标签、属性、单元格以及表格嵌套应用 框架基本结构、分割方式、属性及链接、浮动 窗口
本章学习导航

HTML标签的学习,是初学者掌握网页制作的 入门技术,也是后续学习创建静态、动态网站 必备基础知识,了解JavaScript的基本标签、 属性运用及作用,并使用它们制作精美的网页 ,是初学者掌握本章内容的基本要求。 本章内容在全书知识结构中所处位置如图所示
表示一级标题 表示二级标题 表示三级标题 表示四级标题 表示五级标题 表示六级标题
案例3-2 文字标题

2、段落标签

1)分段标签<p> <p>用来标记段落的开始,用</p>可以标记一个 段落的结束,也可以省略,则到下一个<p>开始 新的段落。 案例3-3 <p>标签应用

2)换行标签<br> <br>可以将文字强制换行,段落标签<p>是隔行换 行,而<br>则使得换行更紧凑。

<a href=”链接地址” ><img src=”图像文件的地址 ”></a>

2、热点图像超链接
热点地图(Image Map)标签的使用格式: <img src="图形文件名" usemap="影像地图名称">
然后需要定义热区图像以及热区的链接属性如下: <map name="影像地图名称"> <area shape=”热区形状” coords=”热区坐标” href="链接地址"> <area shape=”热区形状” coords=”热区坐标” href="链接地址"> …… </map> 这里的两个属性shape和coords的取值说明如下: Shape属性有三个取值,分别是:rect(矩形)、circle( 圆形区域)、poly(多边形区域)。
3.1 HTML入门
3.1.1 HTML简介

HTML( Hypertext Markup Language )即超文 本链接标示语言 ,目前HTML编辑器有很多,可以 是任何文本编辑器或者网页编辑制作工具,如 FrontPage、Dreamweave。生成的HTML文件最常 用的扩展名是.html,也有.htm。

2、超级链接属性 标签<a>的属性href指定了链接到的目标地址, 该地址可以是文件所在位置也可以是一个URL, 只有正确指定目标地址,才能正确访问需要的资 源。

属性target用于指定打开链接的目标窗口,其默 认方式是原窗口。
3.4.2 超级链接路径

在超链接中,文件的存放位置和路径以及URL必 须指定清楚才可以正确链接,超级链接的路径分 为两种:绝对路径、相对路径。
案例3-20 外部超级链接应用
3.5 图像
3.5.1图像格式

目前浏览器可以显示的图像格式主要有JPEG、 GIF和BMP
3.5.2 图像标签<img>

1、<img>语法格式
语法格式为: <img src=”图像文件的地址”>,这里的地址可以 是相对地址也可以是绝对地址。

2、<img>标签属性


6)hspace属性 语法格式为: <img src=”图像地址” hspace=”水平间距”> 7)vspace属性 语法格式为: <img src=”图像地址” vspace=”水平间距”>
案例3-21 图像标签<img>应用
3.5.3 图像超链接

1、设置图像的超链接 语法格式为:
案例3-14 <hr>标签属性应用
3.3 列表
在HTML中列表有三种形式,分别为:有序列 表(Ordered List),无序列表(Unordered List) 和定义列表(Definition List)。
3.3.1有序列表标签<ol>

1、语法格式为:

<ol type=编号类型 start=value> <li>第1项 <li>第2项 <li>第3项 </ol>
3.1.2 HTML基本结构及书写规范

1、HTML基本结构

在HTML中,由<>和</>括起来的文本叫做“标签”,<> 表示开始标签;</>表示结束标签,开始标签和结束标签配 对使用,它们之间的部分是该标签的作用域,比如 <html></html>等。HTML就是以这些标签来控制内容的显 示方式。

2、HTML书写规范


在HTML中按照格式来看标签有两类,大部分标签是成 对出现的,需要开始标签和结束标签 。也有一些标签 不需要成对出现,单独出现一次就可以,这类标签通 常不控制显示形态 标签是不区分大小写的。
3.2 文本
3.2.1 常用文本标签

常用的文本标签分为标题标签、段落标签、格式化 标签三类: 1、标题标签<hi>
相关主题