html 图像_表格_实际应用-菜谱
2015-03-05 15:31
543 查看
html图像元素
<img src="图片的路径/该图片也可是一个url" width="宽度" height="高度"/>
[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>
注释不能嵌套
<!---
<b>你好</b>
<!--是什么啊-->
<h1>哈哈</h1>
-->
cellspacing和cellpadding
不需要完全记住，要学会查文档
FastStone工具的介绍，截图，截色，屏幕丈量
障眼法 用空表格压下面的表格
<table height="200px">
<tr><td></td></tr>
</table>
<table>
……
</table>
<img src="图片的路径/该图片也可是一个url" width="宽度" height="高度"/>
[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>
注释不能嵌套
<!---
<b>你好</b>
<!--是什么啊-->
<h1>哈哈</h1>
-->
cellspacing和cellpadding
不需要完全记住，要学会查文档
FastStone工具的介绍，截图，截色，屏幕丈量
障眼法 用空表格压下面的表格
<table height="200px">
<tr><td></td></tr>
</table>
<table>
……
</table>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML 图像 表格 图像映射 实际应用-菜谱、课程表
- 韩顺平_php从入门到精通_视频教程_第4讲_图像_表格_实际应用-菜谱_课堂练习-课程表_学习笔记_源代码图解_PPT文档整理
- 4讲 图像 表格 实际应用-菜谱 课堂练习-课程表
- 在ASP.NET中应用Excel：(8)为HTML表格增加编辑功能
- HTML表格标记教程(27):单元格的背景图像属性BACKGROUND
- html表格、表单元素、img标签、图像映射技术、html4引入flash
- HTML表格布局实际使用详解
- 在html页面用ajax的简单应用通过javascript得到数据库中的图片路径并在表格中显示出来
- 【学习】如何制作手机端html模板（REM的实际应用）
- 在ASP.NET中应用Excel：(8)为HTML表格增加编辑功能
- Html网页表格结构化标记的应用
- Html 链接、图像、表格、表单、背景
- HTML表格标记教程(8):背景图像属性BACKGROUND
- 【网站制作视频教程】-第08讲 html表格应用详解！-传智播客
- ASP.NET中应用Excel：(6)在服务器端生成HTML表格
- 图像搜索的实际应用
- ASP.NET中应用Excel：(10)在客户端生成HTML表格［修正］
- HTML与CSS教学-第十章 对表格与表单应用CSS样式
- 谈html mailto(电子邮件)实际应用
- html表格、表单元素、img标签、图像映射技术、html4引入flash