本章目标 熟悉HTML的各种标签 熟练设置HTML各标签的属性 熟练使用CSS www简介 WWW,是World Wide Web(万维网)的缩写。万维网 通常也简称为Web,它是由无数的商业、教育、娱乐 等资料组成的一个庞大的信息空间。我们在这个信息 空间中遨游、浏览、搜寻资料,最终呈现在浏览器中 的信息,就是Web页面。 Web页面绝大多数都是由HTML所编写的。 HTML文件的基本结构 HTML (Hypertext Markup Language)超文本标记语言 我 的 第 一 个 网 页 Hello World! HTML 网 页HTML 网 页 头 部 部 分头 部 部 分 主 体 部 分主 体 部 分 … 标 签 标 记 HTML 文 档 的 开 始 和 结 束… 标 签 标 记 HTML 文 档 的 开 始 和 结 束 网 页 标 题网 页 标 题 网 页 内 容 , 可 以 是 文 本 、图 像 等 网 页 内 容 , 可 以 是 文 本 、图 像 等 这 部 分 包 含 文 本 、图 像 和 链 接 。它 包 括 在 … 标 签 内这 部 分 包 含 文 本 、图 像 和 链 接 。它 包 括 在 … 标 签 内这 部 分 包 括 标 题 和 其 他 说 明 信 息 。包 括 在 … 标 签 内这 部 分 包 括 标 题 和 其 他 说 明 信 息 。包 括 在 … 标 签 内 标签 网 页 标 题 网页页面中出现乱码,那如何消除乱码使其正常 显示? 使 用 标 签 META标 签 常 用 来 描 述 网 页 , 定 义 页 面 的 一 些 基 本 信 息 使 用 标 签 META标 签 常 用 来 描 述 网 页 , 定 义 页 面 的 一 些 基 本 信 息 简 体 中 文 : gb2312 繁 体 中 文 : big5 纯 英 文 网 页 : iso-8859-1 简 体 中 文 : gb2312 繁 体 中 文 : big5 纯 英 文 网 页 : iso-8859-1 可 以 避 免 页 面 中 的 乱 码 可 以 避 免 页 面 中 的 乱 码 设 置 页 面 标 题设 置 页 面 标 题 页面背景色或背景图像 Hello World! 为 了 使 页 面 美 丽 大 方 , 网 页 背 景 要 尽 量 地 浅为 了 使 页 面 美 丽 大 方 , 网 页 背 景 要 尽 量 地 浅 …… 淘 宝 集 市 欢 迎 您 ! 淘 宝 网 首 届 翠 友 会 !
……
…… 段落标签 – 段(Paragraph) (可以看作是空行)
换行标签
– 换行
换 段 了换 段 了 换 行 了换 行 了 字体、字号相关标签示例 ......
手 机 充 值 、IP卡 /电 话 卡
移 动 | 100 | 联 通 | 50
Copyright © 2007 "淘 宝 网 " All rights. …… 文字布局标签 内容分隔
标签 文字列表和编号 – 有序列表 – 无序列表标签 水 平 分 隔 线
水 平 分 隔 线
有 序 列 表有 序 列 表 无 序 列 表无 序 列 表 用 了 预 先 定 义 好 的 格 式 用 了 预 先 定 义 好 的 格 式 内容分隔标签
……
…… 线 的 厚 度 值线 的 厚 度 值 线 的 宽 度线 的 宽 度
标 签 用 于 在 页 面 上 绘 制 水 平 线
标 签 用 于 在 页 面 上 绘 制 水 平 线 线 的 颜 色线 的 颜 色 文字列表和编号标签、标签 注 册 步 骤 :
- 填 写 信 息
- 收 电 子 邮 件
- 注 册 成 功
新 人 上 路 指 南 - 如 何 激 活 会 员 名 ?
- 如 何 注 册 淘 宝 会 员 ?
- 注 册 时 密 码 设 置 有 什 么 要 求 ?
- 支 付 宝 认 证
无序列表语法 有序列表语法 - 列表项内容
……
预格式文本
标签
腾讯-QQ币/QQ幻想-30元卡 一 口 价:26.45元 运 费:卖家承担运费 剩余时间:5天 宝贝类型: 全新 卖主声明:货到付款,可试用10天!
HTML中 代 码 格 式 与 浏 览 器 中 显 示 效 果 一 样 HTML中 代 码 格 式 与 浏 览 器 中 显 示 效 果 一 样 超链接标签 页面链接标签 – 链接到其他页面 [免费注册] 链 接 的 地 址链 接 的 地 址 链 接 的 内 容链 接 的 内 容 超链接标签标签 链接到其他页面 链 接 到 其 他 页 面 [免 费 注 册 ] [登 录 ] 单 击 ”[免 费 注 册 ]” 之 后 链 接 到 的 页 面 单 击 ”[免 费 注 册 ]” 之 后 链 接 到 的 页 面 超链接标签标签 要实现如下图所示的超链接效果,怎么办? 使 用 锚 记 标 签 点 击 超 链 接 页 面 定 位 到 相 关 位 置点 击 超 链 接 页 面 定 位 到 相 关 位 置 标签锚标记 链接到本页面 – 锚记标签用于使用户“跳”到文档的某个部分 – HTML 的 NAME 属性用于创建锚标记 主题名称 – 为达到这种跳转效果,请在 HREF 参数中使用该标记 主题名称 只定义NAME属性相当于定义一个位置 跳转到本文档中相应锚标记位置 标签锚标记示例 链 接 到 其 他 页 面 [新 人 上 路 ] … … 新 人 上 路 指 南 … … 1、定 义 锚 标 记1、定 义 锚 标 记 2、链 接 到 锚 标 记 所 在 位 置2、链 接 到 锚 标 记 所 在 位 置 标签电子邮件链接 电子邮件链接 – 要链接电子邮件,可在链接标签中插入” mailto:邮箱地址” 站长信箱 标签电子邮件链接示例 电 子 邮 件 链 接 … … 站 长 信 箱 … … 单 击 ”站 长 信 箱 ”链 接 后 的 输 出 结 果 单 击 ”站 长 信 箱 ”链 接 后 的 输 出 结 果 任 何 正 确 的 电 子 邮 箱 地 址 均 可 任 何 正 确 的 电 子 邮 箱 地 址 均 可 小结 有 序 列 表 OL有 序 列 表 OL 无 序 列 表 UL无 序 列 表 UL 编写如下图所示效果对应的html代码 图像标签 图像的基本语法 –
… …
… … 鼠 标 移 到 图 像 上 , 出 现 的 提 示 性 文 字 鼠 标 移 到 图 像 上 , 出 现 的 提 示 性 文 字 为 图 像 添 加 的 提 示 性 文 字为 图 像 添 加 的 提 示 性 文 字 滚动