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

最新推荐文章于 2024-09-05 20:56:36 发布

师从风清扬

最新推荐文章于 2024-09-05 20:56:36 发布

阅读量971

点赞数

html图像元素

[html]view plaincopy 
   
 <html>  
     <head></head>  
     <body>  
         <img src="dog.jpg" width="200px" border="4px" alt="dog"/>  
     </body>  
 </html>  

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

（1）

[html]view plaincopy 
   
 <html>  
     <head>  
         <title>hello</title>  
     </head>  
     <body>  
         Hello,world!  
     </body>  
 </html>  

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

（2）包含两个图片

[html]view plaincopy 
   
 <html>  
     <head></head>  
     <body>  
         <img src="dog.jpg" width="200px" border="4px"/>  
         <br/>  
         <img src="hongsaorou.jpg" width="200px" border="4px"/>  
     </body>  
 </html>  

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

====

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

html表格

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

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

[html]view plaincopy 
   
 <html>  
     <head></head>  
     <body>  
         <table border="3px" width="400px" height="200px" bgcolor="yellow">  
             <!--width可以用像素，也可以用百分比,height太小了也不会压扁了-->  
             <!--tr代表一行-->  
             <tr align="center">  
                 <td>a1</td>  
                 <td>a2</td>  
                 <td>a3</td>  
             </tr>  
             <tr align="right">  
                 <td>b1</td>  
                 <!--优先级，越靠近越高-->  
                 <td align="center">b2</td>  
                 <td>b3</td>  
             </tr>  
             <tr>  
                 <td>c1</td>  
                 <td>c2</td>  
                 <td>c3</td>  
             </tr>  
         </table>  
     </body>  
 </html>  

html表格--小练习

首先定行 5行

3列

[html]view plaincopy 
   
 <html>  
     <head></head>  
     <body>  
         <table border="1" bordercolor="red" cellpadding="1px" cellspacing="1px" width="400px" height="225px">  
             <!--属性值用双引号包起来-->  
             <!--现在每个td里面写上数字，对定位有帮助-->  
             <tr>  
                 <!--colspan="3" 表示该列要占用三列-->  
                 <td align="center" colspan="3">菜谱</td>  
             </tr>  
             <tr>  
                 <!--rowspan="2"不仅要占用本行的td，还要占用紧挨的下一行的td-->  
                 <td rowspan="2">素菜</td>  
                 <td>清炒茄子</td>  
                 <td>花椒扁豆</td>  
             </tr>  
             <tr>  
                 <td>小葱豆腐</td>  
                 <td>炒白菜</td>  
             </tr>  
             <tr>  
                 <td rowspan="2">荤菜</td>  
                 <td>油焖大虾</td>  
                 <td>海参鱼翅</td>  
             </tr>  
             <tr>  
                 <!--在td里可以放任何html元素，表格是可以用来做布局的，看你想放什么-->  
                 <td>红烧肉 <img src="hongsaorou.jpg"/></td>  
                 <td>烤全羊</td>  
             </tr>  
         </table>  
     </body>  
 </html>  