传智播客韩顺平轻松搞定网设计html

1、高级软件人才实作培训专家高级软件人才实作培训专家! !北京传智播客教育 轻松搞定网页设计之轻松搞定网页设计之htmlhtml讲师：韩顺平email:qq: 2317702760 高级软件人才实作培训专家高级软件人才实作培训专家! !内容介绍内容介绍: :1.html1.html介绍介绍2.2.优秀网页欣赏优秀网页欣赏3.html3.html项目演示项目演示4.html4.html运行基本原理运行基本原理(hello,(hello,顺平顺平) ) 5.html5.html的基础知识的基础知识高级软件人才实作培训专家高级软件人才实作培训专家! ! 了解了解html的基本概念的基本概念 理解理解ht

2、ml的运行基本原理的运行基本原理 掌握掌握html的一些基本用法的一些基本用法 能写出简单的网页能写出简单的网页学习目标学习目标高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml是什么是什么htmlhtml（hypertext mark-up languagehypertext mark-up language）即超文本）即超文本标记语言或超文本链接标示语言，是目前网络上应用标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。最为广泛的语言，也是构成网页文档的主要语言。htmlhtml文本是由文本是由htmlhtml命令组成的描述性文

3、本，命令组成的描述性文本，htmlhtml命令命令可以说明文字、图形、动画、声音、表格、链接等。可以说明文字、图形、动画、声音、表格、链接等。htmlhtml的结构包括头部（的结构包括头部（headhead）、主体（）、主体（bodybody）两大部）两大部分，其中头部描述浏览器所需的信息，而主体则包含分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。所要说明的具体内容。 高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml可以做什么可以做什么htmlhtml可以编写静态网页可以编写静态网页. .该静态网页可以包括文字、图形、动画、声音、该静态网页可以包括文

4、字、图形、动画、声音、表格、链接。从而构成一个个漂亮的网页。表格、链接。从而构成一个个漂亮的网页。给大家看几个漂亮的网页吧给大家看几个漂亮的网页吧! !高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml发展历史发展历史1993标记语标记语言第一版言第一版1995 html2.01996 html3.2w3c推荐标准推荐标准1999 html4.0.1w3c推荐标准推荐标准2000 xhtml1.0w3c推荐标准推荐标准2001 xhtml1.1w3c推荐标准推荐标准2008 html5蒂姆蒂姆伯纳斯一李伯纳斯一李万维网之父万维网之父html设计者设计者w3c 创始人创始人

5、 高级软件人才实作培训专家高级软件人才实作培训专家! ! w3cw3c的介绍的介绍w3c是英文是英文 world wide web consortium 的缩的缩写，中文意思是写，中文意思是w3c理事会或万维网联盟。理事会或万维网联盟。w3c于于1994年年10月在麻省理工学院计算机科学实验室成立月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者。创建者是万维网的发明者tim berners-lee。w3c组织是对网络标准制定的一个非赢利组织，像组织是对网络标准制定的一个非赢利组织，像html、xhtml、css、xml的标准就是由的标准就是由w3c来来定制。定制。w3c会员（大约会

6、员（大约500名会员）包括生产技术产名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。在万维网发展方向上达成共识。蒂姆蒂姆伯纳斯一李伯纳斯一李 高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml和和xhtmlxhtml区别区别 html-xhtml-xmlhtml语言本身有一些缺陷语言本身有一些缺陷(比如内容和形式不能分离比如内容和形式不能分离,标记单一标记单一,数据不数据不能复用等能复用等

7、),随着随着xml的兴起，的兴起，xml越来越受到国际认可，所以人们希望越来越受到国际认可，所以人们希望xml来弥补来弥补html的不足的不足,但是目前有成千上万的网页都是但是目前有成千上万的网页都是html编写的，所以完编写的，所以完全使用全使用xml来替代来替代html还为时过早还为时过早,于是于是w3c在在2000推出推出xhtml1.0，建立，建立xhtml的目的就是实现的目的就是实现html向向xml的过渡。的过渡。 高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml项目演示项目演示 高级邮箱高级邮箱 高级软件人才实作培训专家高级软件人才实作培训专家! ! ht

8、mlhtml项目演示项目演示 麦当劳导航麦当劳导航 高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml项目演示项目演示( (可爱屋可爱屋) ) 高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml项目演示项目演示( (旅游岛旅游岛) ) 高级软件人才实作培训专家高级软件人才实作培训专家! ! html项目演示项目演示(仿仿sohu首页面首页面)高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml运行原理运行原理本地运行本地运行 高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml运行原理运行原理远程访问运行远程访

9、问运行 你的电脑你的电脑浏浏览览器器远程服务器远程服务器hello.html你可能产生的疑问你可能产生的疑问? ?ieie是怎样访问到是怎样访问到hello.html?(url)hello.html?(url)万维网是个什么东东万维网是个什么东东? ? 可以使用apache来测试一下这个运行的效果!高级软件人才实作培训专家高级软件人才实作培训专家! ! 万维网万维网(www)简略图简略图: :wwwsohu子网子网高级软件人才实作培训专家高级软件人才实作培训专家! ! 万维网万维网(www)-综合图综合图高级软件人才实作培训专家高级软件人才实作培训专家! ! html的开发工具的开发工具记事本

10、记事本editplus vimfrontpagedwzend studio其它的其它的ide 高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml的基本结构的基本结构从下面从下面test.html我们可以看出我们可以看出html的基本结构的基本结构 这是我的第一个网页 这是我的第一个网页 你好！ 元素内容元素内容 htmlhtml的基本结构的基本结构高级软件人才实作培训专家高级软件人才实作培训专家! ! html的标记的标记/元素元素html标记是用来组成标记是用来组成html元素的元素的html标记用两个尖括号标记用两个尖括号”括起来括起来 html标记一般是双标记，如标

11、记一般是双标记，如和和 前一个标记是起始标记前一个标记是起始标记, 后一个标记为结束标记后一个标记为结束标记 两个标记之间的文本是两个标记之间的文本是html元素的内容元素的内容 某些标记称为某些标记称为“单标记单标记”,因为它只需单独使用就能完整地表达意思因为它只需单独使用就能完整地表达意思,如如html标记和标记和html元素可以看做是同一个概念，在我的课程中为统元素可以看做是同一个概念，在我的课程中为统一说法，就叫一说法，就叫html元素元素。html常用的元素参考常用的元素参考 html语言教程语言教程(html版版)htmlhtml的标记的标记/ /元素介绍元素介绍高级软件人才实作培

12、训专家高级软件人才实作培训专家! ! html的元素的属性的元素的属性 每个元素都有多个属性每个元素都有多个属性, ,每个属性有不同的属性值来修饰，从而达到每个属性有不同的属性值来修饰，从而达到不同的显示效果不同的显示效果. .举例举例: :htmlhtml元素的属性元素的属性段落标记段落标记字体标记字体标记 size 取值取值 1到到7标题字体标题字体 #=1，2，3，4，5，6 字体加粗字体加粗高级软件人才实作培训专家高级软件人才实作培训专家! ! html的元素的属性的元素的属性关于每个元素，所包含的各个属性以及各个属性对应的属性值，请关于每个元素，所包含的各个属性以及各个属性对应的属性

13、值，请各位同学参看：各位同学参看：htmlhtml语言教程语言教程(html(html版版) ) htmlhtml元素的属性元素的属性高级软件人才实作培训专家高级软件人才实作培训专家! ! html符号实体符号实体-介绍介绍 在网页上显示一些特殊的符号在网页上显示一些特殊的符号, ,我们需要使用我们需要使用htmlhtml的符号实体的符号实体, ,有些有些人把它称为字符实体人把它称为字符实体, ,比如我们看一个小小的案例比如我们看一个小小的案例( (html1_1.htmlhtml1_1.html) )。为在网页上显示版权符号为在网页上显示版权符号,我们就需要使用我们就需要使用html的符号实

14、体的符号实体 ©才能在网页上正确显示。才能在网页上正确显示。高级软件人才实作培训专家高级软件人才实作培训专家! ! html符号实体符号实体-一览表一览表 高级软件人才实作培训专家高级软件人才实作培训专家! ! html超链接超链接 a.htm代码：代码：老鼠爱大米老鼠爱大米齐秦北方的狼 b.htm代码：代码：我听见你的声音有种特别的感觉让我不断想不敢再忘记你我记得有一个人永远留在我心中返回返回 打开当前计算机系统中默认的电子邮件客户端软件，例如:outlook express html常用标记常用标记/元素元素-超链接超链接高级软件人才实作培训专家高级软件人才实作培训专家! ! h

15、tml图像元素图像元素 html常用标记常用标记/元素元素-image 高级软件人才实作培训专家高级软件人才实作培训专家! ! html表格表格html常用标记常用标记/元素元素-table高级软件人才实作培训专家高级软件人才实作培训专家! ! html表格表格-小练习小练习html常用标记常用标记/元素元素-table请用请用html编写如下网页编写如下网页高级软件人才实作培训专家高级软件人才实作培训专家! ! 上机练习题上机练习题html常用标记常用标记/元素元素-table请用html编写如下网页高级软件人才实作培训专家高级软件人才实作培训专家! ! html列表列表-无序列表无序列表

16、的属性设定（常用）： 例如： type=square 设定符号款式，其值有三种，如下，默认为 type=disc： type=disc 时的列项符号为实心圆点。 type=circle 时的列项符号为空心圆。 type=square 时的列项符号为空心正方形。 html常用标记常用标记/元素元素-ul/li列表内容列表内容高级软件人才实作培训专家高级软件人才实作培训专家! ! html列表列表-有序列表有序列表称为顺序列表标记。称为顺序列表标记。则用以标示列表则用以标示列表项目。所谓顺序列表就是每一项有顺序，又称项目。所谓顺序列表就是每一项有顺序，又称编号列表。编号列表。 的属性设定（常用）：

17、的属性设定（常用）：例如：例如： type=i设定数目款式，其值有五种，请参考设定数目款式，其值有五种，请参考 右表，内右表，内定为定为 type=1。 start=4设定开始数目，不论设定了哪一数目款式，其设定开始数目，不论设定了哪一数目款式，其值只能是值只能是 1,2,3. 等整数，默认为等整数，默认为 start=1。 i可以取以下值中的任意一个：可以取以下值中的任意一个： 1 阿拉伯数字阿拉伯数字 1, 2, 3, . a 小写字母小写字母 a, b, c, . a 大写字母大写字母 a, b, c, . i 小写罗马数字小写罗马数字 i, ii, iii, . i 大写罗马数字大写罗

18、马数字 i, ii, iii, . 。 html常用标记常用标记/元素元素-ol/li列表内容列表内容高级软件人才实作培训专家高级软件人才实作培训专家! ! html列表列表-框架框架html常用标记常用标记/元素元素-frameset高级软件人才实作培训专家高级软件人才实作培训专家! ! htmlhtml框架框架-(frameset-(frameset小练习小练习) ) html常用标记常用标记/元素元素-frameset/frame完成下面的网页完成下面的网页,用户点击左侧的超链接，可以看到相应的歌词用户点击左侧的超链接，可以看到相应的歌词高级软件人才实作培训专家高级软件人才实作培训专家! ! iframe iframe 浮动窗口浮动窗口 html常用标记常用标记/元素元素-iframe 浮动窗口浮动窗口高级软件人才实作培训专家高级软件人才实作培训专家! ! form(form(表单表单) )元素介绍元素介绍html常用标记常用标记/元素元素-form客户端服务器. 星号*部分可以为get,也可以是 post 高级