HTML和脚本语言.ppt

第2章 HTML与脚本语言,2.1 HTML 基 础 知 识,HTML （Hyper Text Markup Language） 是标准的通用描述语言SGML（Standand Generalized Markup Language ）子集， 它以描述性标注（ Markup Tag）描述了所标注文字或文字段的特性以及被标注文档的结构和组成。 HTML的基本结构 文件头和文件体组成, 一个简单的HTML示例 欢迎光临我的主页 这是我第一次做主页，无论怎么样，我都会努力做好！ ,2.1.1 HTML标记,基本及标题栏标注 文 档 整 体 属 性 文 本 标注 格 式 排 版 超级链接,基 本 标 注: : 创 建 一 个HTML 文 档 : 设 置 文 档 标 题 以 及 其 它 不 在WEB 网 页 上 显 示 的 信 息 : 设 置 文 档 的 可 见 部 分 标 题 栏 标 注: : 将 文 档 的 题 目 放 在 标 题 栏 中,文 档 整 体 属 性 :设 置 背 景 颜 色， 使 用 名 字 或 十 六 进 制 值。 :设 置 文 本 文 字 颜 色， 使 用 名 字 或 十 六 进 制 值。 设置页面的背景图象，使用“.jpg” 或“.gif”两种格式的图象。 link：设置未被浏览的超级链接颜色，使用名字或十六进 制 值。 vlink：设 置 已被浏览的超级链接颜色，使用名字或十六进 制 值。 alink：设 置浏览器当前选中的超级链接颜色，使用名字或十六进 制 值。,十六种颜色及其十六进制RGB值对照表,文 本 标 注 创 建 预 格 式 化 文 本 创 建 标 题,n=16，1最大，6最小 创 建 黑 体 字 创 建 斜 体 字 加 重 一 个 单 词（ 通 常 是 斜 体 加 黑 体） 加重一个单词（通常是斜体加黑 体） 设置字体大小，从1到7（小 大） 设置字体的颜色，使用名字 或十六进制值,格 式 排 版（一） 用来创建一个新的段落。表示一个段落的开始，结尾标记可以省略，但是一般情况下，为了防止文档出错，尽量不要省略结尾标记。 align属性将 段 落 按 左（默认的对齐方式）、中、右对齐。 插 入 一 个 回 车 换 行 符。 从两边缩进文本。 创 建 一 个自 定 义 列 表。 放 在 每 个 定 义列 表之 间，用来标示定义条目。列表项自动换行并左对齐。 放在标示定义条目 之 间，用来在段落第一个字前面留出空白。,格 式 排 版（二） 创建一个标有数字的 有序列表。属性type用于设定列表符号的款式五种（1、a、A、i、） 有序列表举例 创建一个无序列表，属性type用于设定列表符号的款式包括（disc、circle、square）。 放在有序或无序列表项之间。用来增加列表项。 无序列表举例,超级链接： href:给出了该超级链接所指向的页面和文件相对于当前页面的相对路径或绝对路径。 target:指定链接的目标窗口。个 例如： 青岛科技大学 创 建 一 个 自 动 发 送 电 子 邮 件 的 链 接 信息学生 自定义列表,表标题,2.1.2 HTML表格,表格是一种能够有效的描述信息的组织方式，由行、列和单元格组成，可以很好地控制页面布局。表格的定义通过，和标签实现。 表格的一般样式 :,1. 建立表格 用法： 其功能是创建一个空的表格，并指定表格的整体外观，此时在浏览器中看不到该表格，只有添加行后才能看到。表格标记常用的属性如下：,border=“size“：设置表格边框大小。 width= “size“：设置表格的宽度（像素或百分比）。 height=“size“：设置表格的高度（像素或百分比）。 cellspacing=“size“：设置单元格间距。 cellpadding =“size“：设置单元格的填充距。 background =“URL“：设置表格背景图像。,bgcolor =“colorvalue“：设置表格背景色。 align=“alignstyle“：设置对齐方式，alignstyle可取值: left（左对齐）、center（居中）和right（右对齐）值之一。 cols =“size“：设置表格的列数。 2. 定制表格 使用只是定义空表格，还需要定义表标题、行、列标题和单元格。 1）定义表标题 用法： 其功能是定义表格的表标题，其属性较少使用。,2）定义行 用法： 其功能是定义表格的一行。对于每一行，可以定义行属性，常用的行属性如下：,bgcolor=“colorvalue”：设置行背景颜色。 background=“URL”：设置表格行的背景图像。 align=“alignstyle“：设置行对齐方式，alignstyle可取值left（左对齐）、center（居中）和right（右对齐）值之一。 valign=“valignstyle“：设置行中单元格垂直对齐方式，valignstyle可取值top（顶端对齐）、middle（居中）、bottom（底端对齐）和baseline（基线对齐）值之一。,3）定义列标题 用法： 其功能是定义一个列标题。对于每一行，可以定义行属性，常用的行属性如下： bgcolor=“colorvalue“：设置列标题背景颜色。 background=“URL“：设置列标题背景图像。 align=“alignstyle“：设置列标题对齐方式，alignstyle可取值left（左对齐）、center（居中）和right（右对齐）值之一。 valign=“valignstyle“：设置列标题垂直对齐方式，valignstyle可取值top（顶端对齐）、middle（居中）、bottom（底端对齐）和baseline（基线对齐）值之一。,4）定义单元格 用法： 在每一行中可以定义若干单元格。单元格的常用属性如下： bgcolor=“colorvalue“：设置单元格背景颜色。 background=“URL“：设置表格单元格的背景图像。 rowspan=“num“：设置单元格所占的行数。 colspan =“num“：设置单元格所占的列数。 align =“alignstyle“：设置对齐方式。 valign =“valignstyle“：设置单元格垂直对齐方式。 width =“size“：设置单元格宽度。 height=“size“：设置单元格高度。,表格举例1,表格举例2,2.1.3 HTML图像,Web页面中可以使用标签为页面添加图像，使得页面更加漂亮。在Web页面上可以显示.gif, .jpeg 等格式的图像。,举例,2.1.4 HTML 框架,框架： 其作用是将浏览器窗口划分为若干个区域，每个区域分别显示不同的网页。窗口可水平、上下和嵌套分割。 框架标记：主要有两部分组成 框架集：用于定义一个窗口中显示的框架数、尺寸等。 框架：用于定义网页上的显示区域。,2.1.5 HTML 创建移动的文本,其作用是网页中设置一些移动的文字。 标记格式： 要滚动显示的文本信息 属性： behavior=alternate/slide/scroll bgcolor=颜色 scrolldelay=150 移动速度（ms） direction=left/right 简单静态网页设计综合示例,2.1.6 HTML 表单,表单： 网页中具有可输入表项及项目选择等控制所组成的栏目称为表单，它是与用户交互信息的主要手段，在HTML页面中起着重要作用。 表单的组成：一般由表单标记和表单域组成。,表单标记格式： 属性： name：表单名。 action：用来指出当这个表单提交后需要执行的驻留 在Web服务器上的程序名（包括路径）是什 么。一旦Internet网络用户提交输入信息后 服务器便激活这个程序，完成某种任务。 target：用于确定服务器程序将结果返回时在哪一个 框架窗口中显示，默认值为“_self”。,method：发送表单的HTTP方法，有二种方法。 post方法：页面将数据传送给处理程序。 get方法：将表单的输入信息作为查询串附加到目标URL的 后面。 例： 例： /my_page.aspx?bookid=“1245”,表单域: 表单域是用户输入和交互的主要界面，包括了 ， ， ，四种类型。 其中： 类型又包含Text，Radio，Checkbox， Password，Submit/Reset，Image，File，Hidden，Button等类型。 标记用来在由标记指示的列表框中指示一个选项。,2.2 ASP.NET网页的XHTML部分,2.2.1 XHTML 1. 什么是XHTML XHTML是eXtensible HyperText Markup Language的英文缩写，即可扩展的超文本标记语言，它不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）：,XHTML是用来代替HTML的，是2000年W3C（万维网联盟）公布发行的。 XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。 XHTML是基于XML的应用。 XHTML更简洁更严紧。 XHTML也可以说就是HTML4.0的一个升级版本（W3C描述它为HTML 4.01）。,除此之外XHTML和HTML基本相同。,2. HTML与XHTML的区别 两者的区别主要体现在以下几个方面。 1）大小写 HTML不区分大小写，HTML元素和属性名称可以是大写、小写或大小写混合。但是XHTML中大小是敏感的。 例如，XHTML中，和是两个完全不同的标记。因此XHTML文档要求所有元素和属性名称必须小写，而属性值则大小写均可。 2）标记嵌套 在HTML中，即使使用了不正确的嵌套，一样可以在很多浏览器中使用；而XHTML则要求嵌套必须完全正确。 例如，姓名不能写成姓名。,3）有否结束标记 在HT ML中，有些标记是可以没有结束标记的，而XHTML要求所有标记都必须有结束标记。 例如，HTML中的在XHTML中必须写成或者简单地写成。 注意：中的斜杠前有一个空格。 4）引号 HTML中的属性值可以用引号引起来，也可以不使用引号，但XHTML中要求所有属性值都必须加引号，即使是数字也需要加引号。例如： 除此之外，XHTML还要求属性值不能省略。,5）id和name HTML中每个元素都可以定义name属性，也引入了id属性，这两个属性都可以标识某一个元素。 而在XHTML中，每个元素只有一个的标识属性id。,2.3 动态HTML技术,动态HTML技术简介 JavaScript语言 层叠式样表CSS简介,2.3.1 动态HTML技术简介,动态 HTML（Dynamic HTML，简称 DHTML）并不是一门新的语言，其思想是：浏览器从服务器下载网页后，利用浏览器本身的资源，在不增加服务器负担和网络传输负担的前提下，使网页的某些元素“动”起来。它是多项技术的综合。可分为三个方面： HTML 定义页面中的各种元素的显示格式，难进行微量调整、难定位等。 XHTML:严谨而准确的html,标记区分大小写，可设置属性等。,CSS （ Cascading Style Sheet ） 是层叠样式表是一种格式化网页的标准方式，它就颜色、字体、边框、定位等格式提供了多种属性，这些属性均可适用于 HTML 标记符，从而使网页的格式设置功能大大增强。 客户端脚本 JavaScript是 DHTML 技术的关键，它实际操纵 Web 页上的 HTML 和 CSS。,使用 DHTML 技术的效果 动态地增加、删除和修改文本、图像。 动态改变文本、图像的式样。 将事件、脚本、CSS等技术相结合改变元素的位置。 使用 DHTML 技术的优势 由浏览器完成而无需请求 Web 服务器。 降低了网络传输量以及 Web 服务器的负载。,使用 DHTML 技术的要求 DHTML 能实现很强大的功能，但由于它是一个新技术，因此只在最新的浏览器中得到支持，例如 Internet Explorer 4.0/5.0、Netscape Navigator 4.0 等。另外，对于不同的浏览器，DHTML 的实现往往是不同的，需要编写不同的代码。,2.3.2 JavaScript语言基础,是一种通用的解释型脚本语言，可直接嵌入到HTML页面中，和HTML紧密地结合在一起。其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。与操作系统无关。,一、 基本语法,1.语法特点： 与C或C+语言近似 命令、函数名、变量命都区分大小写。 每条语句后可不用分号结尾（建议加分号）。 语句块用界定。 单行注释用/;多行注释用/*/。 通常只用于编写小程序（scirpt）,变量使用前不一定声明，若声明也不一定指定数据类型，运行时也不强制检查数据类型。 书写代码简单。,2.使用方法： 将脚本标记符 嵌入在标准的HTML网页上 HEAD 部分。 3.基本语法： 举例 ,二、 数据类型,JavaScript 支持的数据类型如下: 1.数值类型： （ Number ） 包括整数和浮点数以及 NaN，当数值表达式中混合使用不同类型的数值时，它透明地将一种类型转换成另一种类型。例如，整数用在浮点表达式中将被转换为浮点型。 整数 ：在 JavaScript 中可以使用十进制、十六进制和八进制表示其值。,例：十进制: 100，1234。 十六进制：前两位必须是 0X 或 0x。例如:0xff（相当于十进制的 255）、0X400（相当于十进制的 1024）。 八进制：第一位必须是 0。例如，0377（相当于十进制的 255）、02000（相当于十进制的 1024）。 浮点数：由整数部分加小数部分组成，或者由整数部分加指数部分组成。例如，以下数值都是有效的浮点数： -12.32 、 5E7 、1e-2 NaN：表示数值不可确定 。,2.布尔型： （Boolean） 包括逻辑值 true 和 false。主要用来说明或代表一种状态或标志，以控制操作流程。布尔值之间可以进行逻辑操作，构成布尔表达式。 3.String（字符串） 字符串是指使用单引号（）或双引号（“）括起来的一个或几个字符，例如： “This is a book of JavaScript”、3245、 “ewrt234234“ 等。如果字符串是以双引号开头，则必须以双引号结束，同样，单引号也必须配对出现。 4.Undefined（未定义） 表示该变量还没有赋值，也就是还没有被赋予任何类型。,5.Object（对象） JavaScript中可以对象，可定义数组对象、字符串对象、日期对象以及数学对象；同时还可以使用浏览器的内部对象，实现网页中的元素动起来，以增强网页的生动性。 例： Window：窗口对象，提供了处理浏览器窗口方法和属性。 Document：用于存储当前窗口中的 HTML 文档（网页）信息。 Navigator：浏览器对象，提供有关浏览器的信息。 location ：用于存放浏览器当前显示网页的 URL ，并可对该 URL进行分析；引导浏览器到指定地址。 history ：提供了浏览器访问过的 URL 历史记录 。,window 对象 window 对象是浏览器对象层次中的最顶级对象，只要浏览器窗口打开，即使没有任何页面，也会自动建立该对象是；包含了 document、navigator、location、history 等子对象。 1.window 对象的属性： closed ：表明窗口是否关闭的布尔值。 opener ：存放的是当前所打开窗口的父窗口的属性信息。 defaultStatus ：表示浏览器窗口下面状态栏中的默认的显示信息。 Status：表示窗口状态栏中当前显示的信息。 Name：表示窗口名称。 length ：表示当前窗口中的框架个数。 举例,2.window 对象的方法 window 对象提供了多种方法，用于实现与窗口有关的各种常用功能，例如，打开和关闭窗口、创建各种弹出式对话框以及进行各种定时设置等。 常用方法： alert(string) ： 将参数提供的字符串显示在一个提示对话框中，该对话框中包含一个“确定”按钮（对于英文版的浏览器，应是“OK”按钮），单击该按钮可以关闭该按钮。 举例 confirm(string)： 显示确认对话框，其中包含“确定”和“取消”按钮（或 OK 和 Cancel 按钮），如果用户单击“确定”按钮，confirm() 方法返回 true，并且关闭当前窗口；如果用户单击“取消”按钮，confirm() 方法返回 false。 举例 prompt(string1,string2)： 弹出一个要求键盘输入的提示对话框，参数 string1 的内容作为提示信息，参数 string2 的内容作为文本框中的默认文本。 举例,document 对象： open(): 打开一个新文档。 close(): 关闭当前文档。 write(value1,value2.): 将用逗号分隔的参数作为字符串添加到文档中。如果参数有不是字符串，则在被添加到文档之前转换为字符串。 writeln(value1,value2.): 举例 将用逗号分隔的参数作为字符串添加到文档中。与 write() 方法的不同之处在于：writeln() 方法在最后一个参数写入之后在文档中添加一个换行符。如果有参数不是字符串，则在被添加到文档之前转换为字符串。,三、 运算符,算术运算符：算术运算符通常用于算术运算，包括加法运算符 +，减法运算符 -，乘法运算符 *，除法运算符 /，求余运算符 %。 比较运算符：用于对表达式进行比较，主要包括小于比较运算符 ，大于或等于比较运算符 =，等于比较运算符 =, 不等于比较运算符 !=。,逻辑运算符用于执行逻辑运算，主要包括逻辑与运算符&，逻辑或运算符|，逻辑非运算符!,逻辑异或运算符。 位运算符主要用于将两个值进行按位运算，主要包括按位与运算，按位或运算，按位取反运算，按位异或运算，按位左移运算，按位右移运算和无符号右移。其中，按位与运算的符号是“&”，按位或运算的符号是“|”，按位非运算的符号是“”，按位异或运算的符号“”,四、控制语句,条件语句：条件语句用于控制程序根据不同的条件执行不同的代码，最简单的条件语句为if-else语句。举例 循环语句：循环用于重复执行一组语句。JavaScript的循环语句有while循环和for循环。while当指定的循环条件为true时，执行循环体中的一系列的语句。,五、函数,定义函数 在使用函数之前，必须先定义函数。函数定义常放在 HTML 文档头中。 定义函数的格式如下： function functionName (parameter1, parameter2 .) statements 图片切换举例,六、窗体的使用,窗体（或者叫表单）: JavaScript中可以访问Web页面中的窗体（或者叫表单），表单是网页中实现信息交互的一种重要手段，经常用于收集用户信息或实现在线调查等需要用户输入的情形。如果要在网页中插入表单，应使用 FORM 标记符，然后将各种表单控件添加到该 和 之间。 使用窗体（表单）： 当用户在网页中添加了 FORM 标记符后，既创建了一个 form 对象。用户可以通过直接使用表单名称方式访问网页中的 form 对象。 获得了 form 对象之后，即可以通过使用其属性、事件和方法来实现各种功能。 举例,1、表单的属性、事件与方法 action ：表示表单提交时执行的动作，相当于 FORM 标记符 的 action 属性，它通常是一个服务器端脚本程序的 URL。 method ： 表示发送表单的 HTTP 方法，相当于 FORM 标记符的 method 属性，取值为 get 或 post。 name ：表示表单名称，相当于 FORM 标记符的 name 属性。 onReset ：当用户单击“重置”按钮时触发，执行相应的脚本代码。 onSubmit ：当用户单击“提交”按钮时触发，执行相应的脚本代码。 reset() ：将所有表单元素的值重新设置为它们的默认值，相当于单击表单中的“重置” 按钮。 submit() ：提交表单，相当于单击表单中的“提交”按钮。,2、访问表单元素 单有 form 对象并不能构成一个有用的表单，要使表单能够起到传递信息的作用，其中必须包含各种表单元素，例如，文本框（text）、单选框（Radio）、复选框（checkbox）、按钮（button）等。 由于这些表单元素都是包含在表单中，因此是 form 对象的子对象，可以直接用名称进行访问。例如，如果一个名称为 form1 的表单中包含一个名称为 text1 的文本框，则可以用 document.form1.text1 来访问该文本框。,对于姓名和电子邮件地址，仅判断是否填写内容，如果没有填写则弹出对话框提示；对于身份证号，除了验证是否填写内容以外，还提供更进一步的验证-如果填写的数据不是由数字组成，或者数字少于 15 位，则将非法的身份证号用红色显示并弹出对话框提示。当用户单击提交“按钮”后，即执行表单验证函数 validator()，如果有不合要求的数据，则无法提交表单 ；直到所有的数据都合法，才能将表单数据提交到 action 属性指定的 URL。 举例,举例：客户端表单验证,2.3.3 级联式样表CSS简介,样式 样式是指每一个网页元素呈现在浏览器中的风格，比如字体的大小、颜色、页面的背景色、背景图等。 CSS的特点 可对网页进行“精细加工”，以美化由HTML初步定义的网页。 一个CSS式样表可以用来定义多个HTML文本，只要改变CSS文件，多个HTML文档的显示都将随之改变；反之依然。 多个CSS的定义出现矛盾时，范围越小的优先级越高。 CSS提供的属性能用脚本语言控制。 CSS与XML结合能实现更复杂的式样。,CCS样式设计 定义样式的基本格式如下： 样式属性1:值1; 样式属性2:值2; （1）内联式样式设置 通过style属性指定所修饰的元素使用的“私有样式”，用法如下： style=“属性1:值1;属性2:值2;属性n:值n“ 例如： 中华人民共和国 教育部,（2）直接嵌入式样式设置 使用和标记建立一个或多个样式，置于之间，在内直接使用这些样式。标记有一个属性type，它指出样式的类别，如果使用CSS样式，则type取值为“text/css”。 例如： 样式引用示例 h1font-size:40px; color:Red; h2font-size:30px; color:Blue; 中华人民共和国 教育部 ,（3）样式表文件设置 所谓样式表文件就是将网页元素的样式定义设计为一个独立的文件。凡是在网页的部分与该样式表文件建立链接的HTML文件，其页面元素的样式就会按照样式表文作中的定义显示。样式表文件的扩展名为“.css” 样式表文件中样式定义的一般格式如下： 样式定义选择符 样式属性1:值1; 样式属性2:值2; 例如：样式表文件StyleSheet1.css的内容为： body background-color:#33bb66; h1 font-size:40pt; color:Blue; h2 font-size:30pt; color:White;,在网页文件中引用该样式表文件只需要在网页的与之间添加如下代码： 其中，rel规定了被链接文件的关系，取值永远是“Stylesheet”，type属性规定了链接文件的类型；href属性则指定了要链接的样式表文件的URL。, 一个简单的HTML示例 中华人民共和国 教育部 欢迎光临我的主页 这是我第一次做主页，无论怎么样，我都会努力做好！ 演示 ,样式表文件中设计每个样式的“样式定义选择符”指样式定义的对象，可选项有：HTML标记、用户自定义的类、用户自定义的ID和虚类等。,（1）HTML标记 HTML标记是最典型的选择符类型。如果有多个不同的标记要使用相同的样式，则可以采用编组