第3讲文字、段落、列表及图片标记讲义.ppt

第3讲 文字、段落、列表及图片标记 3.1 文字标记 3.2 段落标记 3.3 列表标记 3.4 图片标记 3.1 文字标记 文字标记主要用于设置网页中的所有有关文字方面的内容，具体包括普通文字、特殊字符、标题字、字体以及文字格式等方面的设置 表3-1 常用文字标记 1）文字内容 网页中涉及到的文字主要包括:普通文字、特殊符号以及页面的注释语句 普通文字的输入: 直接在body和/body标记之间输入 特殊字符的输入: 在源代码中特殊字符使用其对应的符号码代替. 注释语句 基本语法 comment……/comment !-- -- 语法解释 上述两种表示法皆可代表注释语句 ；注释 语句不会显示在浏览器中 文字内容综合示例 2）标题字标记 所谓标题字就是以某几种固定的字号去显示文字，一般用于强调段落要表现的内容或作为文章的标题 具有加粗显示并与下一行产生一空行的特性 根据字号的大小分为六级，分别用标记H1~H6表示，字号的大小随数字增大而递减 标题字标记综合示例 3）文字的修饰标记 用于对文字进行格式化 常用的修饰标记如下： 文字修饰标记综合示例 3-1）字体标记font 作用：设置文字的字体、字号及颜色 基本语法 font face=“font_name” size=“value” color=“color_value”…/font 表3-3 字体标记的属性 字体标记综合示例 3-2)基字体标记basefont 作用 用于设定文字的字体默认属性，出现在basefont标记之后的所有font标记的默认属性使用basefont标记中所设置的属性 基本语法 basefont face=“font_name” size=“value” color=“color_value” 基字体标记综合示例 3.2 段落标记 1)段落标记p 所谓段落，指得是一段格式上统一的文本 基本语法 语法解释 从p开始处创建一个段落。使用双标记将使所包含的段落与上下文都有一空行的间隔；使用单标记将只使段落与上文有一空行的间隔 2)换行标记br 作用: 产生一个换行效果 基本语法 br 3）居中标记center 基本语法 center……/center 作用：使center/center标记对之间的文字在浏览器窗口中居中对齐 段落、换行及居中标记综合示例 4）预格式化标记pre 基本语法 pre……/pre 语法解释 预格式化，是指保留pre/pre之间的文字在源代码中的格式，使其在页面中显示的效果和源代码中的效果几乎完全一致 预格式化标记示例 5） 水平线标记 hr 水平线用于段落与段落之间的分隔，使文档结构更加清晰，使文字的编排更加整齐 基本语法 hr 常用属性 水平线标记示例 3.3 列表标记 所谓列表，通俗的讲就是各列表项按一定的方式进行排列而成的一张表 按列表项排列方式的不同，可分成： 有序列表 无序列表 嵌套列表 有序列表 以数字或字母等表示顺序的符号为项目前导符来排列列表项目的列表。例如: 无序列表 以无顺序的符号（●、○、■等）为项目前导符来排列列表项目或没有任何符号作项目前导符的列表。 嵌套列表 指多于一级层次的列表，一级列表项下面可以存在二级项目、三级项目等 1）有序列表ol 基本语法 ol li项目一/li li项目二/li …… /ol 有序列表标记示例 常用属性 有序列表前导符和起始编号设置示例 2) 无序列表ul及dl 常用无序列表包含如下两种: 项目列表ul 前导符默认为实心圆点 定义列表dl 列表项前没有任何前导符 2-1）项目列表ul 基本语法 ul li项目一/li li项目二/li …… /ul 常用属性 项目列表标记示例 项目列表前导符设置示例 2-2)定义列表dl 基本语法 dl dt名词一/dt dd解释1/dd dd解释2/dd …… dt名词二 /dt dd解释1/dd …… …… /dl 语法解释 定义列表是一种具有两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次；使用dt定义需解释的名词，使用dd解释名词 定义列表标记示例 3） 嵌套列表 嵌套列表指的是多于一级层次的列表，一级列表项下面可以存在二级项目、三级项目等 嵌套列表类型： 定义列表的嵌套 无序列表和有序列表的嵌套 这种嵌套类型是最常见的，它主要是通过在