PHP-动态网站程序设计完整版课件全套ppt教程(最新).ppt

《PHP-动态网站程序设计完整版课件全套ppt教程(最新).ppt》由会员分享，可在线阅读，更多相关《PHP-动态网站程序设计完整版课件全套ppt教程(最新).ppt（559页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、PHP动态网站程序动态网站程序设计设计(第第2版版)课程介绍课程介绍v课程名：课程名：Web动态网站开发动态网站开发v教材：教材：PHP动态网站程序设计动态网站程序设计v学时：学时：48学时学时（讲授（讲授32学时学时+上机上机16学时）学时）v课程性质：必修课程性质：必修考试：考试：闭卷闭卷，第第20周周课程基本要求课程基本要求v目标：学会制作简单的目标：学会制作简单的动态网站动态网站及各种及各种功能模块功能模块v学习内容：掌握学习内容：掌握PHP的基本语法和内置函数、的基本语法和内置函数、Web交互编程和交互编程和PHP操作数据库的方法操作数据库的方法v授课内容：第授课内容：第1、3、4、

2、5、6、7、8章章v重点：第重点：第3、4、5、7章章为什么要学做网站为什么要学做网站v企业宣传展示的平台企业宣传展示的平台v企业与客户交流的渠道企业与客户交流的渠道v开展电子商务的主要平台开展电子商务的主要平台学习网站制作的过程学习网站制作的过程HTMLCSSJavaScriptASPAjaxPHPJSP客户端语言客户端语言服务器端编程服务器端编程招聘网页设计人员的要求招聘网页设计人员的要求能手工编写代码能手工编写代码懂懂DIV+CSS布局（布局（Web标准）标准）会会PHP会会Ajax摘自电脑报摘自电脑报第第1章章动态网站制作动态网站制作概述概述什么是动态网站什么是动态网站v动态网站是一种

3、动态网站是一种Web应用程序应用程序特点：使用特点：使用HTTP协议协议作为通信协议，通过网络让作为通信协议，通过网络让浏览器浏览器与与服务器服务器进行通信的计算机程序进行通信的计算机程序用户用户网站网站进行交互进行交互动态网站可以做什么动态网站可以做什么v动态生成动态生成HTML代码代码v显示数据库中的数据显示数据库中的数据v向数据表中添加数据向数据表中添加数据v查询数据库中的数据查询数据库中的数据v动态生成动态生成HTML代码代码?for($i=3;$i第第次次HelloWorld!循环语句循环语句显示数据库中的数据显示数据库中的数据向数据表中添加数据向数据表中添加数据添加记录的步骤添加记

4、录的步骤浏览器浏览器WebWeb服务器服务器服务器服务器数据库数据库连接数据库连接数据库数据库数据库执行插入语句执行插入语句$title=$_POSTtitle获取数据获取数据mysql_query(“Insertinto”)查询数据库中的数据查询数据库中的数据v提供一个表单供用户输入查询关键字提供一个表单供用户输入查询关键字v将用户提交的关键字作为条件用将用户提交的关键字作为条件用Select语句进行查询语句进行查询v将查询的结果（返回的记录集）显示在网页中。将查询的结果（返回的记录集）显示在网页中。软件的结构演变软件的结构演变桌面软件桌面软件网络软件网络软件C/S结构结构B/S结构结构1.

5、1.1B/S结构和结构和C/S结构结构vC/S（Client/Server)，客户机，客户机/服务器结构服务器结构vB/S（Browser/Server)，浏览器，浏览器/服务器结构服务器结构 C/S结构结构B/S结构结构1.1.2动态网站的组成和运行动态网站的组成和运行vWeb应用程序是一种应用程序是一种B/S结构的软件结构的软件Web应用程序是基于应用程序是基于Web的，依赖于通用的，依赖于通用的的Web浏览器来表现它的执行结果浏览器来表现它的执行结果需要一台需要一台Web服务器，在服务器上对数据服务器，在服务器上对数据进行处理，并将处理结果生成网页进行处理，并将处理结果生成网页运行运行W

6、eb应用程序的要素应用程序的要素vWeb服务器服务器:响应用户提交的响应用户提交的HTTP请求请求v浏览器浏览器：解析：解析HTML文件文件vHTTP通信协议通信协议浏览器和服务器的作用浏览器和服务器的作用浏览器浏览器Web服务器服务器HTTP请求请求HTTP响应响应浏览器和服务器也可以是一台电脑上的浏览器和服务器也可以是一台电脑上的两个程序两个程序浏览器发送浏览器发送HTTP请求的方式请求的方式v输入网址输入网址v提交表单提交表单1.2.1静态网页和动态网页静态网页和动态网页v静态网页：是纯粹的静态网页：是纯粹的HTML页面，网页的内容是页面，网页的内容是固定的、不变的固定的、不变的v动态网

7、页：网页中的内容会根据用户请求的不同动态网页：网页中的内容会根据用户请求的不同而显示不同的内容而显示不同的内容网页的类型网页的类型静态网页静态网页采用采用HTML、CSS、JavaScript编写编写的网页。文件扩展的网页。文件扩展名是名是.htm 或或.html网页网页动态网页动态网页采用采用 PHP、JSP、ASP、CGI 程序程序动态生成的网页。动态生成的网页。文件扩展名是文件扩展名是.asp、.jsp、.php、.cgi等。等。静态网页的执行过程静态网页的执行过程浏览器浏览器InternetWeb服务器服务器HTMLHTML文件文件文件文件HTMLHTML文件文件文件文件网页网页网页网

8、页为什么需要动态网页为什么需要动态网页v问题：网站拥有的页面非常多，怎么办？问题：网站拥有的页面非常多，怎么办？v如何实现与用户的交互，如保存并显示用户的留如何实现与用户的交互，如保存并显示用户的留言言动态网页的执行过程动态网页的执行过程浏览器浏览器InternetWeb服务器服务器PHP文件文件HTMLHTML代码代码代码代码网页网页网页网页Web服务器对服务器对PHP进行解释执行进行解释执行浏览器对浏览器对HTML进行解释执行进行解释执行PHP简介简介vPHP，即，即“HypertextPreprocessor，超文本，超文本预处理器预处理器”,是一种服务器端的，跨平台的、开是一种服务器端

9、的，跨平台的、开放源代码的多用途脚本语言，可以嵌入到放源代码的多用途脚本语言，可以嵌入到HTML中。中。v由由RasmusLerdorf在在1994年发明年发明世界编程语言排行榜世界编程语言排行榜PHPPHP发展到今天，具备了很多优势。发展到今天，具备了很多优势。（1 1）易学好用）易学好用（2 2）免费开源）免费开源（3 3）良好的可扩展性）良好的可扩展性（4 4）平台无关性（跨平台）平台无关性（跨平台）（5 5）功能全面）功能全面（6 6）数据库支持）数据库支持（7 7）面向对象编程）面向对象编程PHP的优势的优势HTML内嵌式的脚本语言 PHP PHP脚本程序中可包含文本、脚本程序中可包

10、含文本、HTMLHTML代码以及代码以及PHPPHP代码。例如代码。例如/这是我的第一个PHP程序：注意：注意：PHPPHP代码通常以代码通常以符号符号“?”结束，这两个符结束，这两个符号叫做号叫做PHPPHP的的定界符定界符。PHPPHP程序文件名中的扩展程序文件名中的扩展名通常使用名通常使用“.php.php”，例如例如hello.phphello.php。关于关于Web服务器服务器vWeb服务器主要是指一种软件，它具有解释执行服务器主要是指一种软件，它具有解释执行PHP代码的功能代码的功能PHP的的Web服务器软件是服务器软件是Apachev要运行要运行PHP程序，必须先安装程序，必须先

11、安装Apache，这样才能，这样才能对对PHP程序进行解释执行程序进行解释执行v提示：提示：PHP文件不能通过双击文件直接用浏览器文件不能通过双击文件直接用浏览器打开，因为这样打开，因为这样PHP代码没有经过代码没有经过Web服务器的服务器的处理。处理。学习动态网站制作的基础学习动态网站制作的基础v认识文件夹和文件认识文件夹和文件vD:testDebugvD:testDebug.htm练习练习v5-3.php test.htmlD:Appservwww文件夹文件夹文件文件文件文件文件文件文件夹文件夹数据库基础数据库基础v熟悉熟悉SQL语句的书写语句的书写vSelecttitle,datefro

12、mnews表名表名字段名字段名HTML基础基础v需要认识一些需要认识一些HTML标记、属性和属性值标记、属性和属性值1.3安装安装PHP的的运行环境运行环境1.3安装安装PHP的运行环境的运行环境vAppServ的安装的安装vAppServ2.5.9vApache2.2vPHP5.1vMySQL5vphpMyAdmin图图1-9选择安装位置选择安装位置图图1-10选择安装组件选择安装组件图图1-11Apache服务器信息的配置服务器信息的配置配置配置MySQL数据库服务器数据库服务器测试测试AppServ是否安装成功是否安装成功AppServ的安装目录的安装目录phpMyAdmin的用户登录框

13、的用户登录框v用户名是用户名是root、密码是、密码是111phpMyAdmin的操作界面的操作界面1.新建第一个新建第一个PHP程序程序2.运行运行PHP文件文件vhttp:/localhost/1-1.php查看查看源代码源代码http:/localhost/1-1.asp关于关于http:/localhostvhttp:/localhost本机网站的主目录本机网站的主目录vhttp:/d:web即即Apache的主目录的主目录本机域名本机域名网站网站域名域名主目录主目录1对11对11对1D:AppServwww域名与主目录的关系练习域名与主目录的关系练习v设设Apache的主目录为的主目

14、录为D:AppServwww则要运行则要运行D:AppServwwwabc.phpD:AppServwwwabab.phpD:AppServabc.php应在地址栏输入什么应在地址栏输入什么URL？将主目录替换成域名将主目录替换成域名http:/localhost即可即可关于关于http:/localhostv设设Apache的主目录为的主目录为D:wwwvhttp:/localhost/admin/admin.php打开的是：打开的是：vhttp:/localhost/admin.php打开的是：打开的是：v如果如果Apache的主目录是的主目录是F:tesweb呢呢域名与主目录的关系练习域

15、名与主目录的关系练习vhttp:/d:web师院的域名师院的域名师院网站的主目录师院网站的主目录vhttp:/ 解释执行解释执行 预编译预编译解释执行解释执行 预编译预编译跨平台性跨平台性 Windows平台平台Windows平台平台任何平台任何平台 任何平台任何平台文件扩展文件扩展名名.asp.aspx.php.jsp1.5Web编程的新趋势编程的新趋势v传统传统Web应用的不足应用的不足独占式的请求独占式的请求频繁的页面刷新频繁的页面刷新简略的用户交互界面简略的用户交互界面vWeb编程的新技术编程的新技术Ajax技术技术Microsoft的的Silverlight技术技术Adobe公司的公

16、司的Flash/Flex技术技术Ajax技术的特点技术的特点v不属于任何软件厂商，代表一种开源风格不属于任何软件厂商，代表一种开源风格v不是一种编程语言，几种技术结合的新应用不是一种编程语言，几种技术结合的新应用v采用的大部分都是早已存在的技术采用的大部分都是早已存在的技术v基于现有的浏览器，不需要安装任何的插件，因基于现有的浏览器，不需要安装任何的插件，因此兼容性最好此兼容性最好习题习题v3.以下哪种技术不是服务器端动态网页技术以下哪种技术不是服务器端动态网页技术A.PHPB.JSPC.ASP.NETD.Ajaxv4.配置配置MySQL服务器时，需要设置一个管理员服务器时，需要设置一个管理员

17、账号，其名称是（账号，其名称是（）A.adminB.rootC.saD.Administratorv5.如果如果Apache的网站主目录是的网站主目录是E:eshop，并且，并且没有建立任何虚拟目录，则在浏览器地址栏中输没有建立任何虚拟目录，则在浏览器地址栏中输入入http:/localhost/admin/admin.php将打开的将打开的文件是：文件是：习题习题v6.PHP的配置文件是的配置文件是，Apache的配的配置文件是置文件是。v7.如果如果Apache的网站主目录是的网站主目录是E:eshop，要运，要运行行E:eshopabcrs123.php文件，则应在浏览文件，则应在浏览器

18、地址栏中输入器地址栏中输入，如果如果E:eshop是虚拟目录是虚拟目录eshop，则要运行，则要运行E:eshopeshop.php文件，应在浏览器地址栏文件，应在浏览器地址栏中输入中输入v有一个有一个PHP文件，存放在文件，存放在D:AppServwww目录目录下，请问如果在下，请问如果在“我的电脑我的电脑”中双击该中双击该PHP文件，文件，该文件可以运行吗？该文件可以运行吗？第第2章章HTMLHTML文档的基本结构文档的基本结构HTML标记标记(Tags)v标记是标记是HTML文档中一些有特定意义的符号，这文档中一些有特定意义的符号，这些符号指明些符号指明内容的含义或结构内容的含义或结构。

19、标记总是放在三。标记总是放在三角括号中，大多数标记都是角括号中，大多数标记都是成对成对出现的，表示开出现的，表示开始和结束。始和结束。受受标记影响的内容标记影响的内容标记名称起始标记起始标记结束标记结束标记带有属性的带有属性的HTML标记的结构标记的结构/例例2找出下面找出下面html代码的错误代码的错误v下列下列HTML元素的写法错在什么地方？元素的写法错在什么地方？1.2.Congratulations!3.linkedtext4.Thisisanewparagraph5.ThelistitemHTML标记标记的分类的分类为便于记忆，可将标记按出现的情况分为：为便于记忆，可将标记按出现的情

20、况分为：1.双标记双标记：大部分标记都是双标记：大部分标记都是双标记2.单标记单标记：，3.成组标记成组标记：table，form，ul,ol,dl,frameset，fieldset及其子标记等及其子标记等HTML标记（续）标记（续）v双标记双标记语法：语法：受标记影响的内容受标记影响的内容例：例：制作网页是我的爱好。制作网页是我的爱好。衡阳师范学院衡阳师范学院衡阳师院衡阳师院HTML标记（续）标记（续）v单标记单标记语法：语法：例：例：HTML元素的概念和分类元素的概念和分类v把把HTML标记（如标记（如）和标记之间的内）和标记之间的内容组合称为容组合称为HTML元素元素v1.根据元素有无

21、内容分类根据元素有无内容分类“有内容的元素有内容的元素”是由起始标记、结束标记和两是由起始标记、结束标记和两者之间的内容组成，其中元素内容既可以是文字者之间的内容组成，其中元素内容既可以是文字内容，也可以是其他元素。内容，也可以是其他元素。“空元素空元素”则只有起始标记而没有结束标记和元则只有起始标记而没有结束标记和元素内容，可见素内容，可见“空元素空元素”对应单标记对应单标记2.根据元素的排列方式分类根据元素的排列方式分类v行内元素行内元素(inline)是指元素与元素之间从是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行不下才会

22、转到下一行v块级元素块级元素(block)是指每个元素占据浏览器是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自一整行位置，块级元素与块级元素之间自动换行，从上到下排列。动换行，从上到下排列。2.2.3文本格式标记文本格式标记1）段落标记）段落标记这是一段文本这是一段文本2）标题标记）标题标记这是文章的一级标题这是文章的一级标题3）换行标记）换行标记例：春天例：春天来临，来临，又到了播种耕种的季节又到了播种耕种的季节2.2.3文本格式标记（续）文本格式标记（续）valign属性属性这将居中显示这将居中显示v文本中的字符实体文本中的字符实体“ ”表示空格，表示空格，“<

23、”代表符号代表符号“”列表标记列表标记v无序列表无序列表,CSS教程教程DOM教程教程XML教程教程v有序列表有序列表,v定义列表定义列表,2.2.5图像标记图像标记v属性属性含含 义义src图片文件的图片文件的URL地址地址alt当图片无法显示时显示的替代文字当图片无法显示时显示的替代文字title鼠标停留在图片上时显示的说明文字鼠标停留在图片上时显示的说明文字align图片的对齐方式，共有图片的对齐方式，共有9种取值种取值width、height图片在网页中的宽和高，单位为像素图片在网页中的宽和高，单位为像素或百分比或百分比2.2.6超链接标记超链接标记v百度百度属性名属性名 说明说明属性

24、值属性值href超链接的超链接的URL路路径径相对路径或绝对路径、相对路径或绝对路径、Email、#锚点锚点名名target超链接的打开方超链接的打开方式式_blank：在新窗口打开；：在新窗口打开；_self：在当前窗口打开，默认值：在当前窗口打开，默认值_parent：在当前窗口的父窗口打开：在当前窗口的父窗口打开_top：在整个浏览器窗口打开链接：在整个浏览器窗口打开链接窗口或框架名窗口或框架名title提示文字提示文字属性值是任何字符串属性值是任何字符串超链接的种类根据源对象划分超链接的种类根据源对象划分1)用文本做超链接用文本做超链接：首页首页2)用图像做超链接：用图像做超链接：使用

25、图像做超链使用图像做超链接后，图像会自接后，图像会自动增加边框，可动增加边框，可设置边框为设置边框为0去掉去掉热区链接热区链接v热区链接热区链接：使用：使用在图像上定义一幅在图像上定义一幅地图，地图上可包含多个热区，每个热区地图，地图上可包含多个热区，每个热区用用单标记定义单标记定义2.3表格标记表格标记v、是表格中最基本的标记是表格中最基本的标记表格由表格由标记定义标记定义行由行由标记定义标记定义每行又被分成许多个单元格每行又被分成许多个单元格v表格中的单元格能容纳网页中的任何元素，如图表格中的单元格能容纳网页中的任何元素，如图像，文本，列表，表单，表格等。像，文本，列表，表单，表格等。下面

26、这段代码在浏览器中如何显示下面这段代码在浏览器中如何显示row1,cell1row1,cell2row2,cell1row2,cell22.3.3单元格的合并属性单元格的合并属性v课程表课程表v星期一星期一看代码画表格看代码画表格网页中表单的作用网页中表单的作用v表单主要功能：提供用户输入的界面，并提交表单主要功能：提供用户输入的界面，并提交浏览者填写的信息给服务器。浏览者填写的信息给服务器。v网页中的表单网页中的表单用户注册表单用户注册表单提交搜索表单提交搜索表单用户登录表单用户登录表单Web应用程序访问者将表单数据提交给服务器处理保存提交的数据或对提交的数据进行查询Web应用程序对表单进行

27、处理表单代码的组成表单代码的组成用户：用户：一个表单的代码至少应包括一个表单的代码至少应包括3个个组成部分组成部分：(1)表单表单标记标记：(2)表单元素（如表单元素（如标记）标记）：例如文：例如文本框、下拉菜单、复选框和单选框等。本框、下拉菜单、复选框和单选框等。(3)提交按钮（如提交按钮（如标记）：标记）：用来提交用来提交数据数据表单代码中常见的错误表单代码中常见的错误v没有没有标记标记v一个表单出现多个一个表单出现多个标记标记v多个多个标记嵌套标记嵌套v这些错误会使表单无法提交数据这些错误会使表单无法提交数据表单标记表单标记v标记用来创建一个表单域，即定标记用来创建一个表单域，即定义义表

28、单的开始和结束表单的开始和结束位置，这一标记有几方面的位置，这一标记有几方面的作用。作用。v第一，限定表单的范围。第一，限定表单的范围。v第二方面，携带表单的相关信息，例如第二方面，携带表单的相关信息，例如处理表单处理表单的脚本程序的位置（的脚本程序的位置（action）、提交表单的方法）、提交表单的方法（method）等。等。GET和和POST方式提交表单方式提交表单用户名用户名:密码密码:vhttp:/localhost/5.php?userName=tang&PS=123vhttp:/localhost/5.phpGET方式方式POST方式方式POSTform标记常见属性标记常见属性ac

29、tionvaction：接一个动态网页名：接一个动态网页名设置设置action属性后会产生两个作用：属性后会产生两个作用：1点击该表单的提交按钮将会链接到该网页点击该表单的提交按钮将会链接到该网页2同时还会将表单中输入的数据发送给该网页进行同时还会将表单中输入的数据发送给该网页进行处理处理v如果将如果将action属性值设置为空将由当前网页对提属性值设置为空将由当前网页对提交数据进行处理交数据进行处理form标记的属性面板标记的属性面板namenametargettargetmethodmethodactionactionenctypeenctype表单中的元素表单中的元素DW中表单对象与标记

30、的对应关系中表单对象与标记的对应关系v表单域表单域form标记中包含的表单标记主要有标记中包含的表单标记主要有input，select(option)，textarea等等v在在DW中表单对象面板中的对象与这些标记的对中表单对象面板中的对象与这些标记的对应关系是：应关系是：input-表单元素的通用标记表单元素的通用标记vinput标记是收集用户输入信息的标记，是一个标记是收集用户输入信息的标记，是一个单标记，其单标记，其含义由含义由type属性决定属性决定。vinput标记的必备属性（必须具有的属性）标记的必备属性（必须具有的属性）name：表单元素的名称，由于表单中通常：表单元素的名称，由

31、于表单中通常有很多表单元素，服务器要根据有很多表单元素，服务器要根据name属性属性获取相应元素的内容。获取相应元素的内容。type：确定：确定input标记的含义标记的含义v其他常见属性其他常见属性value（input标记的取值）标记的取值）size：文本域的宽度：文本域的宽度input-type属性的取值属性的取值vinput标标记记的的type属属性性总总共共有有10种种取取值值，含含义义如表如表1所示：所示：type属性值属性值描述描述text文本域文本域password密码域密码域file文件域文件域checkbox复选框复选框radio单选框单选框button普通按钮普通按钮su

32、bmit提交按钮提交按钮reset重置按钮重置按钮hidden隐藏域隐藏域image图像域图像域(图像按钮图像按钮)文本域文本域type=textv文本域举例：文本域举例：查询：查询：input标记中的标记中的size属性是定义文本域的宽度属性是定义文本域的宽度文本域属值文本域属值描述描述name或或id文本域的名称或文本域的名称或idmaxlength文本域的最大输入字符数文本域的最大输入字符数size文本域的宽度文本域的宽度value文本域的默认值文本域的默认值单选框单选框type=“radio”v单选框举例：单选框举例：女性女性男性男性vchecked属性设定初始时单选按钮哪项处属性设定

33、初始时单选按钮哪项处于选定状态，同一组单选按钮于选定状态，同一组单选按钮name属性属性的值的值必须相同，这样这一组单选框中只有必须相同，这样这一组单选框中只有一个能被选中。一个能被选中。复选框复选框type=“checkbox”v复选框，可以选中多项复选框，可以选中多项v看书看书上网上网听音乐听音乐文件域文件域type=filevv供上传文件用，需要服务器端的上传组件供上传文件用，需要服务器端的上传组件配合配合v文件域对表单标记文件域对表单标记form有特殊要求，有特殊要求，method必须设为必须设为post，MIME类型必须为类型必须为multipart/form-data按钮按钮v提交

34、按钮提交按钮(type=submit)将表单中所有具有将表单中所有具有name属性的元素内容发属性的元素内容发送到服务器端指定的应用程序送到服务器端指定的应用程序v重置按钮重置按钮(type=reset)用户在填写表单时，若希望重新填写，单用户在填写表单时，若希望重新填写，单击该按钮将使全部表单元素的值还原为击该按钮将使全部表单元素的值还原为初始值初始值v普通按钮普通按钮(type=button)该按钮没有内在行为，但可用该按钮没有内在行为，但可用javascript为为其指定动作其指定动作图像域图像域type=imagev即图像按钮，用一张图片做按钮，功能和即图像按钮，用一张图片做按钮，功能

35、和提交按钮相同提交按钮相同下拉菜单下拉菜单和和标记标记v标记是下拉菜单框或列表框标记，是一个标记是下拉菜单框或列表框标记，是一个标记的含义由其标记的含义由其size属性决定的元素，如果该标记属性决定的元素，如果该标记没有设置没有设置size属性，那么表示为下拉菜单框，如果属性，那么表示为下拉菜单框，如果设置了设置了size属性，则变成了列表框。下列列表框中属性，则变成了列表框。下列列表框中的每一项由的每一项由标记定义。标记定义。v例如：你的籍贯：例如：你的籍贯：湖南湖南广东广东江苏江苏四川四川去掉去掉size属性后属性后多行文本域标记多行文本域标记v是多行文本域标记，用于让浏是多行文本域标记，

36、用于让浏览者输入多行文本，如发表评论或留言，览者输入多行文本，如发表评论或留言，跟帖。跟帖。v这这是一个有是一个有4行，每行可容纳行，每行可容纳40个字符，换个字符，换行方式为虚拟的多行文本域。行方式为虚拟的多行文本域。v下面的表单元素代码都有错误，你能指出它们分下面的表单元素代码都有错误，你能指出它们分别错在哪里吗？别错在哪里吗？vvvvYourstory.vvvv一、什么是一、什么是XHTMLvXHTML是英文是英文ExtensibleHyperTextMarkupLanguage的缩写，中文意思是的缩写，中文意思是“可扩展超文本标记语可扩展超文本标记语言言”。vXHTML1.0是以是以X

37、ML1.0的语法规范对的语法规范对HTML4.0的改的改进进。vXHTML是用于描述网页结构的标准语言。它不建议使用是用于描述网页结构的标准语言。它不建议使用HTML中一些过时的描述表现的中一些过时的描述表现的HTML标记和属性，对代标记和属性，对代码的书写要求也更加严谨码的书写要求也更加严谨二、二、XHTML文档的类型文档的类型vXHTML1.0分为三种文档类型分为三种文档类型XHTML1.0Transitional（过渡的）（过渡的）允许使用表现层的标记和属性，但要符合允许使用表现层的标记和属性，但要符合 XHTML XHTML 的语法。的语法。XHTML1.0Strict（严格的）（严格

38、的）不允许使用任何表现层的标记和属性。不允许使用任何表现层的标记和属性。XHTML1.0Frameset（框架的）（框架的）用于框架结构的网页。用于框架结构的网页。三、三、DOCTYPE（文档类型声明）（文档类型声明）vDOCTYPE声明是声明是(X)HTML文档开头处的一行或两行代文档开头处的一行或两行代码，用于告知浏览器码，用于告知浏览器(X)HTML是哪个版本。是哪个版本。XHTML语法语法v标记名称与小于号之间不能留有空格。标记名称与小于号之间不能留有空格。欢迎光临我的文学小屋！欢迎光临我的文学小屋！欢迎光临我的文学小屋！欢迎光临我的文学小屋！正确：标记名称正确：标记名称与小于号之间无

39、空格与小于号之间无空格错误：错误：标记名称与小于号之间有空格标记名称与小于号之间有空格XHTML语法语法v标记和属性的名称都必须使用小写。标记和属性的名称都必须使用小写。正确：标记和属性的名称使用小写正确：标记和属性的名称使用小写错误：标记名称使用大写错误：标记名称使用大写错误：属性名称使用大写错误：属性名称使用大写XHTML语法语法v属性值必须使用双引号。属性值必须使用双引号。首页首页 首页首页 正确：属性值使用双引号正确：属性值使用双引号错误：属性值不使用双引号错误：属性值不使用双引号XHTML语法语法v标记被正确的嵌套使用。标记被正确的嵌套使用。登鹳雀楼是唐朝登鹳雀楼是唐朝王之涣王之涣的

40、诗。的诗。登鹳雀楼是唐朝登鹳雀楼是唐朝王之涣王之涣的诗。的诗。正确：标记嵌套正确：标记嵌套错误：标记交叠错误：标记交叠XHTML语法语法v关闭双标记。关闭双标记。欢迎光临文学小屋！欢迎光临文学小屋！以下是最新作品。以下是最新作品。欢迎光临文学小屋！欢迎光临文学小屋！以下是最新作品。以下是最新作品。正确：关闭标记正确：关闭标记错误：未关闭标记错误：未关闭标记XHTML语法语法v关闭单标记。关闭单标记。正确：关闭标记正确：关闭标记错误：未关闭标记错误：未关闭标记XHTML语法语法v属性不能被缩减。属性不能被缩减。正确：完整描述属性正确：完整描述属性错误：缩减属性错误：缩减属性2.6CSS基础基础C

41、SS样式规则的组成选择器样式规则的组成选择器v一条一条CSS样式规则由样式规则由选择器选择器(selector)和和声明声明(declarations)组成。组成。v选择器是为了选中网页中某些元素的，选择器是为了选中网页中某些元素的，选择器可以是一个选择器可以是一个标记名标记名，表示将网页，表示将网页中该标记的所有元素都选中中该标记的所有元素都选中h1color:red;font-size:25px;选择器选择器属性属性值值属性属性值值声明声明声明声明最常用的最常用的CSS属性属性CSS属性属性含义含义举例举例font-size字体大小字体大小font-size:14px;color字体颜色字

42、体颜色color:red;line-height行高行高line-height:160%;text-decoration文本修饰（如增删下划文本修饰（如增删下划线）线）text-decoration:none;text-indent 文本缩进文本缩进text-indent:2em;background-color背景颜色背景颜色background-color:#ffeeaa;在在HTML中引入中引入CSS的方法的方法vHTML和和CSS是两种作用不同的语言，必是两种作用不同的语言，必须通过一些方法，将须通过一些方法，将CSS与与HTML挂接在挂接在一起，才能正常工作。一起，才能正常工作。v在

43、在HTML中，引入中，引入CSS的方法有的方法有行内式行内式嵌入式嵌入式导入式导入式链接式链接式行内式行内式vhtml标记都有一个通用的标记都有一个通用的style属性，行属性，行内式就是在该属性内添加内式就是在该属性内添加CSS属性和值，属性和值，如：如：v嵌入式嵌入式h1color:red;font-size:25px;链接式链接式v链接式是在网页文档头部通过链接式是在网页文档头部通过标记引标记引入外部入外部CSS文件，格式如下：文件，格式如下：导入式导入式v导入式是通过导入式是通过CSS规则中的规则中的import指令来导指令来导入外部入外部CSS文件文件importurl(style2

44、.css);链接式和导入式的比较链接式和导入式的比较v链接式和导入式的目的都是链接式和导入式的目的都是将一个独立的将一个独立的CSS文件文件引入到引入到HTML文件，其优点是可以文件，其优点是可以让很多个网页共享一个让很多个网页共享一个CSS文件，在制作网文件，在制作网站时主要应采用站时主要应采用链接式链接式方法引入方法引入CSS，使网，使网站内的所有网页风格统一。站内的所有网页风格统一。v链接式和导入式最大的区别在于链接式使用链接式和导入式最大的区别在于链接式使用HTML的标记引入外部的标记引入外部CSS文件，而导入式文件，而导入式则是用则是用CSS的规则引入外部的规则引入外部CSS文件，因

45、此文件，因此它们的语法不同它们的语法不同CSS选择器的分类选择器的分类v标记选择器标记选择器v类选择器类选择器vid选择器选择器v伪类选择器伪类选择器标记选择器标记选择器v标记选择器将拥有同一个标记的所有元素全标记选择器将拥有同一个标记的所有元素全部选中。如：部选中。如：p/*标记选择器标记选择器*/color:blue;font-size:18px;类选择器类选择器.class1color:green;font-size:20px;类选择器类选择器属性属性值值属性属性值值声明声明声明声明类名类名.onecolor:red;/*红色红色*/.twofont-size:20px;/*文字大小文字

46、大小*/选择器之标记选择器选择器之标记选择器1应用第一种应用第一种class选择器样式选择器样式应用第二种应用第二种class选择器样式选择器样式同时应两种同时应两种class选择器样式选择器样式h3同样适用同样适用id选择器选择器vid选择器以选择器以半角半角“#”开头，且开头，且id名称的第一名称的第一个字母不能为数字个字母不能为数字#id1color:red;font-size:30px;ID选择器选择器属性属性 值值属性属性值值声明声明声明声明ID选择器选择器#onefont-weight:bold;/*粗体粗体*/#twofont-size:30px;/*字体大小字体大小*/colo

47、r:#009900;/*颜色颜色*/ID选择器选择器1ID选择器选择器2ID选择器选择器3ID选择器选择器3伪类选择器伪类选择器v所谓伪类就是指元素在某个时候的状态。所谓伪类就是指元素在某个时候的状态。v网页中的链接标记能响应浏览者的点击。网页中的链接标记能响应浏览者的点击。a标标记有四种状态能描述这种响应，分别是记有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，伪类选择器，伪类选择器的标记和伪类之间用的标记和伪类之间用“:”隔开。隔开。a:hovercolor:green;font-size:20px;标记名标记名属性属性值值属性属性值值声

48、明声明声明声明伪类名伪类名通过伪类选择器制作动态超链接通过伪类选择器制作动态超链接v伪类选择器可以看成是一种特殊的标记选择伪类选择器可以看成是一种特殊的标记选择器，它用来选中在某种状态下的标记器，它用来选中在某种状态下的标记v可以定义可以定义标记在四种不同的状态下具有不标记在四种不同的状态下具有不同的颜色，是否有下划线。同的颜色，是否有下划线。一、伪类选择器的书写应遵循一、伪类选择器的书写应遵循LVHA的顺序，的顺序，即出现的顺序应为即出现的顺序应为a:linka:visiteda:hovera:active。二、各种伪类选择器将继承二、各种伪类选择器将继承a标记选择器定义标记选择器定义的样式

49、。的样式。CSS的盒子模型的盒子模型CSS的盒子模型的盒子模型v每个每个HTML元素都可以看作是一个装了东元素都可以看作是一个装了东西的盒子西的盒子v盒子里面的内容到盒子的边框之间的距盒子里面的内容到盒子的边框之间的距离即离即填充填充(padding),盒子本身有盒子本身有边框边框(border),而盒子边框外和其它盒子之间，而盒子边框外和其它盒子之间，还有还有边界边界(magin),如图所示如图所示v默认情况下盒子的边框是无，背景色是默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒透明，所以我们在默认情况下看不到盒子子contentpadding-toppadding-b

50、ottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight边框边框border属性属性v盒子模型的盒子模型的margin和和padding属性比较简单，只属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置能设置宽度值，最多分别对上、右、下、左设置宽度值。而边框宽度值。而边框border则可以设置宽度、颜色和则可以设置宽度、颜色和样式。样式。v分别是分别是border-width（宽