WEB前端技术第4讲 使用HTML设置网页文本和图像.pptVIP

2-1）项目列表ul 基本语法 ul li项目一/li li项目二/li …… /ul 常用属性 属 性 描 述 属性值 type 设置项目列表的前导符 disc 前导符为●（默认前导符） circle 前导符为○ square 前导符为■ * * 第4讲 使用HTML设置网页文本和图像 4.1 文字标记 4.2 段落标记 4.3 列表标记 4.4 图片标记 文字标记主要用于设置网页中的所有有关文字方面的内容，具体包括普通文字、特殊字符、标题字、字体、文字格式以及注释等方面的设置 4.1 文字标记 表4-1 常用文字标记 标 记 描 述 文字内容 包括普通文字、空格及特殊符号等 标题字标记 以某几种固定的字号显示文字，共分为六个级别（H1~H6），对应着六种字号 文字的修饰标记 通过这些修饰标记，可设定文字的不同格式，如粗体、斜体等 字体标记 设定文字的字体、字号及颜色等 1）文字内容的输入 网页中涉及到的文字主要包括：普通文字、空格、特殊符号以及页面的注释语句。 普通文字的输入: 直接在主体标记对之间的相应位置输入。 空格及特殊字符的输入: 在源代码中空格及特殊字符使用其对应的符号码(实体名称；)代替。 空格/特殊字符 符号码 空格 nbsp; “ quot; amp; lt; gt; ? middot; X times; § sect; ￠ cent; ￥ yen; ￡ pound; ? copy; ? reg; ? trade； 在HTML文件中，通过空格键输入的多个空格，运行时将只保留一个空格 注释语句 用于对代码进行说明，浏览器解析页面时会忽略注释，因而注释内容不会显示在浏览器中 注释语句基本语法 方式一： comment注释内容/comment 方式二： !--注释内容-- 文字内容综合示例 2）标题字标记 所谓标题字就是以某几种固定的字号去显示文字，一般用于强调段落要表现的内容或作为文章的标题 具有加粗显示并与下一行产生一空行的特性 根据字号的大小分为六级，分别用标记H1~H6表示，字号的大小随数字增大而递减 标 记 描 述 属 性 属性取值 h1……/h1 一级标题 align left（默认值） h2……/h2 二级标题 h3……/h3 三级标题 center h4……/h4 四级标题 h5……/h5 五级标题 right h6……/h6 六级标题 标题字标记综合示例 3）文字的修饰标记 用于对文字进行格式化 常用的修饰标记如下： 标 记 描 述 b…/b、strong…/strong 粗体 i…/i、cite…/cite、 em…/em 斜体 sup…/sup 上标 sub…/sub 下标 big…/big 大字号 small…/small 小字号 u…/u 下划线 s…/s、strike…/strike 删除线 address…address 地址，用于地址、Email 文字修饰标记综合示例 4）字体标记font 作用：设置文字的字体、字号及颜色 基本语法 font face=“font_name” size=“value” color=“color_value”…/font 表4-3 字体标记的属性 属 性 描 述 face 设置字体，可同时设置多个字体（字体族） size 字号，取值范围为从1到7，或者从+1到+7、从-1到-7（正负取值相对于页面默认字号3），超出取值范围的，与取值范围的最近的极值效果相同 color 文字颜色 face=“字体1，字体2” 字体标记综合示例 4.2 段落标记 1)段落标记p 所谓段落，指得是一段格式上统一的文本 基本语法 语法解释 从p开始处创建一个段落。使用双标记将使所包含的段落与上下文都有一空行的间隔；使用单标记将只使段落与上文有一空行的间隔 标 记 描 述 属 性 属性取值 p…/p 双标记 align left center p… 单标记 right 2)换行标记br 作用: 产生一个换行效果 基本语法 br / 连续两个br等效于一个p单标记 3）居中标记center 基本语法 center……/center 作用：使center/center标记对之间的文字在浏览器窗口中水平居中对齐 段落、换行及居中标记综合示例 4）预格式化标记pre 基本语法 pre……/pre 语法解释 预格式化，是指保留pre/pre之间的文字在源代码中的格式，使其在页面中显示的效果和源代码中的效果几乎完全一致 浏览器无法解析源代码中的换行符，对连续使用的空格键，浏览器也只能当作是一个半角空格 。 预格式化标记示例