heml代码.ppt

1、DIV+CSS布局,信息工程系计算机应用教学部 孙桂萍 Email： 电话QQ：29334933,本次课题：(HTML),本次课题：(HTML),本次课题：(HTML),HTML 简介,HTML 是一种标记语言,使用HTML标记和元素可以：,控制页面和内容的外观 发布联机文档 使用 HTML 文档中插入的链接检索联机信息 创建联机表单，收集用户的信息、执行事务等等 插入动画 开发帮助文件,HTML 语法示例1：, 欢迎学习 HTML 我的第一个 HTML 文档 ,运行结果,Html参考,浏览器和编辑器,Netscape 的 Navigator Microsoft 的

2、Internet Explorer,浏览HTML文件的工具 编辑HTML文件的工具,Microsoft FrontPage Macromedia Dreamweaver 记事本 ,HTML 开发,HTML 标记用于标记 HTML 文档的开始和结束 HTML 标记的格式组成：, . . . ,元素 - 标识标记,属性 - 描述标记,值 - 分配给属性的内容, 欢迎进入 HTML 世界 这会是一种很有趣的体验 ,HTML 文档的结构,HTML 部分 文档头部分 正文部分,基本结构：,段落标记, 欢迎使用 HTML 这会是一种很有趣的体验 另一个段落元素 ,换行标记, 欢迎使用 HTML 这会是一种

3、很有趣的体验 另一个段落元素 ,3_2.html,使用对齐属性, 学习HTML 这会是一种很有趣的体验 ,右对齐,3_3.html,段落级标记： 标记, 学习HTML 汉普蒂邓普蒂坐在墙上 汉普蒂邓普蒂摔了一大跤 国王所有的马 和所有的人 也无法再把汉普蒂邓普蒂拼起来 ,如果希望文本以预定义的格式显示，可以使用PRE元素。此元素用于定义文本的 格式。文本在浏览器中显示时遵循在HTML源文档中定义的格式。,3_7.html,段落级标记： 标记, 学习HTML blockquote元素用于以文本块的形式设置内容格式。 汉普蒂邓普蒂坐在墙上 汉普蒂邓普蒂摔了一大跤 国王所有的马 和所有的人 也无法再

4、把汉普蒂邓普蒂拼起来 请注意，上述内容显示为一个文本块。 ,可以使用BLOCKQUOTE元素显示文档中的引用文本。BLOCKQUOTE用于较 长的引用且显示为缩进式段落。,3_9.html,水平标尺, 欢迎使用HTML 我的第一个HTML文档 这将会是一种很有趣的体验 ,水平标尺标记用于在页面上绘制一条水平线。可借助于下列属性控制水平线。 它只有开始标记，没有结束标记，且不包含任何内容。,3_11.html 3_12.html 3_13.html 3_14.html 3_15.html,块标记、,可以定义跨段落的内容块； 定义段落内的内容块, 学习HTML 第1部分 元素用于组织元素 DIV通

5、常用于块级元素 第2部分 这是第二部分 您觉得有意思吗？ 第二部分向右对齐。 公共格式应用于这一部分中的所有元素 ,二者区别：前者用于将文档分割为相关的部分，可以跨多个段落；后者用于字符跨度，一般用来跨越段落内的字符,3_19.html 设置块标记内的文字的对齐 3_20.html 3_21.html,段落设置综合实例,最初效果 步骤1：插入居中标记 步骤2：插入块标记（第6-9行以及最后一行 ）,步骤3：插入换行标记 在第6行插入开胃酒 图片与层之间的缝隙没有了，层转到下一行显示 步骤4：插入小区域的块标记 在第10行、第13行、第16行、第20行插入小区域的块标记代码： 甜酒 干性白酒 红

6、酒 香槟和汽酒,步骤5：插入段落标记 在第11行、14-15、17-19、21-22行插入 这类酒种类很多， 这种酒也可以作为上好， 每一种白酒， 那些清淡，,步骤6：插入空格符号 在每个段落之前插入 那些清淡， 步骤7：插入水平线标记 在第13行、第17行、第22行插入 ,META-网页信息标记,提供关于网页的信息，必须位于标记内,语法 meta charset=“编码代码” content=“属性取值” http-equiv=“httpd功能” name=“属性名称”url=“载入 网页的url”,2.语法说明,META-网页信息标记,Name属性设置,Name是描述网页的，对应Conte

7、nt（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。,实例,meta http-equiv=“属性值” content=“属性取值”设置网页浏览器和服务器之间的请求方式,语法说明,meta http-equiv=“content-type” content=“”;charset=“设置网页的编码,语法说明,设置自动刷新网页,语法说明,;,实例meta,设置自动跳转网页,语法说明,;,meta http-equiv=“expires” content=“” 设置网页的有效期限,语法说明,META http-equiv=“ ex

8、pires content=“Mon,16 Jan 2006 15:30:50 GMT;,设置网页的关键字,语法说明,;,创建超链接,用于作超链接的文本或图像等 ,设置超链接,语法 文字或图片 实例5_1.html,设置书签,语法 文字或图片 实例link.html,链接到同一文档内的特定部分,语法 文字或图片 实例5_2.html 实例5_3.html,设置被链接的网页打开时的目标,语法 文字或图片 实例link1.html,设置超链接的快捷键,语法 文字或图片 实例5_5.html,设置超链接的说明文字,语法 文字或图片 实例5_6.html,设置电子邮件,语法 文字或图片 实例Email

9、.html,下载文件,下载的文件必须上传到服务器上,如点击这里下载“网页技巧”文件包。,设置未访问的链接的文字颜色,颜色值 实例5_8.html,设置已访问的链接的文字颜色,鼠标点击超链接的文字颜色,超级链接综合案例,最初效果 步骤1：插入书签属性 第119-212行插入：公司简介 经营特色 对社会的承诺 步骤2：插入转到同一文档特定位置的链接的属性 在第86-89行、97-100行、第105行插入： 公司简介 公司简介 公司简介 步骤3：插入设置链接文字颜色的属性 ,步骤4：插入超链接标记 在第117行、134行、第202行、第223行插入： -top- 步骤5：插入设置链接目标窗口的属性 在第57