HTML教案.ppt

1、HTML教案 简介: HTML语言（Hypertext Markup language,中文通常称为超文本置标语言，或超文本标记语言）是一种文本类，解释执行的标记语言，它是Internet上用于编写网页的主要语言。 我们浏览网站的时候，看到的是丰富影像、文字、图片，这些内容都是通过HTML语言来表现出不的。 HTML文件的基本结构 HTML文件开始 HTML文件的头部开始 中国太极网欢迎您！(标题标记） 文件头部结束 文件的主体开始 文件的主体内容 文件的主体结束 文件结束 其中“”是任何标记的开始和结束.元素的标记要用这对尖括号括起来，并且结束的标记是在开始的标记前加一个斜杠。另外在源代码中

2、 不区分大小写。,HTML教案 二：文字与段落 文字是网页设计最基础的部分，一个标准的文字页面可以起到传达信息的作用 对文字的格式化，除了应用HTML标记外，另一种方式就是CSS样式。 1、标题字标记 标题字标记共有6种，在HTML中，定义了六级标题，从一到六级，每级标题的 字体大小依次递减。 基本语法： 示范： 这是一本专业详尽的HTML书籍 2、标题字的对齐属性: 基本语法： 标题左对齐 标题居中对齐 标题右对齐 其中Hn中的n代表从1-6 示范： 这是一本专业详尽的HTML书籍,HTML教案 三、文字的修饰标记 粗体 粗体 斜体 斜体 斜体 上标 下标 大字号 小字号 下划线 删除线 删

3、除线 地址 打字机文字 等宽 等宽 其中地址标记用于显示E-mail、地址等文字内容，主要用于英文字体的显示中。打字机标 记可以创建打字机风格的字体。等宽标记可以使用等宽的字体来显示文字内容,多用于英文,HTML教案 四、字体标记： 如果希望更改页面中的字体，字号和颜色，最佳的标记是标记 标记的属性 FACE字体 SIZE字号 COLOR颜色 1、字体属性FACE 基本语法: 示范: 相信明天更美好 2、字号属性SIZE 基体语法: 语法解释:标记中的SIZE字义了字号,VALUE取值范围从17或者从-1-7 示范: 海内存知己,天涯若比邻. 海内存知己,天涯若比邻. 3、颜色属性COLOR

4、基本语法: 示范:千里之行始于足下,HTML教案 五、段落标记 基本语法: 语法解释:可以使用成对的标记来包含段落,也可以使用单独的标记来划分段落. 1、段落标记的对齐属性ALIGN 基本语法： 示范: 这是一本专业详尽的HTML书 2、换行标记: 段落与段落之间是隔行换行的,文字的行间距过大,这时可以使用换行标记来完成文字的紧凑 换行显示 基本语法: 语法解释: 一个换行使用一个,多个换行可以连续使用多个标记,HTML教案 3、不换行标记 如果浏览器中单行文字的宽度过长,浏览器会自动将文字换行显示,如果希望强制浏览器不换 行显示,可以使用这个标记 基本语法: 示范: 这是一本专业详尽的HTM

5、L书籍,如有技术问题,请联系 这是一本专业详尽的HTML书籍,如有技术问题,请联系 4、在标记中强制换行标记 基本语法: 5、预格式化标记 所谓预格式化,就是保留文字在源代码中的格式,页面中显示的和源代码中的效果完全一致. 浏览器在显示其中的内容时,会完全按照其真正的文本格式来显示,如原封不对地保留文档 中的空白,如空格,制表符等. 基本语法: 6、居中标记 如果希望段落或文字居中,可以使用专门的居中标记.,HTML教案 基本语法: 示范:这是一本专业详尽的HTML书籍,如有技术问题,请联系 这是一本专业详尽的 HTML书籍,如有技术问题,请联系 这是一本专业详尽的HTML书籍,如有技术问题,

6、请联系 这是一本专业详尽的术问题,请联系 7、缩排标记： 基本语法: 六、水平线标记 标记代表水平分割模式，并会在浏览器中显示一条线。 语法： 1、水平线宽度width 语法： 2、水平线高度size 语法： 3、水平线去阴影noshade 4、水平线颜色color,HTML教案 5、水平线排列align 三种对齐方式（center left right) 七、其他标记 插入空格 八、网页的主体标记body 1、网页背景色bgcolor 语法： 2、网页背景图片background 语法： 3、文字颜色text 语法： 4、边距margin 语法：,HTML教案 第三章：使用图像 一、图像的格

7、式 网页中图像的格式通常有3种，GIF、JPEG和PNG（是一种非破坏性的网页图像文件格式 它提供了图像文件以最小方式压缩又不造成图像失真的技术。） 二、插入图像标记IMG IMG元素的属性 Src 图像的源文件 Alt 提示文字 Width,height 宽度和高度 Border 边框 Vspace 垂直间距 Hapace 水平间距 Align 排列 1、图像的源文件src 语法： 2、图像的提示文字alt 语法： 3、图像的宽度和高度Width,height 语法： ,HTML教案 4、图像的边框border 语法： 示范： 在语法中,border的单位是像素，值越大边框越宽 5、图像的垂

8、直边距vspace（图像与文字之间） 语法： 在语法中，vspace属性的的单位是像素 6、图像的水平间距hspace（图像与文字之间） 7、图像的排列align 对齐属性： Bottom 图片的底部和当前行的文字底部对齐、 Top 图片的顶端和当前行的文字顶端对齐 Middle 图片的水平中线和当前行的文字中线对齐 Left 图片左对齐 Center 图片水平中线和当前行的文字中线对齐 Right 图片右对齐 三、图像的超链接 图像的链接和文字链接是一样的，都是用标签来完成的，只要将标签放在 之间就可以了,HTML教案 语法： 第四章：使用列表 列表是一种非常有用的数据排列方式，它以列表的形

9、式来显示数据。HTML中共有3种列表 分别是无序列表、有序列表和定义列表。 一、1、有序列表ol 语法： 有序列表项 有序列表项 有序列表项 有序列表项 在语法中，标记标志着有序列表的开始和结束，而标记表示这是一个列表 项。 示范： 星期一 星期二 星期三 星期四 星期五 星期六 星期日 ,HTML教案 2、有序列表的序号类型type 语法： 有序列表项 有序列表项 有序列表项 有序列表项 有序列表的常见5种类型 1、a、A、i、I 3、有序列表的起始数值start 二、无序列表 语法： 星期一 星期二 星期三 星期四 星期五 星期六 星期日 1、无序列表的类型type,HTML教案 Disc

10、 黑色实心圆点 Circle 空心圆环 Square 正方形 2、定义列表标记 语法： 定义条件 定义描述 定义列表由两部分组成；定义条件和定义描述。用来指定需要解释的名词，是具 解释 3、菜单列表标记 菜单列表主要用于设计单列的菜单列表，它在浏览器中的显示效果和无序列表是相同的 语法： 列表项 ,HTML教案 第五章 使用表格 一、创建表格 1、表格的的基本构成table、tr、td Table是表格标记tr是行标记td单元格标记 二、表格的基本属性 1、表格的宽度width 2、表格的高度height 3、表格的对齐方式align 属性值：left、center、right 三、表格的边框

11、 1、表格的边框宽度border 2、表格的边框颜色bordercolor 3、内框宽度cellspacing 表格的内框宽度用于设置表格内部每个单元格之间的间距（值为0时边框为实线） 4、表格内文字与边框间距cellpadding 四、表格背景 1、表格背景颜色bgcolor 2、表格背景图像background,HTML教案 五、表格的行属性 1、高度控制height 语法： 2、边框色bordercolor 语法： 3、行背景bgcolor、background 4、行文字的水平对齐方式align 属性：left、center、right 5、行文字的垂直对齐方式valign 属性：to

12、p、middle、bottom 六、单元格属性 1、单元格大小width、height 语法: 说明：单元格的宽和高单位都是像素 2、水平跨度colspan 在设计表格时，有时需要两个或更多的相邻单元格组合成一个单元格 语法： 、垂直跨度rowspan 语法：,HTML教案 4、对齐方式 align、valign 单元格的对齐方式设置与行的对齐方式设置方法相拟 水平对齐方式：left、center、right 垂直对齐方式：top、middle、bottom 5、单元格的背景色bgcolor 6、单元格的边框色bordercolor 7、单元格的亮边框bordercolorlight 单元格的

13、亮边框就是单元格边框向光的部分 8、单元格的暗边框bordercolordark 9、单元格的背景图像background 七、设置表格的标题caption 语法:表格的标题 1、表头th 表格的表头是单元格的一种变体，实质上仍是一种单元格。 示范： 物理 物理 物理 ,HTML教案 八、表格的结构 1、表格的表首标记 用于定义表格最上端表首的样式，可以设置背景色、文字对齐方式、文字垂直对齐方式等 语法： 、表格的表主体标记 用于统一表主体的部分样式 语法： 3、表格的表尾标记 第六章：建立链接 一、超级链接的基本知识 要正确的创建链接，就必须了解链接与被链接文档之间的路径。每个网页都有一个惟

14、一的 地址，称为统一资源定位符（URL）。然而，在我们网页中创建内部链接时，一般不会指 定链接文档的完整URL，而是指定一个相对前文档或站点文件夹的相对路径 1、绝对路径： 绝对路径是包括服务器规范在内的完全路径。绝对路径不管源文件在什么位置都可以非常,HTML教案 精确地找到，除非是目标文档的位置发生变化，否则不会链接失败。彩用链接路径不利于 测试。不利于站点移值 2、相对路径 二、内部链接 1、认识内部链接 与自身网站页面有关的链接称为内部链接 语法： 2、链接的目标窗口 语法： 属性值： _self在当前页面中打开链接 _blank在一个全新的空白窗口中打开链接 _top在顶层框架中打开

15、链接，也是以理解为在根框架中打开链接 _parent在当前框架的上一层里打开链接,HTML教案 三、锚点链接 1、建立锚点 锚点就是指在给定名称的一个网页中的某一位置，在创建锚点链接前首先要建立锚点。 语法： 2、链接同一页面中的锚点 建立了锚点以后，就可以创建到锚点的链接。需要用#号以锚点的名称作为href属性值. 语法： 四、外部链接 1、链接到外部网站 语法： 2、链接到E-mail 语法： 3、下载文件 语法： 第七章：添加多媒体 一、设置滚动效果 1、滚动标记marquee 使用滚动标记不仅可以移动文字，并可以在标记之间设置文字或图像的属性 语法:,HTML教案 2、滚动方向dire

16、ction 语法： 属性值：up、down、left、right 3、滚动方式behavior 属性值： Scroll循环滚动，默认效果 Slide只滚动一次就停止 Alternate来回交替进行滚动 4、滚动速度scrollamount 滚动的速度实际上是设置每次滚动时移动的长度，以像素为单位 5、滚动延迟scrolldelay Scrolldelay时间间隔的单位是毫秒。如果设置的时间比较长，会产生走走停停的效果。 6、滚动循环loop 默认情况下滚动会不断地循环下去，如果希望滚动几次后停止，可以使用loop设置滚动 次数 7、滚动范围width、height 8、滚动背景色bgcolor

17、 9、空白空间hspace（水平范围）、vspace（垂直范围）,HTML教案 二、插入多媒体文件 1、插入flash动画 2、插入音频和视频文件 语法： 3、设置背景音乐bgsound 语法： 说明：背景音乐的文件可以是avi或mp3等声音文件 循环次数loop 语法： 第八章：使用框架结构 1、框架的基本概念 框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示的内容无 关的HTML文档 2、设置框架集的属性frameset 3、水平分割窗口rows,HTML教案 使用表单 一、表单标记form 1、提交表单action Action用于指定数据提交到哪个地址进行处理 语

18、法： 说明：表单的处理程序是表单要提交的地址，也就是表单中收集到的资料将要传递的程序 地址， 示范： 2、表单的名称name 这一属性不是表单的必要的属性，但是为了防止表单提交到后台处理程序时出现混乱，一 般要给表单命名 、传送方法method 表单的method属性用于指定在数据提交到服务器的时候哪种HTTP提交方法。可取值为get 或post. get：表单数据被传送到action属性指定的URL，然后这个新URL被传送到处理程序上。 post:：表单数据被包含在表单主体中，然后被送到处理程序上。,HTML教案 二、插入表单对象 网页中的表单由许多不同的表单元素构成。这些表单元素包括文字字段、单选按钮、复选 框、菜单和列表以及按钮 1、文字字段text 语法： 姓名： 年龄： ,HTML教案 2、密码域password 语法： 3、单选按钮radio 语法: 示范： 男 女 4、复选框checkbox 语法： 爱好: 游泳 打高尔夫球 看小说 打麻将 ,HTML教案 5、普通按钮button 在网页中按钮也很常见，在提交页面、清除内容时常常看到。普通按钮一般情况下要配合 脚本来进行表单处理。 语法： Value的取值就是显示在按钮上的文字 示范： 6、提交按钮submit 语法: 说明：value同样用来设置显示在按钮上的文件 示范： 7、重置按钮re