HTML编程基础

第2章HTML编程基础 2 内容提要 本章首先介绍HTML的发展历史 然后介绍HTML的基本框架详细介绍了HTML的各种常用标记 文字标记 图片标记和超级链接标记 等等 介绍CSS的基本使用方法 介绍如何让CSS与HTML协同工作 HTML概述 在20世纪90年代Web网络的迅速兴起 使得HTML空前繁荣 当时 HTML被发展成了许多不同的版本 出于解决这种混乱局面的考虑 迫切需要制定一个公认的HTML语言规范 1995年11月 InternetEngineeringTaskForce IETF 整理了以前的各种版本 倡导并主持开发HTML2 0规范 同年推出HTML3 0技术规范 1996年 WorldWideWebConsortium W3C 的HTMLWorkingGroup开始组织编写新的规范 于1997年1月推出了HTML3 2 在HTML3 2中做了许多重要改动 到1999年下半年推出到现在依然使用的HTML4 0 案例名称 HTML网页框架 案例名称 HTML网页框架程序名称 2 01 htm 这是一段最基本的HTML标识 任何HTML文档都是由一个和标记包含的 然后分为和两大部分 页面的标识一般都是在标识中定义的 HTML文件不区别大小写 浏览器认为和是一样的 在使用的时候需要保持风格的完整性 HTML文件的扩展名可以是 htm或者 html都可以 现在已经没有区别了 原来在Linux操作系统上用html作为文件的扩展名 而在Windows操作系统上用 htm 因为早期的Windows操作系统不支持三个以上字母的文件扩展名 HEAD头元素 HEAD头元素主要包括该页面的一些基本描述语句 META的属性包括 Description 网页的描述信息 Keywords 关键字 当搜索引擎查找时 按此关键字查找 Content type 用来设置该网页的编码 Author 用来设置该网页的作者姓名 Refresh 用来设置网页的自动更新 当CONTENT 3 URL 时 该网页打开3秒钟后 就自动的转到网站 HTML的常用标记 HTML的常用标记有一些共同特点 都放在BODY标记里面 常用的标记有字体标记 图片标记 超级链接 列表 表格和表单等 字体标记 处理文字时通常利用如 xx 的标记定义字符xx的字体显示为隶书 字号是40 颜色是红色 程序2 03 htm说明如何使用文字格式 图片标记 利用 格式可以插入一张图片 myimage jpg文件必须和该HTML文件放在同一个目录下 IMG是HTML的一个标记 是IMAGE的缩写 SRC属性给出要连接的图片的路径和文件名 超级链接 使用超级链接的基本的语法是 XX XX是一个超级链接 连接到Address htm文件 是单词Anchor的缩写 中文的意思是 锚 功能是从一个页面链接到另一个页面 属性HREF定义的是链接到哪一页 书签链接 如果某个页面很大 为了加强层次感 需要引入书签链接 使用的方法和超级链接类似 电子邮件链接 电子邮件链接提供了当点击页面上的链接时 将自动打开默认的邮件发送程序发邮件 列表 列表有两种方式 一种是有序列表 另一种是无序列表 无序列表是所有的行之前都有一个小圆圈 而有序列表是自动排序的 前面有序号 基本表格 是表格的基本标记 代表表格的行 代表表格的列 定义一个三行两列的表格如程序2 09 htm所示 表格的灵活应用 1 ROWSPAN和COLSPAN属性的使用方法 利用ROWSPAN属性设置该单元格占用多行 利用COLSPAN属性设置该单元格是占用多列 Cellpadding和Cellspacing 2 Cellpadding和Cellspacing属性的使用方法 Cellpading的意思是单元格的边距 指的是字与单元格边框的距离 Cellspacing的意思是单元格间距 指的是单元格之间的距离 表格的样式 BORDERCOLOR属性设置表格边框的颜色 BGCOLOR属性设置背景颜色 ALIGN属性设置表格的对齐方式 标记是将内部的文字加粗显示 显示的结果 表单 表单的功能是收集用户信息实现系统与用户交互 比如E mail信箱的注册页面就是一个十分典型的表单页面 表单信息的处理过程为 当单击表单中的提交按钮时 表单中的信息就会上传到服务器中 然后由服务器端的应用程序 例如CGI ASP PHP或JSP等 进行处理 处理后将用户提交的信息存储在服务器端的数据库中 或者将有关信息返回到客户端浏览器上 1 表单头及其属性 表单的通用格式是 XX 表单元素包含在标记中 有两个重要的属性 METHOD Post 或 Get Post和Get方式的区别在于Post是一种邮寄的方式 在浏览器的地址栏中不显示提交的信息 这种方式传送的数据量的大小没有限制 Get方式将信息传递到浏览器的地址栏上 最大传输的信息量是2KB 当不指明是哪种方式时 默认为Get方式 Action属性是设置利用哪个文件来处理所提交的数据 2 表单中常用控件 在常用的表单制作过程中 经常遇到的是按钮制作 输入元素的制作等 常见的表单控件包括文本框 文本域 密码框 多选框 单选框和下拉列表框 等等 除了文本域和下拉列表 其他只要修改TYPE属性就可以了 使用方法如程序2 13 htm所示 块级元素 块级元素包括DIV和SPAN两种标记 DIV称为层标记 有时也称为块标记 利用DIV标记和CSS的定位技术可以做出相当出色的效果 SPAN标记和DIV标记的基本语法是一样的 但SPAN标记和DIV标记的区别还是很大的 使用方法如程序2 14 htm所示 预排版标记 包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上 HTML文件中的英文空格一般不起作用 但是在预排版标记中空格可以显示出来 语法如程序2 15 htm文件所示 设计网页框架 设计网页时 经常用到的一种格式是框架 基本网页框架分成两种 左右框架和上下框架 语法如程序2 16 htm文件所示 案例2 2使用框架 一般情况下工程的主页面都采用这种框架格式 在上面的页面放置网站的图片 右边放置主页面 左边放一个下拉菜单 可以像对普通Windows窗口一样操作网页框架 可以最大化窗口页可以最小化窗口 修改案例2 2右框架的代码 如案例2 3所示 MARQUEE标记 使用的基本语法是 xx 显示的效果是xx就会从屏幕一边跑到另外一边 啦啦啦 我从右向左移 啦啦啦 我从左向右移 啦啦啦 我一圈一圈绕着走 啦啦啦 我只走一次就歇了 啦啦啦 我来回走 啦啦啦 我走一步 停一停 CSS概述 1998年5月12日 CSSlevel2才成为W3C的标准 它是一组样式 样式中的属性在HTML元素中依次出现 并显示在浏览器中 样式可以定义在HTML文档的标志里 也可以在外部附加文档作为外加文档 CSS的功能无比强大 W3C也极力向世界推广这一先进技术 HTML是一种标记语言 而CSS是这种标记的一种重要扩展 可以进一步美化页面 换句话说 CSS是一种用来装饰HTML的标记集合 为什么要使用CSS呢 原因主要有如下四点 1 弥补HTML对网页格式化功能的不足 比如段落间距 行距等 2 字体变化和大小 3 页面格式的动态更新 4 排版定位等 加载CSS样式的三种方式 使用CSS来格式化网页 共有三种方式 在HEAD中引用在BODY中引用作为文件来引用 CSS与标记对应的三种方式 HTML标记和CSS样式表标记有3种方式 标记选择符类选择符选择符 定义超级链接样式 可以指定A标记以不同的方式显示 一个超级链接有几种不同的状态 未被访问链接 Link 已访问链接 Visited 和鼠标移动过 Hover 可以定义超级链接文字的颜色 可以定义字体的大小 一般超级链接都有下划线 可以利用 TEXT DECORATION NONE 将超级链接的下划线去掉 小结 本章作为编程基础 主要介绍两大部分的内容 HTML的常用标记和CSS样式表的使用方法需要重点掌握的是表格和表单的使用方式 加载CSS样式的三种方式和CSS与标记对应的三种方式 本章习题 一 选择题1 下面关于标记的说法不正确的是 A 标记要填写在一对尖括号 内B 书写标记的时候 英文字母的大 小写或混合使用大小写都是允许的 C 标记内可以包含一些属性 属性名称出现在标记的后面 并且以分号进行分隔 D HTML对属性名称的排列顺序没有特别的要求 2 以下标记中 可用于在网页插入图像 A 标记B 标记C 标记D 标记3 在超级链接中 如果指定 框架名称 连接目标将在链接文本所在的框架页内出现 当前页面被刷新 A BlankB SelfC ParentD Top4 是一个 A 文本框B 重新填写的按钮C 下拉菜单D 提高给服务器的按钮5 使用CSS来格式化网页 共有三种方式 A 在HEAD中引用B 作为标记来引用C 在BODY中引用D 作为文件来引用 二 填空题 1 标记用于HTML文档的最前边 用来标记HTML文档的开始 而 放在HTML文档的最后边 用来标识HTML文档的结束 2 表格标记的 属性用于指定表单处理程序的URL地址 属性用于定义数据提交方式 3 标记的 属性用于为输入区域命名 属性用来指定输入区域的默认值 4