HTML第一课 李 伟 HTML开发语言基础
HTML 文档结构 <HTML> <HEAD> <TITLE>学习 HTML </TITLE> </HEAD> <BODY > </H1> 欢迎来到 HTML 世界</H1> </BODY> </HTML> 头部部分 HTML 网页 主体部分 向学员解释： 1)HTML网页的标签讲究配对，<HTML>开始，</HTML>结束 2）HTML网页和人一样，由头部<HEAD>和主体<BODY>两部分组成 <HTML>…</HTML>标签标记 HTML 文档的开始和结束 这部分包括标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内 这部分包含文本、图像和链接。它包括在 <BODY>…</BODY> 标签内
<BODY BGCOLOR = “green”> HTML 标签 2-2 <HTML> <HEAD> <TITLE>学习 HTML </TITLE> </HEAD> <BODY BGCOLOR = lavender> <H1>欢迎来到 HTML 世界</H1> </BODY> </HTML> 向学员解释： 标签一般由两部分组成：标签和属性， 例如： <BODY bgcolor=“green”> …. </BODY> BODY就是标签， bgcolor=“green”就是属性，属性可选，还可以多个。 <BODY BGCOLOR = “green”> 标签 属性 值 标识 BODY 元素 提供有关元素的附加信息 分配给属性的内容
<META name = “作者" content = "Graham Browne"> META 标签是一个特殊的 HTML 标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等 许多搜索引擎都使用 META 标签信息 例如，要将 Graham Browne 指定为作者，则使用以下 META 标签： <META name = “作者" content = "Graham Browne">
<META http-equiv = "expires" content = "Wed, 26 Feb 1997 GMT"> http-equiv 属性可用来代替 META 标签中的 name 属性 属性名称：网页过期 属性值：具体的过期时间 <META http-equiv = "expires" content = "Wed, 26 Feb 1997 GMT"> 表示有效期：格林尼治标准时间 2005 年 9 月 12 日，星期一 14:25:27 演示： 自动刷新的例子：网页代码详见TG4-Source文件夹中的用例。 向学员说明：网页中的其他代码是JavaScript，后续章节会讲解。 <META http-equiv="refresh" content=“2"> 表示每隔2秒，自动刷新网页 演示：自动刷新的例子
案例 我的第一个HTML页面 演示自动刷新的小案例 网页2秒后自动跳转到百度案例
HTML 基本元素 标题 段落 换行符 预先格式化 字符格式化 水平线 字体 图像 特殊字符 超级链接
标题 <HTML> <HEAD> <TITLE>动物世界</TITLE> </HEAD> <BODY> <H1>从大自然获得灵感</H1> <H2>从大自然获得灵感</H2> <H3>从大自然获得灵感</H3> <H4>从大自然获得灵感</H4> <H5>从大自然获得灵感</H5> <H6>从大自然获得灵感</H6> </BODY> </HTML> 演示：参见TG4-Source文件夹中“标题”用例 H1 到 H6 标签用于指定不同级别的标题
<P>…</P> 标签用于标记段落 段落标签 <HTML> <HEAD> <TITLE>诗词学习</TITLE> </HEAD> <BODY> <P>我是第一段</P> <P>我是第二段</P> <P align="left">左对齐显示<P> <P align="center">居中显示<P> <P align="right">右对齐显示<P> </BODY> </HTML> <P> </P> 演示：参见TG4-Source文件夹中“段落对齐”用例 解释： 1）align的三种对齐方式。 2）段落相当于我们文章的分段，段落间间隔较大（以便与后面的换行<BR>区别） <P>…</P> 标签用于标记段落
换行符 只要在文本中放入 <BR> 标签，就会强制换行 <BR> <HTML> <HEAD> <TITLE>诗词学习</TITLE> </HEAD> <BODY> <BR>我是第一行<BR>我是第二行 <P>我是第一段</P> <P>我是第二段</P> </BODY> </HTML> 演示：参见TG4-Source文件夹中“换行”用例 提问：上图的两行和两段发现有什么不同没有？ 引导并解释解释： 1）换行间距较小。 2）<BR>标签比较特殊，不需要配对，即不需要</BR> <BR>
<PRE> 标签用于显示具有预先定义格式的文本 <HTML> <HEAD> <TITLE>诗词学习</TITLE> </HEAD> <BODY> <H1>静夜思</H1> <PRE> 床前明月光 疑是地上霜 举头望明月 低头思故乡 </PRE> </BODY> <HTML 提问：打开TG4-Source文件夹中“预格式化前“用例（如下），提问学员，将显示什么效果？ 引导并预览显示，结果是一行连续显示，说明一个问题：HTML代码中IE浏览器不识别空格、换行鞥格式， 如果希望按HTML代码中的格式显示多方便啊，怎么办？现场加上<PRE>标签，再预览显示。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ <HTML> <HEAD> <TITLE>诗词学习</TITLE> </HEAD> <BODY> <H1>静夜思</H1> 床前明月光 疑是地上霜 举头望明月 低头思故乡 </BODY> </HTML> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ <PRE> 标签用于显示具有预先定义格式的文本 （如 HTML 文档中所示）
格式化文本 2-2 在网页中，段落用于组织内容，一个段落就是一个文本块。 Dreamweaver 提供了三种基本段落样式：段落、标题和预先格式化的。 使用属性检查器中的“格式”选项可应用这些样式 。 分别演示段落、标题、预先格式化这三种效果，请参见TG2-Source文件夹中的相关用例。 方法建议：如何讲解预先格式化的格式。 由于这种格式在手工写HTML代码时才会体现其作用，在DreamWeaver操作中不易体现。 现场演示：在设计视图中键入徐志摩的诗歌。 －－－－－－－－－－－－－－－－－－ 轻轻的我走了， 正如我轻轻的来； 我轻轻的招手， 作别西天的云彩。 因为DreamWeaver中键入空格不象Word，如何解决这种效果的文本格式呢？ 告诉学员：光标点击“轻轻的我走了“这行，在属性检查器中选择格式：预先格式化的，我们再敲入上述诗歌， 多个空格，换行等问题是不是就解决了。 预先格式化的这种格式的含义是：告诉浏览器，采用文本键入时预先保留的格式。 顺便告诉学员，它的HTML标签是<PRE>…</PRE>我们们后面还会讲到。
此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等 字符格式化标签 <HTML> <HEAD> <TITLE>学习 HTML</TITLE> </HEAD> <BODY> <P> <B>这很有趣</B> <BR> <I>足球是最令人喜爱的运动之一。</I> <U>信息技术是发展的关键。</U> 水的分子式是 H <SUB>2</SUB> O。 3 <SUP>2</SUP> 等于 9。 </P> </BODY> </HTML> 此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等 逐一讲解，告诉学员了解。
<HR> 标签用于在页面上绘制水平线 使用水平线 <HR> 标签用于在页面上绘制水平线 <HTML> <HEAD> <TITLE>动物世界</TITLE> </HEAD> <BODY> <H3>老虎的夜间视觉 </H3> <HR noshade size = 5 align = center width = 50%> <HR size = 15 align=left width = 80%> <HR> <P>老虎的夜视能力优于人类的夜视能力五倍以上 </BODY> </HTML> <HR> 标签属性 align Width Size Noshade
<FONT SIZE = 5 COLOR = BLUE FACE = Arial> 使用字体和属性 <HTML> <HEAD> <TITLE>动物世界</TITLE> </HEAD> <BODY> <H1>了解有关动物的更多信息</H1> <P><FONT SIZE = 5 COLOR = BLUE FACE = Arial>斑马的特性</FONT> <P>没有任何两匹斑马<FONT COLOR = RED SIZE = 3>的斑纹是完全一样的，</FONT>因此每匹斑马都是独一无二的 </BODY> </HTML> <FONT SIZE = 5 COLOR = BLUE FACE = Arial> 可以为字体指定的大小范围为从 1 到 7 可以按名称或十六进制值指定颜色 演示：字体Font的用法，参见TG4-Source文件夹中“字体“用例。强调三个属性： 1)Face字体 2）size 大小 3）color 颜色 可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本 <FONT> 元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示
总结： 了解WEB开发流程。 了解HTML编程语言背景。 掌握HMTL标签、属性、元素 掌握HTML基本结构 掌握HTML基本元素
作业： 综合案例展示：个人简介（网页版） 实现百度的首页效果