第二章 文本格式.

Presentation on theme: "第二章 文本格式."— Presentation transcript:

1 第二章 文本格式

2 2.1 文本分段 段落标记符P和换行标记符BR 1.P标记符用于将文档划分为段落，包括开始标记符和结束标记符，后者可以省略
2.BR标记符用于强制断行，只有一个开始标记符<BR> 3.示例 注：空格参考字符  

3 2.1 文本分段 二.水平线标记符HR 只有开始标记符<HR>,它的属性有：
1.size属性（粗细程度，值是一个整数，单位是像素，默认值为2） 2.width属性（设置水平线的长度，单位（像素或百分比）） 3.noshade属性（该属性没有值） 4.color属性（定义水平线的颜色） 5.示例

4 2.1 文本分段 三.标题标记符Hn 用来标识网页中的标题和副标题，必须使用结束标记符(n=1-6,<H1>最大)
作用：自动改变字体大小，并设为黑体，并自动设置成一段。 示例

5 2.1 文本分段 四.段落对齐 1.align属性 设置段落对齐方式，取值包括：right、left、center、justify
该属性应用于多种标记符：P、HR、Hn 示例 默认值不同

6 2.DIV标记符与CENTER标记符 多个段落使用相同的对齐方式，使用DIV标记符将所有段落包括起来，然后在DIV属性中设置align属性即可。 示例 DIV标记符是用于文档分节的标记符，包括开始和结束标记符 SPAN标记符，用于行内特定内容的显示 二者区别： 他们主要用于CSS样式表 <DIV align=“center”>……</DIV> <CENTER>……</CENTER>

7 是指不同格式的设置作用于同一段内容，HTML遵循的原则如下：
3.格式的嵌套 是指不同格式的设置作用于同一段内容，HTML遵循的原则如下： 内容所设置的格式是相容的，则取格式叠加的效果。 如果所设置的格式是冲突的，则取最近样式符所修饰的效果 多数的HTML标记符都可以嵌套，嵌套的一条原则是：逻辑上范围越大的标记符位于嵌套的越外层。 嵌套时要注意层次关系 <B><I>粗斜体</B></I> <B><I>粗斜体</I> </B> <I> <B>粗斜体</B></I>

8 2.2 控制文本的显示效果 一.字体控制标记符 F O N T 控制字符的样式包括开始标记符和结束标记符（结束标记符不能省略）
1.size属性 设置文字的大小，它的取值可以是绝对值和相对值。使用绝对值可以是1-7（3为默认值），值越大显示的文字越大。相对值使用（+号和-号）指定相对默认值的字号，例如+1表示比默认字体大一号的字体。 示例 <BASEFONT SIZE=“4”>可以更改默认字体的大小

9 2.color属性 控制文字的颜色 示例 <FONT color=“red”>本行文字为红色</FONT> 3.face属性 指定字体样式，即通常所说的字体。格式：<FONT face＝“楷体-gb2312,黑体，宋体”>示例文字字体</FONT> (默认：中：宋体；英文：Times New Roman) 常用中英文字体列表：

10 常用的中英文字体 中文字体： 宋体 楷体 黑体 隶书 幼圆 常用的英文字体 Times new roman Arial
Arial black Courtier new Comic sans ms evrdana 如若要求特殊字体，可以使用相关软件，处理成图片格式

11 2.2 控制文本的显示效果 二.物理字符格式 是指标记符本身就说明了所修饰文字的效果的标记符 常用的物理字符样式 标记符 功能
<B></B> 粗体 <STRIKE></STRIKE> 删除线 <BIG></BIG> 大字体 <SUB></SUB> 下标 <I></I> 斜体 <SUP></SUP> 上标 <S></S> <TT><TT> 固定宽度字体 <SMALL></SMALL> 小字体 <U></U> 下划线 示例

12 2.2 控制文本的显示效果 三.逻辑字符格式 是指标记符本身表示了所修饰效果的逻辑含义 常用的逻辑字符样式

13 注：通常与CSS样式表共同使用。 标记 功能 <ADDRESS></ADDRESS>
用于指定网页创建者和维护者的信息，通常显示为斜体 <CITE></CITE> 用于表示文本属于引用，通常显示为斜体 <CODE></CODE> 用于表示程序代码，通常显示为固定宽度字体 <DFN></DFN> 用于表示定义了的术语，通常显示为黑体或斜体 <EM></EM> 用于强调某些字词，通常显示为斜体 <KBD></KBD> 用于表示用户的键盘输入，通常显示为固定宽度字体 <SAMP></SAMP> 用于表示文本样式，通常显示为固定宽度字体 <STRONG></STRONG> 用于特别强调某些字体，通常显示为粗体 <VAR></VAR> 用于表示变量，通常显示为斜体 注：通常与CSS样式表共同使用。

14 2.2 控制文本的显示效果 四.滚动字幕效果 一种常用的网页效果，通过<MARQUEE></MARQUEE>标记符控制滚动的方式。 MARQUEE标记符的属性如下： 1.width和height 定义了滚动字幕滚动区域的宽度和高度。默认100％宽，高当前所用字体 2.align 指定了滚动字幕如何与周围对象对齐。合法值为left，right，center（在页面中的对齐方式）；top，bottom和middle（与周围内容的垂直对齐方式）。

15 2.2 控制文本的显示效果 3.behavior：描述滚动字幕如何滚动 scroll默认值，表示文本从一个方向向前滚动直到屏幕外，然后重复
slide，表示文本滚动到另一侧后就停下来 alternate，表示文本在定义的区域内来回交替滚动 4.bgcolor：定义滚动字幕区域的背景色 5.direct：指定文本滚动的方向 left：从右向左（默认值） right：从左向右 behavior＝“alternate”情况下，第一次滚动的方向

16 2.2 控制文本的显示效果 示例 6.hspace和vspace，给出了滚动字幕四周水平和垂直方向上的间隙
7.loop：指定滚动重复的次数。－1和infinite表示无限重复（默认值） 8.scrollamount：指定了文本滚动间的步进象素间距。 9.scrolldelay：指定了两次文本重画之间的毫秒延时数。 示例

17 2.3 列表格式 示例 一、有序列表. 也称数字式列表，它是一种在各项内容前显示有数字或字母的缩排列表
2.3 列表格式 一、有序列表. 也称数字式列表，它是一种在各项内容前显示有数字或字母的缩排列表 1.创建有序列表：使用有序列表标记符OL和列表项标记符LI 基本语法：<OL> <LI>列表项1 <LI>列表项2 <LI>列表项3 </OL> 示例

18 2.3 列表格式 示例 OL标记符的属性：type（1- -（默认）；A- -;a－－； I－－；i－－）
2.3 列表格式 OL标记符的属性：type（1- -（默认）；A- -;a－－； I－－；i－－） LI标记符的属性：type：同上；value：指定一个新的数 字序列起始值，以获得非连续性的序列。 2.有序列表的嵌套 示例

19 2.3 列表格式 二、无序列表. 也称强调式列表，它是一种在各项内容前显示有特殊项目符号的缩排列表
2.3 列表格式 二、无序列表. 也称强调式列表，它是一种在各项内容前显示有特殊项目符号的缩排列表 1.创建无序列表：使用无序列表标记符UL和列表项标记符LI 基本语法：<UL> <LI>列表项1 <LI>列表项2 <LI>列表项3 </UL> 这里的UL和LI都只有一个属性：type，控制列表项前特殊符号的显示，属性的值有：disc：实心圆（默认值）；circle：空心圆；square：实心或空心的方块 注：属性的值区分大小写 2.混合嵌套列表

20 2.4 创建超链接 就是当鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据指示载入一个新的页面或调转到页面的其他位置。
2.4 创建超链接 一、超级链接定义： 就是当鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据指示载入一个新的页面或调转到页面的其他位置。

21 2.4 创建超链接 http://www.hao123.com/cartoon.htm 二、相对地址与绝对地址
2.4 创建超链接 二、相对地址与绝对地址 1.什么是URL，统一资源定位器，资源的地址 三部分组成：协议代码；装有所需文件的计算机地址；具体的文件地址和文件名 协议表明应使用何种方式获取所需信息常用的有：超文本传输协议；文件传输协议；电子邮件协议；远程登陆协议等

22 2.4 创建超链接 2.绝对URL和相对URL 绝对URL(完整地址) 相对URL 基于根目录的路径
2.4 创建超链接 2.绝对URL和相对URL 绝对URL(完整地址) 例：http// 协议 计算机域名 包含路径的文件名 相对URL 相对于当前页面的地址，包含从当前页面指向目的页面位置的路径 基于根目录的路径

23 链接路径：1:绝对路径 2.4 创建超链接 2:相对路径 3:基于根目录的路径
2.4 创建超链接 链接路径：1:绝对路径 2:相对路径 3:基于根目录的路径 1: 3: /products/catalog.html

24 三、页面链接 是指指向其他网页的超链接 <A>和</A>标记符 注：目标文件格式：1.浏览器支持2.浏览器不支持
演示

25 四、锚点链接 锚点：在链接的过程中，除了可以对不同页面或文件链接外，用户也可以对同一页面的不同部分进行链接，在链接之前，首先应为页面中需要跳转到的位置命名。这样的位置被称为锚点。<A name=“top”>目录</A> 锚点链接：对同一页面的不同位置进行的链接。<A href=“#top”>返回目录</A> 锚点链接也可以指向其他页面的锚点 <A href=“maodian.htm#b”>指向另一个页面的“B”部分 演示

26 五、电子邮件链接 href的值指定为mailto：电子邮件地址，即可以实现 演示

27 2.5 网站实例

28 一、网站规划 确定站点目标 如何组织要展示的内容 站点的逻辑结构图 站点的文件夹设计 规划网站的导航系统（即超链接系统）

29 二、页面设计 首页 二级页面 三级页面

30 站点的逻辑图 首页 唐诗首页 李白页面 杜甫页面 宋词首页 辛弃疾页面 李清照页面

31 My-site(root folder) support Content.html Hours.html resources
一个目录 子级目录 不位于当前目录 support Content.html Hours.html resources Tips.html products Catalog.html Index.html(home page)

32 一个目录：hours.html或./hours.html 子级目录：support/hours.html 不在当前目录：“..” ../support/content.html ../../products/catalog.html