HTML语言教学课件

《HTML语言教学课件》由会员分享，可在线阅读，更多相关《HTML语言教学课件（363页珍藏版）》请在金锄头文库上搜索。

1、HTML语言一 HTML入门1.1 网络的基本概念 n计算机网络就是利用通讯线路将分布在不同地点的具有 独立功能的多台计算机系统相互连接，按照网络协议进 行通信和实现资源共享的系统。n网络协议：网络中进行通信的规则或约定什么是网页和网站 n什么是网页n什么是网站 什么是网页网页是由 HTML（超级文 本标识语言） 或者其他语言 编写的，通过 IE浏览器编译 后供用户获取 信息的页面， 它又称为Web 页，其中可包 含文字、图像 、表格、动画 和超级链接等 各种网页元素 。 什么是网站 网站就是一个或多个网页的集合。从 广义上讲，网站就是当网页发布到 Internet上以后，能通过浏览器在 In

2、ternet上访问的页面 。n职能网站n专业网站n个人网站 n门户网站网页的分类 n按所处位置分类 n按表现形式分类 按所处位置分类 按网页在网站中所处的位置可将 网页分为主页和子页两类。按表现形式分类 按网页的表现形式可将网页分为静 态网页、动态网页和交互式网页。静态网页：只能静态网页：只能 观看，不能与网观看，不能与网 页交流页交流按表现形式分类 按网页的表现形式可将网页分为静 态网页、动态网页和交互式网页。动态网页：可以实动态网页：可以实 时地发生变化，也时地发生变化，也 可以根据用户的操可以根据用户的操 作发生一定的变化作发生一定的变化交互式网页：一方面用户可以提供一定的信息给网站，网

3、交互式网页：一方面用户可以提供一定的信息给网站，网 站根据实际需要，保留用户的信息，如网上注册，另一方站根据实际需要，保留用户的信息，如网上注册，另一方 面，网站可以自动收集用户的浏览信息面，网站可以自动收集用户的浏览信息网页中的常用术语 n万维网（www） n浏览器 n统一资源定位符（URL） n文件传输协议（FTP） nIP地址 n域名 n超级链接 n超级文本标记语言（HTML） 万维网（www） 万维网（www）是World Wide Web的中 文简称，也称为3W网，它的本质是一种基 于超级文本技术的交互式信息浏览检索工 具，是Internet提供的应用最普及、功能 最丰富、使用方法最

4、简便的信息服务，用 户可通过它在Internet上浏览、编辑、传 递超文本格式的文件（即.html格式文件） 。 浏览器 浏览器是用于阅读网页中信息的一种 软件工具，就像使用电脑必须有操作系统 一样。 nInternet Explorer（IE） nNetscape Navigator（NE） n腾讯TT浏览器 统一资源定位符（URL） URL（Uniform Resource Locator） 主要是用来指定协议（如HTTP或FTP）以 及对象、文档、万维网网页或其他目标在 Internet的位置和存取方式。 n通信协议 n主机名n所要访问的网页路径及名称 文件传输协议（FTP） FTP（F

5、ile Transfer Protocol）是 一种广泛使用的文件传输协议，是快速 、高效和可靠的信息传输方法。FTP是基于客户/服务器模型的TCP/IP 的应用，所以只要在客户端和服务器之 间建立了TCP/IP连接，无论两台电脑的 位置远近、连接方式的异同以及使用的 操作系统的异同，都能通过FTP协议进行 文件的传输。 IP地址 IP地址用来标识连接到Internet上电 脑的指定编号，每一个IP地址对应一台电 脑，这与用电话号码标识电话网络中的电 话相同。电脑识别的IP地址由32位二进制数值 组成，电脑上以十进制数值来显示，一组 数值分为4部分，每一部分均不能大于255 ，中间用“.”分隔

6、，如61.139.2.69。 域名 域名就是常说的网址，它也具有 惟一性，如百度的网址 、网易的网址等就是一个 域名，域名由汉语拼音或英文字符加 上数字表示，在访问网络时，域名将 通过域名服务器转换成IP地址，这种 转换是在后台完成的。超级链接 超级链接是网页中最常用的元素 之一，网页就是通过无数的超级链接 才能组成一个网站。超级链接可以链接到网站内部页 面、对象，也可以链接到其他网站， 大大方便了用户在各个页面对象之间 实现跳转。 1.3 HTML简介1.3.1什么是HTMLnHTML (Hyper Text Mark-up Language )称为超文本标记语 言，目前版本为4.0. HT

7、ML语言用于描述超文本中内容 的显示方式,是一种描述性的语言,而不是一种编程语言 ,利用HTML 标记来控制文字的大小、颜色、图片的尺寸 、位置等1.3.2 创建HTML文件HTML文件的本质是一个文本文件，是扩展名为”.htm” 或”.html”的文本文件,因此可以利用文本编辑软件创 建、编辑。最简单的文本编辑软件就是记事本，可以在 记事本中编写HTML代码创建第一个HTML文件html文件HTML欢迎你！1.3.3 HTML文件结构, , , ,HTML 文件的正文写在这里. .n格式说明： Html语言使用标志对的方法编写文件，既简单又方便，它 通常使用来表示标志的开始和结束( 例如标志

8、对)，因此在Html文档中这样的 标志对都必须是成对使用的1.标志用于Html文档的最前边，用来标识 Html文档的开始。而标志恰恰相反，它放在 Html文档的最后边，用来标识Html文档的结束，两个标 志必须一块使用。 2.和构成Html文档的开头部分，在 此标志对之间可以使用、 等等标志对，这些标志对都是描述 Html文档相关信息的标志对，标志对之 间的内容是不会在浏览器的框内显示出来的。两个标志 必须一块使用。3.是Html文档的主体部分，在此 标志对之间可包含、 等等众多的标志，它们所定义的文本、图像等将会 在浏览器的框内显示出来。两个标志必须一块使用。 4.浏览器窗口最上边蓝色部分显

9、示的文本信息,是网页的 “主题”,要显示网页的主题很简单，只要在 标志对之间加入您要显示的文本即可 。注意：标志对只能放在 标志对之间。 n例： Html文档中基本标志的使用显示在浏览器最上边的标题 红色背景、蓝色文本n热身运动例1：注释标记注释标记正文n例2：标题标记标题标记以下为标题样式： H1标题大小 H2标题大小 H3标题大小 H4标题大小 H5标题大小 H6标题大小 h7标题大小n例3：设置文字颜色字体颜色标记这是蓝色文字n例4：蓝色粗斜字体蓝色粗斜字体注意这里文字字体样式注意：标记的相互嵌套，共同控制最里面的文字的显示方式注意：标记的相互嵌套，共同控制最里面的文字的显示方式n例5：

10、插入图片标记插入图片标记我也要学习制作网页随时注视时代前沿，把握今天迈向明天说明说明:图片插入标记图片插入标记( (单个标记单个标记) )，子曰: “学而时习之，不亦说乎？ 有朋自远方来，不亦乐乎？ 人不知而不愠，不亦君子乎？”说明： 子曰: “学而时习之，不亦说乎？ 有朋自远方来，不亦乐乎？ 人不知而不愠，不亦君子乎？”说明： ；段落标记，除同一样换行外，还用一空白行 间隔，效果如同按连续按两下“Enter”。标记也可 单独使用,但不建议用n例3:文字单行显示强制不换行子曰: “学而时习之，不亦说乎？ 有朋自远方来，不亦乐乎？ 人不知而不愠，不亦君子乎？”子曰: “学而时习之，不亦说乎？ 有

11、朋自远方来，不亦乐乎？ 人不知而不愠，不亦君子乎？”说明: 默认情况下,文字随浏览器窗口大小变化换行显示,采用 标记,不管窗口大小如何变动,文字都以一行显示n例4:文字居中显示居中显示凉州曲王翰 葡萄美酒夜光杯， 欲饮琵琶马上催。 醉卧沙场君莫笑， 古来征战几人回。说明:居中标记作用是将文字以居中对齐方式显示n例5:文字段落的缩进文字的缩进凉州曲王翰 葡萄美酒夜光杯，欲饮琵琶马上催。醉卧沙场君莫笑，古来征战几人回。说明: 右缩进标记,将某段文字向右缩进方式显示, 同时用空白行间隔. 注意:不能与标记嵌套使用n标记属性的应用例1:段落位置的控制段落对齐方式居中段落 靠左段落 靠右段落说明:ali

12、gn属性名,控制文字的显示位置 ,”center”、”left”、”right”为属性的 属性值n一般来讲，html的标记有下列三种表示方法：1)文件或超文本2)文本成超文本3)第三种写法仅用于一些特殊的标记,比如分段标记P ，它仅仅通知www浏览器在此处分段，因而不需要界定 作用范围， 所以它没有结尾链接签。 n另外： 大多数HTML标记中都可以加入属性控制，其作用是帮HTML 标记进一步控制HTML文件的内容，一个标记可以有多个 属性，属性及其属性值不分大小写 格式：多个属性间用空格隔开,不同的标记可以使用相同的属性n例2:标题文字的位置控制多标记同一属性这些是标题 居中标题1 靠左标题2

13、 靠右标题3n例3:设置网页的背景主体标记的属性小孩与大人说明:background控制网页背景图片,属性值为图片路径与 图片名n标志中还可以有以下属性： 属性用途示例设置背景颜色。红色 背景设置文本颜色。蓝色 文本设置链接颜色。链 接为蓝 色设置已使用的链接的颜色。设置正在被击中的链接的颜 色。说明:以上各个属性可以结合使用，如。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、 蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给 定的常量名来表示颜色： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gr

14、ay, Lime, Fuchsia, Green, Purple, Silver, Yellow, Aqua ，如表示标志对中的文本使用蓝色显示在浏览器的框内 。n例4: 水平分割线的设置水平分割线秋歌曾子曰：“慎终，追远，民德归矣。 “说明:水平分割线,单个使用,用来在网页上画出一条水 平线,用以分割不同的文字或其它网页组件 ：可设置水平线粗细, #为数字,以像素为单位 ：设置水平线宽度，像素或百分比#=left, right,center：对齐方式 :设置为实心线条 ：设置水平线颜色 Noshade:不显示水平线的立体阴影n例5:noshade属性的使用水平分割线n例6:属性的就近原则就近

15、显示观察文字颜色 观察文字颜色说明:当出现两个属性同时控制网页中相同的组件时,组件 离哪个标记近,就由哪个标记的属性控制n2.2 多种多样的网页文字文字字体、颜色的设置字体的大小、颜色凉州曲 王翰 葡萄美酒夜光杯， 欲饮琵琶马上催。 醉卧沙场君莫笑， 古来征战几人回。n说明；. #=字体名. #=Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua . 设置字体大小#=1, 2, 3, 4, 5, 6, 7 or +#, -#n物理

16、字体(Physical Style) 粗体斜体 下划线 打字机风格字体 上标下标 文字中间画线 文字中间画线n逻辑字体(Logical Style)强调的文本加重的文本编码的字体引用的文本小号字体大号字体n2.3 特殊字符的显示专业符号p 为段落标记nbsp;为空字符说明: 特殊字符“”代表符号“”,“”代表符号”结尾n上下标标记的使用如要在网页中显示: (6 3 + 3 6) 2 1 = ? 结果以 表示。 H 2 + O 2 H 2 OHTML代码:运算式(6 3 + 3 6) 2 1 = ? 结果以 表示。 H 2 + O 2 H 2 On说明: :上标标记 :下标标记 代表符号 代表符号 代表符号 代表”Word中没有该字符”n2.3 滚动字幕 例1：滚动字幕啦啦啦，我会移动耶！例例2 2：文字移动属性的设置文字移动属性的设置 方向方向 #=left, right #=left, right滚动字滚动字幕幕啦啦啦，我从右向左啦啦啦，我从右向左 移！移！ 啦啦啦，