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

网络程序设计杨 谊第2章 JSP开发基础PART II: HTML+CSS+JavaScriptLabor138245679Chapter网页设计技术发展发展过程：TABLE布局：HTMLDIV+CSS：HTML+CSSTABLE+DIV+CSS：HTML+CSS+Javascript静态、简单控制 ? 动态、灵活控制本章目的与任务掌握HTML基础（任务一）掌握CSS基本用法（任务二）掌握JavaScript基础（任务三）123任务一:掌握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 历史超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）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日公布，继续完善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或.jspMyEclipse中自动生成HTML/JSP模板。说明文档类型说明文档属性Dreamweaver生成HTML文件模板!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=gb2312 /title无标题文档/title/headbody/body/html!DOCTYPEUTF-8!DOCTYPE!DOCTYPE 声明必须是 HTML 文档的第一行，位于 html 标签之前。!DOCTYPE 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中，!DOCTYPE 声明引用 DTD，DTD 规定了标