Java程序员从笨鸟到菜鸟之（十四）Html基础积累总结（上）

Bertha 。 2022-07-13 03:43 279阅读 0赞

**本文来自：曹胜欢博客专栏。转载请注明出处：[http://blog.csdn.net/csh624366188][http_blog.csdn.net_csh624366188]**

**注：由于本文内含有大量html标签，所以在排版上有些困难，所以排版有点难看，请大家见谅**

**一：首先看页面标记**

**1. html文件结构**

<HTML>

<HEAD>

</HEAD>

<BODY>

HTML 文件的正文写在这里... ...

</BODY>

</HTML>

**2. 语言字符集(Charsets)的信息**

### <meta http-equiv="Content-Type"content="text/html;charset=\#"> ###

### \#可以是gbk，utf-8等 ###

**3. 背景色彩和文字色彩**

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.

背景图象 <body background="image-URL">  
**4.链接(Link)**

基本语法 <a href="URL"> ... </a>

这是一个  
<a href="samp/link.html">链接的例子</a>。  
点一下带下划线的文字!

跳转到页面的另外一个地方  
<a href="\#name"> ... </a>  
<a name="name"> ... </a>

<a href="\#jump-test">跳转到下一个"链接点"</a><P>  
<a name="jump-test">下一个链接点</a>

跳转到另一个页面的某个地方  
<a href="URL\#name"> ... </a>  
<a name="name"> ... </a>

跳转到另一个页面的<a href="samp/link.html\#jump-test">某个地方</a>。

开一个新的(浏览器)窗口 (Target Window)

<a href="samp/window.html" target="window\_name">  
开一个新窗口!  
</a>

**5.标尺线**

<hr>

<hr align=\#> \#=left, right

\#=rrggbb 16 进制 RGB 数码，或者是下列预定义色彩：  
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,  
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

**二：然后来看一下字体的设置**

**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.字体大小**

<font size=\#> ... </font> \#=1, 2, 3, 4, 5, 6, 7 or +\#, -\#  
<basefont size=\#> \#=1, 2, 3, 4, 5, 6, 7

<font size=4>今天天气真好！</font>今天天气真好！

<font size=3>今天天气真好！</font>今天天气真好！

<font size=2>今天天气真好！</font>今天天气真好！

<font size=1>今天天气真好！</font>今天天气真好！

**3.物理字体(Physical Style)**

<b>今天天气真好！</b> 今天天气真好！

<i>今天天气真好！</i> 今天天气真好！

<u>今天天气真好！</u> 今天天气真好！

<tt>今天天气真好！</tt> 今天天气真好！

<sup>今天天气真好！</sup> 今天天气真好！

<sub>今天天气真好！</sub> 今天天气真好！

<s>今天天气真好！</s> 今天天气真好！

<strike>今天天气真好！</strike> 今天天气真好！

**4.逻辑字体(Logical Style)**

<em>今天天气真好！</em> 今天天气真好！

<strong>今天天气真好！</strong> 今天天气真好！

<code>今天天气真好！</code> 今天天气真好！

<var>今天天气真好！</var> 今天天气真好！

<dfn>今天天气真好！</dfn> 今天天气真好！

<cite>今天天气真好！</cite> 今天天气真好！

<small>今天天气真好！</small> 今天天气真好！

<big>今天天气真好！</big> 今天天气真好！

**5.指定“字体大小”的标记和“指定字体”的标记的组合使用**

</font></i>

今天 天气真好！

**6.字体颜色**

指定颜色 <font color=\#> ... </font>

\#=rrggbb 16 进制数码，或者是下列预定义色彩：  
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,  
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<font color=ffffff>White</font> &  
<font color=white>White</font>

**7.客户端字体(Font Face)**

<font face="\#, \#, ..., \#"> ... </font>  
\#=客户端可获得的字体（微软雅黑，roman等）

<font face="Arial, Helvetica"> Hellow World!</font>

Hellow World!

**8.字符实体(Entities)**

&\#; \#=字符实体名称 或者 ascii 值

HTML2.0 的字符集

&           &
    <            <
    >            >
    "          "

[HTML2.0 字符实体名称列表][HTML2.0]

[HTML3.2 字符实体名称列表][HTML3.2]

[ISO 字符实体名称列表][ISO]

**三：在看一下文字布局**

**1.行的控制**

段(Paragraph) (可以看作是空行) <p>

你好吗？<p>很好。

你好吗？

很好。

换行 <br>

你好吗？<br>很好。

你好吗？  
很好。

不换行<nobr>

<nobr>  
请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！  
</nobr>

请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！

**2.文字的对齐(Alignment)**

<hn align=\#>...</hn>  
<p align=\#>...</p> \#=left, center, right

<h3 align=center>Hello<\\h3>  
<h3 align=right>Hello<\\h3>

Hello

<center>Hello</center>

Hello

**3.文字的分区(Division)显示**

Can you feel happiness without unpleasant?  
Please show me your smile.

**4.列表**

无序列表 <ul><li>...</ul>

<ul>  
<li>Today  
<li>Tommorow  
</ul>

· Today

· Tommorow

有序列表 <ol><li>...</ol>

<ol>  
<li>Today  
<li>Tommorow  
</ol>

1 Today

2 Tommorow

定义列表(Definition lists) <dl><dt>...<dd>...</dl>

<dl>  
<dt>Today  
<dd>Today is yesterday.  
<dt>Tomorrow  
<dd>Tomorrow is today.  
</dl>

Today

Today will be yesterday.

Tomorrow

Tomorrow will be today.

**5.预格式化文本(Preformatted Text)**

<pre>  
Please use your card.  
VISA Master  
<b>Here is an order form.</b>  
<ul><li>Fax  
<li>Air Mail</ul>  
</pre>

Please use your card

VISA Master

Here is an order form.

· Fax

· Air Mail

<xmp>  
Please use your card.  
VISA Master  
<b>Here is an order form.</b>  
<ul><li>Fax  
<li>Air Mail</ul>  
</xmp>

Please use your card.

VISA Master

<b>Here is order form.</b>

<ul><li>Fax

闪烁 <blink>...</blink>

**四：下一个看一下图象**

**1.链入图象的基本语法**

<img src=\#> \#=图象的 URL

<img alt=\#>  
\#=在浏览器尚未完全读入图象时，在图象位置显示的文字。

**2.图象和文字的对齐**

<img align=\#> \#=top, middle, bottom

<img src=URL align=bottom> My face!

My Face!

· 只有一行文字才可以放在图象的两边。（不知道翻译的对不对？)

· Only one text line can be flown into the both side of Image.

**3. 图象在页面中的对齐/布局(Floating Image)**

<img src=URL align=left>My Face!<br>  
It is always<br>  
smiling.<br>  
Hahaha....<br>

My Face!  
It is always  
smiling.  
Hahaha....

<img src=URL align=left>My Face!<br>  
It is always  
<br clear=all>  
smiling.<br>  
Hahaha....<br>

My Face!  
It is always  
  
smiling.  
Hahaha....

<img vspace=\# hspace=\#> \#=value

<img src=URL align=left vspace=10 hspace=20>My Face!<br>  
It is always<br>  
smiling.<br>  
Hahaha....<br>

My Face!  
It is always  
smiling.  
Hahaha....

**4.边框**

<img border=\#> \#=value

5.客户端图象映射图

示例代码：

<!Text BOTTON>

<!Triangle BOTTON>

**五：下面看一下常用的表单**

**1.基本语法**

\*=GET, POST

表单中提供给用户的输入形式

\*=text,文本框 password密码框, checkbox复选框, radio单选框, image图象坐标 , hidden隐藏表单, submit提交, reset重置

\*\*=Symbolic Name for CGI script

**2.列表框(Selectable Menu)**

基本语法

<option>Banana

<option selected>Apple

<option value=My\_Favorite>Orange

</select><p>

注意，是用 Ctrl 键配合鼠标实现多选。  
(和 MS-WINDOWS 的 File Manager 一样)

**3.文本域**

对于很长的行是否进行换行的设置(Word Wrapping)

不换行，是缺省设置。

“软换行”，好象 MS－WORD 里的“软回车”。

“硬换行”，好象 MS－WORD 里的“硬回车”。

**本文来自：曹胜欢博客专栏。转载请注明出处：[http://blog.csdn.net/csh624366188][http_blog.csdn.net_csh624366188]**

[http_blog.csdn.net_csh624366188]: http://blog.csdn.net/csh624366188
[HTML2.0]: http://www.gzsums.edu.cn/webclass/html/entities.html#key20
[HTML3.2]: http://www.gzsums.edu.cn/webclass/html/entities.html#key32
[ISO]: http://www.gzsums.edu.cn/webclass/html/entities.html#ISO