1、学习目标,了解HTML概念、主要版本、发展趋势及学习HTML的必要性；掌握HTML标签、HTML元素及HTML属性的概念、特点及三者的关系、HTML页面的基本结构和常用的HTML标签（包括：标题、段落、水平线、换行、空格、注释、文本格式化标签、链接、列表、图像、多媒体、表格、表单等）；会用常用的HTML标签在文本编辑器中制作网页。,HTML基础,本节重点,HTML概念、主要版本及发展趋势学习HTML的必要性HTML标签、HTML元素和HTML属性HTML页面的基本结构常用的HTML标签（标题、段落、水平线、换行、空格、注释、文本格式化标签、链接、列表、图像、多媒体、表格、表单）（难点）,HTM
2、L基础,1.1 什么是HTML？,HTML（HyperText Mark-up Language）即超文本标记语言，是构成网页文档的主要语言。HTML文本是由HTML标签组成的描述性文本，HTML标签可以描述文字、图像、动画、声音、表格、链接等。目前比较常用的HTML版本是4.01。随着Web技术的标准化，XHTML（可扩展的超文本标记语言）诞生了，它比HTML有更严格的要求。如果说HTML是汉语，那么XHTML就是标准普通话。目前最常用的XHTML版本是1.1 。因此，制作网页时主要使用HTML4.01和XHTML1.1两个版本。,1 HTML概述,提示：HTML 文档 = 网页：浏览器读取
3、 HTML 文档时，不会显示 HTML 标签，而是使用标签来解释页面的内容，并以网页的形式显示出它们。,1.2 为什么有Dreamweaver还要学习HTML,受到图形编辑工具自身的约束，将产生大量的垃圾代码。一个明智的网页编写者应该在掌握图形编辑工具的基础上进一步学会HTML语言，从而知道那些是垃圾代码，这样，我们就可以利用图形化HTML开发工具快速成地做出网页，又会消除无用的代码，从而达到快速制作高质量网页的目的。,1 HTML概述,1.3 HTML标签,（1）HTML 不是一种编程语言，而是一种标记语言 (markup language) ，由一套标签 (tag) 构成，使用标签来描述网
4、页 ，这些标签也称作HTML标签 （2）HTML 标签由尖括号包围的关键词构成，比如 （3）HTML 标签通常是成对出现的，比如 和 ，但某些 HTML 标签不是成对出现，比如 （4） HTML标签对中的第一个标签是开始标签，第二个标签是结束标签（5）使用小写标签 ：因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在 (X)HTML 版本中强制使用小写（6）不要忘记结束标签 ：因为未来的 HTML 版本不允许省略结束标签,1 HTML概述,1.4 HTML元素,HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。（1）HTML 元素以开始标签
5、起始，以结束标签终止 （2）元素内容是开始标签与结束标签之间的内容 （3） 某些 HTML 元素具有没有内容，如,1 HTML概述,HTML元素与HTML标签的关系：HTML元素HTML标签+元素内容,1.5 HTML属性,属性为 HTML 元素提供附加信息。（1）HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息；（2）属性总是以名称/值对的形式出现，比如：name=“value”；（3）属性总是在 HTML 元素的开始标签中规定（4）始终为属性值加引号：双引号是最常用的，不过使用单引号也没有问题。属性实例： HTML 链接由 标签定义。链接的地址在 href 属性中指定
6、： 中原工学院信息商务学院,1 HTML概述,1.6 HTML页面结构,HTML的结构包括头部（Head）、主体（Body）两大部分：头部描述浏览器所需的信息；主体包含所要说明的具体内容。 一个HTML页面的基本结构如下：,1 HTML概述, 头部信息在这里设置HTML 文件的正文写在这里. .,1.7 第一个HTML页面,1 HTML概述, 中原工学院信息商务学院欢迎 学院简介中原工学院信息商务学院成立于2003年4月，是首批经国家教育部批准的具有全日制普通本科学历教育办学资格的独立学院。 ,浏览器执行后的效果图：, 与 之间的文本描述网页 与 之间的文本是可见的页面内容 与之间的文本描述网
7、页头信息 之间的文本被显示为网页的标题与 之间的文本被显示为正文一级标题 与 之间的文本被显示为段落,HTML文档的后缀为.htm或.html,2.1 标题,2 HTML常用标签介绍,标题是通过 - 等标签进行定义的： 定义最大的标题， 定义最小的标题。常用属性如下：align：标题的对齐方式，有left、right、center三种请确保将标题标签只用于标题，不要为了产生粗体或大号的文本而使用标题，因为搜索引擎使用标题为您的网页结构和内容编制索引。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。,一级标题 二级标题 三级标题 四级标题 五级标题 六级
8、标题,效果,2.2 段落和水平线,2 HTML常用标签介绍,标签在HTML页面中创建段落，常用属性如下：align 段落的对齐方式，有left、right、center三种,第一段内容 第二段内容 第三段内容,效果, 标签在 HTML 页面中创建水平线，使用水平线 ( 标签) 来分隔文章中的小节是一个办法，常用属性如下：size 水平线的宽度 width 水平线的长，用百分比或像素值来表示 align 水平线的对齐方式，有left、right、center三种 noshade 线段无阴影属性，为实心线段,2.3 换行、空格和注释,2 HTML常用标签介绍,：在HTML页面显示为换行：在HTML
9、页面显示为空格: 其间的内容为注释，可以提高HTML页面的可读性，使代码更易被人理解。,中原工学院信息商务学院 中原工学院信息商务学院成立于2003年4月 ,浏览器会忽略注释，也不显示它们,效果,2 HTML常用标签介绍,2.4 文本格式化标签,粗体 大号 着重 斜体 小字 加重语气 上标 下标 插入字 删除字,效果,2.5 不推荐使用的标签和属性,2 HTML常用标签介绍,在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。,对于这些标签和属性，请使用CSS样式代替！,2.6 链接,2 HTML常用标签介绍,HT
10、ML 使用链接与网络上的另一个文档相连，标签用于在HTML页面中创建链接，开始标签和结束标签之间的文字被作为链接来显示。 标签的常用属性如下：href: 用于定位需要链接的文档 ；target:定义被链接的文档在何处显示（以后再细讲 ）；title: 定义鼠标停留在链接上提示信息；name:用于创建命名链接（named anchors）用于页面内部各部分之间的快速导航（以后再细讲）。,中原工学院信息商务学院,2.7 列表,2 HTML常用标签介绍,（1）无序列表：无序列表使用 标签，里面的每个列表项使用 ；（2）有序列表：有序列表使用 标签，里面的每个列表项使用 ；,计算机科学经济管理系艺术设
11、计系计算机科学经济管理系艺术设计系 ,效果,2.8 图像,2 HTML常用标签介绍,标签用于在HTML页面中创建图像。标签的常用属性如下：src: 设定图像的存储位置；alt: 为图像定义一串预备的可替换文本，在浏览器无法载入图像时，浏览器将显示这个替代性的文本；width: 设定图像宽带 height:设定图像高度,正常效果,找不到图片时,2.9 多媒体（动画、音频和视频）,2 HTML常用标签介绍,使用标签可以在网页中嵌入Flash、声音和视频等嵌入式内容 。 常用属性如下：src: 多媒体文件的存储位置type: 使用什么播放器播放文件，想使用Windows media player就写
12、type=“application/x-mplayer2“,使用Realplayer播放就写type=“audio/x-pn-realaudio-plugin“，播放Flash就写type=“application/x-shockwave-flash“ autostart: 是否自动播放多媒体，默认值是falseloop：是否要自动重复播放，loop= “ 2 “ 表示重复两次，无限次重复可用loop=“true“,2.9 多媒体（动画、音频和视频）,2 HTML常用标签介绍,动画,音频,视频,2.10 表格,2 HTML常用标签介绍,表格由 标签来定义，每个表格均有若干行（由 标签定义），每
13、行被分割为若干单元格（由 标签定义，表头使用 标签进行定义）。元素中的内容为表格数据，可以包含文本、图片、列表、段落、水平线、表格等等。的border属性用来定义表格的边框粗细。, 班级学生人自动化100艺术90,效果,2.10 表单,2 HTML常用标签介绍,表单用于搜集不同类型的用户输入，使用标签定义。表单元素是允许用户在表单中输入信息的元素，比如：文本域、下拉列表、单选框、复选框等等。常用表单元素如下： （1）文本框： （2）按钮： （3）复选框： （4）单选框： （5）文件上传框： （6）密码输入框： ,2.10 表单,2 HTML常用标签介绍,（7）多行文本输入框： （8）下拉列表框： 计算机系艺术系（9）多选列表框： 计算机系艺术系 ,谢谢！,E-mail:,技术博客：http:/
