第1章：HTML基本标签

1、第1章HTML基本标签本章目标 会使用HTML的基本结构创建网页 会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转HTML文件的基本结构 HTML文档的结构我的第一个网页我的第一个网页 Hello World!HTML 网页网页头部部分头部部分主体部分主体部分标签标记标签标记 HTML 文档的开始和结束文档的开始和结束网页标题网页标题网页内容，可以是网页内容，可以是文本、图像等文本、图像等这部分包含文本、图像和链接。它包括在这部分包含文本、图像和链接。它包括在 标签内标签内这部分包括标题和其他说明信息。包括在这部分包括标题和其他说

2、明信息。包括在 标签内标签内使用记事本创建网页演示示例演示示例2 2：如何在记事本里创建网页：如何在记事本里创建网页 使用记事本创建网页的步骤： 1、打开记事本2、输入HTML代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果 使用记事本创建网页标签网页标题网页标题网页页面中出现乱码，那如何消除乱码使其正常显示？使用使用标签标签简体中文：简体中文：gb2312繁体中文：繁体中文：big5纯英文网页：纯英文网页：iso-8859-1可以避免页面可以避免页面中的乱码中的乱码页面背景色或背景图像 Hello World！为了使页面美丽大方，网页背景要尽量地浅为了使页面美丽大

3、方，网页背景要尽量地浅Hello World!网页背景色彩网页背景色彩 网页背景图像网页背景图像 文本相关标签字体、字号 标题标签 标签 特殊符号行的控制 段落标签 换行标签使用了使用了 换段了换段了设置了字体的设置了字体的大小和颜色大小和颜色换行了换行了特殊符号特殊符号字体、字号相关标签标题标签 . #=1, 2, 3, 4, 5, 6 说明：到字体大小依次递减 一级标题一级标题 二级标题二级标题 三级标题三级标题 四级标题四级标题 五级标题五级标题 六级标题六级标题 H1 到到 H6 标签用于指定不同级别的标题标签用于指定不同级别的标题 标签 特殊符号 . 字体、字号相关标签特殊字符转义码

4、空格 引号(“”)"小于()>版权号( )©字体的字体的大小值大小值字体的字体的颜色颜色字体的字体的类型类型字体、字号相关标签. 手机充值、手机充值、IP卡卡/电话卡电话卡 移动移动 |  100 |  联通联通 |  50 Copyright © 2007 "淘宝网淘宝网" All rights.空格效果空格效果. 淘宝集市欢迎您！淘宝集市欢迎您！ 淘宝网首届翠友会！淘宝网首届翠友会！ 行的控制相关标

5、签段落标签 段(Paragraph) (可以看作是空行) 换行标签 换行 换段了换段了换行了换行了图像标签常见的图片格式介绍图像类型优点缺点适用场合制作工具*.jpg体积小，比较清晰有损压缩 、画面失真 网页图片Photoshop*.gif支持 Internet 标准 ,支持无损耗压缩和透明度，很流行 支持有限的透明度,效果不如别的图像网页图片Photoshop*.png体积小,便于网络传输,无损压缩,支持透明不支持动画网页图片Photoshop*.bmp支持 24 位颜色深度，兼容性好不支持压缩 容量大桌面墙纸photoshop图像标签图像的基本语法 当图片不显示时出现的提当图片不显示时出现

6、的提示性文字，示性文字，IE早期版本当鼠标放到图早期版本当鼠标放到图片上时也会显示提示文字片上时也会显示提示文字图像的图像的位置位置图像的图像的宽度宽度图像的图像的高度高度为图像添加的提示性文字为图像添加的提示性文字图像标签 图像与文本的对齐方式 图像与文本居中对图像与文本居中对齐齐,还可以取还可以取top, bottom 值值. 请点击广告进入明星专区请点击广告进入明星专区图像和文本居图像和文本居中对齐中对齐小结1字号大小为字号大小为3编写如下图所示效果对应的html代码文字布局 内容分隔标签 项目列表和编号 有序列表 无序列表水平分隔线水平分隔线有序列表有序列表无序列表无序列表如何使用内容

7、分隔标签 线的厚度值线的厚度值线的宽度线的宽度 标签用于在页面上绘制水平线标签用于在页面上绘制水平线 线的颜色线的颜色如何使用列表 无序列表语法 列表项内容 有序列表语法 列表项内容 注册步骤：注册步骤： 填写信息填写信息 收电子邮件收电子邮件 注册成功注册成功 新人上路指南新人上路指南 如何激活会员名？如何激活会员名？ 如何注册淘宝会员？如何注册淘宝会员？ 注册时密码设置有什么要求注册时密码设置有什么要求？ 支付宝认证支付宝认证 页面链接标签 链接到其他页面 免费注册链接内容链接内容链接的地址链接的地址链接到其他页面链接到其他页面 免费注册免费注册 登录登录 单击单击”免费注册免费注册”之后

8、链接到的页面之后链接到的页面页面链接标签 链接到其他页面 绝对路径指定从根目录到文件的完整路径。 相对路径指定相对于当前文件的文件位置。 在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？两种方式：相对路径和绝对路径两种方式：相对路径和绝对路径页面链接标签要链接到同一目录要链接到同一目录 (C:HTML) 下的页面，可编写下的页面，可编写 或或 相对路径名相对路径名绝对路径名绝对路径名页面链接标签 要实现如下图所示的超链接效果，怎么办？演示示例演示示例3 3：演示锚链接：演示锚链接使用锚记标签使用锚记标签页面链接标签 链接到本页面 锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 主题名称 为达到这种跳转效果，请在 HREF 参数中使用该标记主题名称演示示例演示示例4 4：演示锚链接：演示锚链接链接到其他页面链接到其他页面新人上路新人上路新人上路指南新人上路指南1、定义锚标记、定义