网页设计——4.html基本标签链接,图片,表格
今天主要认识一个有趣的html标签
1.超链接标签a
基本结构:<a href="url" >内容 </a>
url就是网页地址。
但直接用这种超链接,会自动覆盖原来的网页,就是一旦跳转到另一个页面,原来页面就会消失。
要想跳转回来必须在第二个页面中再加入新的超链接语句,怎么做到打开一个新的页面来呢?
加入属性target:<a href=“url” target="_blank">内容</a> ,表示新开一个页面,不覆盖之前页面。如下图,案例一没有被覆盖。
当target=“_self”,就是表示在原来页面上打开跳转页面,也就如最开始出现的效果,所以在a标签中默认不加target=“_self”。
补充一点:电子邮件的发送
不是很好用,所以涉及到发电子邮件还是要配合外部下载一个电子邮箱软件。
2 图片标签img
基本结构:<img src="图片路径" width="宽度大小" height=“高度大小” />
这里的大小是像素大小,单位是px.
如果你想在不改变图片比例的情况下修改大小,那么只需要改变width的属性值。
图片的边框属性:border=整数值。
<img src="图片地址" border=0 width="100px"/ >与<img src="图片地址" border=1 width="100px"/ >效果见下图
3.表格table
基本结构:<table>
<tr><td><td></tr>
</table>
tr:决定行数
td:决定列数,但td必须在tr中。
例子:
表格小练习:<br/>
<table border=1>
<tr align="center"><td width="150px">1</td><td width="150px">2</td><td width="150px">3</td></tr>
<tr align="center"><td >4</td><td>5</td><td>6</td></tr>
<tr align="center"><td>7</td><td>8</td><td>9</td></tr>
</table>
这里需要注意:border就是设置边框。
align是设置位置,align="left"靠左边,align="center" 居中,align="right" 靠右边。
(1)合并列的操作colspan
<table border=1>
<tr align="center"><td width="150px">1</td><td width="150px">2</td><td width="150px">3</td></tr>
<tr align="center"><td colspan="2">4</td><td>5</td></tr>
<tr align="center"><td>7</td><td>8</td><td>9</td></tr>
</table>
就是将一行中相邻的两列合并。
(2)合并行的操作rowspan
<table border=1>
<tr align="center"><td width="150px">1</td><td width="150px">2</td><td width="150px">3</td></tr>
<tr align="center"><td rowspan="2">4</td><td>5</td><td>6</td></tr>
<tr align="center"><td>7</td><td>8</td></tr>
</table>
就是在一列中,将相邻的两行进行合并。
这里的colspan与rowspan的参数值不要超过最大的行列数。
补充两个属性:
cellspaclng是默认为1.
例如:
<table border=1 cellspacing=2 cellpadding="10px">
<tr align="center"><td width="150px">1</td><td width="150px">2</td><td width="150px">3</td></tr>
<tr align="center"><td rowspan="2">4</td><td>5</td><td>6</td></tr>
<tr align="center"><td>7</td><td>8</td></tr>
</table>
效果如图: