《传智播客韩顺平轻松搞定网页设计html.ppt》由会员分享，可在线阅读，更多相关《传智播客韩顺平轻松搞定网页设计html.ppt（43页珍藏版）》请在三一办公上搜索。
1、北京传智播客教育,轻松搞定网页设计之html,讲师：韩顺平email:qq:2317702760,内容介绍:1.html介绍2.优秀网页欣赏3.html项目演示4.html运行基本原理(Hello,顺平)5.html的基础知识,了解html的基本概念 理解html的运行基本原理 掌握html的一些基本用法 能写出简单的网页,学习目标,html是什么HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音
2、、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。,html介绍,-html是什么,html可以做什么HTML可以编写静态网页.该静态网页可以包括文字、图形、动画、声音、表格、链接。从而构成一个个漂亮的网页。给大家看几个漂亮的网页吧!,html介绍,-html可以做什么,html发展历史,html介绍,-html的发展历史,1993标记语言第一版,1995 html2.0,1996 html3.2w3c推荐标准,1999 html4.0.1w3c推荐标准,2000 xhtml1.0w3c推荐标准,2001
3、 xhtml1.1w3c推荐标准,2008 html5,蒂姆伯纳斯一李万维网之父html设计者w3c 创始人,w3c的介绍W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee。W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员（大约500名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力在万维网发
4、展方向上达成共识。,html介绍,-w3c介绍,蒂姆伯纳斯一李,html和xhtml区别 html-xhtml-xmlhtml语言本身有一些缺陷(比如内容和形式不能分离,标记单一,数据不能复用等),随着xml的兴起，xml越来越受到国际认可，所以人们希望xml来弥补html的不足,但是目前有成千上万的网页都是html编写的，所以完全使用xml来替代html还为时过早,于是w3c在2000推出xhtml1.0，建立XHTML的目的就是实现HTML向XML的过渡。,html介绍,html xhtml区别,html项目演示 高级邮箱,html项目演示,html项目演示 麦当劳导航,html项目演示,
5、html项目演示(可爱屋),html项目演示,html项目演示(旅游岛),html项目演示,html项目演示(仿sohu首页面),html项目演示,html运行原理本地运行,html运行的基本原理,html运行原理远程访问运行,html运行的基本原理,你的电脑,浏览器,远程服务器,hello.html,你可能产生的疑问?ie是怎样访问到hello.html?(url)万维网是个什么东东?,可以使用apache来测试一下这个运行的效果!,万维网(www)简略图:,html运行的基本原理,www,sohu,子网,万维网(www)-综合图,html运行的基本原理,html的开发工具记事本editpl
6、us vimfrontpagedwzend studio其它的ide,html的开发工具,html的基本结构从下面test.html我们可以看出html的基本结构,这是我的第一个网页 这是我的第一个网页 你好！,元素内容,html的基本结构,html的标记/元素HTML标记是用来组成HTML元素的HTML标记用两个尖括号”括起来 HTML标记一般是双标记，如和 前一个标记是起始标记,后一个标记为结束标记 两个标记之间的文本是html元素的内容 某些标记称为“单标记”,因为它只需单独使用就能完整地表达意思,如html标记和html元素可以看做是同一个概念，在我的课程中为统一说法，就叫html元素
7、。html常用的元素参考 html语言教程(html版),html的标记/元素介绍,html的元素的属性 每个元素都有多个属性,每个属性有不同的属性值来修饰，从而达到不同的显示效果.举例:,html元素的属性,段落标记字体标记 size 取值 1到7标题字体#=1，2，3，4，5，6 字体加粗,html的元素的属性关于每个元素，所包含的各个属性以及各个属性对应的属性值，请各位同学参看：html语言教程(html版),html元素的属性,HTML符号实体-介绍 在网页上显示一些特殊的符号,我们需要使用html的符号实体,有些人把它称为字符实体,比如我们看一个小小的案例(html1_1.html)
8、。为在网页上显示版权符号,我们就需要使用html的符号实体 才能在网页上正确显示。,HTML符号实体-一览表,html超链接,a.htm代码：老鼠爱大米齐秦北方的狼,b.htm代码：我听见你的声音有种特别的感觉让我不断想不敢再忘记你我记得有一个人永远留在我心中返回,打开当前计算机系统中默认的电子邮件客户端软件，例如:OutLook Express,html常用标记/元素-超链接,html图像元素,html常用标记/元素-image,html表格,html常用标记/元素-table,html表格-小练习,html常用标记/元素-table,请用html编写如下网页,上机练习题,html常用标记/
9、元素-table,请用html编写如下网页,html列表-无序列表,的属性设定（常用）：例如：type=square 设定符号款式，其值有三种，如下，默认为 type=disc：type=disc 时的列项符号为实心圆点。type=circle 时的列项符号为空心圆。type=square 时的列项符号为空心正方形。,html常用标记/元素-ul/li,列表内容,html列表-有序列表,称为顺序列表标记。则用以标示列表项目。所谓顺序列表就是每一项有顺序，又称编号列表。的属性设定（常用）：例如：type=i设定数目款式，其值有五种，请参考 右表，内定为 type=1。start=4设定开始数目，
10、不论设定了哪一数目款式，其值只能是 1,2,3.等整数，默认为 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,列表内容,html列表-框架,html常用标记/元素-frameset,html框架-(frameset小练习),html常用标记/元素-frameset/frame,完成下面的网页,用户点击左侧的超链接，可以看到相应的歌词,iframe 浮动窗口,html常用标记/元素-iframe 浮动窗口,form(表单)元素介绍,html常用标记/元素-form,.星号*部分可以为GET,也可以是 POST,form(表单)元素,html常用标记/元素-form,form(表单)元素-小练习,html常用标记/元素-form,input元素,html常用标记/元素-input元素,select/option/textarea,html常用标记/元素-select/option/textarea.,html常用标记/元素-课堂练习,html其它一些标记,参考给出的html网页文档，把各个html常用的元素，都过 一遍.,html常用标记/元素-汇总,
