网页基础语言HTML.ppt

补充 网页基础语言HTML 主要内容 l 网页概述 l HTML文档的基本结构 l 标记及属性的概念 l 常用标记的用法 1.1网页概述 网页：网页是通过网络浏览器看到的网站页 面。网页的本质是一个计算机文件。当浏览 器获得网页访问的指令后，即在互联网上查 找指定的网页文件，并对网页文件进行解读 ，然后将网页呈现在用户屏幕上。 1.1.1 域名和URL IP地址：Internet上的每台主机都有一个专 门的地址，称为IP地址，通过IP地址就可以 访问到每一台主机。IP地址由4个数字组成, 如：9，在浏览器的地址栏输 入这个IP地址，就可以访问这台主机。 域名：域名是IP地址的形象标识，如 是搜狐网站WWW主机的域 名，浏览者主要通过域名访问网站。 1.1.1 域名和URL URL：Uniform Resource Location，译为“统一 资源定位器” 。 URL的构成： protocol:/ :port/directory/filename protocol：访问该资源所采用的协议 ：资源主机的IP 地址,通常使用 域名 port：服务器在该主机所使用的端口号 directory和filename：资源的路径和文件名 1.1.2 WWW与网页浏览 WWW : World Wide Web，译为万维网或环 球信息网，也称为Web，是一个把信息检索 与超文本技术相结合而形成的全球信息系统 ，它由遍布Internet中被称为WWW服务器 的计算机组成，该服务器除了提供它自身的 信息服务之外，还指向存放在其他服务器上 的信息。 网页浏览：通过WWW浏览器软件访问网页 资源。目前最为流行的WWW浏览器为 Microsoft的Internet Explorer和Netscape的 Navigator。 1.1.3 静态网页与动态网页 静态网页 静态网页是标准的HTML文件，其文件扩展名是.htm 或.html; 静态网页不能实现用户和网站之间的信息交互功能; 静态网页可以包含翻转图像、GIF动画或Flash影片 。 动态网页 能实现用户和网站之间的信息交互功能。 包括两类：客户端动态网页和服务器端动态网页。 1.1.4 网页中的基本元素 l文本 即文字信息，具有多种属性，如字体，字号，颜色，底纹 和边框等。 l图像和动画 图像在网页中具有提供信息、展示作品、装饰网页、表达 个人情调和风格的作用。 图像格式：GIF、JPEG、BMP、TIFF、TGA、RAS、EPS、 PCX、PNG、PCD和WMF格式等。 动画是运动的图画，一组静态画面的连续播放形成动画。 制作动画的常用软件：Fireworks、Flash、3DS MAX等 网页中使用最多的图像文件是GIF文件。 1.1.4 网页中的基本元素 l声音和视频 声音文件格式：MIDI、WAV、MP3和AIF等。 视频文件格式：Realplay格式, MPEG, AVI和DivX等 。 l超级链接 从网页的热点指向一个目的端的链接。目的端可以 是另一个网页，也可以是一幅图片，一个电子邮件 地址，一个文件，一个程序或者是本网页中的其他 位置。热点通常是文本、图片或图片中的区域，也 可以是一些不可见的程序脚本。 1.1.4 网页中的基本元素 l表格 n在网页中表格用来控制网页中信息的布局方式 。 n显示表格数据。 l表单 实现网页与浏览用户的信息交互。如收集联 系信息、接受用户要求、获得反馈意见、设 置来宾签名簿、让浏览者注册为会员并以会 员的身份登陆站点等。 l其他常见元素 悬停按钮、Java特效、ActiveX特效等。 1.1.5 网页中的HTML编码 HTML（Hyper Text Mark-up Language）即 超文本标记语言，是构成网页的基础语言， Internet网站中的每一个网页都有它对应的 HTML编码。 l l 显示网页的显示网页的HTMLHTML编码编码 打开一个网页，用图示快捷菜单打开一个网页，用图示快捷菜单 的的“ “查看源文件查看源文件” ”命令。命令。 l l HTMLHTML文件文件 由由HTMLHTML命令组成的描述性文本命令组成的描述性文本 ，HTMLHTML命令可以说明文字、图命令可以说明文字、图 像、动画、声音、表格、链接等像、动画、声音、表格、链接等 。 1.1.6 网页设计的基本方式 三种方式： l直接编码 l利用可视化工具 l直接编码和可视化工具结合 1.1.7网页设计的基本工具 1网页设计工具 普通的文本编辑软件：用HTML语言直接编制 Web页，如Windows记事本。 可视化网页制作工具：Dreamweaver、 FrontPage等。 2素材处理工具 常用：Photoshop、Flash、Fireworks、 CorelDraw、Cool 3D、FreeHand等。 网站设计的一般过程 1确定网站主题 2素材组织整理 3规划网站 4选择合适的制作工具 5制作网页 6上传测试 7推广宣传 8维护管理 网页发布的一般过程 1网页发布的方式 直接拷贝 利用FTP工具传输 常用的FTP传输软件：CuteFTP、LeechFTP 、QuickFTP、FTP Commander等。 利用开发工具（如Dreamweaver）的内 置上传功能。 网页发布的一般过程 2发布个人网页的一般过程 选择ISP申请主页空间。申请后会得到一 个网页地址、FTP主机地址、用户名以及密 码等资料。 上传网页文件。若使用FTP上传,需要在 本地机安装一个FTP软件。上传文件时，需 要提供申请得到一个网页地址、FTP主机地 址、用户名以及密码等资料。 上传之后，即可通过浏览器访问网页。 HTML HTML 语言起源于标准综合标记语言语言起源于标准综合标记语言(Standard (Standard Generalized Markup Language Generalized Markup Language 简称简称 SGML) SGML) ，是由是由 CERN (CERN ( 欧洲粒子物理实验室欧洲粒子物理实验室) )首先提出来的。其最早版本起源于首先提出来的。其最早版本起源于 19921992年，年，HTML 4.01HTML 4.01版于版于19991999年年1212月月2424日被推荐使用。日被推荐使用。 HTMLHTML通过文件格式标准化，统一使用一些标记符号通过文件格式标准化，统一使用一些标记符号( TAG )( TAG ) ，对文件的内容进行标注，指出内容的输出格式，如字体对文件的内容进行标注，指出内容的输出格式，如字体 大小、颜色，背景颜色，表格形式，各部分之间逻辑上的大小、颜色，背景颜色，表格形式，各部分之间逻辑上的 组织等。使用支持组织等。使用支持 HTML HTML 的浏览软件，其它用户就可以对的浏览软件，其它用户就可以对 文件进行自由的跳跃式的阅读，还可自行调整显示和阅读文件进行自由的跳跃式的阅读，还可自行调整显示和阅读 的形式。由于它简单易学，表现力强，适用广泛的形式。由于它简单易学，表现力强，适用广泛 , , 所以深所以深 受用户喜爱，迅速得到了推广和普及。受用户喜爱，迅速得到了推广和普及。 HTMLHTML语言的由来语言的由来 1.2 HTML文件的基本结构 HTML文件是由HTML的标记命令构成的文 本文件，构成HTML文件的标记命令既有规 定的语法格式，也有规定的使用位置。任何 文本编辑软件都可对其进行编辑，以htm或 html为扩展名存储后，用Web浏览器即可浏 览相应的网页。 l1.2.1 HTML标记 l1.2.2 标记和属性 1.2.1 HTML标记 n例1-1简单HTML文件示例 我的网页 Hello！网页设计的学习现在开始啦！ 1.2.1 HTML标记 1标记 HTML用于描述功能的标识符称为标记，标记在使 用时必须用尖括号“ 头头 部部 信信 息息 文文 档档 主主 体，体， 正正 文文 部部 分分 1.2.2 HTML1.2.2 HTML文件的结构文件的结构 1.2.2 HTML文件的结构 HTMLHTML文件的基本结构图文件的基本结构图 1.2.2 HTML文件的结构 1. html标记 html标记由“”和“”构成， “”通常位于HTML文件的开头，表示 HTML文档的开始，“”位于文件的 结尾，表示HTML文档的结束，HTML文档 的其他内容都限定在html标记对中。一个 HTML文件只有一对html标记。 2. head标记 head标记由“”和“”构成， 位于HTML文档的前部。head区常用的标记 有title、meta 等。 1.2.2 HTML文件的结构 title标记 功能：标识网页标题。 格式：字符串 说明： 格式中的“字符串”是网页的标题内容，浏览 网页时该内容显示在网页顶部的标题行中。 meta标记 功能： 描述网页关键字和网页说明、定义 网页语言编码、页面刷新设置等，进行网页 浏览时，这些标记信息是不可见的。 1.2.2 HTML文件的结构 meta标记 n描述网页关键字 “关键字列表”中的关键字是网络搜索引擎借以 分类的关键词。 例如： 1.2.2 HTML文件的结构 meta标记 n描述网页说明 “网页说明信息”是一段文本，它将作为搜索引 擎对网页的描述信息。 搜索引擎就能够根据这些关键字搜索到相应 网页，并显示关于网页的说明信息。 1.2.2 HTML文件的结构 meta标记 n定义网页语言编码 格式： 例如： 浏览器将自动选用gb2312 编码作为本网页 的字符编码。 1.2.2 HTML文件的结构 meta标记 n页面刷新 格式： 其中： content属性中的“数值”代表刷新网页延迟 的时间，单位是秒；“文件名或网址”为刷新 时要链接到的文件或网址。当缺少URL项时 ，浏览器将刷新当前网页。 1.2.2 HTML文件的结构 meta标记 例1-3 mark-meta.htm 我的网页 Hello！网页设计的学习现在开始啦！ 1.2.2 HTML文件的结构 3. body标记 网页的主体标记，由和构 成，网页中的可见对象通常在body区内进 行描述。 body区常用的标记：排版标记、图像标记 、超链接标记、表格标记等。 1.2.2 HTML文件的结构 nbody标记的常用属性 bgcolor属性 用于定义网页的背景颜色。 用法一：bgcolor=“#RGB颜色编码“ RGB颜色编码：一组六位的十六进制数值， 第1、2位表示红色值（R），第3、4位表示 绿色值（G），第5、6位表示蓝色值（B）。 例如： 1.2.2 HTML文件的结构 bgcolor属性 用法二：bgcolor=“颜色标识符“ “颜色标识符”在HTML的预定义颜色符中取 值。 常用的预定义颜色符： black、olive、teal、red、blue、maroon、 navy、gray、lime、fuchsia、white、green 、purple、sliver、yellow、aqua 例如： 1.2.2 HTML文件的结构 其他常用属性 属性名属性用法属性功能 backgroundbackground=“图像 url“ 设定图像为网页背景 texttext=“颜色“设定网页文本的默认颜 色 linklink=“颜色“链接文字颜色 alinkalink=“颜色“活动链接文字颜色 vlinkvlink=“颜色“已访问链 接文字颜色 leftmarginLeftmargin=“像素值“ 页面左侧的留白距离 topmargintopmargin=“像素值“页面顶部的留白距离 1.3 排版标记 排版标记是对网页的页面版式进行控制的标记，主要有标排版标记是对网页的页面版式进行控制的标记，主要有标 题标记、段落标记、换行标记、文本标记、文字风格标记题标记、段落标记、换行标记、文本标记、文字风格标记 等等 l l 1.3.1 1.3.1 标题标记标题标记 l l 1.3.2 1.3.2 段落标记段落标记 l l 1.3.3 1.3.3 换行标记换行标记 l l 1.3.4 1.3.4 文本标记文本标记 l l 1.3.5 1.3.5 文字风格标记文字风格标记 1.3.1 标题标记 标题标记用于表示文本的各种题目，标题号越小 ，字号越大。 格式： 标题内容 其中： hn分别表示h1、h2、h6。 align是标题标记的属性，属性值为标题的对齐方 式，具体为left、center和 right，分别使标题居左 、居中和居右。 例1-4 mark-hn.htm 1.3.1标题标记 例例1-4 mark-1-4 mark-hn.htmhn.htm 标题标记应用示例标题标记应用示例 这里是标题这里是标题h1h1 这里是标题这里是标题h2h2 这里是标题这里是标题h3h3 这里是标题这里是标题h4h4 这里是标题这里是标题h5h5 这里是标题这里是标题h6h6 1.3.2 段落标记 段落标记p用于定义一个段落，并对段落的属性进行说明。 格式： 段落文本 align属性的常用值：left，center和right，分别规定段落在 窗口中的水平位置为居左、居中和居右。 说明： p标记中的标记可以省略，浏览器在遇到下一个 标记时自动开始一个新段落。 通常一般文档中使用的分段标识在HTML中都被忽略掉， 只有遇到标记时才会产生新段落。 段落中不管有多少个连续空格，都将被处理为一个空格 。 例1-5 mark-p.htm 1.3.2 段落标记 例1-5 mark-p.htm p标记和段落的示例 第29届奥运会在北京举行。 同一个世界，同一个梦想！ 2008，北京！ 中国北京欢迎来自世界各地的朋友！ 北 京 欢 迎 您！ 1.3.3 换行标记 换行标记产生换行。 格式： 仅产生一个新行，并不产生新段落。 若在一个段落中使用该标记，产生的新行仍 然具有原段落的属性。 例1-6 mark-br.htm 1.3.3 换行标记 例1-6 mark-br.htm br标记示例 第29届奥运会在北京举行。 同一个世界，同一个梦想！ 2008，北京！ 中国北京欢迎来 自世界各地的朋友！ 北 京 欢 迎 您！ 1.3.4 文本标记 文本标记font用于控制文字的显示形式 常用属性：size、face、color，分别定义文 字的大小、字形、颜色。 1设定文字大小 设定文字大小由size属性实现。 绝对形式：文字 字号取值1-7，数值越大字越大，HTML的默 认字号为3号字。 1.3.4 文本标记 1设定文字大小 相对形式：文字 相对形式中字号的实际大小有两种情况： 在没有特别设定基准字号的情况下，字 号以默认字号3为基准变化。 当使用标记设定基 准字号后，字号将以n为基准变化。 1.3.4 文本标记 1设定文字大小 例1-7 mark-font-size.htm font(size)标记示例 同一个世界，同一个梦想！ 同一个世界，同一个梦想！ 同一个世界，同一个梦想！ 同一个世界，同一个梦想！ 1.3.4 文本标记 1.设定文字字体 设定文字字体由face属性实现，格式如下： 文字 例如： 石油是一种不 可再生能源 说明： 只有当前系统中能够使用的字体，相应设定 才是有效的。 1.3.4 文本标记 3设定文字颜色 设定文字的显示颜色由color属性实现。 格式一：文字 格式二：文字 示例： 用法一：网页设计 用法二：网页设计 1.3.4 文本标记 例1-8 mark-font.htm font标记示例 同一个世界，同一个梦想！ 同一 个世界，同一个梦想！ 同一个世界 ，同一个梦想！ 1.3.5 文字风格标记 标记名称标记功能标记使用格式 b文字加粗文字 i文字倾斜文字 u文字加下划线文字 strike文字加删除线文字 sup文字为上标文字 sub文字为下标文字 1.3.5 文字风格标记 例例1-9 mark-1-9 mark-style.htmstyle.htm 文字风格标记示例文字风格标记示例 _GB2312“ 要设计好网页学习要设计好网页学习HTMLHTML是必要的！是必要的！ 学习学习HTMLHTML对设计网页毫无帮助！对设计网页毫无帮助！ 爱因斯坦与爱因斯坦与E=MC2E=MC2是科学的奇迹！是科学的奇迹！ 1.4 多媒体标记图像标记 格式： 功能：在网页中插入图像 属性 名 属性用法功能 srcsrc=“url“指定插入图像的url alignalign =“top“图像两侧的文字与图像顶部对齐 align =“center“图像两侧的文字与图像中部对齐 align =“bottom“图像两侧的文字与图像底部对齐 align =“left“图像位置居左 align =“right“图像位置居右 titletitle =“图像说明“当鼠标移到图片上是显示图片说明 信息。 altalt =“图像替代文字“在浏览 器还没有装入图像的时候， 先显示有关此图像的信息 heightheight =“图像高度值“设置图像高度（像素） widthwidth =“图像宽度值“设置图像宽度（像素） borderborder=“图像边框宽度 值“ 设置图像边框宽度（像素） 1.4 多媒体标记 图像、声音等是重要的网页元素，在HTML文 件中这些网页元素用多媒体标记进行描述 。 l1.4.1图像标记 l1.4.2背景音乐标记 1.4.1 图像标记 格式： 功能：在网页中插入图像 例例1-10 mark-1-10 mark-img.htmimg.htm 图像标记示例图像标记示例 width=“160“ height=“100“ 1.4.2 背景音乐标记 背景音乐标记bgsound用于插入背景音乐。 一般格式： 属性名属性用法功能 srcsrc=“url“指定插入音乐的url autostartautostart=“true | false“ autostart的取值只能是true或 false，取true时自动播放音 乐。 looploop=“n | infinite“n是整数值，loop取值为n 时，连续播放n次，否则循 环播放。 用法举例：用法举例： =“true“ loop=“5“ 1.5 连接标记 1.5.1 超链接标记 HTML的超链接由标记a实现。 常用的链接形式：文件链接、锚点链接、 E_mail链接。 文件链接：指向一个文件目标； 锚点链接：指向网页中的某一部分； E-mail链接：通过邮件服务程序向指定信 箱发送电子邮件。 超链接标记a的常用属性是href属性和 name属性。 1.5.1 超链接标记 1建立文件链接 格式： 字符串 href属性中的“url”是被指向的目标，“字符串”在html文件 中是链接标识，它以超链接的形式呈现在网页中。 链接到网页示例： 搜狐首页 链接到其他文件示例： 就业信息表 1.5.1 超链接标记 1.锚点链接 锚点链接是将链接指向网页的某个具体位置 ，该位置可以在当前网页中，也可以在其他 网页中。锚点链接的目的主要是实现较长网 页文档的快速浏览。锚点链接需要使用链接 标记a的name属性和href属性。name属性 用于在链接的目标位置设立锚点，href属性 用于建立到锚点的链接，并设立链接标识， 当用鼠标点击该链接标识后即跳转到网页的 指定位置。 1.5.1 超链接标记 设立锚点 设立锚点标记的格式： 锚点提示信息 建立页内锚点链接 格式：链接标识 说明： href属性的“链接字符串”与name属性的“链接字符串”必须完全相同 ，否则链接将不能实现。 “链接标识”可以是任何信息，在网页中以超链接的形式显示。 “链接标识”标记可以出现多次，既 可以位于锚点标记之前，也可以位于锚点标记之后。 建立到其他网页的锚点链接 格式： 链接标识 格式中的“url”是链接到的网页文件的url，若被链接的网页与当前网页 在相同位置，则为网页文件的文件名。在这里使用的文件名必须是文 件全名。 1.5.1 超链接标记 Page-1.htm 锚点标记应用示例（一） 唐诗鉴赏 台湾 校园歌曲 唐诗三百首 (这里有若干首唐诗） 王之涣诗 词 登鹳雀楼 白日依山尽，黄河入海流。 欲穷千里目，更上一层楼。 (这里有若干首唐诗） Page-2.htm 锚点标记应用示例（二） 歌曲欣赏 (这里有若干