第三章网页基础

1、HTML 文字段落控制HTML 表格布局和DIV+CSS布局使用JavaScript实现表单验证本章要点本章要点HTML（Hyper Text Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，

2、其主要特点如下： 1 简易性，HTML版本升级采用超集方式，从而更加灵活方便。 2 可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。 3 平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上.1.HTML 文档的一般结构HTML其实是文本，它需要浏览器的解释，其基本结构大体可以分为3个部分。HTML部分：每个文档都以打开HTML标记开始，以关闭HTML标记结束，即 。 头部分：头部分以 标记开始，以标记结束;此部分包含文档的标题，使用的脚本，样式定义等信息。还可以包含搜索工具和索引所要

3、的其他信息。正文部分：跟在头部分之后的内容。包含需要显示在网页中的文本、图形、链接、表格和表单等。以开始，以 结束。 2.利用记事本的制作网页的步骤具体步骤操作步骤如下。打开记事本。编辑HTML文档。保存HTML文档。浏览HTML文档。3.HTML文档的书写规则元素的开始标记包含在“ ”之间，结束标记包含在“”之间。所有元素必须有相匹配的开始标记和结束标记。文档具有唯一的根元素html，它包含所有其他元素。所有元素必须正确嵌套。标记的属性可以有选择地使用，属性之间没有顺序的要求。元素的属性表示为“名字=值”得形式，值必须包含在双引号或单引号中。属性名不区分大小写，建议用小写表示。HTML并不要

4、求在书写时缩进，但是为了程序的易读性，一般建议使用标记时首尾对齐，内部的内容向右缩进几格。+例题 制作一个简单网页+ 只做一个简单的网页 这里是正文部分 +1.分段标记 分段标记放在一个段落的头尾用于定义一个段落。 标记不但使标记的文本文字独立成为一段还可以时段与段之间显示效果上多空一行。格式为：文字 说明：属性align用来设置段落在页面中的水平对齐方式。其中left为默认取值，表示左对齐；center表示居中对齐：right表示右对齐。例3-2 段落标记的使用+html 段落标记的使用 枫桥夜泊张继月落乌啼霜满天，江枫渔火对愁眠姑苏城外寒山寺，夜半钟声到客船 + 2.换行标记标记是在文档中

5、强制断行，它只有开始标记没有结束标记。格式为： 文本例3-3 换行标记的使用。+ 换行标记的使用 望月怀远张九龄海上生明月，天涯共此时。姑苏城外寒山寺，夜半钟声到客船情人怨遥夜，竟夕起相思。灭烛怜光满，披衣觉篓子不堪盈手赠，还寝梦佳期。 +3.标题标记 HTML文档中应用标记，浏览器会自动将字体解释成“黑体”，同时将内容设置为一个段落。格式为：标题文字 说明：n用来表示标题文字的大小，n取1到6的整数，去1时文字最大，取6时文字最小。属性align表示居中对齐；right表示右对齐。例3-4 比较普通文本与六级至一级标题的不同效果，+例3-4 比较普通文本与六级至一级标题的不同效果+ 标题示例

6、 这是一行普通文字一级标题二级标题三级标题四级标题五级标题六级标题 +4.字体标记 +在网页中为了增强页面的层次感，文字可以用大小、字体颜色来区分。 标记用于控制字符的样式。格式为；+被设置的文字内容 +3-5应用字体标记的事例，+ 字体标题 =3color=redThis is some text!=2color=blueThis is some text!=verdanacolor=greenThis is some text! +1.表格的基本结构+表格由标签来定义。每个表格均有若干行，每行被分割为若干单元格字母td指表格数据，即数据单元格烦人内容。数据单元格可以包含文本、图片、列表、段

7、落、表单、水平线、表格等。格式为：+表头1表头2 表头n +表头1表头2 表头n +表头1表头2 表头n +例3-6网页中简单表格示例+ 简单表格示例 row 1,cell 1 row 1,cell 2 row 2,cell 1 row 2,cell 2 +例3-7表格中单元格间距的设置使用。+ 表格中单元格间距的设置使用 row 1,cell 1 row 1,cell 2 row 2,cell 1 row 2,cell 2 row 1,cell 1 row 1,cell 2 row 2,cell 1 row 2,cell 2 +2.不规则表格+网页中通常会需要使用不规则表格，可以通过设置的r

8、owspan和colspan属性实现。+例3-8 跨列示例+ 跨列示例 1, 1 1, 2 1 , 3 2, 1,2,2 2,3 +1.表单基本概念网页中具有可输入项及项目选择等控制所组成的栏目成为表单。表单的基本语法与格式为：+3种类型按钮的语法格式类型类型语法格式语法格式提交按钮 重置按钮input type =“Reset”name=“控件名”vaule=“按钮名” 自定义按钮input type =“botton”name=“控件名”vaule=“按钮名” +2.常用表单元素及其应用+单行文本框+单行文本框为用户提供了输入单文字烦人页面元素。其格式： +密码框+密码框是提供输入用户密码

9、的页面元素，密码字符串显示为“*”。格式为：+ +按钮复选框复选框的格式：input type =“checkbox”name=“控件名”vaule=“复选框值”checked 单选按钮单选按钮格式为：input type =“radio”name=“控件名”vaule=“单选按钮值”（checked） 多文本框多文本使用标记设置。格式为：多行文本+3.表单综合事例+表单综合事例请留言=姓名：密码：=性别：男女爱好：电影音乐读书旅游=Email:专业：请选择你所选的专业心理学计算机国际贸易=主题：请写下您的留言=留言：=+3.2.1表格布局利用表格布局可以再一个布局表格中使用多个布局单元格对页

10、面进行布局。这是进行web页面布局最常用的方法，也可以使用多个单独的布局表格进行更复杂的布局，或者将一个新的布局表格嵌套在现有的布局表格中进行布局。+例3-11 完成如图+在Dreamweaver中制作该表格布局的步骤如下：+插入一个三行一列宽度是350像素，边框为0像素的表格。+将光标定位到第二行，插入一个1行3列且宽度为100%的表格。+将光标定位到第三行，插入一个5行2列且宽度为100%的表格。+表格布局后的效果+在相应的单元格中插入所需的图像，文字。3.2.2DIV+CSS布局在前面的内容中讲解了HTML和JavaScript，现在我们已经基本可以编出具有简单互动的网页，但是仅仅这样还

11、是不够的，一个专业的网页需要在字体、颜色、布局等方面进行各种设置，需要给用户带来视觉的冲击。接下来的内容将要介绍这种美化页面的技术。1.什么是DIV和CSSDIV是指HTML标记集中的标记 “”，中文可以理解为层的概念。DIV元素是用来为HTML文档内大块的内容提供布局结构和背景。CSS（Cascading Style Sheets）即层叠样式表，也就是通常所说样式表。CSS是一种美化网页的技术。通过使用CSS，可以方便、灵活地设置网页中不同元素的外观属性，通过这些设置可以使网页在外观上达到一个更高的级别2.网页中采用DIV+CSS的优势网页改版维护更加方便快捷。保持视觉的一致性。使页面载入的

12、更快。对搜索引擎友好的程度高。+3.如何使用DIV+CSS进行网页布局+注意：用CSS布局，首先要考虑网页信息的语义和结构。+例3-12 利用DIV+CSS制作经典三栏格式布局。+在Dreamweaver中制作该布局的步骤为：+选择布局工具栏的按钮，在页面上绘制一个层apdiv1，+选择布局工具栏的按钮，在页面上绘制一个层apdiv2+选择布局工具栏的按钮，在页面上绘制一个层apdiv3+经过布局之后的页面效果如图所示3.3.1什么是JavaScript简介JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为

13、浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。Node.js。在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA

14、标准，因此也称为ECMAScript。组成部分ECMAScript，描述了该语言的语法和基本对象。文档对象模型（DOM），描述处理网页内容的方法和接口。浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 JavaScript具有如下特点：JavaScript使用网页增加互动性。JavaScript使有规律的重复的HTML文段简化，减少下载时间。JavaScript能及时响应用户的操作，对提交表单做即时的检查，无须浪费时间交由CGI验证。JavaScript的特点是无群无尽的，只要用户有创意。什么叫事件处理浏览器为了响应某个事件而进行的处理过程。使用事件有3大类引起页面之间跳转的事件，

15、主要是超链接事件。事件浏览器自己引起的事件。事件在发单内部同界面对象的互交。+1. JavaScript的数据类型数据类型数据类型说明说明String字符串类型用单引号或双引号来说明，如“the cow jumped over the moon.”Number 类型支持整数和浮点数。整数可以为正数 0 或者负数；浮点数可以包含小数点，也可以包含一个“e”或者同时包含这两项Boolean类型可能的Boolean值有true和false。这是两个特殊值，不能用作1和0Undefined 类型一个味undefined 的值就是指在变量被创建后，但未给该变量赋值以前所具有的值Null 类型Null 值

16、就是没有任何职，什么也不表示Object 类型除了上面提到的各种常用类型外，对象也是Javascript中的重要组成部分JavaScript的变量变量的长度是任意的，但必须遵循以下规则：第一个字符必须是一个字母（大小写均可），或一个下划线（_）或一个美元符（$）。后续的字符可以是字母 数字下划线或美元符。3.3.4 JavaScript的对象及其属性和方法JavaScript中，可以使用以下几种对象。由浏览器根据web页面的内容自动提供的对象； JavaScript的内置对象，如date，math等。服务器上的固有对象。用户自定义的对象。+JavaScript中的对象是由属性和方法两个基本的元素构成的。对象的属性是指对象的背景色长度名称等。对象的方法是指对属性所进行的操作，就是一个对象自己所属的函数，+例3-13 电子邮件的格式验证+function checkEmail()var strEmail =document.myform.textEmail.value;i