《传智播客韩顺平轻松搞定网设计html上课讲义》由会员分享，可在线阅读，更多相关《传智播客韩顺平轻松搞定网设计html上课讲义（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的发展历史,1993标记语 言第一版,1995 html2.0,1996 html3.2 w3c推荐标准,1999 html4.0.1 w3c推荐标准,2000 xhtml1.0 w3c推荐标准,2001 xhtml1.1 w3c推荐标准,2008 html5,蒂姆伯纳斯一李 万维网之父 html设计者 w3c 创始人, w3c的介绍 W3C
3、是英文 World Wide Web Consortium 的缩 写，中文意思是W3C理事会或万维网联盟。W3C于 1994年10月在麻省理工学院计算机科学实验室成立 。创建者是万维网的发明者Tim Berners-Lee。 W3C组织是对网络标准制定的一个非赢利组织，像 HTML、XHTML、CSS、XML的标准就是由W3C来 定制。W3C会员（大约500名会员）包括生产技术产 品及服务的厂商、内容供应商、团体用户、研究实验 室、标准制定机构和政府部门，一起协同工作，致力 在万维网发展方向上达成共识。,html介绍,-w3c介绍,蒂姆伯纳斯一李, html和xhtml区别 html-xhtm
4、l-xml html语言本身有一些缺陷(比如内容和形式不能分离,标记单一,数据不 能复用等),随着xml的兴起，xml越来越受到国际认可，所以人们希望xml 来弥补html的不足,但是目前有成千上万的网页都是html编写的，所以完 全使用xml来替代html还为时过早,于是w3c在2000推出xhtml1.0，建立 XHTML的目的就是实现HTML向XML的过渡。,html介绍,html xhtml区别, html项目演示 高级邮箱,html项目演示, html项目演示 麦当劳导航,html项目演示, html项目演示(可爱屋),html项目演示, html项目演示(旅游岛),html项目演示
5、, html项目演示(仿sohu首页面),html项目演示, html运行原理 本地运行,html运行的基本原理, html运行原理 远程访问运行,html运行的基本原理,你的电脑,浏 览 器,远程服务器,hello.html,你可能产生的疑问? ie是怎样访问到hello.html?(url) 万维网是个什么东东?, 可以使用apache来测试一下这个运行的效果!, 万维网(www) 简略图:,html运行的基本原理,www,sohu,子网, 万维网(www)-综合图,html运行的基本原理, html的开发工具 记事本 editplus vim frontpage dw zend stud
6、io 其它的ide,html的开发工具, html的基本结构 从下面test.html我们可以看出html的基本结构, 这是我的第一个网页 这是我的第一个网页 你好！ ,元素内容,html的基本结构, html的标记/元素 HTML标记是用来组成HTML元素的 HTML标记用两个尖括号”括起来 HTML标记一般是双标记，如和 前一个标记是起始标记, 后一个标记为结束标记 两个标记之间的文本是html元素的内容 某些标记称为“单标记”,因为它只需单独使用就能完整地表达意思, 如 html标记和html元素可以看做是同一个概念，在我的课程中为统 一说法，就叫html元素。 html常用的元素参考
7、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编写
9、如下网页, 上机练习题,html常用标记/元素-table,请用html编写如下网页, html列表-无序列表, 的属性设定（常用）： 例如： type=square 设定符号款式，其值有三种，如下，默认为 type=disc： type=disc 时的列项符号为实心圆点。 type=circle 时的列项符号为空心圆。 type=square 时的列项符号为空心正方形。,html常用标记/元素-ul/li, 列表内容 , html列表-有序列表,称为顺序列表标记。则用以标示列表 项目。所谓顺序列表就是每一项有顺序，又称 编号列表。 的属性设定（常用）： 例如： type=i 设定数目款式，其
10、值有五种，请参考 右表，内 定为 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 大写罗马数字 I, II, III, . 。,html常用标记/元素-ol/li, 列表内容 , html列表-框架,html常用标记/元素-frameset, , html框架-(frameset小练习),html常用标记/元素-frames
11、et/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常用标记/元素-汇总,
