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

转载 2012年03月21日 13:39:05

文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188

 

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

 

一:首先看页面标记

1. html文件结构

<HTML>

<HEAD>

     <title>, <base>, <link>, <isindex>, <meta>

</HEAD>

<BODY>

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

</BODY>

</HTML>

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

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

#可以是gbk,utf-8等

3. 背景色彩和文字色彩

<body bgcolor=# 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. 

背景图象 <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="URL" target="Window_Name"> ... </a>

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

5.标尺线

<hr>

<hr>

<hr size=#>

<hr size=10>

<hr width=#>

<hr width=50>
<hr width=50%>

<hr align=#> #=left, right

<hr width=50% align=left>
<hr width=50% align=right>

<hr noshade>

<hr noshade>

<hr color=#> 

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

<hr color="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.字体大小

<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.指定字体大小的标记和指定字体的标记的组合使用

<i><font size=5>

        <b>今天</b> 天气<font size=6> 真好!</font>

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

&amp; & &lt; < &gt; > &quot; “ ”空格&nbsp "

HTML2.0 字符实体名称列表

HTML3.2 字符实体名称列表

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

Hello

<center>...</center>

<center>Hello</center>

Hello

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

<div align=left> ... </div>

<div align=center> ... </div>

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>...</pre>

<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>...</xmp>

<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

<li>Air Mail</ul>

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

<BLINK> 闪烁!闪烁! </BLINK>

四:下一个看一下图象

1.链入图象的基本语法

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

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

<img src="f.gif" alt="MY FACE :-)">

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 align=left>

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

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

<br clear=all>

<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

<a href="URL">
<img src=URL border=15>
</a>

5.客户端图象映射图

示例代码:

<img src="mapimg.gif" usemap="#Face">

<map name="Face">

<!Text BOTTON>   

 <area shape="rect" href="page.html" coords="140,20,280,60">

<!Triangle BOTTON>    

<area shape="poly" href="image.html"          coords="100,100,180,80,200,140"> <!FACE>   

 <area shape="circle"           href="new.html"           coords="80,100,60"> </map>

五:下面看一下常用的表单

1.基本语法

<form action="url" method=*>
...
 ...
 <input type=submit> <input type=reset>
</form>

*=GET, POST

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

<input type=* name=**>

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

**=Symbolic Name for CGI script

2.列表框(Selectable Menu)

基本语法

<select name=*>
<option> ...
</select>

<option selected>
<option value=**>

<select name=fruits>

        <option>Banana

        <option selected>Apple

        <option value=My_Favorite>Orange

</select><p>

<option value=** size=3>

<select size=** multiple>

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

3.文本域

<textarea name=* rows=** cols=**> ... <textarea>

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

<textarea wrap=off> ... </textarea>

不换行,是缺省设置。

<textarea wrap=soft> ... </textarea>

软换行,好象 MSWORD 里的软回车。 

<textarea wrap=hard> ... </textarea>

硬换行,好象 MSWORD 里的硬回车

相关文章推荐

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

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188 注:由于本文内含有大量html标签,所以在排版上有些困难,所以排版有点难看,请大家见...

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

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188   注:由于本文内含有大量html标签,所以在排版上有些困难,所以排版有点难看,请大家...

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

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188   注:由于本文内含有大量html标签,所以在排版上有些困难,所以排版有点难看,请大家...

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

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188   注:由于本文内含有大量html标签,所以在排版上有些困难,所以排版有点难看...

Java程序员从笨鸟到菜鸟之(十五)Html基础积累总结(下)

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188   一:表格 1.表格的基本语法 ... - 定义表格  - 定义表行  - ...

Java程序员从笨鸟到菜鸟之(十五)Html基础积累总结(下) .

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188   一:表格 1.表格的基本语法 ... - 定义表格  - 定...

Java程序员从笨鸟到菜鸟之(十五)Html基础积累总结(下) .

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188 一:表格 1.表格的基本语法 ... - 定义表格 - 定义表行 -...

Java程序员从笨鸟到菜鸟之(十七)CSS基础积累总结(下)

七.组织元素(span和div) span和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML元素对于...

Java程序员从笨鸟到菜鸟之(十七)CSS基础积累总结(下)

七.组织元素(span和div) span和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML...

Java程序员从笨鸟到菜鸟之(十七)CSS基础积累总结(下)

七.组织元素(span和div) span和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)