《html+css+javascript》由会员分享，可在线阅读，更多相关《html+css+javascript（88页珍藏版）》请在金锄头文库上搜索。
1、HTML,WEB第一语言,课程内容及学习周期,HTML介绍 HTML细节 文件结构 文字 图片 链接 表格 表单 多窗口 特殊字符 ,在不是很熟悉HTML的情况下， 学习加练习的时间应该在48个小时 对于已经熟悉HTML的读者可以略过本章 本章内容针对程序员进行设置，不是培养设计师,HTML简介,Hyper Text Markup Language 超文本 (文字+图片+音视+链接) 标记语言 (浏览器根据标记显示内容) 来自于SGML(标准通用标记语言) 专注于在Web上传递信息 是写给浏览器的语言 历史 HTML1.0 HTML2.0 (IETF制定) HTML4.0(最终版) W3C I
2、ETF 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. 位于尖括号内，可以具有属性值 属性值必须“” 或 ，不写也可以解析， 但是不推荐（不符合
3、XHTML） 有开始必须有结束(XHTML) 标签不能嵌套 不区分大小写 但应该养成良好的编程习惯，推荐都用小写,Html文档结构, 典型HTML 我会努力的！ ,01.html,head中的常用标签,文字 “文字”将显示在浏览器标题栏上 ：用于设置一些头信息定义CSS格式 用于定义脚本，Eg. Javascript,“http-equiv“指明下面要设置的项目 “content“指明该项目设置的内容, 色彩值 “#rrggbb” Eg. 红绿蓝数字值 ,03.html,锚点标签-, 在该位置定义名字为AnchorName的锚，就是给这个位置起了个名字，别人可以用这个名字直接链接到该文件的这个
4、位置,链接标签-,超级链接，跳转到另一文件 文字 当鼠标点击“文字”时，TargetWindow的内容将会跳转到“url”，不指定target时在本窗口跳转。 连接到文件的特定部分 Href=“url#point” 链接到url的point部分 在url文档中用标识，即为锚记 target 属性见“框架“部分,05.html 06.html,路径问题,本地路径 “c:dir1dir2“ 绝对路径 “http:/ 相对路径 “images/01.jpg“ “/images/01.jpg“ “/images/01.jpg“ = “http:/mysite/images/01.jpg Eg. Eg.
5、 ,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,文字的布局, 分段落现实
6、 分块显示 符号列表 数字列表换行 不换行 保留原有格式 跑马灯效果,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
7、的属性： bgcolor border bordercolorlight bordercolordark cellspacing cellpadding width height,表格练习,表单重点掌握,作用 收集用户信息 数据库查询 收发email 用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者,表单基础-, 的属性 Method (get post) Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe Post数据长度无限制，不会显示在url中 Action Form中数据交给服务器端哪个程
8、序进行处理 Eg. ,位于表单中的输入标签,位于之中，接收用户输入 格式： type: text radio checkbox password hidden select submit reset button textarea image name: 提交到服务器端的变量的名字,表单中的输入标签,文本框 textmaxlength 最大字符长度 size 文本框宽度（字符） 密码区域特殊的单行文本输入框 password单选按钮典型用法 : 同一名字，不同的值 错误的用法 : 不同的名字 复选框典型的用法 : 同一name，不同的value 隐藏域不显示在网页中 通常用作向下一个页面传输已
9、知信息或表单的附加信息,select,列表框 Multiple 表示多重列表框，可以多选 Selected 被选中 多行多列文本框 Rows: 行数 Cols: 列数 Wrap: Off : 不换行 Soft: 自动换行，并且如果行末有英文单词，会将整个单词移到下一行 Hard: 自动换行，但会截断行末的单词,中间的值会被提交 所以不要含有空格,button, 按下该按钮没有反映按下该按钮，该form中所有的输入信息将被提交到服务器按下该按钮，该form中所有的输入部分将被重置点击图片提交,Label标签 与输入元素相关联 见DreamWeaver演示,框架, 嵌套,Pixels or %,y
10、es 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/X
11、ML的标记集合 特点： 样式表由样式规则组成，以告诉浏览器如何显示一个文档 每个规则的组成包括一个选择符-通常是一个HTML的元素-和该选择符所接受的样式 每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现,CSS样式,样式规则格式： 选择符属性:值 单一选择符的复合样式声明应该用分号分割： 选择符属性1:值1; 属性2:值2 01.html,CSS的调用方式,内嵌样式：在Head中调用(01.html) 行内样式：在Body中调用(02.html) 外部样式：调用css文件(03.html/03.css)CSS的优先级问题(04.html) 按照最靠近元素的定义来显示(0
12、4.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常用于印刷的单位,装饰超链接 伪类
13、选择符,对链接的修饰 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
14、来应用CSS,Javascript: finally getting the respect it deserves!,本章内容的学习周期,视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，javascript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游戏。,课程内容,Javascript介绍 Javascript语言,视熟悉程度，应该在416小时左右，可以达到入门并熟悉常用操作的目的，例如：打开新窗口、判断表单输入等。当然了，JavaScript是一门独立的语言，如果应用的好，可以作出很多丰富多彩的效果，甚至游
15、戏。,程序开发分为客户端、服务器端,客户端开发的好处 减少客户端到服务器端的往返。 表单验证 服务器端开发的好处 web应用的核心逻辑集中管理 胖客户端、瘦客户端,JavaScript和Java的区别,基于对象和面向对象 解释和编译 强变量和弱变量 JavaScript中变量声明，采用其弱类型。 即变量在使用前不需作声明，而是解释器在运行时检查其数据类型 x=1234; /数值型变量 y“4321”; /字符型变量 代码格式不一样 jsp嵌入方式不一样,JavaScript,JavaScript是一种描述式语言，它与HTML结合起来，用于增强功能，并提高与最终用于之间的交互性能 由Netsca
16、pe公司利用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版本。现在的主流浏览器都支持这种版本。,
