HTML、css.ppt
《HTML、css.ppt》由会员分享,可在线阅读,更多相关《HTML、css.ppt(44页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
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”文件夹重命名为文件夹重命名为“班级学班级学号姓名号姓名”,然后上传。),然后上传。)同任务一同
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML css
限制150内