html语言课件

《html语言课件》由会员分享，可在线阅读，更多相关《html语言课件（44页珍藏版）》请在装配图网上搜索。

1、学习进度表学习进度表1、html代码代码(上上)p1p15 3学时学时2、html代码代码(下下)p16p36 3学时学时3、js代码代码(上上)3学时学时4、js代码代码(下下)3学时学时5、复习总结、复习总结 3学时学时HTML入门入门 HTMLHTML英语意思是：英语意思是：Hypertext Marked LanguageHypertext Marked Language，即超文，即超文本本标记标记语言语言 以文本文件为基础，添加一系列标记描述其格式、颜色等以文本文件为基础，添加一系列标记描述其格式、颜色等属性，加上图片、音视频、动画，通过浏览器解释，形成属性，加上图片、音视频、动画，

2、通过浏览器解释，形成精彩画面。精彩画面。eg01eg01 通过通过HTMLHTML可以表现出丰富多彩的设计风格可以表现出丰富多彩的设计风格 通过通过HTMLHTML可以实现页面之间的跳转可以实现页面之间的跳转.eg02eg02 浏览器解释浏览器解释htmlhtml从上到下、从左到右逐句解释从上到下、从左到右逐句解释.eg03eg03 所有的网页都以所有的网页都以HTMLHTML为基础，可嵌入其他语言。为基础，可嵌入其他语言。文件的扩展名为文件的扩展名为.html.html 或或 .htm.htm eg04eg04 eg05eg05HTML的文档结构的文档结构最简单的网页（可见）（可见）怎么样？

3、简单吧？（可见）（可见）html网页网页eg06头部区域头部区域主体区域主体区域HTML的基本语法的基本语法 文本文本 例如：例如：最简单的网页最简单的网页 eg06 文本文本 例如：例如：背景红色背景红色 eg07 例如：例如：我想学做网页我想学做网页是呀！我也想学是呀！我也想学!eg07HTML的常用标记的常用标记(一一)、标记（网页全体）标记（网页全体）用于标识当前文档为用于标识当前文档为html网页。网页内容以网页。网页内容以开始开始结束结束 以下所有标记或标记对都必须嵌于此标记中以下所有标记或标记对都必须嵌于此标记中。(二二)、标记（网页头部）标记（网页头部）（1）标记标记 浏览器窗

4、口的标题栏中显示的文字，即网页标题浏览器窗口的标题栏中显示的文字，即网页标题（2）标记标记 用于载入外部用于载入外部CSSCSS文件文件 eg08eg08（3）标记标记 标识网页文档编码标识网页文档编码 -简体中文简体中文 其它语言字符集其它语言字符集(Charsets):iso-8859-1(Charsets):iso-8859-1、big5 big5、x-euc-jp x-euc-jp、euc-kreuc-kr eg09（4）标记标记 eg10在当前网页里载入一个在当前网页里载入一个abc.js文件文件（5）标记标记 eg10在此标记之间定义本网页的在此标记之间定义本网页的css样式样式(

5、三三)、标记（网页体部）标记（网页体部）（1）标记属性：标记属性：bgcolor-背景色彩背景色彩 text-非可链接文字的色彩非可链接文字的色彩 link-可链接文字的色彩可链接文字的色彩 alink-正被点击的可链接文字的色彩正被点击的可链接文字的色彩 vlink-已经点击已经点击(访问访问)过的可链接文字的色彩过的可链接文字的色彩#=rrggbb#3333FF色彩是用色彩是用 16 进制的进制的 红绿蓝红绿蓝(red-green-blue,RGB)值来表示。值来表示。16 进制的数码有进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.eg11 网页整体背景图象

6、网页整体背景图象 eg12 页面左边的空白页面左边的空白 、页面上方的空白、页面上方的空白(天头天头)eg13未加入未加入eg14加入加入（2）标记：链接标记标记：链接标记 属性说明属性说明1：url指定此链接指向的文件名及文件路径，文件类型广泛，指定此链接指向的文件名及文件路径，文件类型广泛，一般为其他网页文件。一般为其他网页文件。路径分为相对路径（物理）和绝对路径（网路径分为相对路径（物理）和绝对路径（网址）。标记之间指定了具有链接的元素，可以是文字，图片等址）。标记之间指定了具有链接的元素，可以是文字，图片等.文字链接实例：文字链接实例：链接的例子链接的例子图片链接实例：图片链接实例：属

7、性说明属性说明2：target属性指定链接出现在哪类窗口属性指定链接出现在哪类窗口target=“_blank”以新建窗口的方式打开连接。以新建窗口的方式打开连接。target=“_self”在当前窗口中打开连接。在当前窗口中打开连接。eg15（）（）标记：标尺线标记：标尺线或或 或或 或或 eg16#=rrggbb 16 进制进制 RGB 数码，或者是下列预定义色彩：数码，或者是下列预定义色彩：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua （4）.标记

8、标记(#=1,2,3,4,5,6)：标题字体标记：标题字体标记使用方法：使用方法：eg17今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！属性说明：属性说明：-这些标记显示黑体字。这些标记显示黑体字。-这些标记自动插入一个空行，不必用这些标

9、记自动插入一个空行，不必用 标记再加空行。标记再加空行。因此对文字标题设置时，在一行中无法使用不同大小的字体。因此对文字标题设置时，在一行中无法使用不同大小的字体。（5）.标记标记：普通字体标记：普通字体标记属性扩展：属性扩展：.字体大小（字体大小（#=1,2,3,4,5,6,7 or+#,-#）使用方法：使用方法：.控制字体大小控制字体大小今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！今天天气真好！今天天气真好！显示：显示：今天天气真好

10、！今天天气真好！今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！今天天气真好！今天天气真好！显示：显示：今天天气真好！今天天气真好！eg18 .字体颜色字体颜色 .（#=客户端可获得的字体）客户端可获得的字体）Hellow World!显示：显示：Hellow World!Hellow World!eg19（6）物理字体标记）物理字体标记使用方法：使用方法：今天天气真好！今天天气真好！：以黑体字显示：以黑体字显示今天天气真好！今天天气真好！：以斜体字显示：以斜体字显示今天天气真好！今天天气真好！：以加下划线显示：以加下划线显示今天天气真好！今天天气真好！：打字机风格：打字机

11、风格今天天气真好！今天天气真好！：上标显示：上标显示今天天气真好！今天天气真好！：下标显示：下标显示今天天气真好！今天天气真好！：删除显示：删除显示 eg20（7）逻辑字体标记）逻辑字体标记使用方法：使用方法：今天天气真好！今天天气真好！：斜体加黑体：斜体加黑体今天天气真好！今天天气真好！：加黑：加黑今天天气真好！今天天气真好！：代码小字：代码小字今天天气真好！今天天气真好！：斜体文字：斜体文字今天天气真好！今天天气真好！：文字变小：文字变小今天天气真好！今天天气真好！：文字变大：文字变大 eg20（8）字符实体标记）字符实体标记使用方法：使用方法：&#;#=字符实体名称字符实体名称 或者或者

12、 ascii 值值&<" 空格符空格符 在在dreamweaver 中快捷键为中快捷键为 ctrl+shift+空格键空格键©eg21综合练习：标记的组合使用综合练习：标记的组合使用 今天今天 天气天气 真好！真好！显示：今天天气真好！今天天气真好今天天气真好今天天气真好！今天天气真好！好！郊游去！好！郊游去！显示：小结：小结：1、标记多数必须以成对形式出现。、标记多数必须以成对形式出现。2、标记都有很多扩展的属性。、标记都有很多扩展的属性。3、标记间可以灵活嵌套、标记间可以灵活嵌套 嵌套内的标记不得有未封闭的标记对。嵌套内的标记不得有未封闭的标记对

13、。4、注意网页的区域性、注意网页的区域性（9）行控制标记）行控制标记 段标记段标记 (可以看作是空行可以看作是空行)代码代码：你好吗？：你好吗？很好。很好。显示显示：你好吗？：你好吗？很好。很好。eg24快捷键快捷键：在：在dreamweaver中直接按下中直接按下 回车键回车键换行标记换行标记 代码代码：你好吗？：你好吗？很好。很好。显示显示：你好吗？：你好吗？很好。很好。eg24快捷键快捷键：在：在dreamweaver中按下中按下 shif+回车键回车键.效果类似效果类似word中的回车中的回车（10）文字对齐标记）文字对齐标记 .(#=left,center,right)标题的对齐标题

14、的对齐代码代码：大家还在听课么？大家还在听课么？显示显示：大家还在听课么？大家还在听课么？eg25.(#=left,center,right)段落的对齐段落的对齐代码代码：默认左对齐：默认左对齐居中对齐居中对齐右对齐右对齐显示显示：默认左对齐默认左对齐居中对齐居中对齐 右对齐右对齐 eg26.通用居中对齐通用居中对齐代码代码：希望还在听希望还在听 显示显示：希望还在听希望还在听 eg27（11）文字的分区显示文字的分区显示 .(#=left,center,right)代码：代码：Can you feel happiness without unpleasant?Please show me y

15、our smile.显示：显示：Can you feel happiness without unpleasant?Please show me your smile.代码：代码：eg28Can you feel happiness without unpleasant?Please show me your smile.显示：显示：Can you feel happiness without unpleasant?Please show me your smile.代码：代码：Can you feel happiness without unpleasant?Please show me y

16、our smile.显示：显示：Can you feel happiness without unpleasant?Please show me your smile.（12）列表标记）列表标记无序列表无序列表.（ul标记一个圆点显示的无序列表，标记一个圆点显示的无序列表，li为表项）为表项）代码：代码：TodayTommorow 显示：显示：Today Tommorow eg29制定无序列表中的标记制定无序列表中的标记（#=disk,circle,square）代码：代码：ONE TWO THREE 显示：显示：l ONE O TWO n THREE eg29 有序列表有序列表.（ol标记一

17、个数字显示的有序列表，标记一个数字显示的有序列表，li为表项）为表项）代码：代码：TodayTommorow 显示：显示：Today Tommorow eg29定制有序列表表中的序号定制有序列表表中的序号（#=A,a,I,i,1）代码：显示：代码：显示：sadkfasdf fasdf asdfa sdfasdf fasdf sadkfasdf fasdf asdfa sdfasdf fasdf 定义列表定义列表.（dl标记一个普通定义列表，标记一个普通定义列表，dt为上层表项，为上层表项，dd为下层表项）为下层表项）代码：代码：TodayToday is yesterday.Today is

18、yesterday.TomorrowTomorrow is today.显示：显示：eg30Today Today will be yesterday.Today will be yesterday.Tomorrow Tomorrow will be today.注意：注意：和和标记必须位于标记必须位于 标记对之间使用标记对之间使用 源代码显示标记源代码显示标记.代码：代码：Please use your card.VISA MasterHere is an order form.FaxAir Mail 显示：显示：eg31Please use your card.VISA MasterHer

19、e is an order form.FaxAir Mail 块引用标记块引用标记.（缩进标记）（缩进标记）代码：代码：Her Song:When I was young,I listened to the radio waiting for.显示：显示：eg32Her Song:When I was young,I listened to the radio waiting for.（1）图像标记）图像标记链入图象的基本语法链入图象的基本语法 代码：代码：#=图象的图象的 URL#=在图象位置显示的提示文字。在图象位置显示的提示文字。#=给图象指定的宽和高，象素为单位给图象指定的宽和高，象素

20、为单位 实例：实例：图象和文字的对齐图象和文字的对齐 代码：代码：#=top,middle,bottom 实例：实例：My face!eg33 My face!My face!注意：只有一行文字时才可以放在图象的两边。注意：只有一行文字时才可以放在图象的两边。图象在页面中的对齐图象在页面中的对齐 代码：代码：eg34#=left,right 实例：实例：My Face!It is always smiling.Hahaha.My Face!It is always smiling.Hahaha.图象的间距图象的间距 (#=value)v高、高、h宽单宽单位：象素位：象素It is always

21、smiling.Hahaha.eg34 图象的边框图象的边框 代码：代码：（#=value）实例：实例：eg35 （1）表单标记）表单标记表单的基本语法表单的基本语法 表单域开始表单域开始 输入的表单输入的表单提交按钮提交按钮重置按钮重置按钮表单域结束表单域结束 声明：声明：标记标记name属性：指定表单的名称。属性：指定表单的名称。action属性：指定由哪个属性：指定由哪个cgi文件来处理当前表单提交的用户信息文件来处理当前表单提交的用户信息method属性：定义表单的提交方式，属性：定义表单的提交方式，get或或post.target属性：定义目标窗口打开的方式。属性：定义目标窗口打开的

22、方式。_self、_blank、_parent、_top标记标记inputtype属性：指定用户输入区域的类型属性：指定用户输入区域的类型 text（文本框）（文本框）,password（密码框）（密码框）,hidden（隐藏表单）（隐藏表单）radio（单选按钮）（单选按钮）,checkbox（复选按钮）（复选按钮）image（图像按钮）（图像按钮）,submit（提交按钮）（提交按钮）,reset（重置按钮）（重置按钮）name：指定输入表单的名称以供：指定输入表单的名称以供cgi提取提取 eg36 文本框和密码框文本框和密码框单行文本框单行文本框 声明：声明：text:定义一个单行的文本

23、输入区域定义一个单行的文本输入区域name:当前文本框的名称以便供当前文本框的名称以便供cgi提取其值提取其值size:以字符为单位定义文本框中显示文字的个数以字符为单位定义文本框中显示文字的个数maxlength:定义可输入的最大字符个数定义可输入的最大字符个数.其值应该小于等于其值应该小于等于sizevalue:定义默认显示给用户的文本初始值定义默认显示给用户的文本初始值 eg36多行文本框多行文本框声明：声明：textarea:定义一个多行的文本输入框定义一个多行的文本输入框cols:定义此文本框的字符宽度，即以字符为单位的列数定义此文本框的字符宽度，即以字符为单位的列数rows:定义可

24、见文本框的行数。定义可见文本框的行数。value:定义默认显示给用户的文本初始值定义默认显示给用户的文本初始值wrap:不指定此属性将默认应用自动换行，如设置为不指定此属性将默认应用自动换行，如设置为off则关闭自动换行则关闭自动换行 eg36密码框密码框 声明：声明：password:定义一个单行的密码文本输入区域。字符显示为定义一个单行的密码文本输入区域。字符显示为“*”号号其他同上其他同上 eg36 单选框和复选框单选框和复选框单选框单选框 声明：声明：radio:定义一个单选框定义一个单选框name:定义此个单选框的名称定义此个单选框的名称value:如此单选框被选中，设置此单选框的值

25、。如此单选框被选中，设置此单选框的值。checked:设置此单选框默认被选中，反之则无此属性设置此单选框默认被选中，反之则无此属性 eg36注意：注意：如定义一组单选框，必须保证他们的如定义一组单选框，必须保证他们的name值相一致。值相一致。复选框复选框 声明：声明：checkbox:定义一个复选框定义一个复选框name:定义此个复选框的名称定义此个复选框的名称value:如此复选框被选中，设置此复选框的值。如此复选框被选中，设置此复选框的值。checked:设置此复选框默认被选中，反之则无此属性设置此复选框默认被选中，反之则无此属性 eg36注意：注意：如定义一组复选框，必须保证他们的如定

26、义一组复选框，必须保证他们的name值相一致。值相一致。列表框列表框代码：代码：.声明：声明：表示列表框开始：表示列表框开始 ：表示列表框结束：表示列表框结束name：定义列表框的名称：定义列表框的名称size：定义列表框显示的列数，默认为：定义列表框显示的列数，默认为1multiple：如加入此属性，则此列表框可多选。反之为弹出式单选列表框。：如加入此属性，则此列表框可多选。反之为弹出式单选列表框。加入时，可用加入时，可用 Ctrl 键、键、shift键配合鼠标实现多选或按住鼠标左键拖动多选。键配合鼠标实现多选或按住鼠标左键拖动多选。(和和 MS-WINDOWS 的的 File Manage

27、r 一样一样)selected:在所有在所有选项中，指定一个为默认选项。不加，默认为第一个选项中，指定一个为默认选项。不加，默认为第一个value:为其为其选项赋值选项赋值 eg36注意：服务器注意：服务器cgi通过通过区域名字的区域名字的value属性获得此列表框的值。属性获得此列表框的值。隐藏表单隐藏表单代码：代码：声明：声明：Hidden:指定此表单为隐藏类型指定此表单为隐藏类型Value:指定此隐藏表单的值指定此隐藏表单的值 eg36 图像按钮图像按钮代码：代码：eg36声明：声明：image:指定此表单为图像按钮。作用等同于指定此表单为图像按钮。作用等同于提交按钮提交按钮小结：制作一

28、个含有多种表单的网页小结：制作一个含有多种表单的网页提示：实际运用中，往往搭配提示：实际运用中，往往搭配js 代码对表单进行安全验证等操作代码对表单进行安全验证等操作POST方法比较适合用于发送一个保密的（比如信用卡号）或者比较大量的数据到服务器，但速度慢。而Get方法会将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制且不安全，但是执行效率却比 Post方法好。具体来说如下：1、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form

29、的数据体中，按照变量和值相对应的方式，传递到action所指向URL。2、Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。Post的所有操作对用户来说都是不可见的。3、Get传输的数据量小，这主要是因为受URL长度限制；而Post可以传输大量的数据，所以在上传文件只能使用Post（当然还有一个原因，将在后面的提到）。4、Get限制Form表单的数据集的值必须为

30、ASCII字符；而Post支持整个ISO10646字符集。5、Get是Form的默认方法。（15）表格标记）表格标记表格的基本语法表格的基本语法 表格开始表格开始 表格结束表格结束 声明：声明：一个表格的开始一个表格的开始 一个表格的结束一个表格的结束border属性：设置边框宽度，不设置则默认为属性：设置边框宽度，不设置则默认为0width属性，属性，height属性：设置表格宽度和高度，单位为像素或百分比属性：设置表格宽度和高度，单位为像素或百分比cellpadding：表格单元格边框与其内部内容之间填充空间的大小。：表格单元格边框与其内部内容之间填充空间的大小。cellspacing：表

31、格各单元格之间间距空间的大小：表格各单元格之间间距空间的大小属性：表格中的一行。即表行属性：表格中的一行。即表行属性：表示表格一行中的一列，即表元属性：表示表格一行中的一列，即表元属性：定义表头，黑体居中文字，现不常用。属性：定义表头，黑体居中文字，现不常用。eg37 表格的色彩表格的色彩 代码：代码：设置整个表格的背景颜色设置整个表格的背景颜色 设置表格一行的颜色，设置表格一行的颜色，颜色可覆盖颜色可覆盖颜色颜色设置表格一个单元格的颜色，设置表格一个单元格的颜色，颜色可覆盖颜色可覆盖颜色颜色 eg38设置边框颜色设置边框颜色 设置边框明亮部分的颜色，当设置边框明亮部分的颜色，当border值

32、值1有效有效 设置边框背光部分的颜色，当设置边框背光部分的颜色，当border值值1有效有效 eg39声明：对于声明：对于 同样可以指定同样可以指定background=“URL”属性属性 行的设置行的设置.代码：代码：aa bb cc   声明：声明：align属性：控制水平对齐方式属性：控制水平对齐方式 可选值可选值 left 、center、rightvalign属性：控制垂直对齐方式属性：控制垂直对齐方式 可选值可选值 top 、middle 、bottom 单元格的设置单元格的设置.代码：代码：A B C   声明：声明：a

33、lign属性：控制水平对齐方式属性：控制水平对齐方式 可选值可选值 left 、center、rightvalign属性：控制垂直对齐方式属性：控制垂直对齐方式 可选值可选值 top 、middle 、bottom 跨多列、多行的单元格跨多列、多行的单元格代码：代码：AB C  声明：声明：colspan=“2”表此单元格跨占表格的表此单元格跨占表格的2列列rowspan=“2”表此单元格跨占表格的表此单元格跨占表格的2行行框架框架一、框架集一、框架集1、基本语法、基本语法 框架集框架集 对不起！您的浏览器不支持框架！对不起！您的浏览器不支持框架！eg01、各窗口的尺寸设置

34、、各窗口的尺寸设置（1）纵向排列框架窗口）纵向排列框架窗口（分列）说明：Cols:表示纵向分割框架窗口，*表示不指定各个窗口的大小，相对且均分eg02 *号可以为百分比，eg03 也可以为像素,eg04.多个窗口用“，”号分割。（2）横向排列框架窗口）横向排列框架窗口（分行）eg05 name属性非常重要，用于标识窗口属性非常重要，用于标识窗口（3）横、纵排列框架窗口）横、纵排列框架窗口（框架的嵌套）（框架的嵌套）先分为两列，然后把右侧的一列又分为两行。先分为两列，然后把右侧的一列又分为两行。eg06 3、不允许各窗口改变大小不允许各窗口改变大小 缺省则允许改变大小缺省则允许改变大小.注意其相

35、对关系，同一级别，只添一个即可注意其相对关系，同一级别，只添一个即可；外围级别填写，内部可调整；外围级别填写，内部可调整eg07；内部级别填写，外部不可调整；内部级别填写，外部不可调整eg08、*各窗口间的相互操作各窗口间的相互操作*(Frame Target)窗口标识用窗口标识用(Frame Name)属性完整语法：完整语法：新窗口新窗口 本窗口本窗口 父窗口父窗口 整个浏览器窗口整个浏览器窗口 Eg095、Frame 的外观（）各窗口边框的设置（）各窗口边框的设置#=yes,no 或或 1,0Yes(默认)eg10 no eg11（）各窗口间空白区域的设置（）各窗口间空白区域的设置#=空白空白区域的大小区域的大小 eg12(3)(3)、边框色彩、边框色彩 eg136、浮动窗口、浮动窗口 .#=初始页面的初始页面的 URL#=窗口标识窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作之后可对此标识进行各窗口间相互操作).=此处文字将只出现在不支持此处文字将只出现在不支持 FRAMES 的浏览器中。的浏览器中。代码：代码：Here is a Floating Frame解释：Name表当前表当前iframe的名，涉及到窗口跳转的名，涉及到窗口跳转eg14