HTML笔记(一) HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。
超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。
<HTML> <HEAD>
头 部 信 息 </HEAD> <BODY>
文 档 主 体， 正 文 部 分 </BODY> </HTML>
可省略<HTML>标记， 因为.html 或.htm 文件被Web浏览器默认为是HTML文档 用“<”和“>”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面 1.单标签：< 标签名称> 最常用的单标签是<BR>, 它表示换行。 2.双标签：<标签> 内 容</ 标签> 3.标签属性 ：< 标签名字 属性1 属性2 属性3 … > 各属性之间无先后次序，属性也可省略（即取默认值），例如单标记<HR>表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。 带一些属性： <HR SIZE=3 ALIGN=LEFT WIDTH="75%"> 其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 " "号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是"100%"。 标题标签：
一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大 <html> <head> <title>标题示例</title> </head> <body>
这是一行普通文字<P>
<H1>一级标题</H1> <H2>二级标题</H2> <H3>三级标题</H3> <H4>四级标题</H4> <H5>五级标题</H5> <H6>六级标题</H6> </body> </html>
换行<br>：
<html>
<head> <title>无换行示例</title> </head> <body>
登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 </body> </html>
显示结果： 登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
----------------------------------------------------------------------------------------- <html> <head> <title>换行示例</title> </head> <body>
登鹳雀楼<br>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。 </body> </html>
显示结果：
登鹳雀楼 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 段落标签<P>：
文件段落的开始由<P>来标记，段落的结束由</P>来标记，</P>是可以省略的，因为下一个<P>的开始就意味着上一个<P>的结 束。<P>标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。 <html> <head> <title>段落标签</title> </head> <body> <P ALIGN=CENTER> 浣溪沙 <P>一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。<P>无可奈何花落去，似曾相识燕归来。小园香径几徘徊。</P> </body> </html> 显示结果： 浣溪沙 一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。
无可奈何花落去，似曾相识燕归来。小园香径几徘徊。
----------------------------------------------------------------------------- <html> <head> <title>段落标签</title> </head> <body> 登鹳雀楼<P>白日依山尽，<br>黄河入海流。<br>欲穷千里目，<br>更上一层楼。</P> </body> </html> 显示结果： 登鹳雀楼 白日依山尽，
黄河入海流。 欲穷千里目， 更上一层楼。 水平线段<HR>
<HR>有三个属性： size 水平线的宽度 width 水平线的长，用占屏幕宽度的百分比或象素值来表示 align 水平线的对齐方式，有LEFT RIGHT CENTER三种 noshade 线段无阴影属性，为实心线段 <HTML> <HEAD> <TITLE>无阴影的设定</TITLE> </HEAD> <BODY> <P>这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示<BR> <HR WIDTH=80% SIZE=5> <P>这是第二条线段，有NOSHADE设定<BR> <HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE> </BODY> </HTML> 文字大小设置：
提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为1－7，其中缺省值为3。我们可以SIZE属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。 <html> <head> <title>字号大小</title> </head> <body> <font size=7>这是size=7的字体</font><P> <font size=6>这是size=6的字体</font><P> <font size=5>这是size=5的字体</font><P> <font size=4>这是size=4的字体</font><P> <font size=3>这是size=3的字体</font><P> <font size=2>这是size=2的字体</font><P> <font size=1>这是size=1的字体</font><P> <font size=-1>这是size=-1的字体</font><P> </body> </html> 文字的字体与样式：
用FACE属性来完成定义字体的功能。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。<font face="字体"> <HTML> <HEAD> <TITLE>字体</TITLE> </HEAD> <BODY> <CENTER> <FONT face="楷体_GB2312">欢迎光临</FONT><P> <FONT face="宋体">欢迎光临</FONT><P> <FONT face="仿宋_GB2312">欢迎光临</FONT><P> <FONT face="黑体">欢迎光临</FONT><P> <FONT face="Arial">Welcom my homepage.</FONT><P> <FONT face="Comic Sans MS">Welcom my homepage.</FONT><P> </CENTER> </BODY> </HTML> 为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下： <B> </B>粗体； <I> </I>斜体； <U> </U>加下划线； <TT> <TT>打字机字体； <BIG> </BIG>大型字体； <SMALL> </SMALL>小型字体； <BLINK> </BLINK>闪烁效果； <EM> </EM>表示强调，一般为斜体； <STRONG> </STRONG>表示特别强调，一般为粗体 <CITE> </CITE>用于引证、举例，一般为斜体 ---------------------------------------------------------------- <html> <head> <title>字体样式</title> </head> <body> <B>黑体字</B> <P> <I>斜体字</I> <P> <U>加下划线</U> <P> <BIG>大型字体</BIG> <P> <SMALL>小型字体</SMALL> <P> <BLINK>闪烁效果</BLINK> <P><EM>Welcome</EM> <P><STRONG>Welcome</STRONG> <P><CITE>Welcom</CITE></P> </body> </html> 文字颜色
设置格式如下：<font color=color_value>…</font> 这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。 Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00" Gray = "#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00" Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF" Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF" ----------------------------------------------------------------------- <HTML> <HEAD> <TITLE>文字的颜色</TITLE> </HEAD> <BODY BGCOLOR=000080> <CENTER> <FONT COLOR=WHITE>色彩斑斓的世界</FONT><BR> <FONT COLOR=#C0C0C0>色彩斑斓的世界</FONT><BR> </CENTER> </BODY> </HTML> 位置控制：
通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下：<DIV ALIGN=#> #＝left／right／center <html>
<head> <title>位置控制</title> </head> <body> <div align=left> 你好!<br> <div align=right> 你好!<br> <div align=center> 你好!<br> </body> </html> 另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：<HR ALIGN=#> 综合示例： <HTML> <HEAD> <TITLE>字体样式</TITLE>
</HEAD>
<BODY>
<P>
<B><U><FONT COLOR="#A35252"><FONT SIZE=+1>白 居 易</FONT></FONT></U></B>
</P>
<P> 白居易（772-846年）字乐天，晚居香山，自号香山居士，原籍太原。 </P>
<P ALIGN=center><FONT COLOR="#3C7777"><CITE>“离离原上草，一岁一枯荣”</CITE></FONT></P>
<P> 白居易是继杜甫之后，我国伟大的现实主义诗人。</P>
</BODY> </HTML> |
|
|
