《JavaWeb系统开发培训HTML》由会员分享，可在线阅读，更多相关《JavaWeb系统开发培训HTML（65页珍藏版）》请在金锄头文库上搜索。
1、Java Web系统开发培训 HTML 李雄锋 北京中科辅龙计算机技术有限公司 2005年6月13日 1 目录 HTML结构 HTML元素 改进HTML页面 样式 Java script 2 1. HTML结构 新建网页 1 版本信息 头部信息 内容实体 3 1.1. HTML文档头 新建网页 1 元数据 标题 脚本 样式 4 1.2 HTML-meta 说明个性化信息 HTTP头部信息 支持搜索引擎 缺省信息 语法： 5 1.2 HTML文档体 北京中科辅龙计算机技术有限公司 北京中科辅龙计算机技术有限公司成立于1998年7月 ，时值中国科学院开始实施知识创新工程。 中国科学院计算技术研究
2、所 为了成果转化和更好地面向市场开展工作，出资成立了中 科辅龙公司，并把所内的CAD开放实验室、网络研究室 的研究力量和相关的知识产权注入到公司，使得公司自成 立之初就拥有了厚实的技术基础。之后又根据中国科学院 的改革进程，把公司委托给了联想集团进行管理，期望公 司从联想集团学到有用的经营管理经验。 6 1.3 HTML中的元素定义 北京中科辅龙计算技 术有限公司 内容 7 1.4 HTML中的元素块 块(block)和嵌入(inline) 块：body,div,p,table form, 嵌入：span,a, 块中包含块和嵌入元素 嵌入元素中不能有块 可以通过设置style中 display
3、:inline/block来改变。 8 1.5 HTML中的元素-属性 标识：id, class 语言：lang , dir (阅读方向) 标题：title 样式：style 事件：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 背景色：bgcolor 对齐：align, char, charoff, valign 9 2 HTML中的元素 分组元素 DIV SPAN 标题 文本 列表 表格 链接 对象 样式 格式化
4、 框架 表单 10 2.1 分组元素 DIV SPAN 结构化文档，其本身不产生任何副作用。 DIV是块元素，用于文档中分段 SPAN是嵌入元素，用于对段中元素分组 北京中科辅龙计算机技术有限公司成立于1998年7月，时值中国科学院开始实施知识 创新工程。中国科学院计算技术研究 所 为了成果转化和更好地面向市场开展工作，出资成立了中科辅龙 公司，并把所内的CAD开放实验室、网络研究室的研究力量和相 关的知识产权注入到公司，使得公司自成立之初就拥有了厚实的 技术基础。之后又根据中国科学院的改革进程，把公司委托给了 联想集团进行管理，期望公司从联想集团学到有用的经营管理经 验。 联系我们。 11
5、2.2 标题元素 描述元素所在区块的主题 H1,h2,h3,h4,h5,h6 都是块元素 公司产品 龙驭网站内容管理系统 龙驭视频会议及会议管理系统 龙驭自助建站系统 龙驭搜索引擎系统 龙驭项目申报审批管理系统 龙驭网上培训管理系统 12 2.3 文本-强调 强调：em、strong 中科辅龙 中科辅龙 中科辅龙 中科辅龙 13 2.3 文本-上下标 Sup：上标 Sub：下标 中科辅龙Longcon龙驭网站内容管理系统 14 2.3 文本换行 BR 15 2.3 文本段落 pre：保留输入文本的格式，除了pre元素 ，其他的元素都将忽略输入文本中的换行 ，将其解释为文字间隔 p：块元素，代表
6、一个段落，其中不能再包 含其他的块元素（包括P本身）。 16 2.3 文本特殊字符 “ (空格) 17 2.4 列表-无序列表UL 龙驭网站内容管理系统 龙驭视频会议系统 龙驭自助建站系统 龙驭搜索引擎系统 龙驭项目申报系统 龙驭网上培训管理系统 龙驭办公自动化系统 列表前缀 Disc：实心圆点 Circle：空心圆点 Square：空心方 块 可以通过style中设 置list-style-type 属性来修改前缀字 符或者图片 18 2.4 有序列表 OL 列表前缀 1：1,2,3,4 a: a,b,c,d A: A,B,C,D i：I,ii,iii,iv I：I,II,III,IV 可以
7、通过style中设置了 list-style-type属性来 修改前缀字符或者图片 第一期公告 第二期公告 第三期公告 第四期公告 第五期公告 第六期公告 19 2.5 表格-Table 20 2.5 表格行 TR Bgcolor 表头分组：thead 表身分组：tbody 表尾分组：tfooter 21 2.5 表格单元格 数据单元格 TD 表头单元格 TH Colspan rowspan 22 2.5 链接-A 链接到页面 辅龙 链接到指定元素 辅龙 目标窗口： _self：自身 _blank:新窗口 _parent:父窗口 _top:最顶层的窗口 _search:搜索窗口 指定的fram
8、e名称 链接 说明 23 2.5 链接-Link 在head元素内部说明 不渲染任何内容 所连接的文件，和html页面是 同步下载的，但是浏览器会缓 存该文件，在第二次访问页面 的时候，这个文件可以不再下 载，从而大大提高网页渲染速 度。在新的页面设计思想中， 充分利用这个特点，将页面上 的基本保持不变的内容样 式放在css文件中。 定义css文件 定义网站图标 定义收藏夹图标 24 2.6 格式化（不再使用） 背景色：bgcolor，在body,table,td,th等 元素中使用 横向对齐align和纵向对齐valign： I, B, BIG, SMALL, STRIKE, S, U ,
9、BR font元素 hr元素 25 2.7 对象img 26 2.7 对象object 27 2.7 框架文档结构 A simple frameset document 你的浏览器不支持框架页面显示。 文档头部 定义框架页 没有框架的 时候显示 Header.html 10% 150 100 Index. html Footer.html Content.html 28 2.7 框架frameset Rows:横向切分 Cols:纵向切分 100像素 （总高度-100)*25% （总高度-100)*75% 75%25% 29 2.7 框架frame 30 2.7 框架iframe 31 2.8
10、 表单 表单 按钮 输入域 文本域 下拉列表 表单的组织 32 2.8 表单-form 33 2.8 表单-input 36 2.8 表单-button 可以在这里设置按钮的界面 提供比更丰富的表达能力， 可以设置多文本的按钮界面。 37 2.8 表单-select、optgroup, option option optgroup 38 2.8 表单-optgroup option option 对选项作分组，可以用于构造多级菜单 39 2.8 表单-option 显示的内容 40 2.8 表单-textarea 缺省值 41 2.8 表单的组织-fieldset、legend 区块名称 in
11、put input textarea. 42 3. 改进HTML页面 利用表格来排版 利用空白的gif来 作间隔 页面字节数变 大，下载速度慢 ，不容易改版 利用Div和Span来 排版，大规模降低 排版所需的额外标 签 利用样式来做定位 。由于样式可以利 用link标签引入页 面，可以独立下载 并缓存在本地，从 而提高速度 43 4样式 样式介绍 样式文件的组成 选择器 样式表 样式分类 字体 段落 边框 编号 定位 44 4.1样式介绍 CSS-Cascading Style Sheets 层叠样式 表 CSS背景 CSS2.0工作原理 45 4.2 样式文件 .en11 font-siz
12、e: 11px;color:#f0f0f0 选择器样式列表，以“；” 分隔多个样式 46 4.3 选择器（一） 类选择器 定义：.类名样式列表 说明：应用在属性class等于选择器类名的标签上。 示例：.f10p font-size:10px，可以应用在 标签选择器 定义：标签样式列表， 说明：应用在指定标签上 示例：Tdfont-size:10px，应用在所有的td标签上。 ID选择器 定义：#ID样式列表 说明：应用在ID等于选择器ID名的标签上 示例：#enfont-size:10px，应用在 47 4.3 选择器（二） 属性选择器 定义 E属性=值样式列表 说明：对所有属性值为指定的值
13、的标签 示例：inputtype=submitcolor:#f0f0f0 应用于 行为选择器 定义：:行为样式列表 说明：应用于标签在指定的行为 示例：A:visitedcolor:#f0f0f0将被访问过的 标签渲染为灰色； 48 4.3 选择器（三） 复合选择器：可以将多个选择器叠加起来以更精 确定位所要应用的标签： Td color:black;cursor:hand .br12color:red;font-weight:bold Td.br12border:1px,groove,red ：1有效 ：1有效 ：2有效 ：1、2、3有效 ：1、2、3有效 49 4.4 字体样式 Font-
14、family：字体类型 Font-style： Normal：缺省值，正常显示 Italic：斜体 oblique ：斜体 Font-variant： Normal：缺省值，正常显示 Small-caps:显示成大写字符 Font-weight：粗体 Lighter|normal|bold|bolder| Font-size:字体大小 Color:前景色，即字体颜色 50 4.5 文本 Text-align：水平对齐方式，左、右、居中、分散 Text-decoration：无、下划线、中间线、上划线、闪烁 Text-indent：首行缩进 Text-overflow：将过长的字符显示为 Tex
15、t-transform： Capital:将所有单词的第一个字符显示为大写 Uppercase:将所有单词显示为大写 Lowercase:将所有单词显示为小写 None:无 white-space：如何处理空白字符。 Pre:和源代码一样换行 Nowrap：空白字符不作为可换行字符 Wrap:可以在空白字符处换行 Word-spacing:字符间距 Line-height：行间距 51 4.6 背景 background-color：背景色 background-image：背景图片 background-repeat：图片叠放 background-attachment： background-position：背景图片相对位 置 Background：背景属性设置，包括以上 列出来的值 52 4.7 边框和定位 Margin：空白， 可以分别设置上 下左右的空白的 宽度 Border
