`
long_yu2
  • 浏览: 312405 次
社区版块
存档分类
最新评论

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的字符集

&amp;           &
&lt;            <
&gt;            >
&quot;          "

HTML2.0字符实体名称列表

HTML3.2字符实体名称列表

ISO字符实体名称列表

三：在看一下文字布局

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


分享到：
| 深入浅出学习struts框架（五）--正式进入st ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics