使用HTML标签编写表格0814

0814第三天作业

1. 学习PHP为什么必须要掌握HTML？

学习PHP需要懂一些前端页面的编写即HTML等，PHP作为后端服务器端才能更好做一些项目基本的操作，并且HTML属于页面基本的东西，学了PHP掌握了一些数据，但是没有HTML相关理论基础，就无法很好地是这些数据充分发挥作用，后台的数据就无法充分的显示到页面上，另外PHP就是要和页面配合才能实现网站的各种功能样式，从而更好的进行前后端的交流，因此学习PHP必须要掌握HTML。

2. 为什么选择PHP开发动态网站？

第一，快，容易上手快，第二，开发快。第三更新快或者迭代快，php是目前最流行的编程语言，从事php的人认为php最容易学习和上手。这是因为php常用的数据结构都内置了，使用起来方便简单，也一点都不复杂，表达能力相当灵活。仍然在不断发展缺点：设计缺陷，缺少关注php被称作是不透明的语言，相对于极小的缺点来说，php的发展空间是极其大的，这也是为何其会受到企业喜欢和欢迎的原因所在。可以说，对一门技术的喜厌程度来自很多方面，从个人习惯到项目需求。

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
<h2>购物清单</h2>
<p>苹</p>
<p>牛奶</p>
<p>电风扇</p>
<hr><!-- 分割线-->
<ul><!-- 无序列表标签，ul li 是一个组合-->
	<li>香蕉</li>
	<li>牛奶</li>
	<li>电风扇</li>
</ul>
<!-- 表格使用table标签， -->
<hr> <!-- 分割线 -->
<style type="text/css">
	table {		
		border-collapse: collapse; /*设置表格合并边框模型*/
		width: 700px;
		text-align: center;
		margin: 20px auto;/*两个参数,第一个参数是定上下,上下外边各10px.第二个是左右自动适应,*/
	}
	table caption {
		font-size: 2rem;/*1rem=10px*/
		margin-bottom: 20px;/*下外边距*/
		color: #666;
		margin-bottom: 20px;
	}
	table, th, td {
		border: 1px solid #666;/*border边框属性,可以按顺序设置如下属性：border-width
        border-style,border-color*/	
	}
	
	table tr:first-child {
		background-color:#EE8262;
	}
    table td{
		background-color: #98FB98;
	}
	table tr:hover {
		/*用于选择鼠标指针浮动在上面的元素*/
		background-color: #efefef;
		color:#B23AEE;
	}
	table tr td img {
		padding: 5px;
		border-radius: 10px;
	}
	table tr td a {
		text-decoration: none; /*本段为将a标签模拟成按钮，本行为去掉点击购的下划线*/
		width:140px;
		height:40px;
		padding:5px;/*页边距，即上下左右全都是5px*/
		border:1px solid black;
		background: red;
		color:black;
		border-radius: 8px;
	}
	table tr td a:hover {
		background: blue;
		color:black;
	}
</style>
</head>
<!-- 表格使用table标签，caption用于元素定义表格标题。
caption 标签必须紧随 table 标签之后,<tr> 标签定义 HTML 表格中的行。
tr 元素包含一个或多个 th 或 td 元素。表头单元格 - th 元素用于创建表头信息，
标准单元格 - td 元素创建用于创建数据 -->
<table>
	<caption>购物清单</caption>
	<tr> 
		<th>编号</th>
		<th>名称</th>
		<th>品</th>
		<th>数量</th>
		<th>缩略图</th>
		<th>操作</th>
	</tr>
	<tr>
		<td>1</td>
		<td>苹</td>
		<td>红富士</td>
		<td>10斤</td>
		<td><img src="images/apple.jpg" width="100"></td>
		<td><a href="http://jd.com">点击购</a></td>
	</tr>
	<tr>
		<td>2</td>
		<td>牛奶</td>
		<td>伊利</td>
		<td>1箱</td>
		<td><img src="images/milk.jpg" width="100"></td>
		<td><a href="http://jd.com">点击购</a></td>
	</tr>
	<tr>
		<td>3</td>
		<td>电风扇</td>
		<td>格力</td>
		<td>2</td>
		<td><img src="images/fan.jpg" width="100"></td>
		<td><a href="http://jd.com">点击购</a></td>
	</tr>
</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例不愁补充 $YZ_{ZFXK~9UOU8]]0LC[L%Q.png$

实例

相关文章