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

html简介,网址： 电话：400 700 1307,html语言基础,了解html的一些背景知识 html的全局架构标签 文本标签 格式标签 超链接标签 图像标签 图像地图,什么是html和网页文件,观察下面这段文本内容在文本编辑器和浏览器程序中的显示区别 html是英文hypertext markup language的缩写 标签格式： ：成对标签又称之为容器，一对标签中还可以嵌套其它的标签 ：单独标签不需要与这配对的结束标签，又称这为空标签 标签属性格式： ：属性值部分可以用英文的双引号（”）可单引号（）引起来，也可以不使用任何引号 一个html标签及标签中嵌套的内容就是网页中的一个“html元素”,浏览器访问网页文档的方式,web 服务器,客户端,向服务器发送页面请求,web 服务器处理请求并返回请求的页面,站点地址或 url,html规范与版本,不同的浏览器之间的不兼容问题 为什么要制定规范 谁来制订规范 ietf w3c 正在使用的html版本 html4.01 xhtml,ietf与w3c,ietf internet engineering task force (internet工程任务组)，由网络设计人员、操作员、厂商、专家组成的民间组织，主要负责有关internet的各种技术标准及接口规范的制定，其网址为。ietf以（requests for comments, 请求注解文档）定名所议，例如rfc2616(http/1.1)、rfc1521(mime). w3c world wide web consortium（习惯称之为www联盟）于1994年成立，是与web有关的企业机构成立的业界同盟，其网址为。w3c目前的成员仅限于团体或组织，只要交纳一定的费用，并签署一份保证遵守规则的成员协议，任何公司均可加入，w3c对web的标准握有生杀大权，负责研究、审定、发布、管理有关web的标准，例如，html、css等。,html初级标签,标签、属性和元素构成html的要素。 文本6个等级的标题和文本的样式。 段落与列表用段落构建内容，用列表排序内容。 连接把内容连接起来。 图象添加一点不是文本的东西,html的全架构标签,一个最基本的网页文件的组成结构： 显示在浏览器上方的标题 红色背景、蓝色文本 文档架构标签 ,标签的属性,text属性：用于设定整个网页中的文字颜色。 link属性：用于设定一般超链接文本的显示颜色。 alink属性：用于设定鼠标移动到超链接上时，超链接文本的显示颜色 vlink属性：用于设定访问过的超链接文本的显示颜色 background属性：用于设定背景墙纸所用的图像文件，可jpeg文件的绝对或相对路径。 bgcolor属性：用于设定背景颜色，当已设定背景墙纸时，这个属性会失去作用，除非墙纸具有透明部分。 leftmargin/rightmargin属性：设定网页显示画面与浏览器窗口左/右边沿的间隙，单位为像素。 topmargin/bottommargin属性：设定网页显示画面与浏览器窗口上/下边沿的间隙，单位为像素。 class、 name、 id、 style等属性。,html颜色设置,颜色类型的属性值有两种表示方式： 十六进制颜色码使用一个号后跟六位十六进制数据，例如： html的颜色常量名，例如：red、blue,用dreamweaver创建网页文档,自动创建全局架构标签 方便设置标签属性 可视化网页设计,dtd文档类型定义,dtd：（document type definition, dtd） html指定文档类型的名称。 public表明所依据的文件可对任何人公开访问，而不是某个公司内部的规范文件。 version name指定该html版本的标识名称。例如，html4.0的标识名称为”-/w3c/dtd html 4.01 transitional/en”.对于iso标准的dtd以”iso”三个字母开头；被改进的非iso标准的dtd以加号“”开头；没被改进的非iso标准的dtd以“”开头。 url指定该html语言的定义规范文件在internet上的位置，例如，/tr/html4/loose.dtd. 规范文件：loose.dtd、 strict.dtd、 frameset.dtd等文件名的区别。,返回,文本标签, 标签的三个属性face、size和color,返回,格式标签,注释与特殊字符,html注释格式：” 特殊字符：用数值码和引用实体两种方式表示，例如：,在什么情况下需要用&qout表示,如果属性值中同时有单引号和双引号，该如何处理呢？假设标签的title属性值为zx”x, 那么， 不使用引号的写法为： 使用单引号的写法为：有错 使用双引号的写法为：有错 特殊字符的写法为：正确 思考题： 人们为什么要对&、字符安排一个html编码文本代码呢？,返回,超链接标签,什么是超链接？ 超链接标签： 例如，php中国网站 什么是url？ 超链接源与超链接目标 的target属性 target=_blank：将链接内容在新的浏览窗口中打开。 target=_parent：将链接的内容，当成文件的上一个画面。 target=_self：将链接的内容，显示在目前的窗口中。 target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。 定位网页内部的链接：用定义 例如：第一部分，使用跳转到第一部分超链接就可以定位到网页中的“第一部分”这个位置。 注意：与的区别,返回,url,url(uniform resource locator)的基本组成：协议、主机名、端口号、资源名。 例如： :8080/index.html 为url指定参数 例如： 带有定位标记的url 例如：,链接路径,有三种类型的链接路径： 绝对路径 （例如 文档相对路径 （例如 adver/contents.html） 站点根目录相对路径 （例如 /support/app/customer.html，其中“/”表示根目录）,链接路径,文档相对链接alex/blue.html,www,home.html,根文件夹相对链接 /photo/alex/blue.html,绝对链接,超链接范例,网站链接： php专家 电子邮件链接： 写信给我 ftp链接： 下载档案,url编码,规则： 将空格转换为加号（+）. 对0-9, a-z, a-z之间的字符保持不变。 对于所有其他的字符，用这个字符的当前字符集编码在内存中的的十六进制格式表示，并在每个字节前加上一个百分号（），如字符”“用%2b表示，字符”=“用%3d表示，字符”“用%26表示，第个中文字符在内存中占两个字节，字符”中“用%d6%d0表示，字符“国”用%b9%fa表示。 对于空格也可以直接使用其十六进制编码方式，即用%20表示，而不是将它转换成加（）。,返回,图像标签,标签 例如： 设置alt、align、border、width和height等属性。,图像地图,.图像超链接 格式为：. 图像是地图什么？ 把一幅图像分成多个区域，每个区域指向不同的url地址，譬如，将一幅中国地图的图像按省市划分成若干区域，这些区域被称为热点，单击热点区域，就可以链接到与相应省市有关的页面，这就是图像地图。 怎样产生图像地图 首先必须定义出图像上的各热点区域的形状、位置坐标、及其指向的url地址等信息，这个过程叫图像热点映射。图像热点映射需要使用标签对进行说明，其中的name属性为该图像热点映射指定了一个名称。 图像热点映射中的各个区或用标标说明，标签的格式为：。href部分也可以用nohref替换，表示在该区域单击鼠标无效。标签还可以有一个target属性，用来指明浏览器在哪个窗口或帧中显示href属性所指向的网页资源。 定义好了图像热点映射后，接着就要在图像标签中增加一个名为usemap的属性设置，usemap属性指定该图像被用作图像地图，其设置值为所使用的图像热点映射名称，格式为：在标签的name属性设置值前多加一个”#”字符。例如,图像地图举例, shape属性的设置说明： rect定义一个矩形区域，coords属性设置值为矩形的左上角、右下角的坐标，各个坐标值之间用逗号分开； poly定义一个多边形区域，coords属性设置值为多边形各顶点的坐标值； circle定义一个圆形区域，coords属性设置值为圆心坐标半径，前两个参数分别为圆心的横、纵坐标，第三个参数为半径。,思考与实践,描述什么是html标签及其作用 描述dtd文件的作用及其与html文件的关系。 描述什么是url及其组成部分，举一个具有端口号的url例子。 编写一个html网页文件，在网页文件中加入5个大的段落，在文件开始处是每个段落 的标题名，单击任何一个标题名，浏览器定位到该标题对应的段落处显示。,html高级标签,表格标签 表单标签 帧标签 头元素,表格标签,表格的作用：表格可以固定文本或图像的显示位置 属性：bgcolor、border、bordercolor、bordercolorlight、bordercolordark、cellspacing、cellpadding、width、height. 属性：align、valign、bgcolor 属性：width、height、align、valign、colspan、rowspan、nowrap。 问题：列中的内容过长，整个表格的宽度会被撑大。 ,返回,表单标签,标签对用来创建一个表单，即定义表单的开始和结束位置，标签具有下面等属性。 action属性：用来设置接收和处理浏览器递交的表单内容的服务器程序的url,例如：。 method属性：用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：get或post. target属性：用来指定服务器返回结果显示的目标窗口或目标帧。 title属性：用来设置当网站访问者的素、鼠标在表单上的任一位置停留过几秒时，浏览器用黄色小浮标显示的文本（如表单的名称或描述）。 enctype属性：指示浏览器使用哪种编码方法将表单数据传送给www服务器。该属性可以有两种取值：application/x-www-form-urlencoded和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、border、frameborder 标签 属性：src、name、scrolling、noresize 标签 可为那些不支持框架的浏览器显示文本，和组合使用 标签 创建一个包含另外一个文档的内联框架。,框架集窗口中的各个页面,index.html文件： ,框架集窗口中的各个页面,top.html文件： 这是顶部的网页文件,left.html文件： 这是左边的网页文件 显示右边的第一个文档 显示右边的第二个文档,right1.html文件： 这是右边的第一个网页文件,right2.html文件： 这是右边的第二个网页文件,返回,头元素,头元素是指位于标签元素，主要包括： 标签 标签 标签 标签,标签,标签用于指定网页中的超链接的基准地址，以改变网页中所有使用相对地址的url的基准地址。 标签通常的使用形式如下： 作用 href属性：设定该网页中所有使用http协议的相对url地址的基准地址，若网页中有如这样的超链接，它不会再象没有使用标签时那样表示当前网页相同目录下的index.html,而是指向了 target属性：用于设定该网页中所有的超链接显示的目标窗口，在标签中设定target属性，可省得在所有的超链接的标签中都加上target属性。,标签,标签定义了当前文档与web中其他文档或资源之间的关系。 标签通常的使用形式如下： 作用： rel属性：定义当前文档与目标文档之间的关系。 type属性：规定目标 url 的 mime 类型 。 href属性：目标文档或资源的 url 。 media属性：规定文档将被显示在什么设备上 。,标签,标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。 有两种类型的用不同的属性名来划分，这两种属性名为：name和http-equiv. name属性用于在网页中加入一些关于网页的描述信息，例如，网页的关键字（可供网页搜索引擎机器人查找、分类）、网页的描述信息等。 http-equiv属性用于在html文档中模拟http协议的响应消息头，例如，告诉浏览器是否缓存该网页、使用什么样的字符集来显示网页内容、隔多长时间自动刷新网页等。,name属性设置,keywords：搜索引擎关键字 例如：