PHP编程基础与实例教程第3版（下篇共上中下3篇）

PHP编程基础与实例教程第三版

PHPFundamentals&Practices3ndEdition第11章个人博客系统的设计与开发

主讲：孔祥盛

本章大纲11-1个人博客系统的开发流程11-2个人博客系统的系统规划11-3个人博客系统的系统分析11-4个人博客系统E-R图11-5个人博客系统的系统设计11-6个人博客系统的系统实施11-1个人博客系统的开发流程个人博客系统是一种小型的管理信息系统（ManagementInformationSystem，简称MIS），其开发流程遵循MIS的开发生命周期（SoftwareDevelopmentLifeCycle，简称SDLC），需要经历系统规划、系统分析、系统设计阶段、系统实施（编码）、系统测试、运行和维护6个阶段。11-2个人博客系统的系统规划系统规划的任务是定义目标、确认项目可行性、制定项目进度以及人员分工。1.个人博客系统的目标2.个人博客系统的可行性分析（1）技术可行性：（2）经济可行性：（3）法律可行性：3.个人博客系统的项目进度4.个人博客系统的人员分工11-3个人博客系统的系统分析系统分析的任务是了解用户需求、确定系统需求，系统分析解决了“系统做什么”的问题。系统分析也叫做需求分析，分为功能需求分析和非功能需求分析（例如性能需求分析、UI界面需求分析鞥），主要讨论功能需求分析。11-3个人博客系统的系统分析1.功能需求分析11-3个人博客系统的系统分析2.E-R图E-R图也称为实体-关系图（Entity-RelationshipDiagram），E-R图中的实体用于描述客观存在并可相互区别的事物，E-R图中的关系用于描述事物之间存在的关系。11-3个人博客系统的系统分析2.E-R图

11-4个人博客系统E-R图

E-R图由实体和属性、标识符和主标识符、关系和引用、基数、强制和可选等要素构成。11-4个人博客系统E-R图1.

实体和属性E-R图中的实体用于表示现实世界中具有相同属性的事物集合，属性用于表示实体的某种特征。11-4个人博客系统E-R图2.

标识符和主标识符标识符（identifier），是指能够唯一标记实体的属性或属性集合。标识符的取值不能重复、不能是null值，通常实体的标识符不止一个。确定了实体的标识符后，需要从中选择一个，作为实体的主标识符（primaryidentifier，简写为pi）。对于一个实体而言，标识符可以有多个，但主标识符有且仅有一个。11-4个人博客系统E-R图3.

关系和引用E-R图中的关系（relationship）表示实体间存在的联系，实体间的关系使用一条线段表示。需要注意的是，关系是双向的，例如在用户实体和评论实体之间的双向关系中，“一个用户可以发表多条评论”描述的是“用户评论”之间的“单向”关系，“一条评论只能属于一个用户”描述的是“评论用户”之间的“单向”关系。两个“单向”关系共同构成了用户实体与评论实体之间的双向关系。11-4个人博客系统E-R图4.

基数E-R图中，“多方”或“一方”是通过基数描述的。基数表示一个实体到另一个实体之间关联的数目，是针对关系之间的某个方向提出的概念，基数可以是一个取值范围，也可以是某个具体数值。基数>=0时，表示“多方”。例如在“用户评论”关系中，评论实体的基数是：基数>=0，表示一个用户可以发表多条评论，评论属于“多方”。1>=基数>=0时，表示“一方”。例如在“评论用户”关系中，用户实体的基数是：1>=基数>=0，表示一条评论只能属于一个用户，用户属于“一方”。11-4个人博客系统E-R图4.

强制和可选基数的最小值是1时，表示强制。例如在“评论用户”关系中，用户实体的基数是：1，表示一条评论“至少”属于一个用户。基数的最小值是0时，表示可选。例如在“用户评论”关系中，评论实体的基数是：基数>=0，表示一个用户可以发表评论，也可以不发表评论，评论是可选的。说明：强制，对应于数据库表的非空约束。例如一条评论“至少”属于一个用户，评论实体中的“用户编号”属性满足非空约束（notnull）。11-5个人博客系统的系统设计系统分析解决的是“系统做什么”的问题，而系统设计解决的是“怎么做”的问题。个人博客系统的E-R图一共包含5个实体，实体名及其属性名罗列如下。用户（用户编号、用户名，密码，手机号，邮箱，地址，性别，兴趣爱好，个人相片，备注，是否博主，创建时间）博客（博客编号，用户编号，标题，内容，访问次数，附件，创建时间）标签（标签编号，标签名）博客_标签（编号，博客编号，标签编号）评论（评论编号，用户编号，博客编号，用户名，内容，状态，IP地址，创建时间）11-5个人博客系统的系统设计users（userid，username，password，telephone，email，address，sex，hobby，picture，remark，blogger，createtime）blog（blog_id，userid，title，content，clicked，attachment，createtime）tag（tag_id，tag_name）tag_blog（id,tag_id,blog_id）comment（comment_id，userid，blog_id，content，status，ip，createtime）11-5个人博客系统的系统设计11-6个人博客系统的系统实施系统设计结束后，在将系统移交给用户前的一系列活动叫做系统实施。个人博客系统涉及博客管理、评论管理、标签管理和用户管理等功能，本章剩余的篇幅将以博客管理、评论管理为例，详细介绍这两个功能的实施过程。实践任务上机实践个人博客系统的设计与开发PHP编程基础与实例教程第三版

PHPFundamentals&Practices3ndEdition第12章会话控制技术：Cookie与Session

主讲：孔祥盛

本章大纲12-1会话控制技术概述12-2Cookie会话技术12-3Session会话技术12-4header函数的使用12-1会话控制技术概述HTTP协议是无状态的。这就会导致两种乱象。乱象1：浏览器无法实现“记住密码”和“自动登录”功能。每次登录一个网站，都需要重填用户名和密码。乱象2：刚成功登录了一个网站，下一秒访问该网站的其他页面时，居然让我们重新登录。上述两种乱象，都会阻碍互联网的发展。12-1会话控制技术概述Cookie是一种浏览器端的会话控制技术，Cookie保存在浏览器端，目的是让浏览器拥有记忆能力，主要解决乱象1；Session是一种Web服务器端的会话控制技术，Session保存在Web服务器端，目的是让Web服务器拥有记忆能力，主要解决乱象2。12-2Cookie会话技术1.

Cookie工作原理和生命周期

12-2Cookie会话技术1.

Cookie工作原理和生命周期1.创建Cookie→诞生Cookie（1）浏览器发出第1次HTTP请求：由于浏览器端没有有效的Cookie，因此此次HTTP请求中没有Cookie请求头。（2）第1次HTTP请求触发PHP程序1运行：PHP程序1调用setcookie函数“创建”诸如“username=zhangsan”的Cookie，将诸如“Set-Cookie:username=zhangsan”的Set-Cookie响应头添加到响应中。12-2Cookie会话技术1.

Cookie工作原理和生命周期1.创建Cookie→诞生Cookie（3）PHP程序1运行结束后返回响应：此时的响应头包含Set-Cookie响应头。（4）浏览器接收到PHP程序1的响应：由于响应中包含Set-Cookie响应头，浏览器自动将“username=zhangsan”以“键值对”的方式存储到浏览器端（或在浏览器端主机内存、或在浏览器端主机外存），Cookie就此“诞生”。12-2Cookie会话技术1.

Cookie工作原理和生命周期2.Cookie会话从Cookie诞生到失效的这段时间，浏览器与Web服务器之间的多次请求/响应称作一次Cookie会话。一次Cookie会话通常包含多次请求/响应，Cookie会话期间：（1）浏览器向PHP程序2、3、n-1发出HTTP请求时，浏览器自动向HTTP请求中添加诸如“Cookie:username=zhangsan”的Cookie请求头（Cookie请求头和值之间使用“:”隔开）。（2）PHP程序2、3、n-1通过预定义变量$_COOKIE从Cookie请求头中获取Cookie信息，这些PHP程序就可以获取PHP程序1设置的Cookie信息了。12-2Cookie会话技术1.

Cookie工作原理和生命周期3.Cookie失效Cookie失效后，浏览器再次发出HTTP请求时，HTTP请求中没有该Cookie请求头。按照Cookie失效时机的不同，可以将Cookie分为会话Cookie和持久Cookie。（1）会话Cookie是指Cookie信息保存在浏览器端内存中，关闭浏览器，Cookie即刻失效。说明：如果PHP程序1没有为Cookie设置到期时间（或将到期时间设置为0），那么该Cookie就是会话Cookie。12-2Cookie会话技术1.

Cookie工作原理和生命周期3.Cookie失效（2）持久Cookie是指Cookie信息保存在浏览器端主机的外存，关闭浏览器后，Cookie是否失效，取决于Cookie的到期时间（以秒为单位）。12-2Cookie会话技术2.

Cookie的目的和典型应用Cookie的本质是：Set-Cookie响应头+开启了Cookie功能的浏览器+Cookie请求头。Cookie的目的：其他PHP程序获取PHP程序1设置的Cookie信息。也就是说，Cookie的目的是借用浏览器端技术，实现Cookie会话期间，多次请求/响应之间的数据共享。Cookie分为会话Cookie和持久Cookie。会话Cookie的典型应用是实现Session会话技术；持久Cookie的典型应用是实现Web应用程序的免密登录功能12-2Cookie会话技术3.

使用setcookie函数创建Cookiesetcookie函数的语法格式如下所示。setcookie(string$name,string$value="",int$expires_or_options=0,string$path="",string$domain="",bool$secure=false,bool$httponly=false):bool12-2Cookie会话技术4.

其他PHP程序读取CookieCookie在浏览器端诞生后，再次访问其他PHP程序时，浏览器会自动将Cookie信息放入HTTP请求的Cookie请求头中，其他PHP程序就可以通过预定义变量$_COOKIE读取Cookie请求头中的Cookie信息了。假设PHP程序1将Cookie的名字设置为'cookiename'，其他PHP程序则可以通过$_COOKIE['cookiename']获取该Cookie的值。12-2Cookie会话技术4.

删除浏览器端的CookiePHP程序删除浏览器端的Cookie主要有两种方法：一种是将Cookie的值设置为空，另一种是将Cookie的到期时间设为过去的时间。浏览器接收到这样的Set-Cookie响应头后，都会自动删除Cookie。例如代码setcookie('name','value',1)将名字为name的Cookie从浏览器端删除，这是因为1是过去的时间。务必区分时间time()+1和时间1，前者是未来的时间，后者是过去的时间。注意：setcookie('name','value',0)将名字为name的Cookie设置为会话Cookie，并不是将名字为name的Cookie从浏览器端删除。12-3Session会话技术1.

Session工作原理和生命周期

12-3Session会话技术1.

Session工作原理和生命周期1.开启Session（创建Session即诞生Session）→Session会话（1）浏览器发出第1次HTTP请求：由于浏览器端没有有效的Cookie，因此此次HTTP请求中没有Cookie请求头。（2）PHP程序1调用session_start函数开启Session，由于Web服务器无法从GET请求、POST请求或COOKIE中获取SID，继而判断此次请求是浏览器第一次访问Web服务器，session_start函数的主要任务是创建Session（创建Session即诞生Session）。12-3Session会话技术1.

Session工作原理和生命周期2.再次开启Session（重用Session）→继续Session会话（1）PHP程序1运行结束返回响应：此时的响应中包含Set-Cookie响应头。（2）浏览器接收到PHP程序1的响应：响应中包含诸如Set-Cookie响应头，浏览器自动将“PHPSESSID=666”以“键值对”的方式存储到浏览器端，Cookie就此诞生。12-3Session会话技术1.

Session工作原理和生命周期2.再次开启Session（重用Session）→继续Session会话（3）浏览器向PHP程序2、3、n-1发出HTTP请求时，浏览器自动向HTTP请求中添加诸如“Cookie:PHPSESSID=666”的Cookie请求头。（4）PHP程序2、3、n-1再次开启Session，从Cookie请求头中获取SID，重用对应的Session会话文件，创建全局变量$_SESSION数组、并将Session会话文件的内容加载到该数组，通过全局变量$_SESSION对Session会话文件进行读写操作。12-3Session会话技术1.

Session工作原理和生命周期3.Session失效PHP提供的session_unset函数和session_destroy函数可以使Session失效。12-3Session会话技术2.

Cookie会话和Session会话之间的关系Cookie会话和Session会话的相同之处在于：①它们都是由PHP程序创建；②在浏览器与Web服务器多次请求/响应的过程中，它们都是为了跟踪用户；③一次Cookie会话中或者一次Session会话中都可以包含多次请求/响应，继而实现多个PHP程序之间的数据共享。12-3Session会话技术2.

Cookie会话和Session会话之间的关系Cookie会话和Session会话之间存在很多区别。功能不同数据存储的位置不同共享数据的过程不同安全程度不同共享数据的数据类型不同诞生时间和会话开始的时间不同用户体验不同12-3Session会话技术2.

Cookie会话和Session会话之间的关系Cookie会话和Session会话之间存在一定的联系。前面曾经提到：为了实现Session会话，浏览器第1次访问Web服务器时，Web服务器为其创建SID；浏览器再次访问Web服务器时自动携带SID。借助Cookie，可以让浏览器“自动”携带SID。借助Cookie，实现Session会话将变得更加容易。Cookie会话分为会话Cookie和持久Cookie。Session会话也分为会话Session和持久Session。通过会话Cookie携带SID的Session称作会话Session，通过持久Cookie携带SID的Session称作持久Session。12-3php.ini中有关Session的配置参数通过php.ini配置文件，可以设置Session会话文件的保存路径；如果借助Cookie实现Session，可以设置实现Session的Cookie名字、到期时间、有效路径、有效域名。（1）session.save_handler=files：采用文本文件的方式保存Session信息。（2）session.save_path="D:/wamp/tmp"：当save_handler设为files时，用于设置Session会话文件的路径。（3）session.use_cookies=1：通过Cookie携带SID（推荐）。设置为0时，通过查询字符串携带SID。12-3php.ini中有关Session的配置参数（4）session.auto_start=0：PHP程序不自动开启Session（推荐）。（5）=PHPSESSID：设置会话的名称为“PHPSESSID”。需要注意的是，无论使用Cookie传递SID还是使用查询字符串传递SID，都需要设置SID的名字。（6）session.cookie_lifetime=0：设置名字是PHPSESSID的Cookie的到期时间。默认值为0，意味着一旦关闭浏览器，Cookie立即失效（会话Session）。12-3php.ini中有关Session的配置参数（7）session.cookie_path=/：设置名字是PHPSESSID的Cookie的有效路径，默认为“/”，表示Session在整个Web服务器有效。（8）session.cookie_domain=：设置名字是PHPSESSID的Cookie的有效域名，默认为空。12-4session_start函数session_start函数的功能是开启Session，语法格式如下所示。session_start函数成功开启Session时返回true；否则返回false，并且不再初始化$_SESSION。session_start(array$options=[]):boolsession_start函数的执行流程是：从GET请求、POST请求或COOKIE中获取SID，①若获取不到SID，则创建Session；②若获取到SID，但SID对应的Session会话文件失效，则创建Session；③若获取到SID，并且SID对应的Session会话文件有效，则重用已有的Session。12-5全局变量$_SESSION全局变量$_SESSION的功能是对Session会话文件进行读写操作。创建Session时，全局变量$_SESSION被初始化为空数组；重用已有的Session时，Session会话文件中的全部内容放入$_SESSION数组中。12-6有关Session的常用函数（1）session_unset函数语法格式：session_unset():boolsession_unset函数删除$_SESSION数组中的所有元素以及Session会话文件中的所有内容，并不会删除Session会话文件，也不会重置SID。session_unset函数的功能等效于代码“$_SESSION=[]”。（2）session_destroy函数语法格式：session_destroy():boolsession_destroy函数用于删除$_SESSION数组中的所有元素以及Session会话文件中的所有内容，删除Session会话文件，并将SID重置为0。12-6有关Session的常用函数

（3）session_name函数语法格式：session_name():stringsession_name函数返回当前会话的名称，默认是php.ini中的参数值“PHPSESSID”。12-6有关Session的常用函数（4）session_id函数语法格式：session_id():string如果没有调用session_start函数开启Session，session_id函数返回空字符串；如果已经调用session_start函数开启会话，session_id函数返回当前会话的SID。说明：通过判断session_id函数的返回值是否是空字符串，可以判断当前PHP程序是否开启Session。实践任务上机实践会话控制技术：Cookie与SessionPHP编程基础与实例教程第三版

PHPFundamentals&Practices3ndEdition第13章字符串处理

主讲：孔祥盛

本章大纲13-1指定字符串的方法13-2常用字符串处理函数13-1指定字符串的方法1.

使用单引号或双引号指定字符串

13-1指定字符串的方法2.

使用heredoc语法指定字符串

13-1指定字符串的方法3.

使用heredoc语法指定字符串

13-2常用字符串处理函数1.

mb_*函数“mb”表示“multi-bytesafe”（多字节安全）。mb_*函数在mbstring扩展中定义，因此必须开启mbstring扩展，才能使用mb_*函数。方法是：打开php.ini配置文件，找到如下配置信息，去掉前面的“;”的注释。extension=mbstring13-2常用字符串处理函数1.

mb_*函数1.strlen函数和mb_strlen函数（1）strlen函数用于统计字符串的长度，本质是统计“字节”个数。（2）mb_strlen函数用于统计字符串的长度，本质是统计“字符”个数。13-2常用字符串处理函数1.

mb_*函数1.strlen函数和mb_strlen函数13-2常用字符串处理函数1.

mb_*函数2.mb_substr函数mb_substr函数用于截取子字符串，语法格式如下所示。mb_substr函数返回字符串$string中从$start索引开始、长度是$length的子字符串。若没有指定参数$length，则返回到字符串末尾的子字符串。mb_substr(string$string,int$start,int$length=null,string$encoding=null):string13-2常用字符串处理函数1.

mb_*函数2.mb_substr函数13-2常用字符串处理函数1.

mb_*函数3.mb_strcut函数mb_strcut函数用于截取子字符串，语法格式如下所示。mb_strcut(string$string,int$start,int$length=null,string$encoding=null):stringmb_strcut函数和mb_substr函数的功能大致相同。不同之处在于：mb_substr函数以字符为单位，将多字节字符计为1；mb_strcut函数以字节为单位，对于占用多个字节的中文字符，截取时多余的字节将舍去，从而避免中文字符乱码问题的发生。13-2常用字符串处理函数1.

mb_*函数3.mb_strcut函数13-2常用字符串处理函数1.

mb_*函数4.mb_strpos函数和mb_strrpos函数（1）mb_strpos函数用于查找子字符串第一次出现时的索引，语法格式如下所示。mb_strpos函数在字符串$haystack中查找字符串$needle第一次出现时的索引，若查找不到则返回FALSE，可选参数$offset用于指定从哪个索引开始查找。mb_strpos(string$haystack,string$needle,int$offset=0,string$encoding=null):int|false（2）mb_strrpos函数用于从右边开始查找子字符串第一次出现时的索引。13-2常用字符串处理函数1.

mb_*函数4.mb_strpos函数和mb_strrpos函数13-2常用字符串处理函数2.

拼接和裁剪函数1.implode函数implode函数的语法格式如下所示，implode函数使用字符串$separator将数组$array中的元素连接成一个新字符串。implode函数是explode函数的反函数。implode(string$separator,array$array):string13-2常用字符串处理函数2.

拼接和裁剪函数2.trim函数、rtrim函数和ltrim函数（1）trim函数删除字符串两边的空格（例如Tab、回车、换行、空格等字符）。（2）rtrim函数和ltrim函数分别用于删除字符串右边和左边的空格。说明：按某个“关键字”模糊查询博客内容时，可以使用trim函数将关键字两边的空格剔除；在用户注册或用户登录系统中，可以使用trim函数将用户名两边的空格剔除。13-2常用字符串处理函数3.

特殊字符处理函数1.nl2br函数nl2br函数的语法格式如下所示，功能是将字符串$string中的换行符“\n”“\r”“\r\n”替换成HTML换行符“<br/>”。nl2br(string$string):string网页中的换行符是“<br/>”，文本文件中的换行符通常是“\n”“\r”或者“\r\n”，这些换行符在网页中不起作用。13-2常用字符串处理函数3.

特殊字符处理函数1.nl2br函数13-2常用字符串处理函数3.

特殊字符处理函数1.nl2br函数13-2常用字符串处理函数3.

特殊字符处理函数2.addslashes函数和stripslashes函数（1）addslashes函数的语法格式如下所示，功能是将字符串$string中的单引号“'”、双引号“"”和反斜线“\”替换成“\'”、双引号“\"”和反斜线“\\”。addslashes函数通常用于防止SQL注入。addslashes(string$string):string（2）stripslashes函数是addslashes函数的反函数。13-2常用字符串处理函数3.

特殊字符处理函数2.addslashes函数和stripslashes函数13-2常用字符串处理函数3.

特殊字符处理函数2.addslashes函数和stripslashes函数13-2常用字符串处理函数3.

特殊字符处理函数3.htmlspecialchars函数htmlspecialchars函数将字符串中的“<”、“>”、“&”、“"”、“'”分别替换成“<”、“>”、“&”、“"”、“'”或“&apos”。说明：显示GET或POST提交的字符串数据时，为了防止用户提交HTML代码或JavaScript代码破坏系统，可以使用htmlspecialchars函数替换字符串中的“<”、“>”、“&”、“"”、“'”字符。13-2常用字符串处理函数3.

特殊字符处理函数3.htmlspecialchars函数13-2常用字符串处理函数3.

特殊字符处理函数3.htmlspecialchars函数13-2常用字符串处理函数4.

URL字符串处理函数1.parse_url函数和parse_str函数（1）parse_url函数的语法格式如下所示，功能是解析$url字符串，以数组方式返回协议名scheme、主机名host、端口号port、用户名user、密码pass、路径path、查询字符串query以及页内锚点fragment。parse_url(string$url):array（2）parse_str函数的语法格式如下所示，功能是将查询字符串$string中所有的“参数名=参数值”解析为数组$result。13-2常用字符串处理函数4.

URL字符串处理函数1.parse_url函数和parse_str函数13-2常用字符串处理函数4.

URL字符串处理函数2.URL中的特殊字符URL中的特殊字符有着特殊的含义，例如URL中的“?”定义了查询字符串的开始，“=”用于连接查询字符串中的“参数名”和“参数值”，“&”用于分隔查询字符串中的多个参数，查询字符串中间不允许有空格字符存在。如何在查询字符串中传递“?”“=”“&”“空格”等特殊字符？通用的做法是将它们转义成以“%”开头的字符序列（此时“%”也变成了特殊字符，也需要转义）。URL中的特殊字符及对应的转义字符如表所示。13-2常用字符串处理函数4.

URL字符串处理函数2.URL中的特殊字符13-2常用字符串处理函数4.

URL字符串处理函数2.URL中的特殊字符13-2常用字符串处理函数4.

URL字符串处理函数3.urlencode函数和rawurlencode函数urlencode函数的语法格式如下所示，功能是将字符串$string中的URL特殊字符转义为以“%”开头的字符序列。urlencode(string$string):string13-2常用字符串处理函数4.

URL字符串处理函数3.urlencode函数和rawurlencode函数13-2常用字符串处理函数4.

URL字符串处理函数4.urldecode函数和rawurldecode函数urldecode函数是urlencode函数的反函数。由于浏览器会自动将urldecode函数转义后的字符串进行urldecode处理，因此一般情况下不需要使用urldecode函数，除非字符串做了两次urlencode()处理。rawurldecode函数是rawurlencode函数的反函数，这里不再赘述。实践任务上机实践1：个人博客系统中字符串的处理上机实践2：字符串处理PHP编程基础与实例教程第三版

PHPFundamentals&Practices3ndEdition第14章个人博客系统首页的UI设计与实现

主讲：孔祥盛

本章大纲14-1Web前端技术14-2使用DIV+CSS实现个人博客系统首页的页面布局14-1Web前端技术

HTML、JavaScript和CSS是Web开发人员必须了解的Web前端技术。HTML定义了网页的内容；CSS和JavaScript都是为了渲染HTML，CSS能够让HTML外观更好看，JavaScript定义了HTML具备的行为。

14-1Web前端技术1.

HTML简介一个HTML页面是包含多个HTML元素的文本文档，HTML元素指的是从开始标签到结束标签的所有HTML代码，HTML元素的内容是开始标签与结束标签之间的内容。以HTML元素“<textarea>多行文本框</textarea>”为例，“<textarea>”是开始标签，“</textarea>”是结束标签，“多行文本框”就是该HTML元素的内容。14-1Web前端技术2.

HTML元素的属性按照属性的类型，本书将HTML元素的属性分为核心属性、事件属性以及外观属性。<inputstyle="text-align:center;color:red;font-size:20px;border:10pxsolidblue;"onblur="alert(this.value)"type='text'name="userName"id="userName"value=""/>核心属性：id、name、type以及value等属性，是HTML元素的核心属性。外观属性：示例代码使用style属性定义了HTML元素的外观（单行文本框中的文字以“居中、红色、20像素”CSS样式显示），style属性可以包含CSS样式代码。14-1Web前端技术2.

HTML元素的属性事件属性：通过鼠标或者键盘操作HTML元素时，可以在HTML元素上产生事件；事件的发生可以触发HTML元素的“行为”，“行为”通过JavaScript定义。例如，当单行文本框失去焦点时，触发onblur事件，继而触发执行onblur事件属性对应的JavaScript代码“alert(this.value)”，而alert(this.value)负责弹出一个对话框，对话框上显示了单行文本框里输入的内容。说明：JavaScript是一种面向对象编程语言，JavaScript中的this表示当前被操作的HTML元素对象，this.value用于访问当前被操作的HTML元素对象的value属性值。14-1Web前端技术2.

HTML元素的属性HTML元素常用的事件属性举例：<body>标签常用的事件属性是onload，表示HTML页面加载到浏览器后，触发执行onload属性定义的行为。单行文本框input标签（type='text'）常用的事件属性是onblur，当单行文本框元素失去焦点时，触发执行onblur事件属性定义的行为。事件属性onchange，在内容改变且失去焦点时，触发执行onchange属性定义的行为。事件属性onclick，当HTML元素上发生鼠标单击事件时，触发执行onclick属性定义的行为。事件属性ondbclick，当HTML元素上发生鼠标双击件时，触发执行ondbclick属性定义的行为。14-1Web前端技术3.

CSS简介CSS是CascadingStyleSheets的缩写，译作层叠样式表。所谓层叠，是一种“冲突”的解决方案。这是因为，一个HTML元素可能同时被多个“外观属性”修饰，当多个“外观属性”出现冲突时，以优先级高的为准（覆盖），最后再将所有“外观属性”叠加，形成该HTML元素的最终“外观”。14-1Web前端技术4.

JavaScript简介1.JavaScript代码的编写位置简单的JavaScript代码可以直接编写在HTML元素的事件属性中。复杂的JavaScript代码需要借助<script/>标签嵌入到HTML页面中，<script/>标签可以写在HTML页面的任意位置，不过通常情况下写在<head/>标签中或者</body>结束标签前或者</body>结束标签后。14-1Web前端技术4.

JavaScript简介2.HTML元素以及JavaScript呈现的顺序加载HTML页面时，浏览器按照HTML页面中HTML元素以及JavaScript出现的先后顺序，一一呈现，最终呈现出整个页面效果。14-1Web前端技术4.

JavaScript简介3.JavaScript的document对象HTML页面被加载到浏览器后，整个HTML页面将被映射为JavaScript的document对象。document对象就是整个HTML页面，整个HTML页面就是document对象，JavaScript通过操作document对象，继而可以操作整个HTML页面。document对象提供了很多属性，用于获取整个HTML页面的特征信息，例如characterSet、contentType、title、URL、cookie、lastModified、referrer等属性。document对象还提供了很多方法，例如document.write('字符串')方法将字符串写到当前HTML页面。14-1Web前端技术4.

JavaScript简介4.JavaScript每条语句以“;”分号结束，使用“+”可以将两个字符串拼接成一个字符串。5.声明变量JavaScript声明变量的语法格式如下。varage;14-1Web前端技术4.

JavaScript简介6.声明函数JavaScript中声明函数的语法格式如下，其中myFunction是函数名。varmyFunction=function(myArgs){//dosth}7.调用函数函数名后紧跟括号（括号内可以有参数），表示对函数进行调用。调用函数的语法格式如下。myFunction(args);14-1Web前端技术5.

通过JavaScript的document对象操作HTML元素1.通过JavaScript的document对象定位HTML元素只有先定位到HTML元素，才能操作该HTML元素。借助HTML元素的id属性或者name属性可以定位HTML元素。（1）通过HTML元素的id属性定位HTML元素document.getElementById("username")功能：返回“id=userName”的第一个HTML元素。说明：同一HTML页面上，HTML元素的id属性唯一，因此通过id属性可以定位到唯一的HTML元素。14-1Web前端技术5.

通过JavaScript的document对象操作HTML元素1.通过JavaScript的document对象定位HTML元素（2）通过HTML元素的name属性定位HTML元素document.getElementsByName("hobby")功能：返回“name=hobby”的所有HTML元素的数组，而不是一个HTML元素。说明：同一HTML页面上，HTML元素的name属性可能不唯一（例如单选框、复选框等表单控件），因此通过name属性定位到多个HTML元素。当然，定位HTML元素还有其他方法，例如document.getElementsByTagName(tagName)，该方法按照HTML元素的标签名定位HTML元素。14-1Web前端技术5.

通过JavaScript的document对象操作HTML元素2.读取或设置HTML元素的内容（1）设置HTML元素内容的代码格式如下：document.getElementById(id).innerHTML=newtextornewHTMLelement;（2）读取HTML元素内容的代码格式如下：varid=document.getElementById(id).inner