html基础知识解析（二） |【实用干货】

超级链接标签

1. 语法<a></a>

2. 必须属性href=”url”， 它指定链接的目标。

3. 常用属性 target=”_blank” 在新窗口中打开链接

4. 锚属性：一般在两个页面之间 或者在一个较长的页面之间 进行通讯所用

目的页面的地区用 name属性定义（name的值可自己定义，一般为英文），链接页面的链接应写为<a href=”url#name”></a>

1. 在链接中，#可用来指代链接出发点的页面本身

2. 链接有四种状态，在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的 
已被访问的链接带有下划线而且是紫色的 
活动链接带有下划线而且是红色的

关于锚的进一步说明：
<a> 标签可定义锚，锚 (anchor) 有两种用法：
通过使用 href 属性，创建指向另外一个文档的链接（或超链接） 
通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）

图片标签 <img>

1、img标签是一个单标签，必须和src（source：指出图像的路径）属性连用，
网页上图像的路径有绝对路径和相对路径两种，但在实际运用中往往只用相对路径
绝对路径：图片在硬盘上的路径 （分割符号是/）
相对路径：图片相对于网页而言的路径

如果图片与网页在同一个文件夹下，那么可以直接用图片的名称表示其路径
如果图片在网页的下一层文件夹中，比如图片在网页文件下面的images文件夹中，则可用images/表示
我们也可以用./表示网页所在的文件夹
如果图片在网页的上一层文件夹中，则用../表示

事实上，不但图片文件是如此，网页中应用的文件都分为相对路径和绝对路径两种表达方式。

2、在网页上，支持的图片格式包括.gif .jpg .png .bmp,一般用前三者居多，因为前三者的图片压缩比较好。但是，gif格式只有256种颜色，所以，在需要丰富颜色的场合，往往多用jpg和png格式。不过，gif拥有动态功能，而后两者则不具备。

3、img标签可以与其它标签共处一行，如果有多个图形出现时，默认为同一行显示

4、img标签有4个常用标签，分别是
alt 图片说明，在图像无法显示时表现为图像的替代文本
width 宽 属性值可以是象素，也可以是%
height 高 属性值可以是象素，也可以是%
border 边框

5、图片链接仍然是用a标签来显示
例子：<a href=“http://www.rwxy.xnc.edu.cn”><img src="sample.jpg" ></a>

6、可以用图像映射实现图像不同区域的链接

图象映射       
所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。
图象映射由<map>定义。<map>有一个基本属性是name。name给图象映射命名，这个命名将会被<img>元素用usemap属性引用。所以，图象上的图象映射实际上是对<map>定义的映射的一个引用。
<map>在定义图象映射时，可以定义三种形状的映射： circle(圆形)、rect(矩形rectangle)、poly(多边形)

图象映射实例
<img src="bear.jpg" usemap="#map" > 
<map name=“map"> 
<area shape="rect" coords="46,29,253,164" href="#" >
<area shape="circle" coords="76,510,59" href="#" >
<area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" > 
</map>

表格标签

表格由三个标签构成，分别是
<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表格单元(表格的具体数据)

在表格标签中，table、tr、td标签都具备不同的属性
table：border（边框尺寸设置）；width（表格的宽）；height（表格的高）；align（横向对齐：left center right）；bgcolor（背景色彩）；background（背景图像）；cellspacing（表格单元的间隙设置）；cellpadding（表元内部空白设置）；
tr：height（行高）；align（横向对齐：left  center  right）；valign（纵向对齐：top middle bottom）；bgcolor（背景色彩）；
td：width（表格的宽）；height（表格的高）；align（横向对齐：left center right）；valign（纵向对齐：top middle bottom）；bgcolor（背景色彩）；background（背景图像）；

注：当talble、tr、td有共同的属性而且属性值发生冲突之际，其优先性是td > tr > table
表格在html中最大的作用不是用来整理数据，而是用来排版，所以它是html中用处最广的标签之一。
表格内部可以继续放入表格，这被称之为表格嵌套，利用表格嵌套可以制作出非常复杂的排版。

表格的单元格可以跨行跨列显示
跨多列的单元格 <td colspan=#>
<table border=1>
<tr><td colspan=3> morning menu</td>
<tr><td>food</td>       <td>drink</td>  <td>sweet</td>
<tr><td>a</td><td>b</td><td>c</td>
</table>

跨多行的单元格 <td rowspan=#>
<table border=1>
<tr><td rowspan=3> morning menu</td>
<td>food</td> <td>a</td></tr>
<tr><td>drink</td> <td>b</td></tr>
<tr><td>sweet</td> <td>c</td></tr>
</table>

（待续…）

# 越努力，越幸运！#

精选  |  干货  |  经验  |  分享

UI范儿  |  越努力，越幸运

【UI范儿交流群开放中】

QQ群：325192599

微信ID：UIfaner