Html学习日记6

列表...

首先看一个演示(无序列表)...

• Probably In Life
• 我的QQ号：175203941
• 给我发邮件

无序列表:无序列表是一个项目的列表，此列项目使用 粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签 。每个列表项始于 <li>。
上面的列表的源码是这样的：
<ul>
<li><a href="http://sparkzee.blogspot.com">Probably In Life</a></li>
<li>我的QQ号：175203941</li>
<li><a mailto="lohnzhang@gmail.com">给我发邮件</a></li>
</ul>

有序列表:同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于<li> 标签。
看一个例子先，还是上面的内容...

1. Probably In Life
2. 我的QQ号：175203941
3. 给我发邮件

源代码如下：
<ol>
<li><a href="http://sparkzee.blogspot.com">Probably In Life</a></li>
<li>我的QQ号：175203941</li>
<li><a mailto="lohnzhang@gmail.com">给我发邮件</a></li>
</ol>
</br>

定义列表:自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以 <dd> 开始。 下面的一个例子：

My blog

Probably In Life

我的百度博客

My QQ/MSN

QQ:175203941

bradnakata@msn.com

源代码如下：

<dl>

<dt>My blog</dt>

<dd><a href="http://sparkzee.blogspot.com">Probably In Life</a></dd>

<dd><a href="http://hi.baidu.com/lohnzhang">我的百度博客</a></dd>

<dt>My QQ/MSN</dt>

<dd>QQ:175203941</dd>

<dd>bradnakata@msn.com</dd>

</dl>

更多：

Square:

• Probably In Life
• 我的QQ号：175203941
• 给我发邮件

源代码：

<ul type="square">

<li><a href="http://sparkzee.blogspot.com">Probably In Life</a></li>

<li>我的QQ号：175203941</li>

<li><a mailto="lohnzhang@gmail.com">给我发邮件</a></li>

</ul>



你也可以把"square"换成"circle"试试。
效果如下：

• Probably In Life
• 我的QQ号：175203941
• 给我发邮件

一个嵌套列表的演示：

• My blog
• Probably In Life
• 我的百度博客
• My QQ:175203941
• My MSN:bradnakata@msn.com

源码如下：

<ul>

<li>My blog</li>

<ul>

<li><a href="http://sparkzee.blogspot.com">Probably In Life</a></li>

<li><a href="http://hi.baidu.com/lohnzhang">我的百度博客</a></li>

</ul>

<li>My QQ:175203941</li>

<li>My MSN:bradnakata@msn.com</li>

</ul>



一个更加复杂的列表演示- -...

• My Blog
• Probably In Life
• 我的百度博客
• My IM
• QQ:175203941
• MSN
• bradnakata@msn.com
• someone@msn.com
• My E-mail:lohnzhang@gmail.com

他的源代码：
<ul>
<li>My Blog</li>
<ul>
<li><a href="http://sparkzee.blogspot.com">Probably In Life</a></li>
<li><a href="http://hi.baidu.com/lohnzhang">我的百度博客</a></li>
</ul>
<li>My IM</li>
<ul>
<li>QQ:175203941</li>
<li>MSN</li>
<ul>
<li>bradnakata@msn.com</li>
<li>someone@msn.com</li>
</ul>
<li>My E-mail:lohnzhang@gmail.com</li>
</ul>

终于看完网球王子了。。。 开始奋斗成长的烦恼。。。

转：人生知名的八个问题

问题一，如果你家附近有一家餐厅，东西又贵又难吃，桌上还爬着蟑螂，你会因为它很近很方便，就一而再、再而三地光临吗？

回答：你一定会说，这是什么烂问题，谁那么笨，花钱买罪受？ 可同样的情况换个场合，自己或许就做类似的蠢事。不少男女都曾经抱怨过他们的情人或配偶品性不端，三心二意，不负责任。明知在一起没什么好的结果，怨恨已经比爱还多，但却“不知道为什么”还是要和他搅和下去，分不了手。说穿了，只是为了不甘，为了习惯，这不也和光临餐厅一样？ ——做人，为什么要过于执著？！


问题二， 如果你不小心丢掉100块钱，只知道它好像丢在某个你走过的地方，你会花200块钱的车费去把那100块找回来吗？

回答：一个超级愚蠢的问题。 可是，相似的事情却在人生中不断发生。做错了一件事，明知自己有问题，却死也不肯认错，反而花加倍的时间来找藉口，让别人对自己的印象大打折扣。被人骂了一句话，却花了无数时间难过，道理相同。为一件事情发火，不惜损人不利已，不惜血本，不惜时间，只为报复，不也一样无聊？失去一个人的感情，明知一切已无法挽回，却还是那么伤心，而且一伤心就是好几年，还要借酒浇愁，形销骨立。其实这样一点用也没有，只是损失更多。 ——做人，干吗为难自己？！


问题三， 你会因为打开报纸发现每天都有车祸，就不敢出门吗？

回答：这是个什么烂问题？当然不会，那叫因噎废食。 然而，有不少人却曾说：现在的离婚率那么高，让我都不敢谈恋爱了。说得还挺理所当然。也有不少女人看到有关的诸多报道，就对自己的另一半忧心忡忡，这不也是类似的反应？所谓乐观，就是得相信：虽然道路多艰险，我还是那个会平安过马路的人，只要我小心一点，不必害怕过马路。 ——做人，先要相信自己。


问题四， 你相信每个人随便都可以成功立业吗？

回答：当然不会相信。 但据观察，有人总是在听完成功人士绞尽脑汁的建议，比如说，多读书，多练习之后，问了另一个问题？那不是很难？我们都想在3分钟内学好英文，在5分钟内解决所有难题，难道成功是那么容易的吗？改变当然是难的。成功只因不怕困难，所以才能出类拔萃。有一次坐在出租车上，听见司机看到自己前后都是高档车，兀自感叹：“唉，为什么别人那么有钱，我的钱这么难赚？”我心血来潮，问他：“你认为世上有什么钱是好赚的？”他答不出来，过了半晌才说：好像都是别人的钱比较好赚。其实任何一个成功者都是艰辛取得。我们实在不该抱怨命。 ——做人，依靠自己！


问题五， 你认为完全没有打过篮球的人，可以当很好的篮球教练吗？

回答：当然不可能，外行不可能领导内行。 可是，有许多人，对某个行业完全不了解，只听到那个行业好赚钱，就马上开起业来了。我看过对穿着没有任何口味、或根本不在乎穿着的人，梦想却是开间服装店；不知道电脑怎么开机的人，却想在网上赚钱，结果道听途说，却不反省自己是否专业能力不足，只抱怨时不我与。 ——做人，量力而行。


问题六， 相似但不相同的问题：你是否认为，篮球教练不上篮球场，闭着眼睛也可以主导一场完美的胜利？

回答：有病啊，当然是不可能的。 可是却有不少朋友，自己没有时间打理，却拼命投资去开咖啡馆，开餐厅，开自己根本不懂的公司，火烧屁股一样急着把辛苦积攒的积蓄花掉，去当一个稀里糊涂的投资人。亏的总是比赚的多，却觉得自己是因为运气不好，而不是想法出了问题。 ——做人，记得反省自己。


问题七， 你宁可永远后悔，也不愿意试一试自己能否转败为胜？

解答：恐怕没有人会说：“对，我就是这样的孬种”吧。 然而，我们却常常在不该打退堂鼓时拼命打退堂鼓，为了恐惧失败而不敢尝试成功。以关颖珊赢得2000年世界花样滑冰冠军时的精彩表现为例：她一心想赢得第一名，然而在最后一场比赛前，她的总积分只排名第三位，在最后的自选曲项目上，她选择了突破，而不是少出错。在4分钟的长曲中，结合了最高难度的三周跳，并且还大胆地连跳了两次。她也可能会败得很难看，但是她毕竟成功了。她说：“因为我不想等到失败，才后悔自己还有潜力没发挥。” 一个中国伟人曾说；胜利的希望和有利情况的恢复，往往产生于再坚持一下的努力之中。 ——做人，何妨放手一搏。


问题八， 你的时间无限，长生不老，所以最想做的事，应该无限延期？

回答：不，傻瓜才会这样认为。 然而我们却常说，等我老了，要去环游世界；等我退休，就要去做想做的事情；等孩子长大了，我就可以…… 我们都以为自己有无限的时间与精力。其实我们可以一步一步实现理想，不必在等待中徒耗生命。如果现在就能一步一步努力接近，我们就不会活了半生，却出现自己最不想看到的结局。 ——做人，要活在当下。

Html学习日记5

网球王子开始冲刺全国总决赛了。。。

没日没夜的看呀。。。

HTML 表格

先看一个例子：

我的博客：	http://sparkzee.blogspot.com
我的QQ号：	175203941
我的邮箱：	点这里给我发邮件~

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

一个例子，它由两列两行组成：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
显示效果如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
显示效果如下：

Row 1, cell 1

Row 1, cell 2

PS:这个博客貌似显示不出来框框。。。

表格的表头

表格的表头使用 <th> 标签进行定义。

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>

</table>

显示效果如下：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格中的空单元格

在大多数浏览器中，没有内容的表格单元显示得不太好。

首先是如下代码：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
显示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1

注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

这是我们在其中加一个空格：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp</td>
</tr>
</table>
显示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1

附加的表格：

垂直的表头：

源代码如下：

<table borber="1">
<tr>
<th>我的博客：</th>
<td><a href="http://sparkzee.blogspot.com">http://sparkzee.blogspot.com</a></td>
</tr>
<tr>
<th>我的QQ号：</th>
<td>175203941</td>
</tr>
<tr>
<th>我的邮箱：</th>
<td><a mailto="lohnzhang@gmail.com">点这里给我发邮件
~</a></th>
</tr>
</table>
显示效果如下：

我的博客：	http://sparkzee.blogspot.com
我的QQ号：	175203941
我的邮箱：	点这里给我发邮件~

横跨两行的单元格：

源代码是这样的：

<table border="1">
<tr>
<th>我的博客：</th>
<td><a href="http://sparkzee.blogspot.com">http://sparkzee.blogspot.com</a></td>
</tr>
<tr>
<th rowspan="2">我的QQ\邮箱：</th>
<td>175203941</td>
</tr>
<tr>
<td><a mailto="lohnzhang@gmail.com">点这里给我发邮件~</a></th>
</tr>
</table>
显示效果如下：

我的博客：	http://sparkzee.blogspot.com
我的QQ\邮箱：	175203941
	点这里给我发邮件~

Html学习日记4

最近迷上了网球王子。。。
最经典的一句话：你还差得远呢！(感觉像在说我。。。)

网页框架
其实我认为这是个很不常用的功能。。。
当然，有些时候可能还不错。。。
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

框架标签（Frame）
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文 "frame_b.htm" 被置于第二个列中：
<frameset cols="25%,75%">
    <frame src="frame_a.htm">
    <frame src="frame_b.htm">
</frameset>
上面的是一段垂直框架的代码，如果是水平的话，则第一句应改成这样：
<frameset rows="25%,50%,25%">

如果你的浏览器不支持框架（应该很少有吧。。。），请使用<noframes> 标签.
用法如下：
<html>
<frameset cols="25%,50%,25%">
    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
</html>

重要提示：
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes>>标签，就必须将这段文字嵌套于<body></body> 标签内。
提示：
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：noresize="noresize"。

关于混合结构：
下面是一个例子，它是两个水平框架，其中下面的一个又分出三个垂直框架。
<html>
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

导航框架:
导航框架包含一个将第二个框架作为目标的链接列表。
<html>
<frameset cols="120,*">
<frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe">
</frameset>
</html>

哎，最近都在忙着看网球王子。。。第99集了。。。
还没到我想看的“风”“林”“火”“山”那一段。。。

网球王子里喝蔬菜汁的样子

网球王子里喝蔬菜汁的样子

Html学习日记3

其实，按照一些教程，包括w3school的教程，接下来应该是关于“实体”(w3school上是这么翻译的，其实简单的说就是怎样在网页里显示符号的问题。。。)，但是这一节主要是背。。。而且我的记忆力也不好，所以，只能拷贝一个表下来，然后用到的时候查一查了。熟能生巧，用多了就记住了。。。

链接的用法

<a href="http://sparkzee.blogspot.com">Sparkzee's blog</a>就是一个简单的连接。具体的格式是：

<a href="链接的地址">显示的名字</a>

那么，上面的那个连接显示出来就是这个样子：

Sparkzee's blog

扩展：你也可以通过嵌套<abbr>...</abbr>来实现当鼠标移到连接上显示相关的提示信息。

效果如下：

Sparkzee's blog

源代码是：

<a href="http://sparkzee.blogspot.com"><abbr title="这是我的博客！">Sparkzee's blog</abbr></a>

Target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。如，

<a href="http://sparkzee.blogspot.com" target="_blank">Sparkzee's blog</a>

其中的“target="_blank"”表示将会把这个连接在新窗口打开。

锚标签和 Name 属性

简单的说，就是快速跳跃！Name 属性用于创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。
比如说我们将上面的Target 属性的name定义为target，源码为：

<a name="target">Target 属性</a>

而要跳到那里，则是:

<a href="这个网页的最终网址#target">你想显示的名字（如：进入Target 属性 章节）</a>

当我们单击这里的target时，则会快速跳跃到那里。

基本的注意事项 - 有用的提示：

总是将正斜杠添加到子文件夹。假如你这样书写链接的话：href="http://sparkzee.blogspot.com"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://sparkzee.blogspot.com/"

命名锚经常被用在长的文档中创建目录。可以为每个章节赋予一个命名锚，然后连接到这些锚的链接被置于文档的上部。

假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

创建发送邮件的链接：

点这里给我发邮件

源代码是：

<a href="mailto:lohnzhang@gmail.com?subject=Hello%20again">点这里给我发邮件</a>

注：上面的20%就是一个实体，他代表空格。它的实体是"&nbsp"。

出师表——古文排版

|良|　|异|刑|同|　|，|以|帝|之|分|　|
|实|　|法|赏|；|　|引|光|之|臣|，|　|
|，|侍|也|，|若|宫|喻|先|殊|不|益|　|
|志|中|。|以|有|中|失|帝|遇|懈|州|　|
|虑|、|　|昭|作|府|义|遗|，|于|疲|先|
|忠|侍|　|陛|奸|中|，|德|欲|内|弊|帝|
|纯|郎|　|下|犯|，|以|，|报|，|，|创|
|，|郭|　|平|科|俱|塞|恢|之|忠|此|业|
|是|攸|　|明|及|为|忠|弘|于|志|诚|未|
|以|之|　|之|为|一|谏|志|陛|之|危|半|
|先|、|　|理|忠|体|之|士|下|士|急|而|
|帝|费|　|；|善|；|路|之|也|忘|存|中|
|简|祎|　|不|者|陟|也|气|。|身|亡|道|
|拔|、|　|宜|，|罚|。|；|诚|于|之|崩|
|以|董|　|偏|宜|臧|　|不|宜|外|秋|殂|
|遗|允|　|私|付|否|　|宜|开|者|也|；|
|陛|等|　|，|有|，|　|妄|张|：|。|今|
|下|，|　|使|司|不|　|自|圣|盖|然|天|
|：|此|　|内|论|宜|　|菲|听|追|侍|下|
|愚|皆|　|外|其|异|　|薄|，|先|卫|三|
　　　　　　　　　　　　
　　　　　　　　　　　　
|而|臣|！|，|小|　|优|以|昔|　|行|以|
|待|，|侍|每|人|　|劣|为|日|　|，|为|
|也|愿|中|与|，|亲|得|营|，|将|必|宫|
|。|陛|、|臣|远|贤|所|中|先|军|能|中|
|　|下|尚|论|贤|臣|。|之|帝|向|裨|之|
|　|亲|书|此|臣|，|　|事|称|宠|补|事|
|　|之|、|事|，|远|　|，|之|，|阙|，|
|　|、|长|，|此|小|　|悉|曰|性|漏|事|
|　|信|史|未|后|人|　|以|能|行|，|无|
|　|之|、|尝|汉|，|　|咨|，|淑|有|大|
|　|，|参|不|所|此|　|之|是|均|所|小|
|　|则|军|叹|以|先|　|，|以|，|广|，|
|　|汉|，|息|倾|汉|　|必|众|晓|益|悉|
|　|室|此|痛|颓|所|　|能|议|畅|。|以|
|　|之|悉|恨|也|以|　|使|举|军|　|咨|
|　|隆|贞|于|。|兴|　|行|宠|事|　|之|
|　|，|良|桓|先|隆|　|阵|为|，|　|，|
|　|可|死|、|帝|也|　|和|督|试|　|然|
|　|计|节|灵|在|；|　|睦|：|用|　|后|
|　|日|之|也|时|亲|　|，|愚|于|　|施|
　　　　　　　　　　　　
　　　　　　　　　　　　
|先|攘|甲|明|命|　|矣|败|是|屈|，|　|
|帝|除|已|；|以|　|。|军|感|，|不|　|
|而|奸|足|故|来|先|　|之|激|三|求|臣|
|忠|凶|，|五|，|帝|　|际|，|顾|闻|本|
|陛|，|当|月|夙|知|　|，|遂|臣|达|布|
|下|兴|奖|渡|夜|臣|　|奉|许|于|于|衣|
|之|复|率|泸|忧|谨|　|命|先|草|诸|，|
|职|汉|三|，|叹|慎|　|于|帝|庐|侯|躬|
|分|室|军|深|，|，|　|危|以|之|。|耕|
|也|，|，|入|恐|故|　|难|驱|中|先|于|
|。|还|北|不|托|临|　|之|驰|，|帝|南|
|至|于|定|毛|付|崩|　|间|。|咨|不|阳|
|于|旧|中|。|不|寄|　|，|后|臣|以|，|
|斟|都|原|今|效|臣|　|尔|值|以|臣|苟|
|酌|：|，|南|，|以|　|来|倾|当|卑|全|
|损|此|庶|方|以|大|　|二|覆|世|鄙|性|
|益|臣|竭|已|伤|事|　|十|，|之|，|命|
|，|所|驽|定|先|也|　|有|受|事|猥|于|
|进|以|钝|，|帝|。|　|一|任|，|自|乱|
|尽|报|，|兵|之|受|　|年|于|由|枉|世|
　　　　　　　　　　　　
　　　　　　　　　　　　
|　|　|　|　|　|　|。|自|攸|臣|　|忠|
|　|　|　|　|　|　|臣|谋|之|之|　|言|
|　|　|　|　|　|　|不|，|、|罪|愿|，|
|　|　|　|　|　|　|胜|以|祎|，|陛|则|
|　|　|　|　|　|今|受|咨|、|以|下|攸|
|　|　|　|　|　|当|恩|诹|允|告|托|之|
|　|　|　|　|　|远|感|善|等|先|臣|、|
|　|　|　|　|　|离|激|道|之|帝|以|祎|
|　|　|　|　|　|，|！|，|　|之|讨|、|
|　|　|　|　|　|临|　|察|慢|灵|贼|允|
|　|　|　|　|　|表|　|纳|，|；|兴|等|
|　|　|　|　|　|涕|　|雅|以|若|复|之|
|　|　|　|　|　|零|　|言|彰|无|之|任|
|　|　|　|　|　|，|　|，|其|兴|效|也|
|　|　|　|　|　|不|　|深|咎|德|，|。|
|　|　|　|　|　|知|　|追|。|之|不|　|
|　|　|　|　|　|所|　|先|陛|言|效|　|
|　|　|　|　|　|言|　|帝|下|，|，|　|
|　|　|　|　|　|。|　|遗|亦|则|则|　|
|　|　|　|　|　|　|　|诏|宜|责|治|　|