博客列表 >PHP、标签及表格输出-20180814

PHP、标签及表格输出-20180814

NiceLiving的博客
NiceLiving的博客原创
2018年08月15日 17:47:36741浏览

1、学习PHP为什么必须要掌握HTML?

前端开发主要是指静态页面的编写,直接运行在浏览器端,前端html代码,由浏览器负责解析执行,后端是服务器端,运行在服务器环境中,后端PHP代码,由服务器上的特殊程序来运行。php就是用来动态生成HTML代码的,因为php程序的运行结果就是html,所以要学好html。

2、实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表表格</title>
	<style type="text/css">
		table{
			width: 800px;
			text-align: center;
			margin: 20px auto;
			border-collapse: collapse;  /*将表格线折叠起来*/
		}
		table caption{
			font-size: 3rem; /*1rem=10px*/
			font-weight: bold;
			color: #666;
			margin-bottom: 20px;
		}
		table,th,tr,td{
			border: 1px solid #666 ;
		}
		table tr:first-child{           /*设置首行背景色*/
			background: lightgreen;
		}
		table tr:hover{
			background-color:#efefef;
			color: coral;
		}
		table tr td img{
			padding: 5px;
			border-radius: 10px;  /*给图片圆角*/
		}
		table tr td a{
			text-decoration: none;
			width: 140px;
			height: 40px;
			background: #fff;
			padding: 5px;
			border: 1px solid black;
			border-radius:8px;
		}
		table tr td a:hover{
			background-color: black;
			color: #fff;
		}
</style>
</head>
<body>
	<h2>购物清单</h2>
	<p>牛奶</p>
	<p>苹_果</p>
	<p>电风扇</p>
	<hr>
	<!-- 对于多个具有关联性的内容,应该使用列表元素来包装 -->
	<ul>
		<li>牛奶</li>
		<li>苹_果</li>
		<li>电风扇</li>
	</ul>
	<!-- 如果要对一组相关的事物具体描述,应该使用表格标签 -->
	<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>1箱</td>
			<td><img src="image/1.png"></td>
			<td><a href="">点击买</a></td>
		</tr>
		<tr>
			<td>2</td>
			<td>苹_果</td>
			<td>红富士</td>
			<td>10个</td>
			<td><img src="image/1.png"></td>
			<td><a href="">点击买</a></td>
		</tr>
		<tr>
			<td>3</td>
			<td>电风扇</td>
			<td>格力</td>
			<td>1台</td>
			<td><img src="image/1.png"></td>
			<td><a href="">点击买</a></td>
		</tr>


	</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:朱老师这节课讲解了PHP和HTML之间的关系,html结构,标签与元素之间的关系。元素是用标签来表示的,标签是用来描述元素的工具。双标签和单标签的区别。

非可替换元素:直接写在html代码中,如h标签、p、li、a等,

可替换元素:来自源码外部,通过标签属性来引入。 如图片、文件

表格: <caption>标题</caption>

<tr><th>表头</th></tr>

<tr>标签 表示行

<tr><td>表单元格</td></tr>

<td> 表单元格

border-collapse: collapse;  /*将表格线折叠起来*/

table tr:first-child{           /*设置首行背景色*/

background: lightgreen;

}

border-radius: 10px;  /*给图片圆角*/


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议