网页制作初步—html

《网页制作初步—html》由会员分享，可在线阅读，更多相关《网页制作初步—html（76页珍藏版）》请在金锄头文库上搜索。

1、目标n描述 HTML 文档的结构n使用基本的 HTML 标签n在 HTML 文档中插入特殊字符 n在 HTML 文档中创建超级链接1HTML 简介2超文本提供链接到其他页面或同一页面的其 他位置的文本标记可以用标签标记页面的不同部分以正 确显示语言HTML 可用于：控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象HTML 文档示例3学习 HTML欢迎来到 HTML 世界HTML 代码浏览器处理代码并进行 显示编辑器和浏览器4学习 HTML欢迎来到 HTML 世界HTML 代码在编辑器中编写 HTML 代码浏览器显示 HTML 文档/页面编辑器 2-25需要在编

2、辑器中键入源代码示例：DreamWeaverMacromedia Dreamweaver 是一种专 业的 HTML 编辑器，用 于设计、编码、开发网 站、网页和强大的 Web 应用程序。HTML 文档结构6学习 HTML 欢迎来到 HTML 世界HTML 网页头部部分主体部分标签标记 HTML 文档的开始和结束这部分包括标题和其他说明信息。包括在 标签内这部分包含文本、图像和链接。它包括在 标签内HTML 标签 2-27学习 HTML 欢迎来到 HTML 世界标签标识 BODY 元素属性提供有关元素的附加信息值分配给属性的内容META 标签 2-1nMETA 标签是一个特殊的 HTML 标签，

3、提 供有关网页的信息，如作者姓名、公司名 称和联系信息等n许多搜索引擎都使用 META 标签信息n例如，要将 Graham Browne 指定为作者， 则使用以下 META 标签： 8META 标签 2-2nhttp-equiv 属性可用来代替 META 标签中的 name 属性 9表示有效期：格林尼治标准时间 2011 年 9 月 14 日，星期三 14:25:27 一旦网页过期，必须到服务器上重新传输。 属性值：具体的过期时间属性名称：网页过期表示每隔2秒，自动刷新网页 HTML 基本元素n标题 n段落n换行符n预先格式化n字符格式化n列表n水平线n字体n图像n特殊字符n超级链接 10标题

4、11动物世界从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感 从大自然获得灵感H1 到 H6 标签用于指定不同级别的标题段落标签12诗词学习我是第一段 我是第二段 左对齐显示 居中显示 右对齐显示 标签用于标记段落换行符文本中 (break)标签，就会强制换行 ，一般不用。13诗词学习我是第一行我是第二行 我是第一段 我是第二段标签14诗词学习静夜思床前明月光疑是地上霜 举头望明月低头思故乡标签用于显示具有预先定义格式的文本 （如 HTML 文档中所示）该元素中的文本保留空格、换行符，文本为等宽字体。字符格式化标签15学习 HTML这很有趣 -粗体足球是

5、最令人喜爱的运动之一。信息技术是发展的关键。 水的分子式是 H 2 O。3 2 等于 9。 这类标签用于对文本应用各种格式， 如粗体、斜体、下划线、下标、上标等样式表来取得更加丰富的效果列表简介n列表用于按逻辑方式对数据分组16玫瑰花 向日葵 兰花 苹果 桔子 水仙 芒果水果 苹果 芒果 桔子 花卉 水仙 兰花 向日葵 玫瑰花列表类型：无序列表 17星期中的每一天星期日 星期一 星期二 星期三 星期四 星期五 星期六无序列表也称为“项目列表”星期中的每一天星期日 星期一 星期二 星期三 星期四 星期五 星期六 列表类型：有序列表 有序列表的属性大罗马罗马小罗马罗马大写字母小写字母起始点18在有

6、序列表中，列表项以自动生成的顺序显示 不赞成使用，用样式取代它。使用水平线19动物世界老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以 上标签属性 align Width Size Noshade标签用于在页面上绘制水平线 （Horizontal Rule） 使用字体和属性20动物世界了解有关动物的更多信息 斑马的 特性 没有任何两匹斑马的斑 纹是完全一样的，因此每匹斑马都是独一无二的 可以按名称或十六进制值指定颜色可以为字体指定的大小范围为从 1 到 7可以指定一列字体，各字体间用逗号分隔。浏览器 以最先找到的字体显示文本元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于

7、控制网页上文本的显示 插入图像 2-121标签用于在 HTML 文档中插入图像。 标签的 两个常用属性是 SRC 和 ALIGN。SRC 属性用于指定要插入的图像位置。ALIGN 属性用于指定图像相对于文本的对齐方式。插入图像 2-222动物世界让我们看看这些可爱的动物底部对齐顶部对齐居中对齐插入特殊字符 2-1n某些字符在 HTML 中具有特殊意义，如小于号 ( 空格 ；插入特殊字符 2-2特殊字符字符实体大于号 () 小于号 (了解鸟类会弹琴的狗狗 单击此处查看绝对和相对路径名26要链接到另一目录 (C:example) 下的页面，可编写 或要链接到同一目录 (C:html) 下的页面，可

8、编写 或 C:html 目录C:example目录Doc1.htmDoc3.htmDoc2.htmDoc4.htm绝对路径名相对路径名链接到同一文档的某个部分2-1n锚记标签用于使用户“跳”到文档的某个部分 nHTML 的 NAME 属性用于创建锚标记 n为达到这种跳转效果，请在 HREF 参数中 使用该标记27主题名称主题名称链接到同一文档的各个部分2-228. . .狮子斑马印度豹狮子 狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识 别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。斑马 没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一 无二的。斑马也称为黑

9、白条纹相间的马链接到其他文档的特定位置29 让我们深入了解一些动物狮子斑马印度豹 Animals.htm 狮子 狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识 别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。 Animaldetails.htm电子邮件链接n用户可从网页发送电子邮件30海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送 至 David Fernandez总结 2-1nHTML 标签一般配对使用，不区分大小写n标签都具有属性。属性提供关于网页上 HTML 元素的附加信息nMETA 标签放置在网页的标题处以提供关于页面的信

10、息。搜索引擎常会用到这些 标签n标题级标签使用31总结 2-2n段落标签使用n无序列表使用标签,有序列表使用 标签n字体标签n超链接标签超链接 文本 32表格行列列标题在 HTML 文档中，广泛使用表格来存放网页上的文本和图像单元格表格标题使用表格姓名性别分数RobertM80.创建表格 代表表格的开始，border=2表示 边框尺寸为2表示行，这是表格的第一行，有三列 数据，代表列 表格的第二行，有三列数据表格的第三行，也有三列数据学员档案信息姓名性别分数RobertM80.表格的标题表示表格标题表示行或列标题，粗体显示 表格的第二行，有三列数据表格的第三行，有三列数据学员档案信息姓名性别分

11、数RobertM80.表格的对齐方式整个表格居中姓名列默认左对齐 性别列居中 分数列右对齐 合并单元格(跨列)创建表格 第一学期 第二学期数学科学英语数学科学英语989580958788COLSPAN=“n” 属性表示 跨多少列 合并单元格(跨行)创建表格螺母螺栓锤子第一季度 一月 2500 1000 1240二月 3000 2500 4000.ROWSPAN=“n” 属性表示 跨多少行 学员档案信息姓名性别分数RobertM80MaryF18表格的背景色和尺寸设置 表格的颜色设置：表格的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进 制值表

12、示，如红色#FF0000, 或是一些预定义色彩名称：red ，blue，yellow等。表格的尺寸设置：例如：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。1880分数FM性别MaryRobert姓名学员档案信息表单输入元素-7课堂练习:请编写HTML代 码表单METHOD =“post或 get”表单ACTIONMETHOD指定提交后由服务器上哪个 处理程序处理指定向服务器提交的方法: 一般为post或get方法, post方法比较安全ACTION = “URL” 表单输入元素-1 Type此属性指定元素的类型。元素类型可以有多种选择：TEX

13、T、 PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、 HIDDEN 和 BUTTON。默认选择为 TEXT。Name此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名 称 TEXT1、TEXT2 或选择的任何名称来标识它们。Name 属性的作用 域是在 FORM 元素内。Value此属性是可选属性，它指定控件的初始值。但是，如果 TYPE 为 RADIO，则必须指定一个值。Size此属性指定控件的初始宽度。如果 TYPE 为 TEXT 或 PASSWORD， 则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。 Maxlength 此

14、属性用于指定可在 TEXT 或 PASSWORD 元素中输入的最大字符数。Checked此属性是 Boolean 属性，指定按钮是否是打开的。当输入类型为 RADIO 或 CHECKBOX 时，使用此属性。文本框、按钮、单选按钮、复选框等都是输入元素。表单输入元素-2 BUTTON（按钮）Type 属性： submit：提交按钮 reset：重置按钮 button：普通按钮表单输入元素-3身份证号 TEXT（文本）密 码： 请填写您的工作经历表单输入元素-4性别：男性 女性 单选按钮和复选框 你喜欢以下哪些明星： 酒井法子 郑秀文 BonJoviHTML输入元素-52004 年欧锦赛 预测“最

15、佳球员” Ronaldo Beckham Zidane 预测大赛亚军 巴西 法国 阿根廷 预测谁将成为 2004 年欧锦赛冠军？阅读代码，请问网页中的显示结果？表单输入元素-6 下拉菜单 谁是 2002 年世界杯冠军？西班牙 法国 巴西 德国列表选项表单输入元素-7课堂练习:请编写HTML代码框架 广告栏 顶部框架(top.htm)商品详细介绍 右侧框架 (main.htm)商品导航 左侧 框架 (left.htm)为何使用框架 在另一个固定部分 显示导航部分在页面的一个固定部分显示徽标或静态信息在此处显示主要内容。站点中只有此部分是变化的。总结 4-1表格标题数据1 数据2 数据11 数据2

16、2跨行的单元格：数据11 跨列的单元格：数据22 q表格的一般语法：总结 4-2文本框 密码框 文本域 单选按钮男性复选框酒井法子q表单的一般语法：总结 4-3选项1选项2.总结 4-4n框架顶部窗口显示广告 top.htm显示详细内容 main.htm左侧窗口 显示 导航链接 left.htmDHTML 简介DHTML=HTML脚本语言 JavaScript+层叠样式表 CSS指定一个网页 的元素决定元素的大小 颜色和位置操纵网页的元素DHTML 是制作动态 HTML 页面的技术！DHTML 的功能设计人员可以随着与用户的交互操作而改 变文本的颜色、字体和大小设计人员可以随用户的输入或事件（如单击 鼠标）而更改页面的内容设计人员可以用 x 座标和 y 座标来指定网页元素的 确切位置（绝对位置或相对位置）设计人员可以将网页中的表格绑定到数据库设计人员可以