HTML基础ppt课件.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,1,章,HTML,基础,1,第,1,章,HTML,基础,1 HTML,文档结构,2 HTML,基本标记的使用,3,超链接标记,4 HTML,表格,5 HTML,表单,2,1 HTML,文档结构,在互联网中传送的文档，绝大部分使用超文本标记语言编写，这些文档称为,HTML,文档。,在基本,HTML,文档中，只允许两种元素存在：一种是,HTML,标记，另一种则是普通文本。,3,1 HTML,文档结构,HTML,文档的组成结构如下：,4,1 HTML,文档结构,一个完整的,HTML,文档通常由以下三部分组成：,1,HTML,标记,格式：,2,头部信息,格式：,3,文本主体,格式：,5,1 HTML,文档结构,1,HTML,标记,这是定义,HTML,文档开始与结束的标记，也是,HTML,文档中最先出现的标识，表明这个文件的内容是用,HTML,语言来实现的。它必须成对出现，分别表示,HTML,文件的起始和结束。在,容器标记中又包括以下,和,两个部分。,6,1 HTML,文档结构,2,头部信息,这一部分用来说明文档标题以及该页面的其他信息，它构成,HTML,文档的开头部分，在此标记对之间可以使用,、,等标记，这些标记都是描述,HTML,文档相关信息的标志，标志对之间的内容是不会在浏览器的框内显示出来的，但是其内容应该尽量简短。,7,1 HTML,文档结构,3,文本主体,这部分说明,HTML,文件的主体内容，在浏览器的客户区中显示，这是页面开发者的编写,HTML,文档的主要部分。,8,1 HTML,文档结构,对于,HTML,标记的约定：,超文本标记是用一对尖括号“,”,括起来的文本串，例如第一行的,。,超文本标记一般成对出现，用带“,/”,的标记结束，如,。成对出现的超文本标记也称容器元素。,有些标记只有起始标记而没有结束标记称空元素，如,。,超文本标记可以忽略字母的大小写。,构成容器元素的一对标记可以写在不同行，标记属性的相对位置不受限制，但属性必须出现在起始标记里。,9,编写,HTML,文档的方法,:,HTML,文档是一个纯文本文件，可以使用任何文本编辑器编写保存。,例：新建一个,html,文件,10,2 HTML,基本标记的使用,2.1 head,容器的标记,2.2 body,容器的标记,11,2.1,head,容器的标记,标记主要用来提供网页文件的整体信息。包括标题栏名称、文件的网址、所采用的文档编码等。,标记用来告知浏览器这是文件标题的开头，最后使用,标记告知浏览器这是文件标题的结束点。,12,2.1,head,容器的标记,HTML,文档的,head,是一个容器元素，在,head,容器元素中允许出现以下元素：,1,title,元素,2,link,元素,3,meta,元素,4,base,元素,5,script,元素,13,2.1,head,容器的标记,1.title,元素,格式：,标题文字,title,元素包含文档的标题。它不显示在浏览器窗口中，只显示在浏览器标题栏中。在起始标志（,）和结束标志,(),间，可以放入简述文档内容的标题。如果没有,title,元素，浏览器的标题栏将显示网页的文件名。,14,2.1,head,容器的标记,2,link,元素,格式：,link,元素在当前文档和另一文档之间建立链接关系。,href,属性指向相关的文档,;rel,属性描述了当前文档与被连接文档的关系,;type,属性描述被连接文档的类型。,表示链接一个外部,CSS,文件,default.css,如下,:,15,2.1,head,容器的标记,3,meta,元素,格式：,meta,元素用来描述当前网页的元信息。通常用来为搜索引擎,robots,定义页面主题，或者是定义用户浏览器上的,cookie,；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面的自动刷新时间间隔（秒）等。,16,一些有关,metal,元素的例子,1.,设置搜索引擎关键字,2.,设置网页编码,3.,刷新页面,17,2.1,head,容器的标记,4,base,元素,格式：,base,元素指定一个显式,URL,用于解析对于外部源的链接和引用，如图像和样式表。当用户使用相对,URL,请求文档时，超链接也会正确地执行。,Target,指定文档中所有链接的默认窗口，该属性主要用在使用框架结构的网页中，使用框架结构，同一浏览器窗口中可以容纳多个网页，同时在若干不同的框架窗口中显示。,18,2.1,head,容器的标记,5,script,元素,格式：,脚本语言代码段,script,元素在文档中放置一个脚本。这个元素可以在,HTML,文档的,head,或,body,中出现。脚本可以在,script,元素中或外部文件中被定义。,19,2.2,body,容器的标记,标记是,HTML,文件最重要的部分，它是一个容器元素，包含在其中的内容将显示在浏览器的主窗口中。,20,容器元素中可以包含下表中的常用元素,:,text,定义标题,其中,:n=1,6,。,定义了最大字号的标题,定义了最小字号的标题,text,段落标记，文档主体中两个段落之间插入换行,把图像插入到文档中，其中,src,属性给出图像地址,text,定义超文本链接属性，并将结果返回给用户浏览器,放置一个横穿浏览器窗口的水平线,在文本中强制换行,注释结束。注释中不能包含注释,区块容器元素，可容纳段落、标题、表格、图片等各种,HTML,元素,21,2.2,body,容器的标记,在,HTML,中，需要使用,元素的属性对页面进行一个整体的规划和设置，例如页面的背景颜色、背景图案、页面留白以及大部分文字的颜色等等。,例如在百度搜索引擎的主页中，其,元素的定义如下：,22,body,元素本身的属性可以分为,3,类，如下表所示,:,背景属性,bgColor,背景色,background,背景图案,文字属性,text,正文文字颜色,link,链接文字颜色,alink,活动链接文字颜色,vlink,已访问链接文字颜色,边距属性,leftmargin,页面左侧的左边距,topmargin,页面顶部的上边距,23,2-2.html,这是我的第一个,html,程序，我很高兴哦。,这个程序简单了点学习嘛，要一步一步地来，不着急。,24,3,超链接标记,HTML,用,来表示超链接，英文叫,anchor,，一个链接的基本格式如下：,链接文字,表示一个链接的开始,;,表示链接的结束；,可指向任何一个文件源：网页、图片、影视文件等,;,href,属性则表示这个链接文件的路径；链接分为,本地链接、,URL,链接,和,目录链接,。,25,3,超链接标记,超链接标记的几个常用属性：,1,target,属性：,网易首页,2,title,属性：,网易首页,3,name,属性：,第一章,第二章,4,链接到,email,地址：,联系网易,26,3.1,本地链接,对同一台机器上的不同文件进行的连接称为本地链接，它使用,UNIX,或,DOS,系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。,（,1,）以绝对路径表示：,文件的链接,（,2,）以相对路径表示：,文件的链接,/a,（,3,）链接上一目录中的文件：,IP,地址,27,3.2 URL,链接,URL,是英文,Uniform Resource Locators,（统一资源定位器）的缩写，是专为标识,Internet,网上资源位置而设的一种编址方式，通过它可以以多种通讯协议与外界沟通来存取信息。,URL,地址一般由三部分组成，例如：,主机名 路径及文件名,28,Internet,上的通讯协议通常包括以下几种：,协议名,功能说明,file,本地系统文件,http,WWW,服务器,ftp,ftp,服务器,telnet,基于,TELNET,的协议,mailto,电子邮件,news,Usenet,新闻组,29,3.3,目录链接,目录链接可以直接指到某一个文件的上部、下部或中央部分。其制作方法是：在各种链接的各个要素中，首先把某段落设置为链接位置，使用,name,属性，它可以跳转到一个文件的指定位置。,格式,1,：,然后，设定一个,href,指向此链接部分的文件；,格式,2,：,链接文字,30,使用本地链接,互联网,HTML,简介,多样化和统一性,互联网,互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过,TCP/IP,传输协议绑定在一起。,HTML,简介,超文本标记语言是,Web,用来创建和识别文档的标准语言。虽然它不是标准通用标记语言,(SGML),的子集，但与它有着某种程度上的关联。,SGML,是一种文档格式语言表示方法。,多样性和统一性,万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。,关于我们,联系我们,31,4 HTML,表格,表格中所有行和列及单元格中的内容必须被包含在一对,和,标记中，其基本结构如下：,.,.,.,.,.,32,row 1,cell 1,row 1,cell 2,row 2,cell 1,row 2,cell 2,33,4.1,表格定义标记,1,表格的标题,表格标题的位置，可由,align,属性来设置，其位置分别由表格上方和表格下方。,设置标题位于表格上方：,.,设置标题位于表格下方：,.,34,4.1,表格定义标记,2,元素,元素表示表格中的行标记，表格中的每一行都必须包含在一对,标记中。,行标记的一般形式是：,.,在,标记中有两个属性：,align,指定该行中单元格的对齐方式，如左对齐，居中以及右对齐；,bgcolor,指定该行的背景颜色,35,4.1,表格定义标记,3.,元素,单元格是表格的基本组成元素，一个,td,元素表示表格中的一个单元格，包含在,元素内的多个,元素构成表格的一行。,单元格的一般形式是：,.,36,4.1,表格定义标记,3.,元素,在,标记中的属性如下：,width,指定单元格的宽度；,height,指定单元格的高度；,align,指定单元格水平对齐方式；,valign,指定单元格垂直对齐方式；,bgcolor,指定单元格的背景颜色,background,指定单元格的背景图案,rowspan,指定单元格的行跨度,colspan,指定单元格的列跨度,37,4.2,表格属性的设置,1,表格的大小,一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式：,width,和,height,属性分别指定表格一个固定的宽度和长度，,n1,和,n2,可以用像素或百分比来表示。,例如定义一个长为,200,像素，宽为,100,像素的表格：,38,4.2,表格属性的设置,2,表格的边框,边框是用,border,属性来设定的，它表示表格的边框风格。将,border,设成不同的值，有不同的效果。在作为布局使用时往往取默认值“,0”,，即不显示表格的边框，在,=1,时，表格边框显示成三维的状态。,书写格式为：,39,4.2,表格属性的设置,3,单元格间距,单元格与单元格之间的线为格间线，它的宽度可以使用,中的,cellspacing,属性加以调节。,格式为：,#,表示要取用的像素值,还可以在,中设置,cellpadding,属性，用来规定内容与格线之间的宽度。,格式为：,#,表示要取用的像素值,40,4.2,表格属性的设置,4,表格内文字的对齐方式,表格中数据的排列方式有左右排列和上下排列两种。左右排列由,align,属性来设置，上下排列则由,valign,属性来设置。,格式参照,标记：,#,为,left,、,center,、,right,之一,#,为,top,、,middle,、,bottom,之一,41,4.2,表格属性的设置,5,单元格的合并,利用,td,的,rowspan,和,colspan,属性可以把单元格合并,rowspan=“n”,：合并其下面,n-1,个单元格,colspan=“n”,：合并其右测,n-1,个单元格,42,43,5 HTML,表单,5.1,表单标记结构,5.2,单行文本框和多行文本框,5.3,命令按钮,5.4,单选按钮,5.5,复选框,5.6,下拉列表框,5.7,隐藏域,44,5.1,表单标记结构,HTML,表单,(Form),是,HTML,的一个重要部分，主要用于采集和提交用户输入的信息。表单在,Web,网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。,HTML,表单标记的基本结构如下：,表单主体,45,5.2,单行文本框和多行文本框,单行文本框允许用户输入一些简短的单行信息，比如用户姓名、密码等。,格式如下：,46,请输入你的姓名：,47,5.2,单行文本框和多行文本框,多行文本框主要用于输入较长的多行文本信息。,格式如下：,48,请提宝贵意见：,49,5.3,命令按钮,命令按钮通常用于完成一定的操作，这由按钮的,type,属性值而确定。格式如下：,type,属性指定按钮的类型，其值有三种：,值为“,Submit”,，表示将表单的信息提交给表单的,action,所指向的文件来处理；,值为“,Reset”,，表示清除表单的数据；,值为“,Button”,，为一般按钮，不产生任何操作。,value,属性值是显示在按钮上的文字。,50,用户名,:,密码,:,51,5.4,单选按钮,使用单选按钮，让用户在一组选项里只能选择一个。,格式如下：,52,苹果,桔子,芒果,53,5.5,复选框,复选框允许用户在一组选项里，选择一个或多个选项。,格式如下：,checked,是可选的，表示初始时选中的复选框。,54,苹果,桔子,芒果,55,5.6,下拉列表框,下拉列表框既可以用做单选，也可以用做复选；如果要变成复选，加上,muiltiple,即可。用户用,Ctrl,来实现多选。,格式如下：,文本,1,.,文本,n,56,你最喜欢的水果是：,苹果,桔子,芒果,57,5.7,隐藏域,隐藏域是指在表单上不显示任何内容。它允许表单使用,name,和,value,属性一起传送“预先设置好的信息”。,格式如下：,58,