HTML+CSS从入门到精通(中文)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HHTTMMLL中 中 代 代 码 码 格 格 式 式 与 与 浏浏 览览 器器 中中 显显 示示 效效 果果 一一
样样
超链接标签
页面链接<a>标签
– 链接到其他页面
<A href="register/register.html">[免费注册]</A>
链链 接接 的的 地地 址址
链链 接接 的的 内内 容容
预格式文本<PRE>标签
<PRE><IMG src="QQ.JPG" width="159" height="133" align="LEFT"> 腾讯-QQ币/QQ幻想-30元卡
一 口 价：26.45元 运 费：卖家承担运费 剩余时间：5天 宝贝类型： 全新
卖主声明：货到付款，可试用10天！
</PRE>
Copyright © 2007 "淘 宝 网 " All rights. </BODY> ……
文字布局标签 内容分隔<HR>标签 文字列表和编号
– 有序列表<OL> – 无序列表<UL>
预格式文本<PRE>标签
有有 序序 列列 表表
无无 序序 列列 表表
用用 了了 预预 先先 定定 义义 好好 的的 格格 式式
<TITLE>网 页 标 题 </TITLE>
</HEAD>
设设 置置 页页 面面 标标 题题
可可 以以 避避 免免 页页 面面 中中 的的 乱乱 码码
页面背景色或背景图像
网网 页页 背背 景景 色色 彩彩
网网 页页 背背 景景 图图 像像
<BODY bgcolor="#FFCCFF“background="back_image.GIF" > Hello World！
滚动<MARQUEE>标签示例
声 声 明 明 滚 滚 动 动 文 文 字 字 ““水水 平 平 滚 滚 动 动 ””开 开 始 始 ，， 并 并 且 且 将 将 会 会 以 以 默默 认认 方方 式式 从从 右右 向向 左左 滚滚 动动
简 简 体体 中 中 文 文 ： ： ggbb22331122 繁 繁 体体 中 中 文 文 ： ： bbiigg55
纯 纯 英 英 文 文 网 网 页 页 ： ： iissoo--88885599--11
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
滚动<MARQUEE>标签
滚动标签<MARQUEE>
<MARQUEE scrolldelay =“100” direction=“up " >
滚动文字或图像
</MARQUEE>
滚滚 动动 延延 迟迟 时时 间间
滚滚 动动 对对 象象 的的 方方 向向
说明：
– scrolldelay：表示滚动延迟时间，默认值为90。 – direction：表示滚动的方向，默认为从右向左。
<META>标签
网页页面中出现乱码，那如何消除乱码使其正常 显示？
使 使 用 用 <<MMEETTAA>>标 标 签 签 MMEETTAA标 标 签 签 常 常 用 用 来 来 描 描 述 述 网 网 页 页 ， ， 定 定 义 义 页 页 面 面 的 的 一 一 些 些 基 基 本 本 信 信 息 息
– <H>… … </H>标签
文本字体标签
– <FONT>控制文本的大小、颜色、字体
段落标签
– <p>
换行标签
– <BR>
标题标签<H>
字体、字号
<H#> ... </H#> #=1, 2, 3, 4, 5, 6
说 说 明 明 ： ： <<HH11>>到 到 <<HH66>>字 字 体 体 大 大 小 小 依 依 次 次 递 递 减 减 …… <BODY>
– 锚记标签用于使用户“跳”到文档的某个部分 – HTML 的 NAME 属性用于创建锚标记
<A NAME = “marker”>主题名称</A>
只定义NAME属性相当于定义一个位置
– 为达到这种跳转效果，请在 HREF 参数中使用该标记 <A HREF= “#marker”>主题名称</A>
跳转到本文档中相应锚标记位置
</BODY>
…… <BODY bgcolor="#FFCCFF“>
Hello World! </BODY> ……
为 为 了 了 使 使 页 页 面 面 美 美 丽 丽 大 大 方 方 ，， 网 网 页 页 背 背 景 景 要 要 尽 尽 量 量 地 地 浅 浅
文本控制标签
标题标签，表示文章的标题
……
</BODY>
任任 何何 正正 确确 的的 电电 子子
</HTML>
邮邮 箱箱 地地 址址 均均 可可
小结
编写如下图所示效果对应的html代码
有 有 序 序 列 列 表 表 OOLL 无 无 序 序 列 列 表 表 UULL
图像标签
图像的基本语法
– <IMG src="images/adv_2.jpg" width="300“ height="150“ alt="明星演唱会开幕" >
<<HHRR>>标 标 签 签 用 用 于 于 在 在 页 页 面 面 上 上 绘 绘 制 制 水 水 平 平 线 线
文字列表和编号标签<OL>、<UL>标签
无序列表语法
<UL> <LI>列表项内容 </LI> ……
</UL>
有序列表语法
<OL > <LI>列表项内容 </LI> ……
</OL>
<H4>注 册 步 骤 ： </H4> <OL type="1" >
HTML文件的基本结构 HTML (Hypertext Markup Language)超文本标记语言
<HTML> <HEAD>
网网 页页 标标 题题
<TITLE>我 的 第 一 个 网 页 </TITLE>
</HEAD>
<BODY > Hello World!
</BODY>
</HTML>
网 网 页 页 内内 容容 ，， 可可 以以 是是 文文 本本 、、图图 像像 等 等
<<HHEEAADD>>头头 部 部 部 部 分分 <<BBOODDYY>>主主 体体 部 部 分分
HHTTMMLL 网 网 页 页
这 这 这 这 部 部 部 部 分 分 分 分 包<包 包<包 H含H括 含括TT文 标M文 标M本 L题 本L题 >、和>、…和 …图 其 图 其<<像他/像H他/H和 说 T和 说 T链M明 M链 明 L接 信L接 信>>。息标。息标 它 。签它 。签 包 包 包标包 标 括 括 括 括记 记在 在 在 在 H<H<<<TBHTBHMOEMOEDALDLAYD文YD>文>>>……档……档 <<的<</的/B/H/BH开OE开 OEDA始 DA始 YDYD和>和>标 结 标结 签 束签 束 内 内
<A>标签锚标记示例
<HTML>
<HEAD> <TITLE>链 接 到 其 他 页 面 </TITLE>
22、、链 链 接 接 到 到 锚 锚 标 标 记 记 所所 在 在 位 位 置 置
</HEAD>
<BODY>
<A href="#helpme">[新 人 上 路 ]</A>
……
<A name="helpme">新 人 上 路 指 南 </A>
字体标签<font>
<FONT>标签
字字 体体 的的 大大 小小 值值
<FONT size=“12” color=“red”face=“律 书 ”>
... </FONT>
字字 体体 的的 颜颜 色色
字字 体体 的的 类类 型型
特殊符号
特殊字符
空格 引号(“”) 小于(<) 大于(>) 版权号(© )
超链接标签<A>标签
链接到其他页面
<HTML> <HEAD> <TITLE>链 接 到 其 他 页 面 </TITLE> </HEAD> <BODY>
<A href="register/register.html">[免 费 注 册 ]</A> <A href="login/login.htm">[登 录 ]</A> </BODY> </HTML>
水水 平平 分分 隔隔 线线 <<HHRR>>
内容分隔标签<HR>
线线 的的 厚厚源自文库度度 值值
线线 的的 颜颜 色色
线线 的的 宽宽 度度
<HR size="5" color="red" width="300">
…… <BODY> <HR size="5" color="red" width="300"> <HR size="10" color="black" width="200"> <HR size="5" color="#0000FF" width="50%"> </BODY> ……
单 单 击击 ””站 站 长 长 信信 箱 箱 ””链 链 接接 后后 的的 输 输 出出 结 结 果果
<HTML>
<HEAD>
<TITLE>电 子 邮 件 链 接 </TITLE>
</HEAD>
<BODY>
……
<A href="mailto: taobaoWebMater@taobao.com "> 站 长 信 箱 </A>
为为 图图 像像 添添 加加 的的 提提 示示 性性 文文 字字
…… <BODY> <IMG src="images/adv_2.jpg" alt="明 星 演 唱 会 开 幕 " width="300"height="150"> </BODY> ……
鼠 鼠 标 标 移 移 到 到 图 图 像像 上 上 ，， 出出 现现 的的 提提 示 示 性性 文文 字字
单 单 击击 ””[[免免 费 费 注 注 册册 ]]”” 之之 后后 链链 接接 到到 的的 页页 面面
超链接标签<A>标签 要实现如下图所示的超链接效果，怎么办？
点点 击击 超 超 链 链 接接
页页 面面 定定 位位 到到 相相 关关 位位 置置 使用 锚 记 标签
<A>标签锚标记 链接到本页面
转义码
"
< > ©
不不 同同 颜颜 色色 的的 字字 特特 殊殊 符符 号号
段落标签<P>、换行标签<BR>
段落标签<P>
– 段(Paragraph) (可以看作是空行) <p>
换行标签<BR>
– 换行 <br>
……. <P align="center">淘 宝 集 市 欢 迎 您 ！ </P> <P align="left">淘 宝 网 首 届 翠 友 会 ！ <BR> …… </P>
<LI>填 写 信 息 </LI> <LI>收 电 子 邮 件 </LI> <LI>注 册 成 功 </LI> </OL> 新人上路指南 <UL type="circle"> <LI>如 何 激 活 会 员 名 ？ </LI> <LI>如 何 注 册 淘 宝 会 员 ？ </LI> <LI>注 册 时 密 码 设 置 有 什 么 要 求 ？ </LI> <LI>支 付 宝 认 证 </LI> </UL>
……
换换 段段 了了 换换 行行 了了
字体、字号相关标签示例
...... <BODY>
<P> <FONT size="+2" color="red" > 手 机 充 值 、IP卡 /电 话 卡 </FONT><BR /> 移 动 | 100 | 联 通 | 50</P>
本章目标
熟悉HTML的各种标签 熟练设置HTML各标签的属性 熟练使用CSS
www简介
WWW，是World Wide Web（万维网）的缩写。万维网 通常也简称为Web，它是由无数的商业、教育、娱乐 等资料组成的一个庞大的信息空间。我们在这个信息 空间中遨游、浏览、搜寻资料，最终呈现在浏览器中 的信息，就是Web页面。 Web页面绝大多数都是由HTML所编写的。
<H1>一级标题</H1> <H2>二级标题</H2> <H3>三级标题</H3> <H4>四级标题</H4> <H5>五级标题</H5> <H6>六级标题</H6> </BODY> ……
HH11到 到 HH66标 标 签 签 用 用 于 于 指 指 定 定 不 不 同 同 级 级 别 别 的 的 标 标 题 题
……
</BODY> </HTML>
11、、定 定 义 义 锚 锚 标 标 记 记
<A>标签电子邮件链接 电子邮件链接
– 要链接电子邮件，可在链接标签中插入” mailto:邮箱地址”
<A href="mailto:webmaster@sohu.com"> 站长信箱
</A>
<A>标签电子邮件链接示例
样样
超链接标签
页面链接<a>标签
– 链接到其他页面
<A href="register/register.html">[免费注册]</A>
链链 接接 的的 地地 址址
链链 接接 的的 内内 容容
预格式文本<PRE>标签
<PRE><IMG src="QQ.JPG" width="159" height="133" align="LEFT"> 腾讯-QQ币/QQ幻想-30元卡
一 口 价：26.45元 运 费：卖家承担运费 剩余时间：5天 宝贝类型： 全新
卖主声明：货到付款，可试用10天！
</PRE>
Copyright © 2007 "淘 宝 网 " All rights. </BODY> ……
文字布局标签 内容分隔<HR>标签 文字列表和编号
– 有序列表<OL> – 无序列表<UL>
预格式文本<PRE>标签
有有 序序 列列 表表
无无 序序 列列 表表
用用 了了 预预 先先 定定 义义 好好 的的 格格 式式
<TITLE>网 页 标 题 </TITLE>
</HEAD>
设设 置置 页页 面面 标标 题题
可可 以以 避避 免免 页页 面面 中中 的的 乱乱 码码
页面背景色或背景图像
网网 页页 背背 景景 色色 彩彩
网网 页页 背背 景景 图图 像像
<BODY bgcolor="#FFCCFF“background="back_image.GIF" > Hello World！
滚动<MARQUEE>标签示例
声 声 明 明 滚 滚 动 动 文 文 字 字 ““水水 平 平 滚 滚 动 动 ””开 开 始 始 ，， 并 并 且 且 将 将 会 会 以 以 默默 认认 方方 式式 从从 右右 向向 左左 滚滚 动动
简 简 体体 中 中 文 文 ： ： ggbb22331122 繁 繁 体体 中 中 文 文 ： ： bbiigg55
纯 纯 英 英 文 文 网 网 页 页 ： ： iissoo--88885599--11
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
滚动<MARQUEE>标签
滚动标签<MARQUEE>
<MARQUEE scrolldelay =“100” direction=“up " >
滚动文字或图像
</MARQUEE>
滚滚 动动 延延 迟迟 时时 间间
滚滚 动动 对对 象象 的的 方方 向向
说明：
– scrolldelay：表示滚动延迟时间，默认值为90。 – direction：表示滚动的方向，默认为从右向左。
<META>标签
网页页面中出现乱码，那如何消除乱码使其正常 显示？
使 使 用 用 <<MMEETTAA>>标 标 签 签 MMEETTAA标 标 签 签 常 常 用 用 来 来 描 描 述 述 网 网 页 页 ， ， 定 定 义 义 页 页 面 面 的 的 一 一 些 些 基 基 本 本 信 信 息 息
– <H>… … </H>标签
文本字体标签
– <FONT>控制文本的大小、颜色、字体
段落标签
– <p>
换行标签
– <BR>
标题标签<H>
字体、字号
<H#> ... </H#> #=1, 2, 3, 4, 5, 6
说 说 明 明 ： ： <<HH11>>到 到 <<HH66>>字 字 体 体 大 大 小 小 依 依 次 次 递 递 减 减 …… <BODY>
– 锚记标签用于使用户“跳”到文档的某个部分 – HTML 的 NAME 属性用于创建锚标记
<A NAME = “marker”>主题名称</A>
只定义NAME属性相当于定义一个位置
– 为达到这种跳转效果，请在 HREF 参数中使用该标记 <A HREF= “#marker”>主题名称</A>
跳转到本文档中相应锚标记位置
</BODY>
…… <BODY bgcolor="#FFCCFF“>
Hello World! </BODY> ……
为 为 了 了 使 使 页 页 面 面 美 美 丽 丽 大 大 方 方 ，， 网 网 页 页 背 背 景 景 要 要 尽 尽 量 量 地 地 浅 浅
文本控制标签
标题标签，表示文章的标题
……
</BODY>
任任 何何 正正 确确 的的 电电 子子
</HTML>
邮邮 箱箱 地地 址址 均均 可可
小结
编写如下图所示效果对应的html代码
有 有 序 序 列 列 表 表 OOLL 无 无 序 序 列 列 表 表 UULL
图像标签
图像的基本语法
– <IMG src="images/adv_2.jpg" width="300“ height="150“ alt="明星演唱会开幕" >
<<HHRR>>标 标 签 签 用 用 于 于 在 在 页 页 面 面 上 上 绘 绘 制 制 水 水 平 平 线 线
文字列表和编号标签<OL>、<UL>标签
无序列表语法
<UL> <LI>列表项内容 </LI> ……
</UL>
有序列表语法
<OL > <LI>列表项内容 </LI> ……
</OL>
<H4>注 册 步 骤 ： </H4> <OL type="1" >
HTML文件的基本结构 HTML (Hypertext Markup Language)超文本标记语言
<HTML> <HEAD>
网网 页页 标标 题题
<TITLE>我 的 第 一 个 网 页 </TITLE>
</HEAD>
<BODY > Hello World!
</BODY>
</HTML>
网 网 页 页 内内 容容 ，， 可可 以以 是是 文文 本本 、、图图 像像 等 等
<<HHEEAADD>>头头 部 部 部 部 分分 <<BBOODDYY>>主主 体体 部 部 分分
HHTTMMLL 网 网 页 页
这 这 这 这 部 部 部 部 分 分 分 分 包<包 包<包 H含H括 含括TT文 标M文 标M本 L题 本L题 >、和>、…和 …图 其 图 其<<像他/像H他/H和 说 T和 说 T链M明 M链 明 L接 信L接 信>>。息标。息标 它 。签它 。签 包 包 包标包 标 括 括 括 括记 记在 在 在 在 H<H<<<TBHTBHMOEMOEDALDLAYD文YD>文>>>……档……档 <<的<</的/B/H/BH开OE开 OEDA始 DA始 YDYD和>和>标 结 标结 签 束签 束 内 内
<A>标签锚标记示例
<HTML>
<HEAD> <TITLE>链 接 到 其 他 页 面 </TITLE>
22、、链 链 接 接 到 到 锚 锚 标 标 记 记 所所 在 在 位 位 置 置
</HEAD>
<BODY>
<A href="#helpme">[新 人 上 路 ]</A>
……
<A name="helpme">新 人 上 路 指 南 </A>
字体标签<font>
<FONT>标签
字字 体体 的的 大大 小小 值值
<FONT size=“12” color=“red”face=“律 书 ”>
... </FONT>
字字 体体 的的 颜颜 色色
字字 体体 的的 类类 型型
特殊符号
特殊字符
空格 引号(“”) 小于(<) 大于(>) 版权号(© )
超链接标签<A>标签
链接到其他页面
<HTML> <HEAD> <TITLE>链 接 到 其 他 页 面 </TITLE> </HEAD> <BODY>
<A href="register/register.html">[免 费 注 册 ]</A> <A href="login/login.htm">[登 录 ]</A> </BODY> </HTML>
水水 平平 分分 隔隔 线线 <<HHRR>>
内容分隔标签<HR>
线线 的的 厚厚源自文库度度 值值
线线 的的 颜颜 色色
线线 的的 宽宽 度度
<HR size="5" color="red" width="300">
…… <BODY> <HR size="5" color="red" width="300"> <HR size="10" color="black" width="200"> <HR size="5" color="#0000FF" width="50%"> </BODY> ……
单 单 击击 ””站 站 长 长 信信 箱 箱 ””链 链 接接 后后 的的 输 输 出出 结 结 果果
<HTML>
<HEAD>
<TITLE>电 子 邮 件 链 接 </TITLE>
</HEAD>
<BODY>
……
<A href="mailto: taobaoWebMater@taobao.com "> 站 长 信 箱 </A>
为为 图图 像像 添添 加加 的的 提提 示示 性性 文文 字字
…… <BODY> <IMG src="images/adv_2.jpg" alt="明 星 演 唱 会 开 幕 " width="300"height="150"> </BODY> ……
鼠 鼠 标 标 移 移 到 到 图 图 像像 上 上 ，， 出出 现现 的的 提提 示 示 性性 文文 字字
单 单 击击 ””[[免免 费 费 注 注 册册 ]]”” 之之 后后 链链 接接 到到 的的 页页 面面
超链接标签<A>标签 要实现如下图所示的超链接效果，怎么办？
点点 击击 超 超 链 链 接接
页页 面面 定定 位位 到到 相相 关关 位位 置置 使用 锚 记 标签
<A>标签锚标记 链接到本页面
转义码
"
< > ©
不不 同同 颜颜 色色 的的 字字 特特 殊殊 符符 号号
段落标签<P>、换行标签<BR>
段落标签<P>
– 段(Paragraph) (可以看作是空行) <p>
换行标签<BR>
– 换行 <br>
……. <P align="center">淘 宝 集 市 欢 迎 您 ！ </P> <P align="left">淘 宝 网 首 届 翠 友 会 ！ <BR> …… </P>
<LI>填 写 信 息 </LI> <LI>收 电 子 邮 件 </LI> <LI>注 册 成 功 </LI> </OL> 新人上路指南 <UL type="circle"> <LI>如 何 激 活 会 员 名 ？ </LI> <LI>如 何 注 册 淘 宝 会 员 ？ </LI> <LI>注 册 时 密 码 设 置 有 什 么 要 求 ？ </LI> <LI>支 付 宝 认 证 </LI> </UL>
……
换换 段段 了了 换换 行行 了了
字体、字号相关标签示例
...... <BODY>
<P> <FONT size="+2" color="red" > 手 机 充 值 、IP卡 /电 话 卡 </FONT><BR /> 移 动 | 100 | 联 通 | 50</P>
本章目标
熟悉HTML的各种标签 熟练设置HTML各标签的属性 熟练使用CSS
www简介
WWW，是World Wide Web（万维网）的缩写。万维网 通常也简称为Web，它是由无数的商业、教育、娱乐 等资料组成的一个庞大的信息空间。我们在这个信息 空间中遨游、浏览、搜寻资料，最终呈现在浏览器中 的信息，就是Web页面。 Web页面绝大多数都是由HTML所编写的。
<H1>一级标题</H1> <H2>二级标题</H2> <H3>三级标题</H3> <H4>四级标题</H4> <H5>五级标题</H5> <H6>六级标题</H6> </BODY> ……
HH11到 到 HH66标 标 签 签 用 用 于 于 指 指 定 定 不 不 同 同 级 级 别 别 的 的 标 标 题 题
……
</BODY> </HTML>
11、、定 定 义 义 锚 锚 标 标 记 记
<A>标签电子邮件链接 电子邮件链接
– 要链接电子邮件，可在链接标签中插入” mailto:邮箱地址”
<A href="mailto:webmaster@sohu.com"> 站长信箱
</A>
<A>标签电子邮件链接示例