韩顺平_php从入门到精通_视频教程_第4讲_图像_表格_实际应用-菜谱_课堂练习-课程表_学习笔记_源代码图解_PPT文档整理

本文链接：https://blog.csdn.net/wenximalong/article/details/8170136

文西马龙：http://blog.csdn.net/wenximalong/

html图像元素

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

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

（1）

<html>
	<head>
		<title>hello</title>
	</head>
	<body>
		Hello,world!
	</body>
</html>

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

（2）包含两个图片

<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>
	<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>
	<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>