Embed Size (px)
Citation preview
什么是什么是 HTMLHTML什么是什么是 HTMLHTML
HTML 语言• 一种进行网页设计的语言• 一种标签式的程序设计语言• 一种纯文本式的语言• 一种简单易学的语言• 一种可以使用文本编辑器进行编辑七语言
• 编辑的文件名后缀是” .html” 。
HTML 初步• 直接用文本编辑（例如记事本）时，不
是所见即所得；• 有很多网页编辑工具，例如 Frontpage 、
Dreamweaver • Dreamweaver 、 Flash 、 Firework 称
为网页制作三剑客，将三个软件配合起来使用，会制作出非常精美的网页。
HTML 文件的基本构成• 由文件的内容和标签组成；• 标签不区分大小写字符，大小写字符效
果相同• 标签基本上是成对出现，结束标签带有
“ /” 符：•< 标签名 > 文件的内容 </ 标签名 >
最简单的 HTML 文件 <HTML>
<HEAD> <title> 浙江工业大学信息管理 2010 级一班 <title ></HEAD><BODY> HTML 文件的正文写在这里 ... ... </BODY></HTML>
HTML 语法示例：整体结构
<HTML> <HEAD>
<TITLE> 欢迎学习 HTML</TITLE> </HEAD> <BODY>
<H3> 我的第一个 HTML 文档 </H3> </BODY></HTML>
<HTML> <HEAD>
<TITLE> 欢迎学习 HTML</TITLE> </HEAD> <BODY>
<H3> 我的第一个 HTML 文档 </H3> </BODY></HTML>
运行结果
HTML 语法示例：段落标签
<HTML><HEAD>
<TITLE> 欢迎使用 HTML</TITLE></HEAD><BODY BGCOLOR = lavender>
<P> 这会是一种很有趣的体验<P> 另一个段落元素
</BODY></HTML>
<HTML><HEAD>
<TITLE> 欢迎使用 HTML</TITLE></HEAD><BODY BGCOLOR = lavender>
<P> 这会是一种很有趣的体验<P> 另一个段落元素
</BODY></HTML>
运行结果
HTML 语法示例：换行标签
<HTML><HEAD>
<TITLE> 欢迎使用 HTML</TITLE></HEAD><BODY BGCOLOR = lavender>
<P> 这会是一种很有趣的 <BR> 体验<P> 另一个段落元素
</BODY></HTML>
<HTML><HEAD>
<TITLE> 欢迎使用 HTML</TITLE></HEAD><BODY BGCOLOR = lavender>
<P> 这会是一种很有趣的 <BR> 体验<P> 另一个段落元素
</BODY></HTML>
运行结果
HTML 语法示例：对齐标签对齐标签
<HTML><HEAD>
<TITLE>学习 HTML</TITLE></HEAD><BODY BGCOLOR=lavender>
<P align = right>这会是一种很有趣的体验 </P></BODY>
</HTML>
<HTML><HEAD>
<TITLE>学习 HTML</TITLE></HEAD><BODY BGCOLOR=lavender>
<P align = right>这会是一种很有趣的体验 </P></BODY>
</HTML>
运行结果
右对齐
Left ：左对齐Center ：居中Right ：右对齐
1 、职 位：关于可申请的职位……
2 、培训资源：本学院美术学位的培训资源请单击此处查看视频……
3 、联 盟：我们有许多联盟……
1 、职 位：关于可申请的职位……
2 、培训资源：本学院美术学位的培训资源请单击此处查看视频……
3 、联 盟：我们有许多联盟……
超链接示意
超链接示意链接类型
•内部链接
到同一文档内或同一网站内的其他部分的链接
到同一文档内或同一网站内的其他部分的链接
•外部链接
到其他网站或服务器上的页面的链接。
到其他网站或服务器上的页面的链接。
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
Web 站点 1 Web 站点 2
创建超链接：给出 URL要创建超链接，必须指定两个部分
要链接的文件的完整地址或 URL要链接的文件的完整地址或 URL
热点
热点可以是一行文字甚至一个图像热点可以是一行文字甚至一个图像
http://www.sina.com.cnC:\internet\index.htmlservice/index.html
绝对 URL文件的完整地址相对 URL
超链接关键标签： HREF
<A HREF = protocol://host.domain:port/path/filename> Hypertext </A>
•Protocol 是协议类型 http– 超文本传输协议 gopher– 搜索文件
ftp– 文件传输协议 mailto– 发送电子邮件 • Host.domain 是服务器的 Internet 地址•Port 是目标服务器的端口号•Hypertext 是用户必须单击才能激活链接的文本或图像
<A HREF = protocol://host.domain:port/path/filename> Hypertext </A>
•Protocol 是协议类型 http– 超文本传输协议 gopher– 搜索文件
ftp– 文件传输协议 mailto– 发送电子邮件 • Host.domain 是服务器的 Internet 地址•Port 是目标服务器的端口号•Hypertext 是用户必须单击才能激活链接的文本或图像
语法为 :
超链接示意<HTML> <HEAD> <TITLE>使用链接 </TITLE> </HEAD> <BODY> <BR><BR> <P>本页的所有内容都讲述关于如何创建到文档的链接 <A HREF = Doc2.html>单击此处查看文档 2</A></BODY></HTML>
<HTML> <HEAD> <TITLE>使用链接 </TITLE> </HEAD> <BODY> <BR><BR> <P>本页的所有内容都讲述关于如何创建到文档的链接 <A HREF = Doc2.html>单击此处查看文档 2</A></BODY></HTML>
<HTML> <HEAD> <TITLE>文档 2</TITLE> </HEAD> <BODY> <BR><BR> <P>这是文档 2。单击文档 1中的超链接后将显示本页。 <BR><BR> <A HREF= Doc1.html>返回 </A> </BODY></HTML>
<HTML> <HEAD> <TITLE>文档 2</TITLE> </HEAD> <BODY> <BR><BR> <P>这是文档 2。单击文档 1中的超链接后将显示本页。 <BR><BR> <A HREF= Doc1.html>返回 </A> </BODY></HTML>
超链接到同一文档的各部分<HTML> <HEAD><TITLE>使用链接 </TITLE></HEAD> <BODY> <A HREF = #Internet>互联网 </A><BR><BR> <A HREF = #HTML>HTML简介 </A><BR><BR> <A HREF = #Consistency> 多样化和统一性 </A><BR><BR> <A name = Internet>互联网 </A><BR> <P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过 TCP/IP传输协议绑定在一起。 </P> <A name = HTML>HTML简介 </A><BR> <P>超文本标签语言是 Web用来创建和识别文档的标准语言。虽然它不是标准通用标签语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。 </P> <A name = Consistency> 多样性和统一性 </A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 </P> <BR><BR><BR><BR><BR><BR> </BODY></HTML>
<HTML> <HEAD><TITLE>使用链接 </TITLE></HEAD> <BODY> <A HREF = #Internet>互联网 </A><BR><BR> <A HREF = #HTML>HTML简介 </A><BR><BR> <A HREF = #Consistency> 多样化和统一性 </A><BR><BR> <A name = Internet>互联网 </A><BR> <P>互联网是网络的网络。也就是说，计算机网络可以跨越国家甚至全球的范围连接到其他网络。世界上所有的计算机都可以通过 TCP/IP传输协议绑定在一起。 </P> <A name = HTML>HTML简介 </A><BR> <P>超文本标签语言是 Web用来创建和识别文档的标准语言。虽然它不是标准通用标签语言 (SGML) 的子集，但与它有着某种程度上的关联。SGML是一种文档格式语言表示方法。 </P> <A name = Consistency> 多样性和统一性 </A><BR> <P>万事万物都离不开多样性和统一性这样一条基本准则。也就是说，所有的事物都可以融合成一个整体，同时，又保持自己独特的与众不同的一面。站点的独特性恰恰来源于它的一致性。颜色、字体、分栏布局以及其他设计元素应在站点的每个部分都保持一致。 </P> <BR><BR><BR><BR><BR><BR> </BODY></HTML>
单击
当要显示的内容足够长时
链接到另一文档中某个特定位置<HTML> <HEAD> <TITLE>主文档 </TITLE> </HEAD> <BODY> <A HREF=sg.html#Internet> 互联网 </A> <BR> <BR> <A HREF=sg.html#HTML>HTML简介 </A> <BR> <BR> <A HREF=sg.html#Consistency> 多样性和统一性 </A> </BODY></HTML>
<HTML> <HEAD> <TITLE>主文档 </TITLE> </HEAD> <BODY> <A HREF=sg.html#Internet> 互联网 </A> <BR> <BR> <A HREF=sg.html#HTML>HTML简介 </A> <BR> <BR> <A HREF=sg.html#Consistency> 多样性和统一性 </A> </BODY></HTML>
单击
在网站上导航•线性布局•分层布局•图像映射•超链接•子页面•目录•“后退”和“前进”按钮
分层布局• 主页具有到其他多个页面的链接• 每个页面都有一个到主页的链接
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
HTML HTML 各类标签详解各类标签详解HTML HTML 各类标签详解各类标签详解
HTML 标签种类
• 标题标签• 段落级标签• 块标签• 字符级标签• 列表• 水平标尺标签 <HR>• 字体标签 <FONT>• IMG 标签
• 标题标签• 段落级标签• 块标签• 字符级标签• 列表• 水平标尺标签 <HR>• 字体标签 <FONT>• IMG 标签
标题标签
<HTML><HEAD>
<TITLE>HTML 标题标签示意 </TITLE> </HEAD>
<BODY> <H1>HTML 简介 </H1> <H2>HTML 简介 </H2> <H3>HTML 简介 </H3> <H4>HTML 简介 </H4> <H5>HTML 简介 </H5> <H6>HTML 简介 </H6>
</BODY></HTML>
<HTML><HEAD>
<TITLE>HTML 标题标签示意 </TITLE> </HEAD>
<BODY> <H1>HTML 简介 </H1> <H2>HTML 简介 </H2> <H3>HTML 简介 </H3> <H4>HTML 简介 </H4> <H5>HTML 简介 </H5> <H6>HTML 简介 </H6>
</BODY></HTML>
可显示六种大小的标题，即 <H1> 到 <H6> ， <H1> 为最大， <H6> 为最小
段落级标签： <ADDRESS>
它可以包含下列内容：到主页的链接，搜索字符串功能，版权信息，文档的作者、地址、签名等信息，………
<HTML><HEAD>
<TITLE> 欢迎学习 HTML</TITLE></HEAD><BODY BGCOLOR = lavender>
<H3> 我的第一个 HTML 文档 </H3>
<P> 这将是一种很有趣的体验<H2> 使用另一个标题 </H2><P> 另一个段落元素<ADDRESS><P>
<A href=“http://www.zjut.edu.cn/”> 单击此处访问浙江工业大学的主页 </A> </ADDRESS></BODY>
</HTML>
<HTML><HEAD>
<TITLE> 欢迎学习 HTML</TITLE></HEAD><BODY BGCOLOR = lavender>
<H3> 我的第一个 HTML 文档 </H3>
<P> 这将是一种很有趣的体验<H2> 使用另一个标题 </H2><P> 另一个段落元素<ADDRESS><P>
<A href=“http://www.zjut.edu.cn/”> 单击此处访问浙江工业大学的主页 </A> </ADDRESS></BODY>
</HTML>
块标签： <SPAN> < DIV> <DIV>…</DIV> 可以定义跨段落的内容块；<SPAN>…</SPAN> 定义段落内的内容块
<HTML><HEAD>
<TITLE> 学习 HTML</TITLE></HEAD><BODY>
<DIV>第 1 部分<P> 元素用于组织元素<P>DIV 通常用于块级元素
</DIV><DIV align = right>
第 2 部分<P> 这是第二部分<BR><H2> 您觉得有意思吗？ </H2
></DIV><P> 第二部分向右对齐。<SPAN STYLE ="font-size:25">
公共格式 </SPAN> 应用于这一部分中的所有元素</BODY>
</HTML>
<HTML><HEAD>
<TITLE> 学习 HTML</TITLE></HEAD><BODY>
<DIV>第 1 部分<P> 元素用于组织元素<P>DIV 通常用于块级元素
</DIV><DIV align = right>
第 2 部分<P> 这是第二部分<BR><H2> 您觉得有意思吗？ </H2
></DIV><P> 第二部分向右对齐。<SPAN STYLE ="font-size:25">
公共格式 </SPAN> 应用于这一部分中的所有元素</BODY>
</HTML>
注意 align 用法，可选参数有 right,left,center
字符级标签<B> . . . </B> 粗体文本<TT> . . . </TT> 固定宽度的字体<SUP> . . . /SUP> 上标文本<SUB> . . . /SUB> 下标文本<EM> . . </EM> 强调文本<CODE>. . .</CODE> 用于显示编程代码 <CITE>. . . </CITE> 用于引用
字符级标签（示例）
<HTML><HEAD>
<TITLE> 字符级标签示例 </TITLE></HEAD><BODY>
<P ALIGN="center"><B> 字符级标签示例 </B></P>
<P>圆的面积 =pi*r<SUP>2</SUP></P> <P> 水的化学符号： H<SUB>2</SUB>O</P> <P><EM> 这是一种很有趣的体验 </EM></P>
</BODY></HTML>
<HTML><HEAD>
<TITLE> 字符级标签示例 </TITLE></HEAD><BODY>
<P ALIGN="center"><B> 字符级标签示例 </B></P>
<P>圆的面积 =pi*r<SUP>2</SUP></P> <P> 水的化学符号： H<SUB>2</SUB>O</P> <P><EM> 这是一种很有趣的体验 </EM></P>
</BODY></HTML>
源码格式标签<HTML>
<HEAD><TITLE> 字符级标签示例 </TITLE>
</HEAD><BODY>
<PRE>• Here's• some ditty• Specially done• to lay it out all• Formatted and pretty.• Unfortunately， that is all• This junk really means• Because I admit I• couldn't scrawl• Poetry for • beans.• </PRE>
</BODY></HTML>
<HTML><HEAD>
<TITLE> 字符级标签示例 </TITLE></HEAD><BODY>
<PRE>• Here's• some ditty• Specially done• to lay it out all• Formatted and pretty.• Unfortunately， that is all• This junk really means• Because I admit I• couldn't scrawl• Poetry for • beans.• </PRE>
</BODY></HTML>
分段标签： br<HTML>
<HEAD><TITLE> 字符级标签示例 </TITLE>
</HEAD><BODY>
<BODY>• Here's<br>• some ditty<br>• Specially done<br>• to lay it out all<br>• Formatted and pretty.<br>• Unfortunately， that is all<br>• This junk really means<br>• Because I admit I<br>• couldn't scrawl<br>• Poetry for <br>• beans.<br>• </BODY>
</BODY></HTML>
<HTML><HEAD>
<TITLE> 字符级标签示例 </TITLE></HEAD><BODY>
<BODY>• Here's<br>• some ditty<br>• Specially done<br>• to lay it out all<br>• Formatted and pretty.<br>• Unfortunately， that is all<br>• This junk really means<br>• Because I admit I<br>• couldn't scrawl<br>• Poetry for <br>• beans.<br>• </BODY>
</BODY></HTML>
注意与 <p> 的区别
字体大小： font• <font size=#> ... </font> #=1 ， 2 ， 3， 4， 5， 6， 7
– <font> 标签没有 <P> 标签的功能；– 可以在原有字体大小的基础上增加（ +）或减少（ -），
• <basefont size=#> #=1 ， 2 ， 3， 4， 5， 6， 7
– 设置文档的基本字体大小，使用（ +）、（ -），形成 “ +#”或“ -#”格式，此时都将以基本字体大小为准。
• <font size=#> ... </font> #=1 ， 2 ， 3， 4， 5， 6， 7
– <font> 标签没有 <P> 标签的功能；– 可以在原有字体大小的基础上增加（ +）或减少（ -），
• <basefont size=#> #=1 ， 2 ， 3， 4， 5， 6， 7
– 设置文档的基本字体大小，使用（ +）、（ -），形成 “ +#”或“ -#”格式，此时都将以基本字体大小为准。
字体大小示例<HTML>
<HEAD><TITLE> 字符级标签示例 </TITLE>
</HEAD><BODY>
<font size=7>今天天气真好！ </font><br><font size=6>今天天气真好！ </font> <br><font size=5>今天天气真好！ </font> <br><font size=4>今天天气真好！ </font> <br><font size=3>今天天气真好！ </font> <br><font size=2>今天天气真好！ </font> <br><font size=1>今天天气真好！ </font> <br>
</BODY></HTML>
<HTML><HEAD>
<TITLE> 字符级标签示例 </TITLE></HEAD><BODY>
<font size=7>今天天气真好！ </font><br><font size=6>今天天气真好！ </font> <br><font size=5>今天天气真好！ </font> <br><font size=4>今天天气真好！ </font> <br><font size=3>今天天气真好！ </font> <br><font size=2>今天天气真好！ </font> <br><font size=1>今天天气真好！ </font> <br>
</BODY></HTML>
字体大小示例比较<HTML>
<HEAD><TITLE> 字符级标签示例 </TITLE>
</HEAD><BODY><font size=7>今天天气真好！ </font><H1>天气真好！ </H1><font size=6>今天天气真好！ </font><H2>天气真好！ </H2><font size=5>今天天气真好！ </font><H3>天气真好！ </H3><font size=4>今天天气真好！ </font><H4>天气真好！ </H4><font size=3>今天天气真好！ </font><H5>天气真好！ </H5><font size=2>今天天气真好！ </font><H6>天气真好！ </H6><font size=1>今天天气真好！ </font></BODY>
</HTML>
<HTML><HEAD>
<TITLE> 字符级标签示例 </TITLE></HEAD><BODY><font size=7>今天天气真好！ </font><H1>天气真好！ </H1><font size=6>今天天气真好！ </font><H2>天气真好！ </H2><font size=5>今天天气真好！ </font><H3>天气真好！ </H3><font size=4>今天天气真好！ </font><H4>天气真好！ </H4><font size=3>今天天气真好！ </font><H5>天气真好！ </H5><font size=2>今天天气真好！ </font><H6>天气真好！ </H6><font size=1>今天天气真好！ </font></BODY>
</HTML>
字体标签• 客户端字体 (Font Face) – <font face="#， #， ... ， #"> ...
</font>– #是客户端可获得的字体
• 如：– <font face="Arial"> Hellow World!
</font>
• 客户端字体 (Font Face) – <font face="#， #， ... ， #"> ...
</font>– #是客户端可获得的字体
• 如：– <font face="Arial"> Hellow World!
</font>
字体标签示例<HTML>
<HEAD><TITLE> 字符级标签示例 </TITLE>
</HEAD><BODY><pre>
<font size=7><font face="Arial"> Hellow World!</font><font face=“Broadway"> Hellow World!</font><font face="Comic Sans MS"> Hellow World!</font><font face=" 黑体 "> Hellow World!</font><font face=" 楷体 "> Hellow World!</font><font face=" 仿宋 "> Hellow World!</font>
</pre></BODY>
</HTML>
<HTML><HEAD>
<TITLE> 字符级标签示例 </TITLE></HEAD><BODY><pre>
<font size=7><font face="Arial"> Hellow World!</font><font face=“Broadway"> Hellow World!</font><font face="Comic Sans MS"> Hellow World!</font><font face=" 黑体 "> Hellow World!</font><font face=" 楷体 "> Hellow World!</font><font face=" 仿宋 "> Hellow World!</font>
</pre></BODY>
</HTML>
字体颜色标签•<font color=#> ... </font>
– #=rrggbb 16 进制数码，或者是下列预定义色彩：
– Black ， Olive( 橄榄 )， Teal ， Red ， Blue ， Maroon( 栗色 )， Navy， Gray， Lime( 翠绿 )，
– Fuchsia( 紫红 )， White ， Green ， Purple( 紫色 )， Silver ， Yellow ， Aqua( 蓝绿 )
•<font color=#> ... </font>
– #=rrggbb 16 进制数码，或者是下列预定义色彩：
– Black ， Olive( 橄榄 )， Teal ， Red ， Blue ， Maroon( 栗色 )， Navy， Gray， Lime( 翠绿 )，
– Fuchsia( 紫红 )， White ， Green ， Purple( 紫色 )， Silver ， Yellow ， Aqua( 蓝绿 )
字体颜色标签示例<HTML>
<HEAD><TITLE> 字符级标签示例 </TITLE>
</HEAD><BODY>
<FONT COLOR="Black">Black</FONT> ， <FONT COLOR="Olive">Olive</FONT> ，<FONT COLOR="Teal">Teal</FONT> ， <FONT COLOR="Red">Red</FONT> ， <FONT COLOR="Blue">Blue</FONT> ，<FONT COLOR="Maroon">Maroon</FONT> ，
<FONT COLOR="Navy">Navy</FONT> ，<FONT COLOR="Gray">Gray</FONT> ， <FONT COLOR="Lime">Lime</FONT> ，<FONT COLOR="White">White</FONT> ，<FONT COLOR="Green">Green</FONT> ， <FONT COLOR="Purple">Purple</FONT> ，<FONT COLOR="Silver">Silver</FONT> ， <FONT COLOR="Yellow">Yellow</FONT> ，
</BODY></HTML>
<HTML><HEAD>
<TITLE> 字符级标签示例 </TITLE></HEAD><BODY>
<FONT COLOR="Black">Black</FONT> ， <FONT COLOR="Olive">Olive</FONT> ，<FONT COLOR="Teal">Teal</FONT> ， <FONT COLOR="Red">Red</FONT> ， <FONT COLOR="Blue">Blue</FONT> ，<FONT COLOR="Maroon">Maroon</FONT> ，
<FONT COLOR="Navy">Navy</FONT> ，<FONT COLOR="Gray">Gray</FONT> ， <FONT COLOR="Lime">Lime</FONT> ，<FONT COLOR="White">White</FONT> ，<FONT COLOR="Green">Green</FONT> ， <FONT COLOR="Purple">Purple</FONT> ，<FONT COLOR="Silver">Silver</FONT> ， <FONT COLOR="Yellow">Yellow</FONT> ，
</BODY></HTML>
列表列表 ListList 和多媒体和多媒体列表列表 ListList 和多媒体和多媒体
无序列表
<HTML><HEAD>
<TITLE> 学习 HTML</TITLE></HEAD><BODY>
<UL><LI> 星期一<LI> 星期二<LI> 星期三<LI> 星期四<LI> 星期五
</UL></BODY>
</HTML>
<HTML><HEAD>
<TITLE> 学习 HTML</TITLE></HEAD><BODY>
<UL><LI> 星期一<LI> 星期二<LI> 星期三<LI> 星期四<LI> 星期五
</UL></BODY>
</HTML>
无序列表是一种“项目符号列表”。其中的项目都带有项目符号前缀。该列表包含在无序列表标签 <UL> .. </UL> 内。列表中的每个项目都使用列表标签 <LI> 进行标签，其中 LI 表示List Item （列表项）。关闭标签 </LI> 是可选的。
列表的项目符号
• <LI TYPE = SQUARE> 方形项目符号• <LI TYPE = DISC> 实心圆项目符号• <LI TYPE = CIRCLE> 空心圆项目符号
有序列表
<HTML><HEAD> <TITLE> 学习 HTML</TITLE></HEAD><BODY>
<OL><LI>星期一<LI>星期二<LI>星期三<LI>星期四<LI>星期五
</OL></BODY>
</HTML>
<HTML><HEAD> <TITLE> 学习 HTML</TITLE></HEAD><BODY>
<OL><LI>星期一<LI>星期二<LI>星期三<LI>星期四<LI>星期五
</OL></BODY>
</HTML>
有序列表包含在 <OL> .. </OL> 标签内。有序列表也显示列表项目。它与无序列表的区别在于有序列表项前面的编号是可设置的有序编号。
有序列表的编号大写罗马数字 <LI TYPE = I> 小写罗马数字 <LI TYPE = i> 大写字母 <LI TYPE = A> 小写字母 <LI TYPE = a> 从第 n 个值开始编号 <OL START = n>
<HTML><HEAD> <TITLE> 学习 HTML</TITLE></HEAD><BODY> <UL>
<LI> 星期一<OL><LI TYPE = i> 简介 HTML<LI TYPE = i> 创建列表</OL><LI> 星期二<OL><LI TYPE = a> 创建表<LI TYPE = a> 插入图像</OL><LI> 星期三<LI> 星期四<LI> 星期五
</UL></BODY>
</HTML>
<HTML><HEAD> <TITLE> 学习 HTML</TITLE></HEAD><BODY> <UL>
<LI> 星期一<OL><LI TYPE = i> 简介 HTML<LI TYPE = i> 创建列表</OL><LI> 星期二<OL><LI TYPE = a> 创建表<LI TYPE = a> 插入图像</OL><LI> 星期三<LI> 星期四<LI> 星期五
</UL></BODY>
</HTML> 注意这里是无序和有序的嵌套
水平标尺
<HTML><HEAD>
<TITLE> 欢迎使用 HTML</TITLE></HEAD><BODY>
<H3> 我的第一个 HTML 文档 </H3><HR noshade size = 5 align = center wi
dth = 50%><HR size = 15 align = left width = 80%
><HR><P> 这将会是一种很有趣的体验
</BODY></HTML>
<HTML><HEAD>
<TITLE> 欢迎使用 HTML</TITLE></HEAD><BODY>
<H3> 我的第一个 HTML 文档 </H3><HR noshade size = 5 align = center wi
dth = 50%><HR size = 15 align = left width = 80%
><HR><P> 这将会是一种很有趣的体验
</BODY></HTML>
<HR>水平标尺标签用于在页面上绘制一条水平线。可借助于下列属性控制水平线。它只有开始标签，没有结束标签，且不包含任何内容。
页面背景颜色
<HTML><HEAD>
<TITLE> 学习 HTML</TITLE></HEAD><BODY BGCOLOR=lavender>
<H2><FONT COLOR = LIMEGREEN> 欢迎使用 HTML</FONT></H2>
<P><FONT COLOR = RED>这是一种很有趣的体验 </FONT></P></BODY>
</HTML>
<HTML><HEAD>
<TITLE> 学习 HTML</TITLE></HEAD><BODY BGCOLOR=lavender>
<H2><FONT COLOR = LIMEGREEN> 欢迎使用 HTML</FONT></H2>
<P><FONT COLOR = RED>这是一种很有趣的体验 </FONT></P></BODY>
</HTML>
可以为页面和页面上的元素添加颜色。 COLOR是多个元素（如 FONT和 BODY）都可以使用的属性。
HTML 文档中的图片• GIF （ Graphics Interchange Format ）图像 (.GI
F) – 支持图形渐近– 透明 GIF 图像– 支持动画– 支持无损压缩
• JPEG（ Joint Photographic Experts Group ）图像 (.JPG)
• PNG（ Portable Network Graphics ）
插入图像
<HTML><HEAD>
<TITLE> 插入图像 </TITLE></HEAD>
<BODY><H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B> 插入图像 </B></FONT></H1><HR><P><IMG ALIGN=BOTTOM SRC=cats.jpg> 底部对齐</P><P>
<IMG ALIGN=TOP SRC=cats.jpg> 顶部对齐 </P><P>
<IMG ALIGN=MIDDLE SRC=cats.jpg> 居中对齐 </P></BODY>
</HTML>
<HTML><HEAD>
<TITLE> 插入图像 </TITLE></HEAD>
<BODY><H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B> 插入图像 </B></FONT></H1><HR><P><IMG ALIGN=BOTTOM SRC=cats.jpg> 底部对齐</P><P>
<IMG ALIGN=TOP SRC=cats.jpg> 顶部对齐 </P><P>
<IMG ALIGN=MIDDLE SRC=cats.jpg> 居中对齐 </P></BODY>
</HTML>
IMG 标签用于将图像插入到 HTML 文档中。可以将 IMG 标签放置在要显示图像的位置。语法为： <IMG SRC="URL">其中 SRC 是属性，而值是指定图像文件位置的 URL 。IMG 标签的 ALIGN 属性可以用于调整图像相对于周围文本的对齐方式。语法为：<IMG ALIGN="top" SRC="PICTURE.GIF" BORDER=0>
在 HTML 中插入Gif动画
<HTML><HEAD>
<TITLE> 插入动画 .GIF 文件 </TITLE></HEAD>
<BODY><H1><FONT SIZE=3 COLOR=FORESTGREEN><B> 插入图像 </B></FONT>
</H1><HR>
<IMG SRC=flag.gif ALT=“ 飘扬的红旗 "></BODY>
</HTML>
<HTML><HEAD>
<TITLE> 插入动画 .GIF 文件 </TITLE></HEAD>
<BODY><H1><FONT SIZE=3 COLOR=FORESTGREEN><B> 插入图像 </B></FONT>
</H1><HR>
<IMG SRC=flag.gif ALT=“ 飘扬的红旗 "></BODY>
</HTML>
在背景中插入音乐<HTML>
<HEAD><TITLE> 插入动画 .GIF 文件 </TITLE>
</HEAD><BODY>
<bgsound src= "mlh.mid" loop=3><H1><FONT SIZE=3 COLOR=FORESTGREEN><B> 插入图像 </B></FONT></H1>
<HR><IMG SRC="flag.gif" ALT=“ 飘扬的红旗 "></BODY>
</HTML>
<HTML><HEAD>
<TITLE> 插入动画 .GIF 文件 </TITLE></HEAD>
<BODY><bgsound src= "mlh.mid" loop=3><H1><FONT SIZE=3 COLOR=FORESTGREEN><B> 插入图像 </B></FONT></H1>
<HR><IMG SRC="flag.gif" ALT=“ 飘扬的红旗 "></BODY>
</HTML>
在网页中插入音乐<HTML>
<HEAD><TITLE> 插入动画 .GIF 文件 </TITLE>
</HEAD><BODY><H1><FONT SIZE=3 COLOR=FORESTGREEN><B> 插入图像 </B></FONT></H1>
<HR><embed src="mlh.mp3" autostart="true" loop="true" hidden="true">
<IMG SRC="flag.gif" ALT=“ 飘扬的红旗 "></BODY>
</HTML>
<HTML><HEAD>
<TITLE> 插入动画 .GIF 文件 </TITLE></HEAD><BODY><H1><FONT SIZE=3 COLOR=FORESTGREEN><B> 插入图像 </B></FONT></H1>
<HR><embed src="mlh.mp3" autostart="true" loop="true" hidden="true">
<IMG SRC="flag.gif" ALT=“ 飘扬的红旗 "></BODY>
</HTML>
播放器宽度width 和高度 herght 可以灵活设置 , 如果都设为 0 ，那么音乐就成了背景音乐，没有播放器 . autostart="true"为自动播放 ,autostart="false"为不自动播放 . loop="true"为连续循环播放 ,loop="false"为不循环播放 . loop可以等于一个整数 ,比如 loop="2",就是音乐循环播放 2次。
设计报告• 设计一个个人网页，版面布局如左所示。要求有背景音乐和歌曲，背景音乐尺寸控制在 30K以内，歌曲控制在 100K以内。
• 做成压缩文件一并传给至我邮箱
放飞心情 XXX 个人网站
基本信息
爱好专长
理想志向
喜欢歌曲
信息显示区
![[HTML] Codigos HTML Para Webs](https://img.pdfslide.tips/doc/110x75/577c7fb91a28abe054a5c82c/html-codigos-html-para-webs.jpg)
![Η γλʚσσα HTML - sch.gr1epal-trikal.tri.sch.gr/static/html/HTML.pdfημειώσεις HTML / JavaScript Μαρολαʗάκης Μάριος [1] Η γλʚσσα HTML HTML είναι](https://img.pdfslide.tips/doc/110x75/5f0298e87e708231d4050e7a/-ff-html-schgr1epal-f-html-javascript-oe.jpg)