2JSP开发基础II(HTML+CSS+JS)研讨.pptx

网络程序设计 杨 谊 第2章 JSP开发基础PART II: HTML+CSS+JavaScript 网页设计技术发展 发展过程： TABLE布局：HTML DIV+CSS：HTML+CSS TABLE+DIV+CSS：HTML+CSS+Javascript 静态、简单控制 ? 动态、灵活控制 本章目的与任务 掌握HTML基础（任务一） 掌握CSS基本用法（任务二） 掌握JavaScript基础（任务三） 1 2 3 任务一:掌握HTML基础 HTML（Hyper Text Mark-up Language） 超文本标记语言，Web页面的描述性语言，用来制作超文本文档。 通过一些约定的标签符号指出内容的输出格式，如字体大小颜色、背景颜色、表格形式、各部分之间的关系等。 浏览器会自动解释这些标签的含义，并按照一定的格式在屏幕上显示这些信息。 “.html”或“.htm” 扩展名，是独立于各种操作系统平台的可供浏览器解释浏览的网页文件。非编译语言 HTML 历史 WWW(World Wide Web)万维网，用户在一台计算机上通过Internet存取另一台计算机上的信息。 WWW是一种软件，Internet上支持WWW协议和超文本传输协议HTTP（Hypertext Transport Protocol ）的客户机与服务器的集合。 通过它可存取世界范围的超媒体文件：文字、图形、声音、动画、资料库及各式各样的内容。 Tim Berners-Lee 万维网的发明者 互联网之父 HTML设计者 W3C(万维网联盟)创始人 HTML 历史 HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2——1996年1月14日，W3C推荐标准 HTML 4.0——1997年12月18日，W3C推荐标准 HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准 HTML 5 的第一份正式草案于2008年1月22日公布，继续完善 超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准） HTML 相关 HTML：超文本标记语言 XHTML：过渡标记语言 XML：可扩展标记语言 JSON（Javascript Object Notation）：一种轻量级的数据交换语言，以文字为基础，易于阅读。尽管JSON是Javascript的一个子集，但JSON是独立于语言的文本格式，采用了类似于C语言家族的一些习惯。 任务一:掌握HTML基础 HTML文件结构 HTML HEAD 头部信息（浏览器所需）如：标题，引入脚本，样式，文档名，编辑工具，关键字，作者版权，字符集，刷新频率，切换效果等 /HEAD BODY 正文（网页内容）如：文本，图形图表，表单，表格，链接，颜色，字体字号，对齐，尺寸，页面边距，音乐，动画，JAVA Applet等 /BODY /HTML 任务一:掌握HTML基础 HTML中的元素： HEAD（title, meta） BODY 文字、图片、视频、超链接等 列表 表单多种控件） 表格 这么多元素，学起来是不是很花时间？ 是的，但别着急，接下来我们结合例子来掌握常用的。 生成.html或.jsp 很多文本编辑工具都可以写HTML 最简单的方法：用记事本编辑：先保存为.txt文件，再修改后缀为.html或.jsp 注意：要取消“隐藏已知文件类型的扩展名” 推荐编写HTML的平台 NotePad Plus 带有标记提示功能，免费 UltraEdit带有标记提示功能，可能收费 Dreamweaver 带有文档模板和标记提示，有的版本免费 MyEclipse 带有文档模板和标记提示，有的版本免费 生成.html或.jsp MyEclipse中自动生成HTML/JSP模板。 说明文档类型 说明文档属性 Dreamweaver生成HTML文件模板 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无标题文档/title /head body /body /html !DOCTYPE UTF-8 !DOCTYPE !DOCTYPE 声明必须是 HTML 文档的第一行，位于 html