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,