《HTML、css.ppt》由会员分享，可在线阅读，更多相关《HTML、css.ppt（44页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML代码HTML文件的结构：HTMLHTML文件开始文件开始 文件头开始文件头开始 文件头文件头 文件头结束文件头结束 文件体开始文件体开始 文件体文件体 文件体结束文件体结束 HTMLHTML文件结束文件结束HTML元素的语法表示：l 文件或超文本文件或超文本 例：例：p语法表示语法表示/pl”文本文本或超文本或超文本 例：例：p align=center语法表示语法表示/pl 例：例：声明网页标题：l title：声明网页标题，声明网页标题，插在插在headhead的开始和结束标记之间的开始和结束标记之间例：例：head欢迎光临本网页！欢迎光临本网页！/title body标记的常用属
2、性：标记的常用属性：Background=“url”设置背景图像。设置背景图像。Url表示背景图片表示背景图片地址地址Text=“#rrggbb”设置文字的颜色（设置文字的颜色（#rrggbb为颜色为颜色代码）代码）Link=“#rrggbb”设置没访问过的超链接文字颜色设置没访问过的超链接文字颜色Vlink=“#rrggbb”设置已访问过的超链接文字颜色设置已访问过的超链接文字颜色Alink=“#rrggbb”设置访问中的超链接文字颜色设置访问中的超链接文字颜色Bgcolor=“#rrggbb”设置背景颜色设置背景颜色相对路径：相对路径就是相对于当前文件的路径，省略相对路径就是相对于当前文件
3、的路径，省略了与当前文档链接相同的了与当前文档链接相同的URLURL部分，只指明不同部部分，只指明不同部分。分。*如果链接的文件与当前文件处在同一文件夹如果链接的文件与当前文件处在同一文件夹中，中，只需输入文件名；只需输入文件名；*如果要链接的文件在当前文件夹的子文件夹如果要链接的文件在当前文件夹的子文件夹中，中，则需输入则需输入“/”/”及文件夹名；及文件夹名；*如果要链接的文件在当前文件夹的上级文件如果要链接的文件在当前文件夹的上级文件夹中，夹中，则需输入则需输入“./”./”、文件夹名称及文件名，、文件夹名称及文件名，其中其中“.”.”表示表示“在文件夹层次结构中上移一级在文件夹层次结构
4、中上移一级”。设置背景声音：设置背景声音，当设置背景声音，当loop取值为取值为-1或或infinite时声音会无限次重播。时声音会无限次重播。例：例：插入一个图像文件：l=“”：在网页中插入一个图在网页中插入一个图像文件，等号后面是图像文件的像文件，等号后面是图像文件的URLURL例：该网页位于例：该网页位于D:myweb中中(图片路径为图片路径为D:mywebbg.jpg)（图片路径为图片路径为D:mywebimagesbg.jpg）（图片路径为图片路径为D:imagesbg.jpg）ImgImg标记常用属性：标记常用属性：Src设置图像文件存放位置及文件名设置图像文件存放位置及文件名Wi
5、dth设置图像显示的宽度（像素）设置图像显示的宽度（像素）Height设置图像显示的高度（像素）设置图像显示的高度（像素）Hspace设置图像的左右空间（像素）设置图像的左右空间（像素）Vspace设置图像的上下空间（像素）设置图像的上下空间（像素）Border设置图像的边框厚度（像素）设置图像的边框厚度（像素）Align设置对齐方式设置对齐方式alt设置图片名称设置图片名称文本常用标记：文本常用标记：l：字体标记，设定字体、颜色和字字体标记，设定字体、颜色和字号等。常用属性有：号等。常用属性有：size：设置文字的大小设置文字的大小 color：设置文本的色彩设置文本的色彩 face：设置文
6、本的字体设置文本的字体l：实现文本加粗实现文本加粗l：实现文本加下划线实现文本加下划线l：将将文字变成斜体文字变成斜体例：例：size=6“color=#FF0000字体标记字体标记/u换行、换段、水平线标记：换行、换段、水平线标记：l：换行标记换行标记l:段落标记，为文字、图片、表格段落标记，为文字、图片、表格等之间加一空行等之间加一空行l：插入一条水平分隔线插入一条水平分隔线例：例：p align=center段落标记段落标记/p超链接标记：l:=“”:链接标记，用于链接标记，用于定义超级链接来链接其它文件定义超级链接来链接其它文件例：例：=l1.htm链接到本网链接到本网站中的网页站中的
7、网页/链接到搜狐网站链接到搜狐网站/aa=mailto:链接到邮箱链接到邮箱/aa=l1.htm#2链接到网页中的标签链接到网页中的标签/a table插入一个表格：插入一个表格：l：插入一个表格，其内插入一个表格，其内容还应有行与列的描述。容还应有行与列的描述。l：表格中行的描述。表格中行的描述。l：表格中列的描述，它的两个表格中列的描述，它的两个属性属性rowspan定义跨行的单元格；定义跨行的单元格；colspan定义跨列的单元格，属性的定义跨列的单元格，属性的值为所跨的行数和列数。值为所跨的行数和列数。table标记的常用属性：标记的常用属性：Border设置表格边框的宽度（取值为正整
8、数）设置表格边框的宽度（取值为正整数）Width设置整个表格的宽度（取值为正整数设置整个表格的宽度（取值为正整数或百分比）或百分比）Bgcolor凤置凤置表格的背景颜色（取值为颜色代表格的背景颜色（取值为颜色代码）码）Background 设置表格的背景图像设置表格的背景图像Cellpadding 设置单元格的内容与边框之间的距离设置单元格的内容与边框之间的距离cellspacing设置单元格之间的距离设置单元格之间的距离 td标记的常用属性：标记的常用属性：Width设置单元格的宽度（取值为正整数）设置单元格的宽度（取值为正整数）Height设置单元格的高度（取值为正整数）设置单元格的高度（
9、取值为正整数）Align设置单元格内容的水平对齐方式（取值设置单元格内容的水平对齐方式（取值为为left、center、right）Valign设置单元格内容的垂直对齐方式（取值设置单元格内容的垂直对齐方式（取值为为top、middle、bottom）Bgcolor设置单元格的背景颜色（取值为颜色代设置单元格的背景颜色（取值为颜色代码）码）Background设置单元格的背景图像设置单元格的背景图像bordercoloe设置单元格的边框颜色设置单元格的边框颜色表格示例：表格示例：表格示例代码：表格示例代码：td width=第一行第一列第一行第一列/font /td width=第二行第一列第
10、二行第一列/td td width=第二行第一列第二行第一列/td /td width=第三第一列第三第一列/td td width=p align=第三行第二列第三行第二列/td td width=p align=第三第三列第三第三列/td /td width=第四行第一列第四行第一列/td td width=第四行第二列第四行第二列/td td width=第四行第三列第四行第三列/td td width=第四第三列第四第三列/td /插入表单l：表单标记，提供表单的表单标记，提供表单的功能。功能。例：例：form method=POST action=-WEBBOT-SELF-姓名：姓名
11、：size=20 input type=submit value=name=B2任务一:打开打开“记事本记事本”程序，新建文件程序，新建文件ghshj_1.htm，保存到保存到e:htmlmyweb路径路径下，编写下，编写html代码，实现如下网页效果，代码，实现如下网页效果，并通过并通过IE游览器查看：游览器查看：1、在网页中插入标题：、在网页中插入标题：“你知道这些你知道这些公害事件吗？公害事件吗？2、实现下图所示的网页效果。、实现下图所示的网页效果。(字幕代码见字幕代码见e:html字幕代码字幕代码.txt，注注意：请按要求修改意：请按要求修改)(网页中的文本见网页中的文本见e:html
12、公害事件公害事件.txt)字幕，设为从右至左滚动，字体字幕，设为从右至左滚动，字体为隶书，大小为为隶书，大小为36pt，斜体，颜斜体，颜色代码为色代码为#008000 小标题：字体为黑体，大小为小标题：字体为黑体，大小为5，颜色代码为，颜色代码为#0000FF，左对齐左对齐文本：字体为楷体文本：字体为楷体_GB2312、加粗，大小为加粗，大小为4网页背景图片为：网页背景图片为：e:htmlmywebbackground.gif 任务二:保存保存ghshj_1.htm,将文件另存为将文件另存为ghshj_2.htm，保存保存到到e:htmlmyweb路径下，打开路径下，打开ghshj_2.htm
13、，修改修改html代码，实现如下网页效果，并通过代码，实现如下网页效果，并通过IE游览器查看。游览器查看。1、在网页中插入图片；、在网页中插入图片；2、在网页下方插入文本、在网页下方插入文本“联系我们：联系我们：”，并实现超链接；并实现超链接；3、将网页以表格方式重新设计。、将网页以表格方式重新设计。（提示：可将前面示例的表格代码复制到本文本中，（提示：可将前面示例的表格代码复制到本文本中，然后加以修改）然后加以修改）网页效果见下图：网页效果见下图：（任务完成后将（任务完成后将“mywebmyweb”文件夹重命名为文件夹重命名为“班级学班级学号姓名号姓名”，然后上传。），然后上传。）同任务一同
14、任务一插入图片插入图片e:htmlmywebdiqiu.gif，其其属性为：属性为：align=center border=0 width=255 height=139 宽度为宽度为72%宽度为宽度为28%高度高度124高度高度95高度高度114文本中部居中文本中部居中文本中部左对齐文本中部左对齐超链接到邮箱超链接到邮箱表格中文本其它要求同任务一表格中文本其它要求同任务一层叠样式表（CSS）什么是CSS 样式表 CSS(Cascading Style Sheet，层叠样式表层叠样式表，简称样，简称样式表式表)，是近几年才发展起来的新技术，诞生于，是近几年才发展起来的新技术，诞生于1996 年底
15、。年底。CSS样式表作为当前网页制作中的一个常用技术，不样式表作为当前网页制作中的一个常用技术，不仅可以对文字格式进行设置，还可以更加精确地控制布局、仅可以对文字格式进行设置，还可以更加精确地控制布局、字体、颜色、背景和其他图文效果。有以下几个优点。字体、颜色、背景和其他图文效果。有以下几个优点。只需修改一个只需修改一个CSS代码文件就可以改变页数不定的代码文件就可以改变页数不定的网页外观和格式。网页外观和格式。可以可以“随心所欲随心所欲”地控制页面布局和外观。地控制页面布局和外观。在所有浏览器和平台之间具有较好的兼容性。在所有浏览器和平台之间具有较好的兼容性。能够精简网页，提高下载速度。能够
16、精简网页，提高下载速度。CSS：CSS把网页上内容结构和格式控制把网页上内容结构和格式控制分开。分开。（以前内容结构和格式控制在网页上的（以前内容结构和格式控制在网页上的分布是交错结合的，查看修改很不方便，而分布是交错结合的，查看修改很不方便，而利用利用CSS，将内容和格式控制相分离，使得将内容和格式控制相分离，使得网页可以只由内容构成，而将所有网页的格网页可以只由内容构成，而将所有网页的格式控制指向某个式控制指向某个CSS文件。）文件。）CSS的优点：1、简化了网页的格式代码，外部的样式、简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载表还会被浏览器保存在缓存里，加快了
17、下载显示的速度，也减少了需要上传的代码数量。显示的速度，也减少了需要上传的代码数量。2、只要修改保存在网站格式的、只要修改保存在网站格式的CSS文件文件就可以改变整个站点的风格特色，在修改页就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免面数量庞大的站点时，显得格外有用。避免了逐个修改网页，大大减少了重复的工作量。了逐个修改网页，大大减少了重复的工作量。插入方式（1）内联样式表把样式表规则放在把样式表规则放在和和的的中间中间，从而使样式表对整个当前的，从而使样式表对整个当前的HTML页页面产生作用，这就是一个内联样式表。面产生作用，这就是一个内联样式表。样式表格式如
18、下：样式表格式如下：-插入方式（1）内联样式表CSS中的常见代码：文字的字体：文字的字体：例，例，font-family:”font-family:”宋体宋体”文字的大小：文字的大小：例，例，font-size:10ptfont-size:10pt文字的颜色：文字的颜色：例，例，color:#0000FFcolor:#0000FF文字的斜体：文字的斜体：font-style:italicfont-style:italic文字的加粗：文字的加粗：font-weight:font-weight:blodblod文字加下划线：文字加下划线：text-decoration:underlinetext-
19、decoration:underline插入方式（2）外联样式表把样式定义成一个把样式定义成一个”.”.csscss”文件文件，然后，然后在网页中调用该文件，这即是外联式样式表。在网页中调用该文件，这即是外联式样式表。例：例：headlink”Rel表示引用文件和当前页面的表示引用文件和当前页面的关系，通常值是关系，通常值是stylesheet，表表示指定一个外部的样式表示指定一个外部的样式表指明样式指明样式表文件的表文件的路径路径插入方式（2）外联样式表客户端动态网页：客户端动态网页是指直接能被客户端浏客户端动态网页是指直接能被客户端浏览器解释执行，并使页面发生动态变化的网览器解释执行，并使
20、页面发生动态变化的网页。页。动态网页的交互性来自于内嵌的脚本语动态网页的交互性来自于内嵌的脚本语文。现在，用于制作动态网页的脚本语言主文。现在，用于制作动态网页的脚本语言主要有要有JavaScriptJavaScript和和VBScriptVBScript，其中其中JavascriptJavascript得到了大多数浏览器的支持。得到了大多数浏览器的支持。在网页加入加Javascript程序段：在网页加入加Javascript程序段：在网页加入加Javascript程序段：任务三：打开打开“记事本记事本”程序，修改程序，修改e:htmle:htmlmywebmyweb 路径下路径下ghshj_
21、3.htm ghshj_3.htm，实现如下网页效果，并通过实现如下网页效果，并通过IEIE游览器查看：游览器查看：1 1、借助、借助CSSCSS样式表，实现样式表，实现ghshj_3.htmghshj_3.htm中的网页效果，其中，中的网页效果，其中，事事件标题采用内联样式表，件标题采用内联样式表，样式表文本在样式表文本在E:htmlh1.txtE:htmlh1.txt中；中；文本采用文本采用外联式样式表，外联式样式表，样式表文件为样式表文件为e:htmlmywebh2.csse:htmlmywebh2.css。2 2、给网页加上背景声音，文件为给网页加上背景声音，文件为e:htmle:ht
22、mlmywebmywebbaby.midbaby.mid。3 3、将将E:htmlE:html任务栏字幕任务栏字幕.txttxt中的中的JavascriptJavascript代码插入到网页代码插入到网页的的headhead区域区域,并将班级改成本班名称；并将班级改成本班名称；4.4.将将e:htmle:html鼠标跟踪时钟鼠标跟踪时钟.txttxt中的中的JavascriptJavascript代码插入到网页代码插入到网页的的BODYBODY区域的第一行区域的第一行5.5.上网搜索一些修饰网页的代码，试着加入上网搜索一些修饰网页的代码，试着加入ghshjghshj_3._3.htm htm，
23、并查并查看效果看效果服务器端动态网页：ASPASP动态服务器页面动态服务器页面ASPASP是微软公司推出的一种服务器编程是微软公司推出的一种服务器编程技术，其实也就是一套服务器脚本运行环境。技术，其实也就是一套服务器脚本运行环境。通过通过ASPASP，我们可以建立动态的、交互我们可以建立动态的、交互的、高效的的、高效的WebWeb服务器应用程序，如交互式服务器应用程序，如交互式的动态网页。例：论坛、留言簿等的动态网页。例：论坛、留言簿等基于服务端的动态网页技术的原理：使用不同技术编写的动态页面保存在使用不同技术编写的动态页面保存在Web服服务器内，当客户端用户向务器内，当客户端用户向Web服务
24、器发出访问动服务器发出访问动态页面的请求时，态页面的请求时，Web服务器将根据用户访问网服务器将根据用户访问网页文件名的后缀来确定该页面所使用的编程技术，页文件名的后缀来确定该页面所使用的编程技术，然后把该网页文件提交给相应的服务器组件程序；然后把该网页文件提交给相应的服务器组件程序；服务器组件程序扫描并执行，然后把执行结果返服务器组件程序扫描并执行，然后把执行结果返回回Web服务器；最终服务器；最终Web服务器把执行结果连同服务器把执行结果连同页面上的页面上的HTML内容以及客户端脚本一同传送到客内容以及客户端脚本一同传送到客户端。户端。虽然客户端用户所接收到的网页与传统网页虽然客户端用户所
25、接收到的网页与传统网页并没有任何区别，但实际上，网页内容已经被服并没有任何区别，但实际上，网页内容已经被服务器处理过了，完成了动态的个性化设置。务器处理过了，完成了动态的个性化设置。网站的发布方式：1 1、申请免费空间：、申请免费空间：在功能上受到很大限制，在功能上受到很大限制，且很多都不支持数据库功能。且很多都不支持数据库功能。2 2、租用虚拟主机：、租用虚拟主机：多个用户共用一个服务多个用户共用一个服务器，每个用户分配一定大小的空间，价格较器，每个用户分配一定大小的空间，价格较低。如果要建立一个有后台数据库支持的动低。如果要建立一个有后台数据库支持的动态网站，虚拟主机是不错的选择。态网站，
26、虚拟主机是不错的选择。3 3、租用专用服务器：、租用专用服务器：适用于访问流量较大适用于访问流量较大的网站，主要用户为中小企业。的网站，主要用户为中小企业。4 4、购买自己的服务器：、购买自己的服务器：可采用服务器托管可采用服务器托管或专线接入两种方式，费用较高。或专线接入两种方式，费用较高。使用IIS发布网站：l创建新的创建新的WebWeb站点站点 （虚拟目录、网站实际路径、授权）（虚拟目录、网站实际路径、授权）l设置默认文档设置默认文档 （打开站点时链接的首页）（打开站点时链接的首页）任务四：1 1、将、将D D盘中的盘中的“lulu”lulu”站点发布，虚拟目录站点发布，虚拟目录名为名为“luluwululuwu”、默认文档为站点中的默认文档为站点中的index.index.htmhtm；2 2、左右同学相互登录网站浏览、勾选宝贝，左右同学相互登录网站浏览、勾选宝贝，查看结果；查看结果；3 3、将、将“index.index.htmhtm”更名为更名为“index.asp”index.asp”，重新发布；重新发布；4 4、左右同学相互登录网站浏览、色选宝贝，、左右同学相互登录网站浏览、色选宝贝，查看结果。查看结果。