2014年CHAP2 HTML.pptVIP

第二讲 HTML CHAP2,3 1、认识HTML HTML是程序设计语言么？ HTML: 这里有2朵黄色的花，背景是蓝色的。叶子是绿色的 程序: 从X1,Y1开始绘制点1，曲线，延续到(X2,Y2)曲线曲度为Q HTML(Hyper Text Markup Language，超文本标记语言) HTML不是一种程序设计语言，是一种排版语言 1、认识HTML HTML的发展历史 1991 1993 1995 1997 1999 2001 2003 2006 1、认识HTML 谁能读懂HTML语言？ 浏览器，各种各样的浏览器 所见即所得么？ 看到的是浏览器读懂HTML语言以后显示出来的成果。而不是HTML本身 HTML源码很单纯 html head title第一个主页/title /head body p大家好！/p /body /html 运行效果（点击） 1、认识HTML HTML文档包括文件头、表头和主体三部分。 html head meta http-equiv=Content-Type content=text/html;charset=gb2312 title这儿是标题部分/title /head body p这里是主体部分/p /body /html 运行效果 1、认识HTML HTML文件是由标记和文本组成 ，格式为： 标记受标记影响的文本 ／标记 标记的属性：标记需要通过属性制作各种效果。格式为： 标记 属性1＝属性值 属性2＝属性值…受影响的文本／标记 font size=4 color=red 属性示例 /font 注意： 使用时属性之间没有顺序。对同一段文本，可以用多个标记来共同作用，产生一定的效果。 HTML也有注释标记。“!--”和“-- ”之间的部分为注释内容,可以插入文本的任何地方。 标记和属性不区分大小写。 2、常用页面标记 基本标记 html和/html head和/head body和/body title和/title meta特殊信息标记 hn网页子标题标记（例2-2运行效果） p段落标记和br换行标记（例2-3运行效果） hr水平线标记（例2-4运行效果） pre原文显示标记（例2-5运行效果） 2.1 页面布局综合实例 下面将介绍设计一个基本页面布局的综合实例，在这个实例中综合运用了hr、hn、br、p、pre等标记。注意这个实例中各种标记的使用情况，并结合前面的介绍深入掌握它们的用法。 例2-6运行效果 2.2 HTML转义符 显示 说明 实体名称 H i 半方大的空白 ensp; 你 好 全方大的空白 emsp; 今 天 不断行的空白格 nbsp; 小于 lt; 大于 gt; 符号 amp; 双引号 quot; © 版权 copy; ® 已注册商标 reg; ™ 商标（美国） ™ × 乘号 times; ÷ 除号 divide; 3 文 本 修 饰 为了使网页内容更加丰富多彩，文本的修饰是一个重要的环节。通过文本修饰，可以突出文档中的重点内容，避免整个文档外观上的单一化，从而产生良好的视觉效果。 3.1 文本修饰的主要标记 最主要的几种标记包括font、b、i、u、align等标记 font基本字体标记（） font size=数字 face=字体名 color=颜色 被设置的文字 ／font size用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。 face用来设置字体。如黑体、宋体、楷体—GB2312、仿宋—GB2312、隶书、Times New Roman等。 color用来设置文字颜色 示例1——设置字体 示例2——例2-7运行效果 3.1 文本修饰的主要标记 字体效果b、i、u（例2-8运行效果） align对齐方式 左对齐： align=left 右对齐： align=right 居中对齐： align=center 3.1 文本修饰的主要标记 设置文字颜色 body标记中的text属性 利用body标记的text属性，可以设定整个网页文字的颜色。 格式：body text=颜色 受影响的文字 /body 颜色可以用相应英文单词或以“#”引导的一个十六进制代码表示“RRGGBB” 示例——设置字体颜色 font标记中的color属性 利用font标记中的color属性，可以设定段落、短语、词或字的颜色。 格式为:font color=颜色 受影响的文字 /font 颜色的取值与body标记的取值方法相同 示例——设置字体颜色2 既有body又有font，听谁的？——Font 3.2 文本修饰的其他标记 blockquote换行引用标记 code程序代码