---------------------- android培训、java培训、期待与您交流! ----------------------
三、文本标志 | 1.<pre></pre> 2.<h1></h1>……<h6></h6> 3.<b></b><i></i><u></u> 4.<tt></tt><cite></cite><em></em><strong></strong> 5.<font></font> | 1.<pre></pre> <pre></pre>标志对用来对文本进行预处理操作。 2.<h1></h1>……<h6></h6> Html语言提供了一系列对文本中的标题进行操作的标志对:<h1></h1>……<h6></h6>,即一共有六对标题的标志对。<h1></h1>是最大的标题,而<h6></h6>则是最小的标题,也即是标志中 h 后面的数字越大标题文本就越小。如果您的Html文档中需要输出标题文本的话,便可以使用这六对标题标志对中的任何一对。 3.<b></b><i></i><u></u> <b></b>用来使文本以黑体字的形式输出;<i></i>用来使文本以斜体字的形式输出;<u></u>用来使文本以下加一划线的形式输出。后边将会有一个综合的例子,所以此处就不再作详细讲解了。 4.<tt></tt><cite></cite><em></em><strong></strong> 这些标志对的用法和上边的一样,差别只是在于输出的文本字体不太一样而已。<tt></tt>用来输出打字机风格字体的文本;<cite></cite>用来输出引用方式的字体,通常是斜体;<em></em>用来输出需要强调的文本(通常是斜体加黑体);<strong></strong>则用来输出加重文本(通常也是斜体加黑体)。这些标志对的示例也将在后边综合的例子中出现。 5.<font></font> 属性:size控制字体大小(值为-2到7或+1到+4)、face设置字体、color设置文本颜色。 例4 文本标志的综合示例 <html> <head> <title>文本标志的综合示例</title> </head> <body text="blue"> <h1>最大的标题</h1> <h3>使用h3的标题</h3> <h6>最大的标题</h6> <p><b>黑体字文本</b> </p> <p><i>斜体字文本</i> </p> <p><u>下加一划线文本</u> </p> <p><tt>打字机风格的文本</tt></p> <p><cite>引用方式的文本</cite></p> <p><em>强调的文本</em></p> <p><strong>加重的文本</strong></p> <p><font size="+1" color="red">size取值“+1”、color取值“red”时的文本</font></p> </body> </html> 本例在浏览器中显示的结果如下: 最大的标题 使用h3的标题 最大的标题 黑体字文本 斜体字文本 下加一划线文本 打字机风格的文本 引用方式的文本 强调的文本 加重的文本 size取值“+1”、color取值“red”时的文本 | |
四、图像标志 |
1.<img> 2.<hr> |
1.<img>可以设置图片超链接 属性:src选择路径、alt光标移到图片上及图片显示错误时显示的字、width图片宽度(图片等比缩放,若同时设置width height时,图片可能变形)、height图片高度(图片等比缩放,若同时设置width height时,图片可能变形)、lowsrc设置低分辨率图片(加载时先加载此图片,再加载src)、align(8种对齐方式)、border设置边框粗细、hspace/vspace设置文字与图像水平/垂直间距、热区设置、dynsrc插入视频(支持大多数格式)、 loop=n视频循环(n为循环次数,若为-1,无限循环)、start播放方式(fileopen、mouseover)。 下面是本教程的一个综合例子。 例5 图像标志举例 <html> <head> <title>图像标志的综合示例</title> </head> <body> <p align="center"><img src="../logo468_60.gif" alt="网页制作" WIDTH="468" HEIGHT="60"></p> <hr width="600" size="1" color="#0000FF"> </body> </html> |
五、表格标志 |
1.<table></table> 2.<tr></tr><td></td> 3.<th></th> |
1.<table></table> <table></table>标志对用来创建一个表格。它有以下属性:
属性 | 用途 | <table bgcolor=""> | 设置表格的背景色。 | <table border=""> | 设置边框的宽度,若不设置此属性,则边框宽度默认为0。 | <table bordercolor=""> | 设置边框的颜色。 | <table bordercolorlight=""> | 设置边框明亮部分的颜色(当border的值大于等于1时才有用)。 | <table bordercolordark=""> | 设置边框昏暗部分的颜色(当border的值大于等于1时才有用)。 | <table cellspacing=""> | 设置表格格子之间空间的大小。 | <table cellpadding=""> | 设置表格格子边框与其内部内容之间空间的大小。 | <table width=""> | 设置表格的宽度,单位用绝对像素值或总宽度的百分比。 | <table height=""> | 设置表格高度 | <table background=""> | 设置表格背景图片 | <table align=""> | 文本排列方式 | 说明:以上各个属性可以结合使用。有关宽度、大小的单位用绝对像素值。而有关颜色的属性使用十六进制RGB颜色码或Html语言给定的颜色常量名(如 Silver 为银色) | 2.<tr></tr><td></td> <tr></tr>标志对用来创建表格中的每一行。此标志对只能放在<table></table>标志对之间使用,而在此标志对之间加入文本将是无用的,因为在<tr></tr>之间只能紧跟<td></td>标志对才是有效的语法,<td></td>标志对用来创建表格中一行中的每一个格子,此标志对也只有放在<tr></tr>标志对之间才是有效的,您想要输入的文本也只有放在<td></td>标志对中才有效(即才能够显示出来)。<table></table>、<tr></tr>和<td></td>标志对的关系如下所示:
最外层,创建一个表格--> | <table> | 创建一行--> | | <tr> | 创建一个格子(这里总共创建了三个格子)--> | | | <td>要输出的文本只能放在此处</td> | | | <td>要输出的文本只能放在此处</td> | | | <td>要输出的文本只能放在此处</td> | | | </tr> | 最外层--> | </table> | 此外,<tr>还有align和valign属性。align是水平对齐方式,取值为left(左对齐)、center(居中)、right(右对齐);而valign是垂直对齐方式,取值为top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)。<td>具有width、colspan、rowspan和nowrap属性。width是格子的宽度,单位用绝对像素值或总宽度的百分比;colspan设置一个表格格子跨占的列数(缺省值为1);rowspan设置一个表格格子跨占的行数(缺省值为1);nowrap禁止表格格子内的内容自动断行。 注:三个标签的width、height关系。 3.<th></th> <th></th>标志对用来设置表格头,通常是黑体居中文字。 看一看下边的例子就明白以上标志对的用法了。 例6 表格标志的综合示例 <html> <head> <title>表格标志的综合示例</title> </head> <body> <table border="1" width="80%" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000FF" bordercolorlight="#7D7DFF" bordercolordark="#0000A0"> <tr> <th width="33%" colspan="2" valign="bottom">意大利</th> <th width="36%" colspan="2" valign="bottom">英格兰</th> <th width="36%" colspan="2" valign="bottom">西班牙</th> </tr> <tr> <td width="16%" align="center">AC米兰</td> <td width="16%" align="center">佛罗伦萨</td> <td width="17%" align="center">曼联</td> <td width="17%" align="center">纽卡斯尔</td> <td width="17%" align="center">巴塞罗那</td> <td width="17%" align="center">皇家社会</td> </tr> <tr> <td width="16%" align="center">尤文图斯</td> <td width="16%" align="center">桑普多利亚</td> <td width="17%" align="center">利物浦</td> <td width="17%" align="center">阿申纳</td> <td width="17%" align="center">皇家马德里</td> <td width="17%" align="center">……</td> </tr> <tr> <td width="16%" align="center">拉齐奥</td> <td width="16%" align="center">国际米兰</td> <td width="17%" align="center">切尔西</td> <td width="17%" align="center">米德尔斯堡</td> <td width="17%" align="center">马德里竞技</td> <td width="17%" align="center">……</td> </tr> </table> </body> </html> 本例在浏览器中显示的结果如下:
意大利 | 英格兰 | 西班牙 | AC米兰 | 佛罗伦萨 | 曼联 | 纽卡斯尔 | 巴塞罗那 | 皇家社会 | 尤文图斯 | 桑普多利亚 | 利物浦 | 阿申纳 | 皇家马德里 | …… | 拉齐奥 | 国际米兰 | 切尔西 | 米德尔斯堡 | 马德里竞技 | …… | |
---------------------- android培训、java培训、期待与您交流! ----------------------
详细请查看:http://edu.csdn.net/heima