网站开发教程-HTML简介(1).ppt

《网站开发教程-HTML简介(1).ppt》由会员分享，可在线阅读，更多相关《网站开发教程-HTML简介(1).ppt（47页珍藏版）》请在三一办公上搜索。

1、HTML简介,网址：电话：400 700 1307,HTML语言基础,了解HTML的一些背景知识HTML的全局架构标签文本标签格式标签超链接标签图像标签图像地图,什么是HTML和网页文件,观察下面这段文本内容在文本编辑器和浏览器程序中的显示区别HTML是英文HyperText Markup Language的缩写标签格式：成对标签又称之为容器，一对标签中还可以嵌套其它的标签：单独标签不需要与这配对的结束标签，又称这为空标签标签属性格式：属性值部分可以用英文的双引号（”）可单引号（）引起来，也可以不使用任何引号一个HTML标签及标签中嵌套的内容就是网页中的一个“HTML元素”,浏览器访问网页文档

2、的方式,Web 服务器,客户端,向服务器发送页面请求,Web 服务器处理请求并返回请求的页面,站点地址或 URL,HTML规范与版本,不同的浏览器之间的不兼容问题为什么要制定规范谁来制订规范IETFW3C正在使用的HTML版本HTML4.01XHTML,IETF与W3C,IETFInternet Engineering Task Force(Internet工程任务组)，由网络设计人员、操作员、厂商、专家组成的民间组织，主要负责有关Internet的各种技术标准及接口规范的制定，其网址为http:/www.ietf.org。IETF以（Requests for Comments,请求注解文档）

3、定名所议，例如RFC2616(HTTP/1.1)、RFC1521(MIME).W3CWorld Wide Web Consortium（习惯称之为WWW联盟）于1994年成立，是与WEB有关的企业机构成立的业界同盟，其网址为http:/www.w3c.org。W3C目前的成员仅限于团体或组织，只要交纳一定的费用，并签署一份保证遵守规则的成员协议，任何公司均可加入，W3C对WEB的标准握有生杀大权，负责研究、审定、发布、管理有关WEB的标准，例如，HTML、CSS等。,HTML初级标签,标签、属性和元素构成HTML的要素。文本6个等级的标题和文本的样式。段落与列表用段落构建内容，用列表排序内容。

4、连接把内容连接起来。图象添加一点不是文本的东西,HTML的全架构标签,一个最基本的网页文件的组成结构：显示在浏览器上方的标题红色背景、蓝色文本文档架构标签,标签的属性,text属性：用于设定整个网页中的文字颜色。link属性：用于设定一般超链接文本的显示颜色。alink属性：用于设定鼠标移动到超链接上时，超链接文本的显示颜色vlink属性：用于设定访问过的超链接文本的显示颜色background属性：用于设定背景墙纸所用的图像文件，可JPEG文件的绝对或相对路径。bgcolor属性：用于设定背景颜色，当已设定背景墙纸时，这个属性会失去作用，除非墙纸具有透明部分。leftmargin/right

5、margin属性：设定网页显示画面与浏览器窗口左/右边沿的间隙，单位为像素。topmargin/bottommargin属性：设定网页显示画面与浏览器窗口上/下边沿的间隙，单位为像素。class、name、id、style等属性。,HTML颜色设置,颜色类型的属性值有两种表示方式：十六进制颜色码使用一个号后跟六位十六进制数据，例如：HTML的颜色常量名，例如：red、blue,用DreamWeaver创建网页文档,自动创建全局架构标签方便设置标签属性可视化网页设计,DTD文档类型定义,DTD：（Document Type Definition,DTD）HTML指定文档类型的名称。PUBLIC表

6、明所依据的文件可对任何人公开访问，而不是某个公司内部的规范文件。version name指定该HTML版本的标识名称。例如，HTML4.0的标识名称为”-/w3c/DTD HTML 4.01 Transitional/EN”.对于ISO标准的DTD以”ISO”三个字母开头；被改进的非ISO标准的DTD以加号“”开头；没被改进的非ISO标准的DTD以“”开头。url指定该HTML语言的定义规范文件在internet上的位置，例如，http:/www.w3.org/TR/html4/loose.dtd.规范文件：loose.dtd、strict.dtd、frameset.dtd等文件名的区别。,返

7、回,文本标签,标签的三个属性face、size和color,返回,格式标签,注释与特殊字符,HTML注释格式：”特殊字符：用数值码和引用实体两种方式表示，例如：,在什么情况下需要用&qout表示,如果属性值中同时有单引号和双引号，该如何处理呢？假设标签的title属性值为zx”x,那么，不使用引号的写法为：使用单引号的写法为：有错使用双引号的写法为：有错特殊字符的写法为：正确思考题：人们为什么要对&、字符安排一个HTML编码文本代码呢？,返回,超链接标签,什么是超链接？超链接标签：例如，php中国网站什么是URL？超链接源与超链接目标的target属性target=_blank：将链接内容在新

8、的浏览窗口中打开。target=_parent：将链接的内容，当成文件的上一个画面。target=_self：将链接的内容，显示在目前的窗口中。target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。定位网页内部的链接：用定义例如：第一部分，使用跳转到第一部分超链接就可以定位到网页中的“第一部分”这个位置。注意：与的区别,返回,URL,URL(Uniform Resource Locator)的基本组成：协议、主机名、端口号、资源名。例如：http:/:8080/index.html为URL指定参数例如：http:/,链接路径,有三种

9、类型的链接路径：绝对路径（例如 http:/adver/contents.html）站点根目录相对路径（例如/support/app/customer.html，其中“/”表示根目录）,链接路径,文档相对链接alex/blue.html,WWW,home.html,根文件夹相对链接/photo/alex/blue.html,绝对链接http:/,超链接范例,网站链接：PHP专家电子邮件链接：写信给我ftp链接：下载档案,URL编码,规则：将空格转换为加号（+）.对0-9,a-z,A-Z之间的字符保持不变。对于所有其他的字符，用这个字符的当前字符集编码在内存中的的十六进制格式表示，并在每个字节前

10、加上一个百分号（），如字符”“用%2B表示，字符”=“用%3D表示，字符”“用%26表示，第个中文字符在内存中占两个字节，字符”中“用%D6%D0表示，字符“国”用%B9%FA表示。对于空格也可以直接使用其十六进制编码方式，即用%20表示，而不是将它转换成加（）。,返回,图像标签,标签例如：设置alt、align、border、width和height等属性。,图像地图,.图像超链接格式为：.图像是地图什么？把一幅图像分成多个区域，每个区域指向不同的URL地址，譬如，将一幅中国地图的图像按省市划分成若干区域，这些区域被称为热点，单击热点区域，就可以链接到与相应省市有关的页面，这就是图像地图。怎

11、样产生图像地图首先必须定义出图像上的各热点区域的形状、位置坐标、及其指向的url地址等信息，这个过程叫图像热点映射。图像热点映射需要使用标签对进行说明，其中的name属性为该图像热点映射指定了一个名称。图像热点映射中的各个区或用标标说明，标签的格式为：。Href部分也可以用nohref替换，表示在该区域单击鼠标无效。标签还可以有一个target属性，用来指明浏览器在哪个窗口或帧中显示href属性所指向的网页资源。定义好了图像热点映射后，接着就要在图像标签中增加一个名为usemap的属性设置，usemap属性指定该图像被用作图像地图，其设置值为所使用的图像热点映射名称，格式为：在标签的name属

12、性设置值前多加一个”#”字符。例如,图像地图举例,shape属性的设置说明：rect定义一个矩形区域，coords属性设置值为矩形的左上角、右下角的坐标，各个坐标值之间用逗号分开；poly定义一个多边形区域，coords属性设置值为多边形各顶点的坐标值；circle定义一个圆形区域，coords属性设置值为圆心坐标半径，前两个参数分别为圆心的横、纵坐标，第三个参数为半径。,思考与实践,描述什么是HTML标签及其作用描述DTD文件的作用及其与HTML文件的关系。描述什么是URL及其组成部分，举一个具有端口号的URL例子。编写一个HTML网页文件，在网页文件中加入5个大的段落，在文件开始处是每个段

13、落的标题名，单击任何一个标题名，浏览器定位到该标题对应的段落处显示。,HTML高级标签,表格标签表单标签帧标签头元素,表格标签,表格的作用：表格可以固定文本或图像的显示位置属性：bgcolor、border、bordercolor、bordercolorlight、bordercolordark、cellspacing、cellpadding、width、height.属性：align、valign、bgcolor属性：width、height、align、valign、colspan、rowspan、nowrap。问题：列中的内容过长，整个表格的宽度会被撑大。,返回,表单标签,标签对用来创建

14、一个表单，即定义表单的开始和结束位置，标签具有下面等属性。action属性：用来设置接收和处理浏览器递交的表单内容的服务器程序的URL,例如：。method属性：用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET或POST.target属性：用来指定服务器返回结果显示的目标窗口或目标帧。title属性：用来设置当网站访问者的素、鼠标在表单上的任一位置停留过几秒时，浏览器用黄色小浮标显示的文本（如表单的名称或描述）。enctype属性：指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值：application/x-www-form-urlen

15、coded和multipart/form-data,默认的设置值为“application/x-www-form-urlencoded”.,表单标签的作用,表单字段元素（1）,属性：size、value、maxlength、readonly、disabled属性：checked,表单字段元素（2）,标签的属性：multiple、size,name标签的属性：value、selected如何在列表中实现取消选项属性：cols、rows属性：for、accesskey,返回,帧标签,分帧的作用：将一个浏览器文档窗口分隔成多个窗口，每个窗口都可以显示一个独立的网页文件。标签属性：rows、cols、

16、border、frameborder标签属性：src、name、scrolling、noresize标签可为那些不支持框架的浏览器显示文本，和组合使用 标签创建一个包含另外一个文档的内联框架。,框架集窗口中的各个页面,index.html文件：,框架集窗口中的各个页面,Top.html文件：这是顶部的网页文件,Left.html文件：这是左边的网页文件显示右边的第一个文档显示右边的第二个文档,Right1.html文件：这是右边的第一个网页文件,Right2.html文件：这是右边的第二个网页文件,返回,头元素,头元素是指位于标签元素，主要包括：标签标签标签标签,标签,标签用于指定网页中的超链

17、接的基准地址，以改变网页中所有使用相对地址的URL的基准地址。标签通常的使用形式如下：作用href属性：设定该网页中所有使用HTTP协议的相对URL地址的基准地址，若网页中有如这样的超链接，它不会再象没有使用标签时那样表示当前网页相同目录下的index.html,而是指向了http:/,标签,标签定义了当前文档与Web中其他文档或资源之间的关系。标签通常的使用形式如下：作用：rel属性：定义当前文档与目标文档之间的关系。type属性：规定目标 URL 的 MIME 类型。href属性：目标文档或资源的 URL。media属性：规定文档将被显示在什么设备上。,标签,标签可提供有关页面的元信息，比

18、如针对搜索引擎和更新频度的描述和关键词。有两种类型的用不同的属性名来划分，这两种属性名为：name和http-equiv.name属性用于在网页中加入一些关于网页的描述信息，例如，网页的关键字（可供网页搜索引擎机器人查找、分类）、网页的描述信息等。http-equiv属性用于在HTML文档中模拟HTTP协议的响应消息头，例如，告诉浏览器是否缓存该网页、使用什么样的字符集来显示网页内容、隔多长时间自动刷新网页等。,name属性设置,keywords：搜索引擎关键字例如：description：描述robots：搜索机械人content设置值：index、noindex、follow、nofollow、all、none.author：作者copyright：版权,http-equiv属性设置（）,Content-Type例如：refresh例如：expires例如：将content设置为0,可以禁止浏览器使用缓存页面。,http-equiv属性设置（）,Windows-Target例如，要防止自己的网页被别人当作一个frame页面调用，可以使用.Page-Enter和Page-Exit例如，,HTML OVER谢谢！,