HTML入门.ppt

1、HTML入门,徐典阳制作 2009年10月17日,HTML第一讲,初识HTML,HMTL英文名称Hyper Text Markup Language,即超文本标记语言。 HTML起源于SGML(Standard Generalized Markup Language,标准通用标记语言)是为了在各种网络环境之间，不同格式之间的进行交流的一种语言格式。 编写网页文件的基本语言，用于构建网页骨架，告诉浏览器如何显示网页内容（如文本、图片、音频、视频、表单等），HTML文件的扩展名为.html或者.htm。,什么是HTML标签？,对于浏览器来说具有特殊意义的字符串序列，例如标签对，就是告诉浏览器这是一

2、个网页文件。 标记大小写不敏感。,HTML的基本结构,html文件开始标记 文件头开始标记 文件头的内容 文件头结束标记 文件主体开始标记 文件主体的内容 文件主体结标记 html文件结束标记,下面我来写一个最简单的HMTL文件，实现的功能是将网页的背景设置为红色，网页中的文字颜色为蓝色,编写HMTL的注意事项,1、“”是任何标记的开始和结束，也就是说HTML标记必须要用尖括号括起来，并且在结束标记的前面加一个“/”斜杠，如 2、最好代码中的标签采用小写 3、任何回车与换行在源代码中不起作用 4、HTML标记中可以有各种属性,下面我们来看看HTML文件基本标记,1、 用来显示HTML文档的标题

3、 元信息标签（如设置网页编码） 在HTML语言中的头部元素中，一般需要包括标题、基础信息和元信息等。HTML的头部元素是以为开始标记，以为结束标记,2、元信息标记 标记的主要功能是定义页面中的信息，这些信息不会显示在浏览器中，而只是在源代码中显示。 它主要有两个属性一个name属性一个是http-equiv属性 如这样的例子 ,3、标签对（*）,下面来看看HTML中的注释与特殊字符,下面来看看一些格式标签,文件标签：控制文本的显示效果,超链接标签,1、认识超链接 超链接顾名思义就是将不同的文件关联起来，从一个位置到另一个位置的链接。 2、用法： 要添加链接的文本或者图片 3、实例,使用超链接须

4、知,1、href属性：用于设置链接的地址,这个地址可以是相对地址也可以是绝对地址。 2、target属性：用于设置超链接打开的目标窗口，可以为“_blank”、“_self”、“_top”、“_parent”。 3、相对地址：是指相对于当前文档的简化路径。 4、绝对地址：是一个文件的本机上或INTERNET上的绝对的路径。,图像和多媒体标签,1、图像标签： 2、多媒体标签： （1）添加背景音乐标签：,图像与多媒体,（2）添加多媒体文件：,HTML第二讲,一、,1、表格是网页中排列数据与图像的工具，一个表格由表格标题()，表头()，行()，单元格(/td)组成。 2、表格有比较多的属性如bord

5、er,width,height,cellspacing,cellpadding。 下面进行详细讲解表格。,3、从整体上把握, 餐厅信息 餐饮类型 主要类型 中餐厅 生猛海鲜、特色海南菜肴 , 西餐厅 自助餐 大堂 咖啡、甜点、鸡尾酒 ,4、表格中的细节和相关属性,5、使用表格的注意部分,表格中一行只能设置一个高度，一列只能设置一个宽度。，不然会出现莫名其妙的错误。,二、使用表单创建交互式网页,1、表单的作用：收集用户的信息，将其提交到服务器，从而实现与使用者的交互。 2、表单是标记定义的，其他的表单元素需要在它的包围中才有效。,3、 ,用法：各个表单元素 注意：enctype属性用于设置表单信

6、息提交的编码方式，属性值可以为Text/plain(表示以纯文本的形式传递信息)，application/x-www-form-urlencoded()默认的编码形式，multipart/form-data(mime编码，上传文件时必须选择该项),a、通过标记添加表单对象,用法： 注意：type属性值可以为text（文本字段）,password（密码域）,radio（单选按钮）,checkbox（复选框）,button（普通按钮）,submit（提交按钮）,reset（重置按钮）,image（图像域）,hidden（隐藏域）,file（文件域）。,b、 列表/菜单,说明：表单中有两种类型的菜单

7、，一种菜单 是单击时出现下拉菜单，称为下拉菜单 ，一种菜单则是显示为一个列有项目的可滚动列表。 例子：下拉菜单select1.html， 列表select2.html,下面具体讲解列表/菜单, 网页中显示的项目（不会被传递到服务器） ,c、文本域标记,说明：当需要让浏览者输入多行文本时候就应该使用文本域而不是文本字段了。 语法：文本内容 例子：textarea.html,三、创建框架结构网页,说明：使用框架将浏览器窗口分割成几个子窗口（我们称之为框架或者帧），每一个框架或者帧（这里是指一个子窗口）能够独立的显示一个网页文档。 初识框架结构：kuangjia.html,1、详细讲解如何设置框架集

8、,(1)、框架页面的结构是在框架集中设置的，可以分为水平分割窗口，垂直分割窗口和嵌套分割窗口。 (2)水平分割窗口： 语法： 例子：level.html,(3)、垂直分割窗口： 语法： 例子：vertical.html,（4）、嵌套分割窗口 说明：嵌套分割窗口是指在一个网页中既有水平分割窗口又垂直分割窗口的框架。 语法： . ,例子：kuangjia.html (5)、框架集的属性设置 (6)、框架（帧）的属性设置 ,2、设置浮动框架,说明：浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不是一个框架页面，但包含一个框架窗口。 语法： 例子：iframe.html,3、

9、设置框架结构中的链接,说明：有了框架结构，怎样发挥它的作用呢?这就是框架结构的好处所在，前面说过一个框架或者帧可以独立的显示一个网页文件，那么我们如何将链接中文件显示在指定的的帧呢？下面就来看看这个问题 例子：kuangjia2.html,第三讲,1、滚动字幕标签,说明：网页中滚动的字幕会使网页显得有活力，不致于显得单调。 基本语法 . 我会移动耶！ 例子：marquee01.html,文字移动属性的设置,文字移动属性的设置 1.方向 direction属性：left,right,up,down 我从右向左移！ 我从左向右移！ 2.方式 behavior属性：scroll, slide, al

10、ternate 我一圈一圈绕着走！ 我只走一次就歇了！ 我来回走耶！,文字移动属性的设置,文字移动属性的设置 3.循环 loop属性:若未指定则循环不止(infinite) 我只走 3 趟哟！ 我只走 3 趟哟！ 我只走 3 趟哟！ 4.速度 我走得好快哟！,外观(Layout)设置,1.底色 bgcolor属性：#rrggbb 16 进制数码，或者是下列预定义色彩： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 我会移动耶！注意背景颜色哦！,2.面积 height属性： width属性： 我会移动耶！ 3. hspace属性： vspace属性： Hspace “水平间距” vspace “垂直间距” 我会移动耶,2、tab