（培训体系）2020年HTML及JS培训教材（培训体系）2020年HTML及JS培训教材 应用开发二部深圳市茁壮网络技术某公司培训教材HTML及JS基础知识培训Html&Js knowledge based trainingAPPS2-类别-编号版权所有，限公司内部使用 讲师：华道伟地址：深圳市沿河北路1002号京广中心写字楼9、12、13楼 邮编：518002http:/.cn目录一.HTML入门5二HTML的基本结构5三.页面布局和文字设置831 标题832 换行933段落标签1034 字体大小的设置1135 文字的字体和样式1235 文字的颜色1436 位置控制1437 html的Character的实体15四TABLE表格154.1 表格的基本结构154.2 表格的标题164.3 表格的尺寸设置174.4 表格内文字的对齐/布局204.5 跨多行、多列的表元21跨多列的表元22跨多行的表元224.6 表格的颜色23五HTML的 FORMS和 INPUT24HTML 标签24HTML 标签24定义和用法241) 文本区域242) 单选按钮243) 多选按钮244) 提交按钮25六文件之间的链接25本地链接：25URL链接26七插入图象27基本格式27图形按钮：28八多窗口页面（FRAMES）28iframe28九 MARQUEE属性说明28基本语法28方向29方式29循环29速度29延时30外观(Layout)设置30对齐方式(Align)30底色30面积30一什么是JAVASCRIPT33JavaScript简述33Javascript能够做什么？33二怎么把JAVASCRIPT嵌入到HTML中34怎样放一个Javascript到一个HTML页面？34把javascript嵌入到html的哪个位置35三JAVASCRIPT的变量及语法37javascript的变量37javascript的ifelse表达式37javascript的switch表达式38javascript的运算符39运算符39分派符39比较操作符40逻辑操作符40javascript的弹出窗口41提示框41确认框41输入框42javascript的Functions（函数）43怎样定义一个函数：44javascript的for和while循环44for循环：45While循环：45do.while循环：45javascript循环中的的break和continue46Break：46continue：47javascript的forin表达式48javascript的Events50onload 和 onUnload50onFocus, onBlur 和 onChange50onSubmit51onMouseOver and onMouseOut51四JAVASCRIPT对象51Javascript几大内置对象51自定义Javascript对象52一什么是DHTML54二CSS在DHTML中的定位541) Position54position:relative54position:absolute552) Visibility55visibility:visible55visibility:hidden563) Z-index564) Filters57三DHTML中DOCUMENT对象的样式57怎样访问一个元素?57dhtml的Event Handlers59HTML 4.0 Event Handlers60一.HTML入门 HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它和WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 接下来，我们就结合几个实例来观见一下HTML的全貌，以便于我们首先对它有一个整体上的认识，且且体会一下超文本和标记究竟是什么意思。 通过HTML能够表现出丰富多彩的设计风格 图片调用： 文字格式：文字 通过HTML能够实现页面之间的跳转 页面跳转：A HREF=文件路径/文件名从之上的例子，我们就能够理解超文本和标记的含义了。所谓超文本，因为它能够加入图片、声音、动画、影视等内容，因为它能够从一个文件跳转到另一个文件，和世界各地主机的文件连接。所谓标记，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“”来表示。二HTML的基本结构 超文本文档分文档头和文档体俩部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 头 部 信 息 文 档 主 体， 正 文 部 分 其中在最外层， 表示这对标记间的内容是HTML文 档。我们仍会见到一些Hompage省略标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。 标记一般不省略， 表示正文内容的开始。下面是一个最基本的超文本文档的源代码：一个简单的HTML示例欢迎光临我的主页 这是我第一次做主页，无论怎么样，我都会努力做好！ 文件头 文件体 窗体顶端窗体底端超文本中的标签 刚刚接触超文本，遇到的最大的障碍就是一些用“”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。1. 单标签 某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是： 最常用的单标签是, 它表示换行。 2.双标签 另一类标记称为“双标签”，它由“始标签”和“尾标签”俩部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是： 内 容 其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一 标记中： 第一： 3.标签属性 许多单标记和双标记的始标记内能够包含一些属性， 其语法是： 各属性之间无先后次序，属性也可省略（即取默认值），例如单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性： 其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是100%。4.注释在HTML中用来做注释，注释里面的内容，浏览器不进行解析。如： 三.页面布局和文字设置 31 标题一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：H1 第一级标题H2 第二级标题H3 第三级标题H4 第四级标题H5 第五级标题H6 第六级标题请见下面的例子：标题示例这是一行普通文字一级标题二级标题三级标题四级标题五级标题六级标题32 换行在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。 请见下面的例子：无换行示例登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。换行示例