《《HTML基础教程》PPT课件.ppt》由会员分享,可在线阅读,更多相关《《HTML基础教程》PPT课件.ppt(42页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、第第第第2 2 2 2章章章章HTMLHTML基础基础基础基础本课教学内容本课教学内容w静态网页制作静态网页制作wHTMLHTML的常见标签(文字布局的常见标签(文字布局、文字设计标签)文字设计标签)w表格标签表格标签w链接和图片标签链接和图片标签w表单标签(文本框、密码框、下拉列表)表单标签(文本框、密码框、下拉列表)w框架框架 网页实景图网页实景图 2.1 2.1 静态网页制作静态网页制作 一个网站,由许许多多的网页组成,通过地址向一个网站,由许许多多的网页组成,通过地址向服务器发出请求后,接收到可以被浏览器运行解释的服务器发出请求后,接收到可以被浏览器运行解释的文件,由浏览器显示出来。文
2、件,由浏览器显示出来。(思考题:请大家回忆第一(思考题:请大家回忆第一节课当中讲的:从在浏览器地址栏输入节课当中讲的:从在浏览器地址栏输入URLURL到显示出网到显示出网页界面,中间有哪些过程?)页界面,中间有哪些过程?)HTML HTML(超文本标记语言),是构成网页文档的主(超文本标记语言),是构成网页文档的主要语言。一般情况下,网页上看到的文字、图形、动要语言。一般情况下,网页上看到的文字、图形、动画、声音、表格、链接等元素大部分都是由画、声音、表格、链接等元素大部分都是由HTMLHTML语言语言描述的描述的。思考题参考答案思考题参考答案w1.1.客户端客户端(比如:(比如:IEIE、F
3、ireFoxFireFox、360360)接受用户的输入,如)接受用户的输入,如用户名、密码、查询字符串等;用户名、密码、查询字符串等;w2.2.通过域名服务器通过域名服务器DNSDNS获得域名指向的获得域名指向的IPIP地址;地址;w3.3.浏览器得到域名指向的浏览器得到域名指向的IPIP后,浏览器会把我们输入的域名后,浏览器会把我们输入的域名转化为转化为HTTPHTTP的服务请求的服务请求,通过这种方式浏览器向服务器发出,通过这种方式浏览器向服务器发出了请求,了请求,应用服务器应用服务器接收到请求后,使用某种脚本语言访问接收到请求后,使用某种脚本语言访问数据库数据库,查询数据,并获得查询结
4、果;,查询数据,并获得查询结果;w4.4.数据库数据库向向应用服务器应用服务器中的程序返回结果;中的程序返回结果;w5.5.应用服务器应用服务器向向客户端客户端发送响应信息,返回的一般是动态生发送响应信息,返回的一般是动态生成的成的HTMLHTML页面,包括文字信息,图片,页面,包括文字信息,图片,flashflash等等(每个文件都每个文件都要有一个唯一的网址要有一个唯一的网址).).w6.6.由由用户浏览器用户浏览器负责解析负责解析HTMLHTML代码代码,显现用户界面。,显现用户界面。给给HTMLHTML语言打的广告语言打的广告w一种进行网页设计的语言一种进行网页设计的语言w一种标签式的
5、程序设计语言一种标签式的程序设计语言w一种纯文本式的语言一种纯文本式的语言w一种简单易学的语言一种简单易学的语言w一种可以使用文本编辑器进行编辑的语言一种可以使用文本编辑器进行编辑的语言w编辑的文件名后缀是编辑的文件名后缀是”.html”.html”。2.1 2.1 静态网页制作(续)静态网页制作(续)HTMLHTML语言的基本组成部分是语言的基本组成部分是各种标签各种标签,一张生动的网页往往含有大量的标签。使一张生动的网页往往含有大量的标签。使用标签,实际上就是采用一系列指令符号用标签,实际上就是采用一系列指令符号来控制输出的效果,如:来控制输出的效果,如:,是最常使,是最常使用的控制格式的
6、标签,它表示在网页上换用的控制格式的标签,它表示在网页上换行。行。2.1 2.1 静态网页制作(续)静态网页制作(续)HTMLHTML有两种类型的标签,有两种类型的标签,一类是单一类是单标签标签,就是一种单标签,它只需要单就是一种单标签,它只需要单独一组符号就可以表示完整的功能。独一组符号就可以表示完整的功能。另一另一种是双标签种是双标签,形如,形如内容内容,表示将,表示将“内容内容”显示为粗体,显示为粗体,这种标签所围绕的这种标签所围绕的内容就是标签作用的作用域。内容就是标签作用的作用域。2.1 2.1 静态网页制作(续)静态网页制作(续)HTMLHTML语言对于大小写不敏感语言对于大小写不
7、敏感,比,比如马上将要学习的表示如马上将要学习的表示HTMLHTML文档的标签:文档的标签:,也可写做,也可写做,甚至可以写为,甚至可以写为,但是一般推荐,自始,但是一般推荐,自始至终使用同一种书写方式。至终使用同一种书写方式。HTMLHTML文件基本结构文件基本结构w html 标题标题 (浏览器标题)(浏览器标题)内容主体(网页具体内容)内容主体(网页具体内容)/body /html (头部信息:(头部信息:用于设置网页相用于设置网页相关属性,比如网关属性,比如网页标题、缓存等,页标题、缓存等,可以省略)可以省略)HTMLHTML文件基本结构(续)文件基本结构(续)2 2.2.2 HTML
8、HTML中的常见标签:标题中的常见标签:标题HTMLHTML简介简介 HTMLHTML 简介简介 HTMLHTML 简介简介 HTMLHTML 简介简介 HTMLHTML 简介简介 HTMLHTML 简介简介 HTMLHTML 简介简介 一般形式为一般形式为内容内容,即,即到到,为最大,为最大,为最小为最小 运运行行结结果果 2 2.2.2 HTMLHTML中的常见标签:换行标签中的常见标签:换行标签欢迎学习欢迎学习 HTML这会是一种很有趣的这会是一种很有趣的体验体验另一个段落元素另一个段落元素 运行结果运行结果 2 2.2.2 HTMLHTML中的常见标签:段落标签中的常见标签:段落标签欢
9、迎使用欢迎使用 HTML这会是一种很有趣的体验这会是一种很有趣的体验 另一个段落元素另一个段落元素 运行结果运行结果 2 2.2.2 HTMLHTML中的常见标签:段落标签中的常见标签:段落标签为段落标签,一个段落开始由来标记,结束用表示。有一个常用属性align,它用来指明内容显示时的对齐方式,较为常用的有left、center、right,分别表示左对齐、居中对齐和右对齐。2 2.2.2 HTMLHTML中的常见标签:段落标签(续)中的常见标签:段落标签(续)学学习习HTML这这会是一种很有趣的体会是一种很有趣的体验验 运行结果运行结果右对齐右对齐Left:左对齐左对齐Center:居中居
10、中Right:右对齐右对齐 2 2.2.2 HTMLHTML中的常见标签:水平线段标签中的常见标签:水平线段标签 水平标尺标签水平标尺标签用于在页面上绘制一条水平线。可借助用于在页面上绘制一条水平线。可借助于下列属性控制水平线。它只有开始标签,没有结束标签,且于下列属性控制水平线。它只有开始标签,没有结束标签,且不包含任何内容,不包含任何内容,sizesize:水平线的宽度,单位为像素。水平线的宽度,单位为像素。widthwidth:水平线的长,如不设置则默认为页面长度,单位默认为像素,:水平线的长,如不设置则默认为页面长度,单位默认为像素,但也可以使用百分制,如但也可以使用百分制,如widt
11、h=50width=50表示长度为页面长度的表示长度为页面长度的50.50.alignalign:水平线的对齐方式,常用的有水平线的对齐方式,常用的有leftleft、centercenter、right.right.noshadenoshade:线段无阴影属性,无属性值,若设置,则线段为实心线段。线段无阴影属性,无属性值,若设置,则线段为实心线段。colorcolor:线段内部的颜色。线段内部的颜色。2 2.2.2 HTMLHTML中的常见标签:水平线段标签中的常见标签:水平线段标签(续)续)欢迎使用欢迎使用HTML我的第一个我的第一个HTML文档文档这将会是一种很有趣的体验这将会是一种很有
12、趣的体验 2 2.2 .2 HTMLHTML中的常见标签中的常见标签:文字设计标签文字设计标签文字设计标签faceface:用来设置字体类型,默认为宋体:用来设置字体类型,默认为宋体。如。如font face=“_GB2312”,即设置该内容的,即设置该内容的输出的字体为楷体但是需要注意的是,只有电脑输出的字体为楷体但是需要注意的是,只有电脑中安装的字体才可以在浏览器中出现相应风格,中安装的字体才可以在浏览器中出现相应风格,如果用户没有安装该字体,则会显示默认字体的如果用户没有安装该字体,则会显示默认字体的风格。风格。colorcolor:用于设置字体颜色:用于设置字体颜色2 2.2.2 HT
13、MLHTML中的常见标签中的常见标签:文字设计标签(续)文字设计标签(续)文字设计标签常见的设置文字风格的标签有:常见的设置文字风格的标签有:内容内容:将内容设置为粗体。:将内容设置为粗体。内容内容:将内容设置下划线。:将内容设置下划线。内容内容:将内容设置为斜体。:将内容设置为斜体。内容内容:将内容设置为上标。:将内容设置为上标。内容内容:将内容设置为下标:将内容设置为下标字体颜色标签示例字体颜色标签示例字符级标签示例字符级标签示例 Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,White,Green,Purple,Silver,Yellow
14、,2.2.2 2.2.2 列表标签列表标签w列表标签分为两种,一种是有序的,一种是无序的。列表标签分为两种,一种是有序的,一种是无序的。w内容内容,表示它所包围的内容是,表示它所包围的内容是无序列表无序列表标标签,即列表中每一项目前不会加上序号,而是会加上签,即列表中每一项目前不会加上序号,而是会加上、等符号。等符号。w内容内容表示表示有序标签有序标签,意义与使用方法和无,意义与使用方法和无序列表标签大致相同,不同点为它会在每个列表项前序列表标签大致相同,不同点为它会在每个列表项前加上数字加上数字w其中列表的每一项用其中列表的每一项用列表项列表项 标示。标示。无序列表无序列表学习学习 HTML
15、HTML星期一星期一星期二星期二星期三星期三星期四星期四星期五星期五无序列表是一种无序列表是一种“项目符号列表项目符号列表”。其中的项目都带有项目符号前缀。其中的项目都带有项目符号前缀。该列该列表表包含在无序列表标签包含在无序列表标签.内内。列表中的每个项目都使用。列表中的每个项目都使用列表项列表项进行标签,进行标签,关闭标签关闭标签是可选的。是可选的。列表的项目符号列表的项目符号w 方形项目符号w 实心圆项目符号w 空心圆项目符号 有序列表有序列表 学习学习HTMLHTML星期一星期一星期二星期二星期三星期三星期四星期四星期五星期五 有序列表包含在有序列表包含在.标签内标签内。有序列表也显示
16、列表项目。它与无。有序列表也显示列表项目。它与无序列表的区别在于有序列表项前面的编号是可设置的有序编号。序列表的区别在于有序列表项前面的编号是可设置的有序编号。无序和有序的嵌套大写罗马数字 小写罗马数字 大写字母 小写字母从第n个值开始编号 学习学习HTML 星期一星期一简介简介HTML创建列表创建列表星期二星期二创建表创建表插入图像插入图像星期三星期三星期四星期四星期五星期五 2.3 2.3 表格标签表格标签编写表格所用到的标签如下:定义表格,表格的所有内容都写在这:定义表格,表格的所有内容都写在这个标签之内个标签之内 :定义标题,标题会自动出现在整:定义标题,标题会自动出现在整张表格的上方
17、张表格的上方:定义表行:定义表行 :定义表头,包含在:定义表头,包含在之间,表头中的之间,表头中的文字会自动变成粗体文字会自动变成粗体 :定义表元:定义表元(表格的具体数据表格的具体数据),包含在,包含在之间之间表格标签表格标签w以下为制作表格的标签中大多拥有的公共属性:alignalign:水平布局方式,常用属性值有:水平布局方式,常用属性值有 left left,rightright,centercenter,表示左,表示左对齐,右对齐和居中对齐,对齐,右对齐和居中对齐,的该属性表示表格在页面的布局方的该属性表示表格在页面的布局方式,式,、的该属性表示该行和该表元内的内容的布局方式。默认的
18、该属性表示该行和该表元内的内容的布局方式。默认布局方式为左对齐布局方式为左对齐 bgcolorbgcolor:设置背景颜色:设置背景颜色 borderborder:设置边框的宽度,属性值为整数,为:设置边框的宽度,属性值为整数,为 0 0 时表格没有边框,默时表格没有边框,默认值为认值为 0 0 widthwidth:宽度,默认单位为像素,也可以使用百分制单位:宽度,默认单位为像素,也可以使用百分制单位 heightheight:高度,默认单位为像素;也可以使用百分制单位:高度,默认单位为像素;也可以使用百分制单位表格标签表格标签w对于整张表格,标签常用的属性有以下几个:bordercolor
19、bordercolor:表格边框的颜色,默认为黑色:表格边框的颜色,默认为黑色 cellpaddingcellpadding:表元边框的宽度:表元边框的宽度 cellspacingcellspacing:表元的边框与表格边框之间的宽度:表元的边框与表格边框之间的宽度合并单元格合并单元格w合并单元格必须对标签中的 rowspan、colspan 进行设置,属性值都为整数,默认为 1,表示没有合并。这两个属性的意思分别为:从该表元起,该表元在行或者列上占有的单 元格数,比如设置某个标签rowspan=2,表示该表元及其下面的表元合并成一个 表格标签表格标签 2.4 2.4 链接和图片标签链接和图片
20、标签 w链接标签可以使用户链接到另一个页面,它的写链接标签可以使用户链接到另一个页面,它的写法是法是内容内容,标签内的内容为链接所显示的,标签内的内容为链接所显示的内容,可以是文字、空格占位符、图片等,内容,可以是文字、空格占位符、图片等,此标此标签的一个重要属性是:签的一个重要属性是:hrefhref,它的值表示链接所,它的值表示链接所指向的资源地址。指向的资源地址。2.4 2.4 链接和图片标签链接和图片标签w图片标签比较重要和常用的标签有以下几个:srcsrc:表示图片储存的位置:表示图片储存的位置 widthwidth,heightheight,borderborder,alignal
21、ign:作用与前文所提到属性相同:作用与前文所提到属性相同 altalt:当图片未载入或者载入失败时提供的替代性的文字说明:当图片未载入或者载入失败时提供的替代性的文字说明 2.4 2.4 链接和图片标签链接和图片标签 使用使用链链接接 本本页页的所有内容都的所有内容都讲讲述关于如何述关于如何创创建到文档的建到文档的链链接接 单击单击此此处查处查看文档看文档 2 文档文档2 这这是文档是文档2。单击单击文档文档1中的超中的超链链接后将接后将显显示本示本页页。返回返回 2.4 2.4 链接和图片标签链接和图片标签HTMLHTML文档中的图片文档中的图片wGIFGIF(Graphics Inter
22、change Format Graphics Interchange Format)图像)图像 (.GIF)(.GIF)支持图形渐近支持图形渐近透明透明 GIF GIF 图像图像支持动画支持动画支持无损压缩支持无损压缩wJPEGJPEG(Joint Photographic Experts GroupJoint Photographic Experts Group)图像)图像 (.JPG)(.JPG)wPNGPNG(Portable Network Graphics Portable Network Graphics)插入图像插入图像插入图像插入图像 插入图像插入图像 底底部部对对齐齐 顶部对
23、齐顶部对齐 居居中中对对齐齐 IMG标签用于将图像插入到标签用于将图像插入到HTML文档中。可以将文档中。可以将IMG标签放置在要显示图像的位置。语法为:标签放置在要显示图像的位置。语法为:其中其中SRC是属性,而值是指定图像文件位置的是属性,而值是指定图像文件位置的URL。IMG标签的标签的ALIGN属性可以用于调属性可以用于调整图像相对于周围文本的对齐方式。语法为:整图像相对于周围文本的对齐方式。语法为:2.5 2.5 表单标签表单标签type 可以为以下的值:texttext:文本框,:文本框,text text 也为也为 type type 的默认属的默认属性性passwordpass
24、word:密码框:密码框 radioradio:单选按钮,可以将多个单选按钮的:单选按钮,可以将多个单选按钮的 name name 属性设置相同,使其成为一组。属性设置相同,使其成为一组。checkedchecked属性可设置默认被选属性可设置默认被选 checkboxcheckbox:复选框,:复选框,checked checked 属性可设置属性可设置默认被选默认被选 2.5 2.5 表单标签表单标签resetreset:重置按钮,按下之后,所有的表单:重置按钮,按下之后,所有的表单元素内容变为默认值元素内容变为默认值 buttonbutton:普通按钮:普通按钮 submitsubmit
25、:提交按钮,按下之后,网页会将:提交按钮,按下之后,网页会将表单的内容提交给表单的内容提交给 action action 设定的网页,设定的网页,actionaction的值为空时提交给本页的值为空时提交给本页 imageimage:图片,但是点击它的效果与提交按:图片,但是点击它的效果与提交按钮一样,都会提交表单钮一样,都会提交表单 2.5 2.5 表单标签表单标签 2.6 2.6 框架框架w框架的写法如下:纵向纵向3:73:7分割分割frame name=“left”框架窗口,无滚动条框架窗口,无滚动条frame src=“right.html”noresize scrolling=no name=right 本章结束本章结束w本章总结静态网页制作静态网页制作HTMLHTML中的常见标签中的常见标签表格标签表格标签链接和图片标签链接和图片标签表单标签表单标签框架框架w上机习题实践环节实践环节w设计一个网页,版面布局如左所示。wLogo自选w信息显示区可以自由发挥w需设计框架,纵向和横行分割比例自行确定放飞心情放飞心情 XXX 个人网站基本信息爱好专长理想志向喜欢歌曲信息显示区LogoTitlebutton
限制150内