第3单元 网页编程基础.ppt

生成订单页面 生成订单页面 订单管理页面 系统设计—页面结构图 采用模型便于对系统抽象化 小结： 表格的基本属性 border : 指定表格是否有边框。 width : 指定表格的宽度，绝对象素值、百分比均可。 bgcolor : 指定整个表格或者行或者单元格的背景颜色。 background : 整个表格或者行或者单元格的背景图片。 bordercolor : 指定表格边框的颜色。 cellpadding : 单元格边框到单元格内容之间的间距。 cellspacing : 单元格之间的间距。 表格的背景色和尺寸设置 表格的尺寸设置： 　　TABLE width=n1 height=n2 例如：TABLE width=200 height=100 表示一个长为200像素，宽为100像素的表格。 TABLE width=20% height=10% 表示表格：宽为窗口的20%，高为窗口的10% 表格的颜色设置： 　　表格的背景色 TABLE bgcolor=颜色值 　　行的背景色　TR bgcolor=颜色值 列的背景色 TD bgcolor=颜色值 颜色值可用RGB(红/绿/兰)十六进制值表示, 或用预定义色彩名称：red ，blue，yellow等。 * * * * 学习内容： 了解HTML的基础基础知识和常用标签 掌握表单控件、页面数据的提交方式 第3单元 HTML基础 一.HTML语言概述 HTML(Hyper Text Markup Language超文本标记语言) 超文本:提供链接到其他页面或同一页面的其他位置的文本 标记: 用来描述文档结构、数据显示格式和建立超级链接等; 语言: HTML是一种用于文档布局和超文本链接规范的语言。 定义了特殊的、嵌入式指令的语法和放置方法，用于在浏览器中显示文档的内容，如文本、图像以及其他支持的媒体等。 HTML的解释执行： 先将网站中的HTML文档下载到本地计算机中，再通过本地机器上的浏览器将文档解释为网页, 并在浏览器窗口中显示。 Web浏览器：解释超媒体文档。 标准HTML在各浏览器会产生同样效果，但浏览器一般采用技术和标准不尽相同，因此效果略有不同。 与HTML相关的概念： DHTML(动态HTML)=HTML+CSS(层叠样式表)+ JavaScript XHTML(可扩展HTML)=用XML规范编写的HTML HTML标签 HTML的标签由普通词语、缩写词和注释构成。 标签的语法格式： 双标签：标记名 属性1=值1 属性2=值2 …内容/标记名 单标签：标记名 属性1=值1 属性2=值2 …/ 说明：一个标记的作用范围在始标签和尾标签之间； 内容为被这对标签施加作用的部分。 属性常表示标签的附加信息,属性值的引号可省略; 标签名和属性名是否区分大小写, 取决于浏览器和服务器 单标签：只需单独使用即可完整地表达意思。 如: P/表示一个段落的结束，并在段落后面加一空行。 html,head,title body,!-- 结构化标记 p,div,br,hr font,b,i,h1~6 文本标记 table, tr, td 表格标记 form,input,select option,textarea 表单标记 img,a,style,link frameset,frame 其它标记 HTML文档结构 HTML不是一种程序 HTML文档归根结底就是一种文本, 而不是一种程序。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX、WINDOWS等)。 HTML…/HTML 标签标记HTML文档 的开始和结束 浏览器处理代码 并进行显示 HTML 网页 头部部分 头部包括：标题和文档中用到的其他信息 包括在HEAD…/HEAD标签内 主体部分 主体部分包含：文本、图像和链接。 包括在 BODY…/BODY 标签内 文档头部标记 头部标签head 头部标签中包含关于所在网页的信息, 主要被浏览器所用, 不会显示在网页的正文内容里。 文档标题标记：title文档标题/title 链接标记link 用于建立与外部文件的链接, 常用于对CSS外部样式表的链接 例： link rel=stylesheet type=text/css href=theme.css / 样式标记：用于定义格式 style type=text/css选择器名{属性 : 属性值}/style 例： style type=text/cssH1 {color:red}/style 基路径base:为该网页上所有资源指定默认路径和目标(target) 将默认路经(href)与相对路径组合成绝对URL 例： base href=http://l