HTML,WEB第一语言,课程内容及学习周期,HTML介绍 HTML细节 文件结构 文字 图片 链接 表格 表单 多窗口 特殊字符 ,在不是很熟悉HTML的情况下， 学习加练习的时间应该在48个小时 对于已经熟悉HTML的读者可以略过本章 本章内容针对程序员进行设置，不是培养设计师,HTML简介,Hyper Text Markup Language 超文本 (文字+图片+音视+链接) 标记语言 (浏览器根据标记显示内容) 来自于SGML(标准通用标记语言) 专注于在Web上传递信息 是写给浏览器的语言 历史 HTML1.0 HTML2.0 (IETF制定) HTML4.0(最终版) W3C IETF Internet Engineering Task Force HTTP协议 RFC等 RFC2616 Http1.1 RFC1521 MIME W3C World Wide Web Consortium (www.w3.org) HTML XML等 XHTMLeXtensible HTML 符合XML语法标准的HTML DHTML Dynamic HTML （X）HTML / CSS / JavaScript的综合运用,HTML语法标记,标记(标签或元素)的形式 内容 Eg. 文字Eg. Eg. 位于尖括号内，可以具有属性值 属性值必须“” 或 ，不写也可以解析， 但是不推荐（不符合XHTML） 有开始必须有结束(XHTML) 标签不能嵌套 不区分大小写 但应该养成良好的编程习惯，推荐都用小写,Html文档结构, 典型HTML 我会努力的！ ,01.html,head中的常用标签,文字 “文字”将显示在浏览器标题栏上 ：用于设置一些头信息定义CSS格式 用于定义脚本，Eg. Javascript,“http-equiv“指明下面要设置的项目 “content“指明该项目设置的内容, 色彩值 “#rrggbb” Eg. 红绿蓝数字值 ,03.html,锚点标签-, 在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个位置,链接标签-,超级链接，跳转到另一文件 文字 当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。 连接到文件的特定部分 Href=“url#point” 链接到url的point部分 在url文档中用标识，即为锚记 target 属性见“框架“部分,05.html 06.html,路径问题,本地路径 “c:dir1dir2“ 绝对路径 “http:/www.foo.com/img_url.jpg 相对路径 “images/01.jpg“ “/images/01.jpg“ “/images/01.jpg“ = “http:/mysite/images/01.jpg Eg. Eg. ,07.html,相对于URL地址,分隔线-,语法Size 高度 Align 对齐方式，可以取left或right Noshade 无阴影效果 颜色 Eg. ,08.html,标题字体大小-, #=1、2、3、4、5、6 按标题级别用黑体字显示标题内容 自动插入空行 最大 最小,09.html,字体设置, face定义字体 size 1 2 3 4 5 6 7 实际 8 10 12 14 18 24 36（pixels）Color可以使用预定义的名字,也可以使用数字 red、blue、black,10.html,设置文字显示,11.html,特殊字符,12.html,文字的布局, 分段落现实 分块显示 符号列表 数字列表换行 不换行 保留原有格式 跑马灯效果,13.html,图片, Src 图片路径，一般使用相对路径 Alt 图片无法显示时显示的文字 Border 边框的厚度 Align = left right top middle bottom 图文混排时用于和图片的对齐,15.html,图片与链接 见DreamWeaver演示,对齐align, 取值:left right center top middle bottom 对齐到中间,14.html,表格重点掌握, ,%或像素值,表头（可选）,单元格,top middle bottom,跨行,跨列,16.html,table的属性： bgcolor border bordercolorlight bordercolordark cellspacing cellpadding width height,表格练习,表单重点掌握,作用 收集用户信息 数据库查询 收发email 用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者,表单基础-, 的属性 Method (get post) Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe Post数据长度无限制，不会显示在url中 Action Form中数据交给服务器端哪个程序进行处理 Eg. ,位于表单中的输入标签,位于之中，接收用户输入 格式： type: text radio checkbox password hidden select submit reset button textarea image name: 提交到服务器端的变量的名字,表单中的输入标签,文本框 textmaxlength 最大字符长度 size 文本框宽度（字符） 密码区域特殊的单行文本输入框 password单选按钮典型用法 : 同一名字，不同的值 错误的用法 : 不同的名字 复选框典型的用法 : 同一name，不同的value 隐藏域不显示在网页中 通常用作向下一个页面传输已知信息或表单的附加信息,select,列表框 Multiple 表示多重列表框，可以多选 Selected 被选中 多行多列文本框 Rows: 行数 Cols: 列数 Wrap: Off : 不换行 Soft: 自动换行，并且如果行末有英文单词，会将整个单词移到下一行 Hard: 自动换行，但会截断行末的单词,中间的值会被提交 所以不要含有空格,button, 按下该按钮没有反映按下该按钮，该form中所有的输入信息将被提交到服务器按下该按钮，该form中所有的输入部分将被重置点击图片提交,Label标签 与输入元素相关联 见DreamWeaver演示,框架, 嵌套,Pixels or %,yes no auto,18.html,19.html,链接、表单与框架, Target: Frame name _blank 新窗口 _self 本窗口 _parent 父窗口（本窗口的上一级窗口） _top 浏览器窗口,综合练习,设计网页计算器页面 设计用户注册页面 设计框架，集成以上两个页面,CSS,HTML美容师,课程内容,CSS介绍 CSS细节 CSS的各种属性,视熟悉程度，应掌握在1-6个小时左右，当然了，我们培养的是程序员，这个时间足够了,CSS定义,CSSCascade Style Sheet层叠样式表 1998/5/12，CSS level2成为W3C标准 用来装饰HTML/XML的标记集合 特点： 样式表由样式规则组成，以告诉浏览器如何显示一个文档 每个规则的组成包括一个选择符-通常是一个HTML的元素-和该选择符所接受的样式 每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现,CSS样式,样式规则格式： 选择符属性:值 单一选择符的复合样式声明应该用分号分割： 选择符属性1:值1; 属性2:值2 01.html,CSS的调用方式,内嵌样式：在Head中调用(01.html) 行内样式：在Body中调用(02.html) 外部样式：调用css文件(03.html/03.css)CSS的优先级问题(04.html) 按照最靠近元素的定义来显示(04.html) 如果两个css文件冲突,以后面的为准,CLASS & ID,类选择符：Class 一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式(05.htm) 不同的选择符也可以同时定义一样的样式(06.htm) ID选择 06_1.htm,CSS组合/注释,可以一次性定义多个选择符的样式 H1,H2,H3color:red;font-family:serif P A 06_2.html 注释： /*这是注释*/,字体属性,例：07.html,颜色与背景属性,例：08.html,文本属性,例：09.html,Em:12pixels 的 M常用于印刷的单位,装饰超链接 伪类选择符,对链接的修饰 A:link 未访问时的状态 A:visited 访问过后的状态 A:active 鼠标点中不放时的状态 A:hover 鼠标划过时的状态 10.html,边距属性,例：11.html,填充属性,例：12.html,边框属性,例：13.html,span属性,图文混排,例：15.html,列表属性,例：15.html,鼠标属性,例：16.html,定位属性,例：17.html 18.html,滤镜属性,例：19.html,DreamWeaver,认识DreamWeaver 练习使用DreamWeaver 用DreamWeaver画表格、表单和框架 用DreamWeaver来应用CSS,Javascript: finally getting the respect it deserves!,本章内容的学习周期,视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，javascript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,课程内容,Javascript介绍 Javascript语言,视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，JavaScript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,程序开发分为客户端、服务器端,客户端开发的好处 减少客户端到服务器端的往返。 表单验证 服务器端开发的好处 web应用的核心逻辑集中管理 胖客户端、瘦客户端,JavaScript和Java的区别,基于对象和面向对象 解释和编译 强变量和弱变量 JavaScript中变量声明，采用其弱类型。 即变量在使用前不需作声明，而是解释器在运行时检查其数据类型 x=1234; /数值型变量 y“4321”; /字符型变量 代码格式不一样 jsp嵌入方式不一样,JavaScript,JavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用于之间的交互性能 由Netscape公司利用Sun的Java开发 它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似，但是，它只是函数式的语言。 客户端的JavaScript 必须要有浏览器的支持 JavaScript (ECMAScript) 基础语法 DOM Document Object Model BOM Brower Object Model JavaScript/jscript / ECMAScript JavaScript是由Netscape公司开发 .它的前身是Live Script Microsoft发行jscript用于internet explorer 最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。,