《《Web程序设计》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《Web程序设计》PPT课件.ppt（53页珍藏版）》请在三一办公上搜索。
1、HTML,WEB浏览器工作原理HTML简介HTML细节HTML文件结构、文字、链接、表格、表单、多窗口图片、音乐、视频HTML中显示特殊字符框架,WEB浏览器,WWW 中的信息资源主要由一篇篇的Web文档，或称Web页为基本元素构成HTML 对 Web 页的内容、格式及 Web 页中的超级链接进行描述Web 浏览器的作用就在于读取 Web 站点上的 HTML 文档，再对文档中的HTML标记逐行进行解释，最后在用户的电脑上显示相应的 Web 页面,HTML简介,HTML：HyperText Markup Language 超文本标记语言超文本:文字+图片+音视+链接标记语言:浏览器根据标记来显示
2、内容来自于SGML:标准通用标记语言专门用于在Web上传递信息HTML文件能独立于各种操作系统平台。在 UNIX 系统中，HTML文档的后缀为“.html”，而在 WINDOWS 系统中则为“.htm”HTML规则是由W3C（万维网组织）制定的，最新版本是HTML4.01,HTML元素与标记 4-1,编写HTML时，我们需要用元素来定义文档的结构、显示外观、与其它文档的链接等。HEAD、BODY、P、UL等都是元素当我们真的要将这些元素插入到文本中去时，需要用尖括号（“”）将它们括起来。这样，我们得到了、。现在，它们已经不再称为元素，而被叫做标记（tag）,HTML元素与标记 4-2,HTML
3、中的元素通常由3部分组成：开始标记：由尖括号括起来的元素，如：、内容：结束标记：在元素名前加上一个“/”（斜杠）符号，并由尖括号括起来，如：、绝大多数元素都有开始标记和结束标记当浏览器看到一个开始标记时，它就会知道随后的文本的类型都是由开始标记所定义的类型决定的，直到它找到一个结束标记,HTML元素与标记 4-3,大多数元素都有内容，这些内容包含在开始标记和结束标记之间。但有些元素没有任何内容，如BR，它产生一个换行动作有些元素的结束标记是可选的（或没有结束标记）。例如，LI和P，分别表示列表项目元素和段落元素元素是大小写不敏感的，建议使用大写,HTML元素与标记 4-4,所有元素都具有一些属
4、性。属性都有值，属性值总是包括在双引号之中。属性一般小写。如：align=“center”width=”33%”有些属性的值来自于W3C设置标准时创建的值的列表。例如，valign属性的值有top、middle、bottom、baseline四种有些属性用数字来代表它们的值。数字可以是百分比数字有些属性的值是颜色。可以用颜色名称（只有16种）或者颜色的16进制值,实体（Entities）,实体：就是那些你想显示出来，但键盘上又没有的字符，或者是哪些对HTML有特殊意义的字符（比如、表示版权符号,常用实体,12.html,HTML注释,语法：浏览器会完全忽略掉注释中的内容,元素嵌套,定义：在某个
5、元素之内使用另外一个元素元素嵌套的一个重要规则是：你必须在结束外层元素之前结束内层元素。无效格式是：你好吗？我很好 有效格式应该是：你好吗？我很好,HTML语法形式,标记(元素)的3种语法形式：内容 例如：文字 例如：例如：,HTML文档结构,文件头，可以省略,文件体，标记一般不省略,典型HTML我会努力的！,01.html,版本信息，可以省略,常用标记介绍,、字体标记等文字布局等图片标记表格表单框架,中的常用标记 2-1,文字“文字”将显示在浏览器窗口的标题栏上：元数据，用于设置一些头信息。元数据是关于网页信息的信息，可包括作者的姓名、公司名称等的内容不会在浏览器中显示出来,02.html,
6、中的常用标记 2-2,定义CSS样式表用于定义在网页中使用的脚本定义需要链接的资源及其内容类型，常用于引用样式表,2-1,BODY元素有很多属性，可以利用这些属性来定制文档的外观。如背景色、文本颜色、链接颜色等等在HTML 4中，这些外观显示效果都是在样式表（CSS）中设置的：可以减少标记的数量使文档的零乱程度降到最低W3C建议那些BODY属性应该被拒绝使用,2-2,示例：颜色都是由红、绿、兰3种颜色按比例组成的。在颜色的16进制表示法中，前两位数字表示红色的数量，其后的两位数字表示绿色，最后两位表示兰色FF0000 表示纯红色FFFFFF 表示白色000000 表示黑色使用16进制表示颜色时
7、，必须在这个16进制数前加一个“”号,16 进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.,03.html04.html,常见颜色的代码,锚点标签-,为了建立一个能在HTML文档内部进行跳转的链接，需要使用A元素的name属性先建立一个锚点语法：当在HTML文档中的某个地方写了该标记之后，就在该位置定义了一个名字为AnchorName的锚。说白了，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文档的这个位置,链接标签-,为了建立超级链接，需要使用A元素的href属性语法：文字(或图片)当鼠标点击“文字(或图片)”时，根据“url”内容的不同，将会发生下
8、面3种情况之一：href=“新文档名”：打开一个新的HTML文档href=“新文档名#point”：打开一个新的HTML文档并跳转到锚点point处显示。point是在新文档中已经定义好的锚点href=“#point”：跳转到本文档的锚点point处显示。point是在本文档中已经定义好的锚点,05.html06.html,HTML中的路径问题,本地路径c:dir1dir2绝对路径相对路径images/01.jpg././images/01.jpg/images/01.jpg=http:/mysite/images/01.jpg例如：,07.html,标题字体标记,语法：其中：#=1、2、3、
9、4、5、6说明：按标题级别用黑体字显示标题内容自动插入空行：字体最大：字体最小,09.html,字体设置标记,语法：说明：size：1 2 3 4 5 6 7 或者+、-。例如：color：可用预定义的名字red、blue等或16进制数face：客户端可获得的字体 Hellow World!,10.html,文字布局,对齐属性align,该属性在许多标记中都有，如：取值：left right center top middle bottom对齐到中间,14.html,图片标记,只有开始标记，无内容及结束标记语法：属性说明：src：图片路径，一般使用相对路径alt：图片无法显示时显示的文字bor
10、der：边框的厚度align：=left right top middle bottom图文混排时用于和图片的对齐,15.html,单元格（用来表示，每个单元格可以有背景颜色和背景图片）,表格（用来表示，表格可以有背景颜色、背景图片）,表格边框,每一行可以用来表示，单元格放在行中，每行可以有很多的单元格。,表头（用来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）,表格 5-1,表格是从左到右、从上至下创建的语法：内容 说明：cellpadding：单元格内容与其边框之间的空白空间大小cellspacing：单元格间以及单元格与表格外边框之间的空白空间大小border：包围表
11、格的框架的宽度（像素）frame：可以看到的表格边框的边rules：单元格之间的界线width：以像素为单位或以窗口百分比形式定义的表格宽度,表格 5-2,frame属性可取以下值：void：没有边。这是缺省值above：只有顶边below：只有底边hsides：只有顶边和底边vsides：只有左边和右边border：四周都有边rules属性可取以下值：none：没有边。这是缺省值groups：只在行分组和列分组之间出现的界线rows：只在行间出现的界线cols：只在列间出现的界线all：所有的行列之间都有界线,表格 5-3,表格的内容可以包含以下元素：CAPTIONCOLCOLGROUPTH
12、EADTFOOTTBODYTRTD,表格 5-3,表格的内容可以包含以下元素：CAPTIONCOLCOLGROUPTHEADTFOOTTBODYTRTD,表格 5-4,元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。,表格 5-5,表格的基本结构定义表格定义表头定义表行定义单元格,表格示例,16.html,表单,表单是一种从从站点
13、访问者处收集信息的方法表单的工作过程：在网页上放置一些数据输入域，如文本框、单选钮、文本区、提交按钮等网站的访问者在自己的电脑上填写上述输入域，并按某个按钮访问者输入的信息通过互联网发送到服务器上服务器处理这些数据向访问者提供一个屏幕确认信息，告诉他数据已经接收到并将对这些数据进行处理表单由两部分组成：FORM元素接受数据的域或控件如果没有FORM元素，表单将绝对不能工作,标记,语法：内容说明：内容：表单控件元素action：告诉表单应该把它收集的数据发送到哪里。method：采用什么方式发送数据。有两种选择：get和postmethod=“get”：发送较少数据（256byte），数据经编码
14、后显示在url中。例如：url/userinfo?username=张三&password=hehemethod=“post”：数据长度无限制，且数据不会显示在url中示例：,INPUT元素,位于之中，用于接收用户输入语法：说明：type：可取下列值之一text、password、radio、checkbox、hidden、select、submit、reset、textareaname：提交到服务器端的变量的名字，用于标识控件,输入控件5-1,text：表示一个文本框语法：属性说明：name：用于标识该文本框value：文本框中的值maxlength：可输入的最大字符长度size：文本框宽度
15、（字符）password：表示一个接收密码的文本框语法：属性说明：name：用于标识该密码框value：密码框中的值maxlength：可输入的最大字符长度size：密码框宽度（字符）,输入控件5-2,radio：表示一个单选按钮语法：单选按钮是成组创建的。通过将所有单选按钮的name属性设置为同一个值，即可创建一个单选按钮组，然后为每一个单选按钮的value属性分配一个唯一的值示例：你最喜欢下面哪一种颜色？redgreenbluecheckbox：表示一个复选框语法：属性说明：disabled：复选框不能被选择,rach.htm,输入控件5-3,列表框语法：说明：name：列表框的名字mul
16、tiple：表示可以选中多个值。必须与size属性结合使用size：定义列表框中可以同时被看到的行数下拉列表框：选项用OPTION元素来定义语法：内容 说明：内容：文本value：选项的初始值。一般都与“内容”相同selected：选项被选中,输入控件5-4,hidden：表示一个隐藏域语法：说明：不会在网页中显示出来，是一种把数据从一个页面传送到另一个页面的方法示例：textarea：表示一个多行多列文本框语法：内容 属性说明：name：文本框的名字rows:允许的文本行数cols:可见的文本列数,输入控件5-5,submit：提交按钮语法：说明：创建一个提交按钮，它负责把表单中的所有数据提
17、交给form元素的action属性value：定义按钮上显示的文字reset：重置按钮语法：说明创建一个重置按钮，它负责把表单中所有域的值重新设置为使用value属性定义的值,表单示例,17.html,框架,框架是用来提高网页导航性能的一种方式。框架用来划分浏览器窗口以使窗口中能够容纳多个逻辑页面主框架是一个标准HTML文档，但没有BODY元素，而是有一个HEAD元素及一个FRAMESET元素,基本语法：您的浏览器不支持框架，请考虑升级您的浏览器！,FRAMESET元素,语法：内容说明：内容：frameset元素、frame元素rows：用于指定各行从上至下的宽度。缺省值为100，意思是一行。
18、可以以像素、占浏览器窗口的百分比或相对宽度为单位进行定义cols：用于指定各列从左至右的宽度。缺省值为100，意思是一列。可以以像素、占浏览器窗口的百分比或相对宽度为单位进行定义,只有行或列的框架,只有行的框架,行列都有的框架,例如：说明：第一行占网页高度的1份，第二行占5份尽量使用相对量来定义行高和列宽,框架示例1,18.html,19.html,嵌套FRAMESET,FRAMESET：外层的FRAMESET用来定义行，内层的FRAMESET用来把第2行划分为2列示例：.第一行中的FRAME元素第一列中的FRAME元素第二列中的FRAME元素,FRAME元素,告诉浏览器每个框架中装入什么内容
19、语法：说明：name：定义框架的名字（框架的目标名）src：用于定义该框架中最初装入的内容。可以使用相对路径或者绝对路径scrolling：定义框架是否需要滚动条。可取下列值：yes、no、auto对创建的每一个框架都要定义FRAME元素,链接与框架,当框架有了名字以后，可以使用A元素的target属性使那些链接网页装入到框架中去,主框架：index.html子框架：navigate.html.title和meta元素解决方案客户服务白皮书工作机会,index.html,A元素的TARGET属性,Target名必须以字母开始。以下划线（_）开始的名字是保留的target名，它们是HTML为帮助你使用框架而提供的。保留名说明：_blank：使链接的结果装入到一个新的窗口中_self：使链接的结果所装入的框架与A元素的结果所装入的框架相同_parent：使链接的结果装入到当前框架的父窗口_top：使链接的结果装入到浏览器的整个窗口，从而取消框架。,20.html,HTML网上行,互联网打开网页IE菜单查看源文件IE菜单文件另存为学习其他的优秀的HTML设计可以查看CSS可以查看Javascript,
