《计算机协会网页设计课件.ppt》由会员分享，可在线阅读，更多相关《计算机协会网页设计课件.ppt（37页珍藏版）》请在金锄头文库上搜索。
1、高级软件人才实作培训专家高级软件人才实作培训专家! !网页设计网页设计教程教程之之htmlhtml主讲：彭登才email:qq: 1028299001计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平内容介绍内容介绍: :1.html1.html介绍介绍2.2.优秀网页欣赏优秀网页欣赏3.html3.html项目演示项目演示4.html4.html运行基本原理运行基本原理 5.html5.html的基础知识的基础知识计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平了解了解html的基本概念的基
2、本概念理解理解html的运行基本原理的运行基本原理掌握掌握html的一些基本用法的一些基本用法能写出简单的网页能写出简单的网页学习目标学习目标计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 htmlhtml是什么是什么HTMLHTML（HyperText Mark-up LanguageHyperText Mark-up Language）即超文本）即超文本标记语言或超文本链接标示语言，是目前网络上应用标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。最为广泛的语言，也是构成网页文档的主要语言。HTM
3、LHTML文本是由文本是由HTMLHTML命令组成的描述性文本，命令组成的描述性文本，HTMLHTML命令命令可以说明文字、图形、动画、声音、表格、链接等。可以说明文字、图形、动画、声音、表格、链接等。HTMLHTML的结构包括头部（的结构包括头部（HeadHead）、主体（）、主体（BodyBody）两大部）两大部分，其中头部描述浏览器所需的信息，而主体则包含分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。所要说明的具体内容。 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 htmlhtml可以做什么可以做什么HTMLH
4、TML可以编写静态网页可以编写静态网页. .该静态网页可以包括文字、图形、动画、声音、该静态网页可以包括文字、图形、动画、声音、表格、链接。从而构成一个个漂亮的网页。表格、链接。从而构成一个个漂亮的网页。给大家看几个漂亮的网页吧给大家看几个漂亮的网页吧! !计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 htmlhtml发展历史发展历史1993标记语标记语言第一版言第一版1995html2.01996html3.2w3c推荐标准推荐标准1999html4.0.1w3c推荐标准推荐标准2000xhtml1.0w3c推荐标准推荐标准2001xh
5、tml1.1w3c推荐标准推荐标准2008html5蒂姆蒂姆伯纳斯一李伯纳斯一李万维网之父万维网之父html设计者设计者w3c创始人创始人 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 w3cw3c的介绍的介绍W3C是英文是英文WorldWideWebConsortium的缩的缩写，中文意思是写，中文意思是W3C理事会或万维网联盟。理事会或万维网联盟。W3C于于1994年年10月在麻省理工学院计算机科学实验室成立月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者。创建者是万维网的发明者TimBerners-Lee。W3C组织是对
6、网络标准制定的一个非赢利组织，像组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由的标准就是由W3C来来定制。定制。W3C会员（大约会员（大约500名会员）包括生产技术产名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。在万维网发展方向上达成共识。 蒂姆蒂姆伯纳斯一李伯纳斯一李 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺
7、平 htmlhtml和和xhtmlxhtml区别区别 html-xhtml-xmlhtml语言本身有一些缺陷语言本身有一些缺陷(比如内容和形式不能分离比如内容和形式不能分离,标记单一标记单一,数据不数据不能复用等能复用等),随着随着xml的兴起，的兴起，xml越来越受到国际认可，所以人们希望越来越受到国际认可，所以人们希望xml来弥补来弥补html的不足的不足,但是目前有成千上万的网页都是但是目前有成千上万的网页都是html编写的，所以完编写的，所以完全使用全使用xml来替代来替代html还为时过早还为时过早,于是于是w3c在在2000推出推出xhtml1.0，建立，建立XHTML的目的就是实
8、现的目的就是实现HTML向向XML的过渡。的过渡。 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 htmlhtml项目演示项目演示 高级邮箱高级邮箱 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 htmlhtml项目演示项目演示 麦当劳导航麦当劳导航 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 htmlhtml项目演示项目演示( (可爱屋可爱屋) ) 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训
9、专家! !主讲: 韩顺平 htmlhtml项目演示项目演示( (旅游岛旅游岛) ) 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 html项目演示项目演示(仿仿sohu首页面首页面)计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 htmlhtml运行原理运行原理本地运行本地运行 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 htmlhtml运行原理运行原理远程访问运行远程访问运行 你的电脑你的电脑浏浏览览器器远程服务器远程服务器h
10、ello.html你可能产生的疑问你可能产生的疑问? ?ieie是怎样访问到是怎样访问到hello.html?(url)hello.html?(url)万维网是个什么东东万维网是个什么东东? ? 可以使用apache来测试一下这个运行的效果!高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 万维网万维网(www)简略图简略图: : wwwsohu子网子网高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 html的开发工具的开发工具记事本记事本editplusfrontpagedreamweaver等等。等等。计算机协会网络部计算机协会网络部高级软件人才实
11、作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 htmlhtml的基本结构的基本结构从下面从下面test.html我们可以看出我们可以看出html的基本结构的基本结构 这是我的第一个网页 这是我的第一个网页 你好！元素内容元素内容 htmlhtml的基本结构的基本结构计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 html的标记的标记/元素元素HTML标记是用来组成标记是用来组成HTML元素的元素的HTML标记用两个尖括号标记用两个尖括号”括起来括起来H 两个标记之间的文本是两个标记之间的文本是html元素的内容元素的内容某些标记称
12、为某些标记称为“单标记单标记”,因为它只需单独使用就能完整地表达意思因为它只需单独使用就能完整地表达意思,如如html标记和标记和html元素可以看做是同一个概念，在我的课程中为统元素可以看做是同一个概念，在我的课程中为统一说法，就叫一说法，就叫html元素元素。html常用的元素参考常用的元素参考html语言教程语言教程(html版版)htmlhtml的标记的标记/ /元素介绍元素介绍计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 html的元素的属性的元素的属性 每个元素都有多个属性每个元素都有多个属性, ,每个属性有不同的属性值来修饰
13、，从而达到每个属性有不同的属性值来修饰，从而达到不同的显示效果不同的显示效果. .举例举例: :htmlhtml元素的属性元素的属性段落标记段落标记字体标记字体标记size取值取值1到到7标题字体标题字体#=1，2，3，4，5，6字体加粗字体加粗字体倾斜字体倾斜计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 html的元素的属性的元素的属性关于每个元素，所包含的各个属性以及各个属性对应的属性值，请关于每个元素，所包含的各个属性以及各个属性对应的属性值，请各位同学参看：各位同学参看：htmlhtml语言教程语言教程(html(html版版)
14、) htmlhtml元素的属性元素的属性计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 HTML符号实体符号实体-介绍介绍在网页上显示一些特殊的符号在网页上显示一些特殊的符号, ,我们需要使用我们需要使用htmlhtml的符号实体的符号实体, ,有些有些人把它称为字符实体人把它称为字符实体为在网页上显示版权符号为在网页上显示版权符号,我们就需要使用我们就需要使用html的符号实体的符号实体©才能在网页上正确显示。才能在网页上正确显示。 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩
15、顺平 HTML符号实体符号实体-一览表一览表 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平htmlhtml简单文本标记简单文本标记 今天天气真好！ 今天天气真好！今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！（上标）今天天气真好！ 今天天气真好！（下标）计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平htmlhtml简单标题标记简单标题标记 . #=1, 2, 3, 4, 5, 6 . #=1, 2, 3, 4, 5, 6今天天气
16、真好！今天天气真好！ 今天天气真好！今天天气真好！今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 html超链接超链接 a.html代码：代码：老鼠爱大米老鼠爱大米齐秦北方的狼 b.html代码：代码：我听见你的声音有种特别的感觉让我不断想不敢再忘记你我
17、记得有一个人永远留在我心中返回返回 打开当前计算机系统中默认的电子邮件客户端软件例如:OutLook Express html常用标记常用标记/元素元素-超链接超链接计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 html图像元素图像元素 html常用标记常用标记/元素元素-image计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 html表格表格html常用标记常用标记/元素元素-table第一行第一列第一行第一列（表示行表示行表示列）表示列）计算机协会网络部计算机协会网络部高级软件人
18、才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 上机练习题上机练习题html常用标记常用标记/元素元素-table请用html编写如下网页计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 html列表列表-无序列表无序列表 的属性设定（常用）： 例如： type=square 设定符号款式，其值有三种，如下，默认为 type=disc： type=disc 时的列项符号为实心圆点。 type=circle 时的列项符号为空心圆。 type=square 时的列项符号为空心正方形。 html常用标记常用标记/元素元素-ul/li列表
19、内容列表内容计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 html列表列表-有序列表有序列表称为顺序列表标记。称为顺序列表标记。则用以标示列表则用以标示列表项目。所谓顺序列表就是每一项有顺序，又称项目。所谓顺序列表就是每一项有顺序，又称编号列表。编号列表。的属性设定（常用）：的属性设定（常用）：例如：例如：type=i设定数目款式，其值有五种，请参考设定数目款式，其值有五种，请参考右表，内右表，内定为定为type=1。start=4设定开始数目，不论设定了哪一数目款式，其设定开始数目，不论设定了哪一数目款式，其值只能是值只能是1,2,3.
20、等整数，默认为等整数，默认为start=1。i可以取以下值中的任意一个：可以取以下值中的任意一个：1阿拉伯数字阿拉伯数字1,2,3,.a小写字母小写字母a,b,c,.A大写字母大写字母A,B,C,.i小写罗马数字小写罗马数字i,ii,iii,.I大写罗马数字大写罗马数字I,II,III,.。 html常用标记常用标记/元素元素-ol/li列表内容列表内容计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 form(form(表单表单) )元素介绍元素介绍html常用标记常用标记/元素元素-form客户端服务器. 星号*部分可以为GET,也可以是
21、 POST 计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 form(form(表单表单) )元素展示元素展示html常用标记常用标记/元素元素-form计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 inputinput元素元素html常用标记常用标记/元素元素-input元素元素您的姓名: 密码: 香蕉苹果香蕉苹果 这里有一个隐藏的表单元素 高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 select/option/textareaselect/option/textareahtml常用标记常用标记/元素元素-select/option/textarea. 网游 旅游 足球 唱歌 游泳 高级软件人才实作培训专家高级软件人才实作培训专家! !主讲: 韩顺平 form(form(表单表单) )元素元素- -课后作业课后作业html常用标记常用标记/元素元素-form计算机协会网络部计算机协会网络部高级软件人才实作培训专家高级软件人才实作培训专家! !计算机协会网络部计算机协会网络部l课后作业提示l写出课表及几种复杂表格l做出登陆表单l写出盗版百度首页
