第3章 文字与段落.ppt

第3章文字与段落 主要内容 文字格式化 段落格式化 3 1文字内容 网页基本文字标题文字添加空格特殊符号注释语句 3 1 1添加文字 网页文字的具体内容包括浏览器中要显示的文字 空格符 特殊符号以及注释语句 可以通过一些HTML标记实现对文字的格式化 需要输入文字添加在与标记之间 3 1 1添加文字 示例 在网页中添加文字这是一本介绍HTML CSS JAVASCRIPT的专业书籍 文字大小 默认为12磅 3 1 2标题字 在HTML中 定义了六级标题 从一级到六级 每级标题的字体大小依次递减 标题字 以几种固定的字号去显示文字 基本语法 标题文字内容语法说明 标题标记本身具有换行功能 字号取值范围 1 6 align标题字对齐方式属性 3 1 2标题字 示例 在网页中添加标题字一级标题二级标题三级标题四级标题五级标题六级标题 align属性 默认为左对齐 3 1 3添加空格 通常情况下 HTML会自动删除文字内容中的多余空格 文字中连续的多个空格 将被自动调整为一个空格 为了在网页中增加多个空格 可使用 3 1 3添加空格 示例 在网页中添加空格这是一本的专业书籍 3 1 4添加特殊符号 在HTML文件中 通过输入符号代码添加特殊符号 使用特殊符号可以将键盘上没有的字符输出 基本语法语法说明在需要特殊符号处 按照规定输入特殊符号代码 3 1 4添加特殊符号 3 1 4添加特殊符号 示例 在网页中添加特殊符号版权所有 3 1 5注释语句 在HTML文档中添加注释 可增加代码的可读性 便于以后维护和修改 在浏览器中是看不见注释内容 只有在打开文档源代码时才可见 基本语法 或语法说明标记注视内容 可单行使用也可书写在语句前后 注释语句不可嵌套 3 1 5注释语句 示例 在网页中添加添加注释body标记是主体内容我们永远的家 多媒体专业 3 2文字样式 在网页中添加文字后 可以设置其字体 字号 颜色等属性 利用标记或标记都可以实现 普通文字标记基底文字标记 3 2 1普通文字标记 普通文字标记 可以对网页文字的字体 字号 颜色进行定义 基本语法 语法说明1 face定义字体 可定义多个 取前者 均无 取默认 2 size定义字号 取值为1 7 1 7 3 color定义文字颜色 取值为英文单词或16进制值 3 2 1普通文字标记 示例 设置文字的字体 字号 颜色我们是一个团体 不会丢下谁 不会落下谁 共同奋进 3 2 2基底文字标记 在制作网页前 使用标记对整个网页文字进行一个基本的定义 主要包括字体 字号和颜色 当网页中没有另外定义文字样式时 就自动套用定义的样式 定义将影响整个HTML页面 未来可能不支持本标记 基本语法语法说明标记应用在 之间 属性含义与标记的属性含义一致 文件主体部分可以用标记重新定义文字属性 以标记中的 size 值为基数N 用标记重新定义的文字大小 n 相对增减 最终值为N n或N n 3 2 2基底文字标记 示例 整个网页文字的字体 字号和颜色基本定义学校将于近期举办校园卡拉OK大赛学校将于近期举办校园卡拉OK大赛学校将于近期举办校园卡拉OK大赛 3 3文字修饰 1 粗体 斜体 下划线2 删除线3 上标 下标4 文字标注5 地址文字6 等宽文字 3 3 1粗体 斜体 下划线 基本语法 文字加粗 斜体显示 添加下划线 3 3 1粗体 斜体 下划线 示例 文字的加粗 斜体和下划线这些文字是粗体的这些文字是斜体的这些文字带有下划线 3 3 2删除线3 3 3上标 下标 基本语法 删除线 上标 下标 3 3 2删除线3 3 3上标 下标 示例 给文字添加删除线给文字添加上 下标表达式由 X1 Y1 W20更改为 X1 Y1 W20 3 3 4设置文字标注 在HTML文件中 可以在文字上方添加说明 并以缩小的字号显示 基本语法 被说明文字文字的标注 3 3 4设置文字标注 示例 在文字上方标注说明第二十九届奥运会在北京举行2008 3 3 5设置地址文字 标记用来表示HTML文档的特定信息 如 E mail 地址 签名 作者 文档信息等 基本语法 语法说明 标记中的文字斜体显示 多数浏览器将对该标记文字单行显示 3 3 5设置地址文字 示例 设置地址文字给我们写信 wangtao 3 3 6设置等宽文字 为了使网页中的文字显示更加整齐 美观 可以使用以下标记进行设置 基本语法 打字机风格 等宽文字 英文 等宽文字 英文 键盘风格 3 3 6设置等宽文字 示例 设置等宽文字成功源于努力去克服困难Successgrowsoutofstrugglestoovercomedifficulties Successgrowsoutofstrugglestoovercomedifficulties Successgrowsoutofstrugglestoovercomedifficulties Successgrowsoutofstrugglestoovercomedifficulties 3 4段落 1 段落标记2 换行标记3 居中标记4 水平分隔线5 预格式化标记6 忽略html标记7 设置段落缩进 3 4 1段落标记 在网页中开始一个段落需要通过使用标记来实现 由标记所标识的文字 代表同一个段落的文字 基本语法 语法说明 标准用法是成对使用 可单独使用 下一个表示上一段落结束 同时是下一段落的开始 3 4 1段落标记 示例 段落五十个不同的分子 在不同状态下进入了同一容器 在这个容器里 我们碰撞着 摩擦着 产生了各色各样的灵感 活力与情绪 在不地碰撞和摩擦中 分子也不断地变化 成长着 最终可走出这个容器 勇敢地面对 挑战外面的世界 3 4 2换行标记 使用来控制段落中文字的换行显示 一般 浏览器会根据窗口的宽度自动将文本进行换行显示 若想强制浏览器不换行显示 可以使用标记 若希望在标记中的文字强制换行 则可以使用 基本语法 3 4 2换行标记 示例 换行在这个容器里 我们碰撞着 摩擦着 产生了各色各样的灵感 活力与情绪 在这个容器里 我们碰撞着 摩擦着 五十个不同的分子 在不同状态下进入了同一容器 在这个容器里 我们碰撞着 摩擦着 产生了各色各样的灵感 3 4 3居中标记 如果希望网页中的段落居中显示 可以采用标记 该标记也可以使图片等网页元素居中显示 基本语法 3 4 3居中标记 示例 居中对齐标记 关于我们 五十个不同的分子 在不同状态下进入了同一容器 这就组成了我们的家 多媒体专业 3 4 4水平分隔线 水平线可以作为段落与段落之间的分隔线 使得文档结构清晰 层次分明 基本语法 语法说明 width水平线长 宽 度 默认100 页面宽度 百分比或像素表示 size水平线高度 color水平线颜色 align水平线对齐方式 noshade水平线不出现阴影 3 4 4水平分隔线 示例 水平分隔线关于我们五十个人在不同状态下组成了我们的家产生了各色各样的灵感 活力与情绪 3 4 5预格式化标记 浏览器在显示HTML页面时候 通常会将页面中所有的额外空白和回车进行压缩 并根据窗口宽度自动换行 要想保留HTML源文件中文字原始排版的格式 可以通过标记来实现 基本语法 语法说明 标记内的空行 空格等不会被删除或压缩 原样输出 3 4 5预格式化标记 示例 原样显示文字标记请记住我们是一个团体 不会丢下谁 不会落下谁 共同奋进 3 4 6忽略html标记 在HTML文件中 利用标记 可以使得该标记对之中的HTML标记的作用被忽略 直接显示在页面中 基本语法 3 4 6忽略html标记 示例 忽略HTML标记h2标题字号显示这一句忽略h2标记这一句恢复h2标题字号显示 3 4 7设置段落缩进 利用段落的缩进 可以增加段落的层次效果 基本语法 语法说明 每对缩进5个字符 可多次使用 3 4 7设置段落缩进 示例 段落缩进关于我们五十个不同的分子 在不同状态下进入了同一容器 这就组成了我们的家 083007班 3 5实例 一个唐诗欣赏的页面 在这个实例中综合运用本章所介绍的标记对普通文字进行格式化 3 5实例 文字网页唐诗欣赏静夜思李白床前明月光 疑是地上霜 举头望明月 低头思故乡 简析 3 5实例 版权所有 违者必究E mail limingwei 小结 本章介绍了文字与段落的格式设置 主要内容包括文字内容标记