html 图像_表格_实际应用-菜谱

html图像元素

<img src="图片的路径/该图片也可是一个url" width="宽度" height="高度"/>

[html]  view plain copy
  1. <html>  
  2.     <head></head>  
  3.     <body>  
  4.         <img src="dog.jpg" width="200px" border="4px" alt="dog"/>  
  5.     </body>  
  6. </html>  

浏览器访问页面的时候,向服务器发送几次请求呢?

(1)

[html]  view plain copy
  1. <html>  
  2.     <head>  
  3.         <title>hello</title>  
  4.     </head>  
  5.     <body>  
  6.         Hello,world!  
  7.     </body>  
  8. </html>  

浏览器访问这个页面的时候,向服务器发送了一次请求,httpwatch抓包如下图(图大,在新标签页中打开图片,看的完整)


(2)包含两个图片

[html]  view plain copy
  1. <html>  
  2.     <head></head>  
  3.     <body>  
  4.         <img src="dog.jpg" width="200px" border="4px"/>  
  5.         <br/>  
  6.         <img src="hongsaorou.jpg" width="200px" border="4px"/>  
  7.     </body>  
  8. </html>  

浏览器访问这个页面的时候,向服务器发送了三次请求,httpwatch抓包如下图(图大,在新标签页中打开图片,看的完整)


====


================



html表格


<table border="边框宽度" cellspacing="空隙大小"  celladding="填充大小"></table>
在以前对网页布局要求不高的情况下,使用table布局(即使用表格来显示数据,同时用于布局)

表格布局,搜索引擎不喜欢;冗余代码多
后:表格用于显示数据,布局用div+css

[html]  view plain copy
  1. <html>  
  2.     <head></head>  
  3.     <body>  
  4.         <table border="3px" width="400px" height="200px" bgcolor="yellow">  
  5.             <!--width可以用像素,也可以用百分比,height太小了也不会压扁了-->  
  6.             <!--tr代表一行-->  
  7.             <tr align="center">  
  8.                 <td>a1</td>  
  9.                 <td>a2</td>  
  10.                 <td>a3</td>  
  11.             </tr>  
  12.             <tr align="right">  
  13.                 <td>b1</td>  
  14.                 <!--优先级,越靠近越高-->  
  15.                 <td align="center">b2</td>  
  16.                 <td>b3</td>  
  17.             </tr>  
  18.             <tr>  
  19.                 <td>c1</td>  
  20.                 <td>c2</td>  
  21.                 <td>c3</td>  
  22.             </tr>  
  23.         </table>  
  24.     </body>  
  25. </html>  

html表格--小练习

首先定行 5行

3列

[html]  view plain copy
  1. <html>  
  2.     <head></head>  
  3.     <body>  
  4.         <table border="1" bordercolor="red" cellpadding="1px" cellspacing="1px" width="400px" height="225px">  
  5.             <!--属性值用双引号包起来-->  
  6.             <!--现在每个td里面写上数字,对定位有帮助-->  
  7.             <tr>  
  8.                 <!--colspan="3" 表示该列要占用三列-->  
  9.                 <td align="center" colspan="3">菜谱</td>  
  10.             </tr>  
  11.             <tr>  
  12.                 <!--rowspan="2"不仅要占用本行的td,还要占用紧挨的下一行的td-->  
  13.                 <td rowspan="2">素菜</td>  
  14.                 <td>清炒茄子</td>  
  15.                 <td>花椒扁豆</td>  
  16.             </tr>  
  17.             <tr>  
  18.                 <td>小葱豆腐</td>  
  19.                 <td>炒白菜</td>  
  20.             </tr>  
  21.             <tr>  
  22.                 <td rowspan="2">荤菜</td>  
  23.                 <td>油焖大虾</td>  
  24.                 <td>海参鱼翅</td>  
  25.             </tr>  
  26.             <tr>  
  27.                 <!--在td里可以放任何html元素,表格是可以用来做布局的,看你想放什么-->  
  28.                 <td>红烧肉 <img src="hongsaorou.jpg"/></td>  
  29.                 <td>烤全羊</td>  
  30.             </tr>  
  31.         </table>  
  32.     </body>  
  33. </html>  



注释不能嵌套
<!---
<b>你好</b>
<!--是什么啊-->
<h1>哈哈</h1>
-->
cellspacing和cellpadding
不需要完全记住,要学会查文档



FastStone工具的介绍,截图,截色,屏幕丈量

障眼法 用空表格压下面的表格
<table height="200px">
<tr><td></td></tr>
</table>
<table>
……

</table>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值