网页设计基础知识汇总——超链接

网页设计

1、超链接标签：

• <a>...</a>：a是anchor的首字母，基本属性：href，用于指定链接到的文件位置，mailto：形式；                                                                   格式：用文字作锚点的格式是：<a href=“URL”>字符串</a>； 用图像作锚点的格式是 ： < a href =“URL”>< img src =“URL”></a >
• 超链接路径：相对路径；绝对路径
• URL三种方式：绝对路径；相对于服务器根目录；相对于文档
• 索引、锚记链接：对于同一文件的不同部分，被指向的目标是通过<a>标签的NAME属性来定义的。                                                                       格 式：<a name="name ">text</a>         <a href="URL#name">text </a>
• 链接至E-mail地址的超链接（电子邮件链接）：格式：<a href=“mailto:EMAIL”>文字 </a>
• 在新窗口中显示被指定的目标：                                                                                                                                                                target格式：<a href="URL" target="新窗口名">字符串</a>                                                                                                     target属性：_blank：在新窗口打开被链接的文档；                                                                                                                                       _self：默认；                                                                                                                                                                               _parent:在父框架集中打开被链接文档；                                                                                                                                      _top：在整个窗口中打开被链接文档；                                                                                                                                        framename：在指定的框架中打开被链接的文档。
• 地图链接：usemap、ismap

2、表格标签：

作用：显示数据表；对文本和图形进行布局

• <table>...</table>：创建表格，并在其中间添加标题和需要的数据
• <table>标签中常用的属性：

<table bgcolor=" "> ——设置表格的背景色；

<table border=" "> —— 设置边框的宽度，以像素点为单位的边框宽度，不设置宽度默认值为0

<table algin=" "> ——取值为left、right、center，分别表示将表格在页面中的相对位置

<table bordercolor=" ">——设置边框的颜色

<table  bordercolor light=""> —— 设置边框明亮部分的颜色（当border的只大于等于1才有用）

<table  bordercolor dark=""> —— 设置边框昏暗部分的颜色（当border的只大于等于1才有用）

<table  cellspacing=""> —— 设置表格的单元格之间的空间大小

<table  cellpadding=""> —— 设置表格的单元格边框与其内部内容之间空间大小

<table  width="" height=“”> —— 设置表格的宽度、高度，单位用绝对像素值或窗口、总宽度的百分比

• <caption>...</caption>:表格标题，<caption>元素定义了表格的说明，一般放在表格的第一行的前面
• <caption> 的属性包括对齐属性align决定了标题的对齐方式，取值为top、bottom、right、left、middle。决定标题放在表格的顶部、底部、右边、左边、中间。
• 行（row）、表头（head）、数据（data）：

<table>：放在最外层，创建一个表格；

<tr>：创建一行；

<td>...</td>：创建一个单元格；

</tr>：行末尾；

</table>:放在最外层。

• <th>...</th>：用来设置表格头，文字通常粗体居中显示
• <tr>属性：align：水平对齐方式，取值为left(左对齐)、center（居中对齐）、right（右对齐）。 valign：垂直对齐方式，取值为top(靠顶端对齐)、 middle(居中间对齐)、bottom(靠底部对齐)。
• <td>属性：width：单元格的宽度，单位用绝对像素值或总宽度的百分比 colspan、rowspan：单元格跨占的列数行数（缺省值为1）                   nowrap：禁止对表格单元格内的内容自动换
• 表格中的空单元格:

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

• 行、单元格和表格标签的关系:<tr></tr>标签对只能放在<table></table>标签对之间使用；                                         < tr ></ tr > 之间只能紧跟 <td></td> 标签对才是有效的语法； < tr ></ tr > 不能嵌套。
• 行、单元格和表格标签的关系:<td></td>标签对只有放在<tr></tr>标签对之间才有效；                                        输入 的文本也只有放在 <td></td > 标签对 之间才有效（即才能被显示出来）
• 创建跨多行、多列的表元: 跨越多列: 在<th>或<td>标签符里利用colspan属性，并在其后写上想要跨越的列数。                                   跨越多行：在<th>或<td>标签符里利用rowspan属性，并在其后写上想要跨越的列数。
• div标签：

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。

 换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

• div标签作用：W3C 在其最新的 XHTML2 草案的 XHTML 结构模型中这样定义 div：

div 元素，通过与 id 、 class 及 role 属性配合，提供向文档添加额外结构的通用机制，是结构化标记的好帮手。

• div标签属性：

align：div内部文字水平对齐方式，取值为left(左对齐)、center（居中对齐）、right（右对齐）、justify （两端对齐） 。id 属性:HTML 全局属性（ 可用于任何 HTML 元素），规定 HTML 元素的唯一的 id。可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。