Java程序员从笨鸟到菜鸟之（十四）Html基础积累总结（上）
本文来自：曹胜欢博客专栏。转载请注明出处：http://blog.csdn.net/csh624366188
注：由于本文内含有大量html标签，所以在排版上有些困难，所以排版有点难看，请大家见谅
一：首先看页面标记
1.html文件结构
<HTML>
<HEAD>
<title>,<base>,<link>,<isindex>,<meta>
</HEAD>
<BODY>
HTML文件的正文写在这里......
</BODY>
</HTML>
2.语言字符集(Charsets)的信息
<metahttp-equiv="Content-Type"content="text/html;charset=#">
#可以是gbk，utf-8等
3.背景色彩和文字色彩
<bodybgcolor=#text=#link=#alink=#vlink=#>
bgcolor---背景色彩
text---非可链接文字的色彩
link---可链接文字的色彩
alink---正被点击的可链接文字的色彩
vlink---已经点击(访问)过的可链接文字的色彩
#=rrggbb
色彩是用16进制的红－绿－蓝(red-green-blue,RGB)值来表示。
16进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
背景图象<bodybackground="image-URL">
4.链接(Link)
基本语法<ahref="URL">...</a>
这是一个
<ahref="samp/link.html">链接的例子</a>。
点一下带下划线的文字!
跳转到页面的另外一个地方
<ahref="#name">...</a>
<aname="name">...</a>
<ahref="#jump-test">跳转到下一个"链接点"</a><P>
<aname="jump-test">下一个链接点</a>
跳转到另一个页面的某个地方
<ahref="URL#name">...</a>
<aname="name">...</a>
跳转到另一个页面的<ahref="samp/link.html#jump-test">某个地方</a>。
开一个新的(浏览器)窗口(TargetWindow)
<ahref="URL"target="Window_Name">...</a>
<ahref="samp/window.html"target="window_name">
开一个新窗口!
</a>
5.标尺线
<hr>
<hr>
<hrsize=#>
<hrsize=10>
<hrwidth=#>
<hrwidth=50>
<hrwidth=50%>
<hralign=#>#=left,right
<hrwidth=50%align=left>
<hrwidth=50%align=right>
<hrnoshade>
<hrnoshade>
<hrcolor=#>
#=rrggbb16进制RGB数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
<hrcolor="red">
二：然后来看一下字体的设置
1.标题字体(Header)
<h#>...</h#>#=1,2,3,4,5,6
<h1>今天天气真好！</h1>今天天气真好！
<h2>今天天气真好！</h2>今天天气真好！
<h3>今天天气真好！</h3>今天天气真好！
<h4>今天天气真好！</h4>今天天气真好！
<h5>今天天气真好！</h5>今天天气真好！
<h6>今天天气真好！</h6>今天天气真好！
·<hn>---</hn>这些标记显示黑体字。
·<hn>---</hn>这些标记自动插入一个空行，不必用<p>标记再加空行。
因此在一行中无法使用不同大小的字体。
2.字体大小
<fontsize=#>...</font>#=1,2,3,4,5,6,7or+#,-#
<basefontsize=#>#=1,2,3,4,5,6,7
<fontsize=4>今天天气真好！</font>今天天气真好！
<fontsize=3>今天天气真好！</font>今天天气真好！
<fontsize=2>今天天气真好！</font>今天天气真好！
<fontsize=1>今天天气真好！</font>今天天气真好！
3.物理字体(PhysicalStyle)
<b>今天天气真好！</b>今天天气真好！
<i>今天天气真好！</i>今天天气真好！
<u>今天天气真好！</u>今天天气真好！
<tt>今天天气真好！</tt>今天天气真好！
<sup>今天天气真好！</sup>今天天气真好！
<sub>今天天气真好！</sub>今天天气真好！
<s>今天天气真好！</s>今天天气真好！
<strike>今天天气真好！</strike>今天天气真好！
4.逻辑字体(LogicalStyle)
<em>今天天气真好！</em>今天天气真好！
<strong>今天天气真好！</strong>今天天气真好！
<code>今天天气真好！</code>今天天气真好！
<var>今天天气真好！</var>今天天气真好！
<dfn>今天天气真好！</dfn>今天天气真好！
<cite>今天天气真好！</cite>今天天气真好！
<small>今天天气真好！</small>今天天气真好！
<big>今天天气真好！</big>今天天气真好！
5.指定“字体大小”的标记和“指定字体”的标记的组合使用
<i><fontsize=5>
<b>今天</b>天气<fontsize=6>真好！</font>
</font></i>
今天天气真好！
6.字体颜色
指定颜色<fontcolor=#>...</font>
#=rrggbb16进制数码，或者是下列预定义色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,
Fuchsia,White,Green,Purple,Silver,Yellow,Aqua
<fontcolor=ffffff>White</font>&
<fontcolor=white>White</font>
7.客户端字体(FontFace)
<fontface="#,#,...,#">...</font>
#=客户端可获得的字体（微软雅黑，roman等）
<fontface="Arial,Helvetica">HellowWorld!</font>
HellowWorld!
8.字符实体(Entities)
&#;#=字符实体名称或者ascii值
HTML2.0的字符集
& & < < > > " "
三：在看一下文字布局
1.行的控制
段(Paragraph)(可以看作是空行)<p>
你好吗？<p>很好。
你好吗？
很好。
换行<br>
你好吗？<br>很好。
你好吗？
很好。
不换行<nobr>
<nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！
</nobr>
请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！
2.文字的对齐(Alignment)
<hnalign=#>...</hn>
<palign=#>...</p>#=left,center,right
<h3align=center>Hello<\h3>
<h3align=right>Hello<\h3>
Hello
Hello
<center>...</center>
<center>Hello</center>
Hello
3.文字的分区(Division)显示
<divalign=left>...</div>
<divalign=center>...</div>
Canyoufeelhappinesswithoutunpleasant?
Pleaseshowmeyoursmile.
4.列表
无序列表<ul><li>...</ul>
<ul>
<li>Today
<li>Tommorow
</ul>
·Today
·Tommorow
有序列表<ol><li>...</ol>
<ol>
<li>Today
<li>Tommorow
</ol>
1Today
2Tommorow
定义列表(Definitionlists)<dl><dt>...<dd>...</dl>
<dl>
<dt>Today
<dd>Todayisyesterday.
<dt>Tomorrow
<dd>Tomorrowistoday.
</dl>
Today
Todaywillbeyesterday.
Tomorrow
Tomorrowwillbetoday.
5.预格式化文本(PreformattedText)
<pre>...</pre>
<pre>
Pleaseuseyourcard.
VISAMaster
<b>Hereisanorderform.</b>
<ul><li>Fax
<li>AirMail</ul>
</pre>
Pleaseuseyourcard
VISAMaster
Hereisanorderform.
·Fax
·AirMail
<xmp>...</xmp>
<xmp>
Pleaseuseyourcard.
VISAMaster
<b>Hereisanorderform.</b>
<ul><li>Fax
<li>AirMail</ul>
</xmp>
Pleaseuseyourcard.
VISAMaster
<b>Hereisorderform.</b>
<ul><li>Fax
<li>AirMail</ul>
闪烁<blink>...</blink>
<BLINK>闪烁！闪烁！</BLINK>
四：下一个看一下图象
1.链入图象的基本语法
<imgsrc=#>#=图象的URL
<imgalt=#>
#=在浏览器尚未完全读入图象时，在图象位置显示的文字。
<imgsrc="f.gif"alt="MYFACE:-)">
2.图象和文字的对齐
<imgalign=#>#=top,middle,bottom
<imgsrc=URLalign=bottom>Myface!
MyFace!
·只有一行文字才可以放在图象的两边。（不知道翻译的对不对？)
·OnlyonetextlinecanbeflownintothebothsideofImage.
3.图象在页面中的对齐/布局(FloatingImage)
<imgalign=left>
<imgsrc=URLalign=left>MyFace!<br>
Itisalways<br>
smiling.<br>
Hahaha....<br>
MyFace!
Itisalways
smiling.
Hahaha....
<brclear=all>
<imgsrc=URLalign=left>MyFace!<br>
Itisalways
<brclear=all>
smiling.<br>
Hahaha....<br>
MyFace!
Itisalways
smiling.
Hahaha....
<imgvspace=#hspace=#>#=value
<imgsrc=URLalign=leftvspace=10hspace=20>MyFace!<br>
Itisalways<br>
smiling.<br>
Hahaha....<br>
MyFace!
Itisalways
smiling.
Hahaha....
4.边框
<imgborder=#>#=value
<ahref="URL">
<imgsrc=URLborder=15>
</a>
5.客户端图象映射图
示例代码：
<imgsrc="mapimg.gif"usemap="#Face">
<mapname="Face">
<!TextBOTTON>
<areashape="rect" href="page.html"coords="140,20,280,60">
<!TriangleBOTTON>
<area shape="poly" href="image.html" coords="100,100,180,80,200,140"> <!FACE>
<areashape="circle" href="new.html" coords="80,100,60"> </map>
五：下面看一下常用的表单
1.基本语法
<formaction="url"method=*>
...
...
<inputtype=submit><inputtype=reset>
</form>
*=GET,POST
表单中提供给用户的输入形式
<inputtype=*name=**>
*=text,文本框password密码框,checkbox复选框,radio单选框,image图象坐标,hidden隐藏表单,submit提交,reset重置
**=SymbolicNameforCGIscript
2.列表框(SelectableMenu)
基本语法
<selectname=*>
<option>...
</select>
<optionselected>
<optionvalue=**>
<selectname=fruits>
<option>Banana
<optionselected>Apple
<optionvalue=My_Favorite>Orange
</select><p>
<optionvalue=**size=3>
<selectsize=**multiple>
注意，是用Ctrl键配合鼠标实现多选。
(和MS-WINDOWS的FileManager一样)
3.文本域
<textareaname=*rows=**cols=**>...<textarea>
对于很长的行是否进行换行的设置(WordWrapping)
<textareawrap=off>...</textarea>
不换行，是缺省设置。
<textareawrap=soft>...</textarea>
“软换行”，好象MS－WORD里的“软回车”。
<textareawrap=hard>...</textarea>
“硬换行”，好象MS－WORD里的“硬回车”。
本文来自：曹胜欢博客专栏。转载请注明出处：http://blog.csdn.net/csh624366188