[置顶] html学习笔记，锚点，超链接，table布局，表头，h,sub,blockquote,ul,li,ol.dl,加入收藏，打印，弹出窗口

<a name="shouye"></a>

<strong>strong加粗</strong>

 <br>

没有加粗

<br>

<b>b 加粗</b>

<br>

<font size="7"color="red">

<strong>加粗</strong> 

<br>

没有加粗

</font>

<br>

<i>i倾斜标签</i>

<br>

<h1>h1标签（标题）</h>

<br>

<em>em标签（语气  倾斜）</em>

<br>

<u>u标签（下划线）</u>

<br>

_{sub标签（上行）}

<br>

^{sup标签（下行）}

<br>

<s>s标签(删除线)</s>

 

<br/>

br标签换行不换段

<p align="right">

p 第一段;;;;http://bbs.maiyadi.com/forum-593/  苹果论坛官网 ? Apple 资源&技术交流区? 苹果电脑软件下载

http://www.mobiletrain.org/lecture/video/  

<br/>br标签

</p>

<p> p第二段

</p>

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

屏幕像素的80%

<hr width="80%"/>

80像素

<hr width="80"/>

屏幕1024像素，宽度1500绝对值，页面出现水平滚动条

<hr width="1500"/>

高度10

<hr size="10"  noshade="noshade"color="blue"/>

 块引用〈blockquote>

<blockquote cite="www.disasterweb.net">

;;;http://bbs.maiyadi.com/forum-593/  苹果论坛官网 ? Apple 资源&技术交流区? 苹果电脑软件下载

http://www.mobiletrain.org/lecture/video/

</blockquote>

居中标记〈center>被废弃的标签

<center>〈font color="red">这是居中标记</font></center>

预格式化pre

       ********

       ********

 

       ********

 

       ********

       ********9 

<pre>   ********

       ********

 

       ********

 

       ********

       ********</pre>

<p>&nbsp;&nbsp;网站首页|团队建设|最新资讯|组织机构|站点地图|联系我们|网站论坛</p>

<p>网站首页|团队建设|最新资讯|组织机构|站点地图|联系我们|网站论坛</p>

<p>&copy;魏守强</p>

 

 

<p>这是段落标记</p>

&lt;p&gt;这是段落标记&lt;p&gt;

<h1>网页中的信息排序显示</h1>

<h3>列表的标记</h3>

无需列表&lt;ul&gt;&lt;/ul&gt; <br/>

有序列表&lt;ol&gt;&lt;/ol&gt;<br/>

定义列表&lt;dl&gt;&lt;/dl&gt;<br/>

 

 

无需列表&lt;ul&gt;&lt;/ul&gt; <br/>

<ul>

<li>行1</li>

<li>行2</li>

<li>行3</li>

<li>行4</li>

</ul>

圆圈显示

<ul type="circle">

<li>行1</li>

<li>行2</li>

<li>行3</li>

<li type="square">行4方块列</li>

</ul>

有序列表&lt;ol&gt;&lt;/ol&gt;<br/>

<ol>

<li>行1</li>

<li>行2</li>

<li>行3</li>

<li>行4</li>

</ol>

<ol type="circle">

<li>行1</li>

<li>行2</li>

<li>行3</li>

<li type="square">行4方块列</li>

</ol>

<ol type="a">

<li>行1</li>

<li>行2</li>

<li>行3</li>

<li>行4</li>

</ol>

<ol type="a">

<li>行1</li>

<li>行2</li>

<li>行3</li>

<li type="square">行4方块列</li>

</ol>

 

<ol type="a"start="26">

<li>行1</li>

<li>行2</li>

<li>行3</li>

<li>行4</li>

 

</ol>

<!----定义列表---->

定义列表&lt;dl&gt;&lt;/dl&gt;<br/>

<dl>

<dt>电脑</dt>

   <dd>笔记本</dd>

   <dd>上网本</dd>

   <dd>平板电脑</dd>

<dt>配件</dt>

   <dd>cpu</dd>

   <dd>主板</dd>

   <dd>显示器</dd>

</dl>

<h2>表格子基本样式</h2>

<table width="600"bordercolor="block" border="1" cellspacing="0"cellpadding="5">

<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子双线效果</h2>

<table width="600"bordercolor="blue" border="1"  cellpadding="5">

<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子合并效果</h2>

<table width="600"bordercolor="block" border="1"  cellpadding="5">

<tr><td>1.1</td><tdcolspan="2">1.2+1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子合并效果</h2>

<table width="600"bordercolor="block" border="1"  cellpadding="5">

<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><tdrowspan="2">2.2+3.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.3</td></tr>

</table>

<h2>表格子合并效果</h2>

<table width="600"bordercolor="block" border="1" cellspacing="0"cellpadding="5">

<tr><tdrowspan="3">1.1+2.1+3.1</td><td>1.2</td><td>1.3</td></tr>

<tr><td>2.2</td><td>2.3</td></tr>

<tr><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子合并效果</h2>

<table width="600"bordercolor="block" border="1" cellspacing="0"cellpadding="5">

<tr><tdrowspan="3">1.1+2.1+3.1</td><td>1.2</td><td>1.3</td></tr>

<tr><tdcolspan="2">2.2+2.3</td></tr>

<tr><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子合并效果</h2>

<table width="600"bordercolor="block" border="1" cellspacing="0"cellpadding="5">

<tr><tdrowspan="3">1.1+2.1+3.1</td><td>1.2</td><tdrowspan="3">1.3+2.3+3.3</td></tr>

<tr><tdcolspan="2">2.2+2.3</td></tr>

<tr><td>3.2</td></tr>

</table>

 

<h2>表格子突起效果</h2>

<table width="600"bordercolor="blue" bgcolor="gray"  border="1"cellpadding="5">

<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

 

<h2>表格子突起效果</h2>

<table width="600"  bgcolor="gray"  border="1"cellpadding="5">

<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子突起效果</h2>

<table width="600"  border="1"cellpadding="5" bgcolor="gray" bordercolorlight="black">

<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

 

<h2>表格子突起效果</h2>

<table width="600"  border="1"cellpadding="5" bgcolor="blue" bordercolorlight="red" bordercolordark="white">

<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子凹陷效果</h2>

<table width="600"  border="1"cellpadding="5" bgcolor="gray" bordercolorlight="white" bordercolordark="black">

<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

 

<h2>表格子细线效果</h2>表格边框和单元格边框合并之后宽度是二者宽度的合并

<table width="600"bordercolor="blue" bgcolor="blue" border="1" cellspacing="0"cellpadding="5">

<tr><tdbgcolor="yellow">1.1</td><tdbgcolor="yellow">1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子细线效果</h2>表格边框和单元格边框合并之后宽度是二者宽度的合并

<table width="600"bordercolor="blue"  bgcolor="blue"border="1" cellspacing="5" cellpadding="5">

<tr><tdbgcolor="yellow">1.1</td><tdbgcolor="yellow">1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子细线效果</h2>表格边框和单元格边框合并之后宽度是二者宽度的合并

<table width="600"   bgcolor="green"border="0" cellspacing="5" cellpadding="5">

<tr><tdbgcolor="yellow">1.1</td><tdbgcolor="yellow">1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子细线效果</h2>表格边框和单元格边框合并之后宽度是二者宽度的合并

<table width="600"   bgcolor="green"border="0" cellspacing="0" cellpadding="5">

<tr><tdbgcolor="yellow">1.1</td><tdbgcolor="yellow">1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子细线效果</h2>表格边框和单元格边框合并之后宽度是二者宽度的合并

<table width="600"   bgcolor="green"border="0" cellspacing="1" cellpadding="5">

<tr><tdbgcolor="yellow">1.1</td><tdbgcolor="yellow">1.2</td><tdbgcolor="yellow">1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<h2>表格子细线效果</h2>表格边框和单元格边框合并之后宽度是二者宽度的合并

<table width="600"   bgcolor="green"border="0" cellspacing="1" cellpadding="5">

<tr bgcolor="yellow"><td>1.1</td><td >1.2</td><td >1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<br/>

<h2>表格去掉内部线 rules="none" rules="row" rules="cell"</h2>

<table width="600" bordercolor="block"border="1" cellspacing="0" rules="none"cellpadding="5">

<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>

<tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>

<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>

</table>

<br/><br/>

&lt;thead&gt&lt;/thead&gt

<br/><br/>

&lt;tbody&gt&lt;/tbody&gt

<br/><br/>

&lt;tfooter&gt;&lt;/tfooter&gt;

<br/><br/>

锚点链接 &lt;aname=锚点名称&gt;&lt;/a&gt;&lt;ahref="#锚点名称"&gt;&lt;/a&gt;

<br/><br/><br/><br/><br/>

<a href="#shouye">回到页面首部</a>

<br/><br/><br/>

<br/>设置为首页<br/>

<a href="#"onclick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.disasterweb.net')">设为首页</a>

<br/><br/><br/>

加入收藏夹<br/>

<a href="#"onclick="javascript:window.external.addfavorite('http://www.disasterweb.net','灾情信息分享网')">加入收藏夹</a>

 

<br/><br/><br/>

弹出窗口<br/>

<ahref="javascript:window.open('htttp://www.disaster.net')"弹出窗口</a>

 

<br/><br/><br/>

关闭窗口<br/>

<ahref="javascript:window.close()"关闭窗口</a>