HTML图像标记--3
2015-12-25 21:34
363 查看
使用方法：
<img src="" width= height= alt=>
src指定要加载的图片的名称和地址；
width指定图片的宽度 值px 或者百分比
heigh指定图片的高度
border指定图片的边框
alt，网页上的图片，当鼠标移动到上面则显示文字。
图片加载失败则会用文字来代替
搜索引擎可以通过这个属性来抓取图像
<img>不用闭合
a为超链接
href=""地址
target打开方式属性有_blank,_parent,_top,_self(默认)
name 设置锚点，
<a href="#dibu"></a>
<a name="dibu"></a>
设置图片超链接;
<a href="http://www.baidu.com" target="_blank"><img src="地址"></a>
table
属性的应用：
caption设置表格的标题
tr设置行
td和th设置列
其中行和列以及table中还可以设置的属性包括：
bgcolor,align,valign(center,right,left),width.heigth,rowspan和colspan.
table的属性，cellspacing 单元格之间的间距，默认为2px cellpadding单元格内容与单元格边框的显示距离，像素
frame控制表格边框最外层的四条边框（void宝石无边框，above表示仅顶部有边框，below表示仅底部有边框，hsides表示仅有顶部的边框和底部的边框，lhs表示仅有左边的边框,rhs表示仅有右边的边框，vsides表示仅有左右的边框，box包括全部四个边框，border表示包括全部四个边框，）
rules控制显示以及如何显示单元格之间的分割线：
(none默认值，all表示包括所有分割线,rows表示仅有行分割线，clos表示仅有列分割线，groups表示仅在行组和列组之间有分割线)
简单表格布局：
代码：
<html>
<head>
<title>table布局</title><!--网页标题-->
<meta charset="utf-8"><!--设置编码格式-->
</head>
<body topmargin="0"><!--页面顶部空间为0-->
<table border="0" align="center" width="900" cellspacing="0" cellpadding="0"><!--整个table的表框，
位置居中，宽度，以及各个单元格的距离-->
<tr bgcolor="red" height="100" align="center"><td><font color="white" size="6"><b>页面顶部布局</b></font></td></tr>
<!--每行的样式，背景色，字体位置等-->
<tr align="center"><td>
<table align="left" bgcolor="yellow" width="30%" height="300">
<tr align="center">
<td >
<font color="white" size="6"><b>页面左部布局</b></font>
</td>
</tr>
</table>
<table align="left" bgcolor="purple" width="70%" height="300">
<tr align="center">
<td >
<font color="white" size="6"><b>页面右部布局</b></font>
</td>
</tr>
</table>
</td>
<!--内嵌的table要设置tr的td里面-->
</tr>
<tr bgcolor="red" height="100" align="center"><td><font color="white" size="6"><b>页面底部布局</b></font></td></tr>
</table>
</body>
</html>
<img src="" width= height= alt=>
src指定要加载的图片的名称和地址；
width指定图片的宽度 值px 或者百分比
heigh指定图片的高度
border指定图片的边框
alt，网页上的图片，当鼠标移动到上面则显示文字。
图片加载失败则会用文字来代替
搜索引擎可以通过这个属性来抓取图像
<img>不用闭合
a为超链接
href=""地址
target打开方式属性有_blank,_parent,_top,_self(默认)
name 设置锚点，
<a href="#dibu"></a>
<a name="dibu"></a>
设置图片超链接;
<a href="http://www.baidu.com" target="_blank"><img src="地址"></a>
table
属性的应用：
caption设置表格的标题
tr设置行
td和th设置列
其中行和列以及table中还可以设置的属性包括：
bgcolor,align,valign(center,right,left),width.heigth,rowspan和colspan.
table的属性，cellspacing 单元格之间的间距，默认为2px cellpadding单元格内容与单元格边框的显示距离，像素
frame控制表格边框最外层的四条边框（void宝石无边框，above表示仅顶部有边框，below表示仅底部有边框，hsides表示仅有顶部的边框和底部的边框，lhs表示仅有左边的边框,rhs表示仅有右边的边框，vsides表示仅有左右的边框，box包括全部四个边框，border表示包括全部四个边框，）
rules控制显示以及如何显示单元格之间的分割线：
(none默认值，all表示包括所有分割线,rows表示仅有行分割线，clos表示仅有列分割线，groups表示仅在行组和列组之间有分割线)
简单表格布局：
代码：
<html>
<head>
<title>table布局</title><!--网页标题-->
<meta charset="utf-8"><!--设置编码格式-->
</head>
<body topmargin="0"><!--页面顶部空间为0-->
<table border="0" align="center" width="900" cellspacing="0" cellpadding="0"><!--整个table的表框，
位置居中，宽度，以及各个单元格的距离-->
<tr bgcolor="red" height="100" align="center"><td><font color="white" size="6"><b>页面顶部布局</b></font></td></tr>
<!--每行的样式，背景色，字体位置等-->
<tr align="center"><td>
<table align="left" bgcolor="yellow" width="30%" height="300">
<tr align="center">
<td >
<font color="white" size="6"><b>页面左部布局</b></font>
</td>
</tr>
</table>
<table align="left" bgcolor="purple" width="70%" height="300">
<tr align="center">
<td >
<font color="white" size="6"><b>页面右部布局</b></font>
</td>
</tr>
</table>
</td>
<!--内嵌的table要设置tr的td里面-->
</tr>
<tr bgcolor="red" height="100" align="center"><td><font color="white" size="6"><b>页面底部布局</b></font></td></tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐