[互联网]PPT2-HTML深入基础.ppt

目标 描述 HTML 文档的结构 使用基本的 HTML 标签 在 HTML 文档中插入特殊字符 在 HTML 文档中创建超级链接 HTML 简介 HTML 文档示例 编辑器和浏览器 编辑器 2-2 HTML 文档结构 HTML 标签 2-2 META 标签 2-1 META 标签是一个特殊的 HTML 标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等 许多搜索引擎都使用 META 标签信息 例如，要将 Graham Browne 指定为作者，则使用以下 META 标签： META 标签 2-2 http-equiv 属性可用来代替 META 标签中的 name 属性 HTML 基本元素 标题 段落 换行符 预先格式化 字符格式化 列表 水平线 字体 图像 特殊字符 超级链接 标题 段落标签 换行符 只要在文本中放入 BR 标签，就会强制换行 Pre 标签 字符格式化标签 列表简介 列表用于按逻辑方式对数据分组 列表类型：无序列表 列表类型：有序列表 使用水平线 使用字体和属性 插入图像 2-1 插入图像 2-2 插入特殊字符 2-1 某些字符在 HTML 中具有特殊意义，如小于号 () 定义 HTML 标签的开始 字符实体用于在 HTML 文档中插入特殊字符，如版权号 ，注册商标等 插入特殊字符 2-2 创建超级链接 绝对和相对路径名 链接到同一文档的某个部分2-1 锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记  为达到这种跳转效果，请在 HREF 参数中使用该标记 链接到同一文档的各个部分2-2 链接到其他文档的特定位置 电子邮件链接 用户可从网页发送电子邮件 总结 2-1 HTML 标签一般配对使用，不区分大小写 标签都具有属性。属性提供关于网页上 HTML 元素的附加信息 META 标签放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签 标题级标签使用H1…H6 总结 2-2 段落标签使用P align＝“对齐方式”…/P 无序列表使用UL标签,有序列表使用OL标签 字体标签Font color=“颜色” size=“大小” face＝“字体” 超链接标签A href=“链接地址”超链接文本/A HTML HEAD TITLE海豚/TITLE /HEAD BODY H3充分交流，密切配合/H3 BR P据说，海豚的交流模式几乎与人类的一样复杂！ BR BR A HREF=mailto:thisperson@请将您的疑问发送至 David Fernandez/A /BODY /HTML 1.提问：HTML语言是用来做什么？ 引导：做网页。 顺便告诉学员，DreamWeaver能自动生成HTML代码，但是有时我们还是需要人工修改HTML代码。我们在实现动态网页时，更需要理解、阅读HTML代码，因此非常重要。 2.强调HTML的功能： 规定网页内容的显示格式。 演示：切换到DreamWeaver的代码视图。清空代码开始编写，并浏览显示。 向学员说明，由于不同的HTML标签DreamWeaver采用不同的颜色显示，方便编写，因此推荐采用DreamWeaver编写工具。 向学员解释： 1)HTML网页的标签讲究配对，HTML开始，/HTML结束 2）HTML网页和人一样，由头部HEAD和主体BODY两部分组成 向学员解释： 标签一般由两部分组成：标签和属性， 例如： BODY bgcolor=“green” …. /BODY BODY就是标签， bgcolor=“green”就是属性，属性可选，还可以多个。 演示： 自动刷新的例子：网页代码详见TG4-Source文件夹中的用例。 向学员说明：网页中的其他代码是JavaScript，后续章节会讲解。 演示：参见TG4-Source文件夹中“标题”用例 演示：参见TG4-Source文件夹中“段落对齐”用例 解释： 1）align的三种对齐方式。 2）段落相当于我们文章的分段，段落间间隔较大（以便与后面的换行BR区别） 演示：参见TG4-Source文件夹中“换行”用例 提问：上图的两行和两段发现有什么不同没有？ 引导并解释解释： 1）换行间距较小。 2）BR标签比较特殊，不需要配对，即不需要/BR 提问：打开TG4-Source文件夹中“预格式化前“用例（如下），提问学员，将显示什么效果？ 引导并预览显示，结果是一行连续显示，说明一个问题：HTML代码中IE浏览器不识别空格、换行鞥格式， 如果希望按HTML代码中的格式显示多方便啊，怎么办？现场加上PRE标签，再预览显示。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ HTML