问答+表格制作-2018年8月15日9:00

实例

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

前端指的是静态页面的编写，主要涉及到html、css、JavaScript三个语言；

后端又称作服务端是运行在服务器环境中的，php就是后端编程语言其中的一种；因为php程序的运行后输出的结果就是html，所以不难看出，任何网站都是有网页组成的，也就是说想做一个网站，必须要学会做网页，html就是网页的基本标签，因必须要掌握html，今后才可以更方便的制作网站。

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

支持几乎所有流行的数据库以及操作系统版本迭代快；php框架比较规范，开发效率高。开发时间断上线搞钱块

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>出库表格</title>
</head>
<body>
	<h2>出库清单</h2>
	<p>小米5S</p>
	<p>小米8</p>
	<p>小米8s</p>
	<p>小米6</p>
<hr>  <!-- 分割线 -->
	<ul>
		<li>小米5S</li>
		<li>小米8</li>
		<li>小米8s</li>
		<li>小米6</li>
	</ul>
<hr>

<style type="text/css">
	table{

		width: 700px; /*定义宽度*/
		text-align: center; /*文本居中*/
		margin: 20px auto; /*外边距*/
		border-collapse: collapse; /*合并边框线*/
	}
	
	table caption{
			font-size: 23px; /*设置字体大小*/
			font-weight: bold; /*字体加粗*/
			color: red; /*字体颜色*/
			margin-bottom: 20px; /*外边距下20*/
	}

	table,th,td{
		border: 1px solid #666; /*外边框 像素1 实线 颜色*/
	}

	table tr:first-child{
		background-color: lightgreen; /*背景颜色*/ 
	}

	table tr td img{
		padding: 5px; /*内边距*/
		border-radius: 10px; 外   /*边圆角10*/
	}

	table tr td a {
		text-decoration-line:none;    /*取消下划线*/
		width: 140px;		/*宽度*/
		height: 40px;		/*高度*/
		padding:5px;   		/*内边距 5*/
		border: 1px solid black   /*外边距 1个像素点 实线 白色*/
		background-color:width;  /*背景颜色白色*/
		color: black; /*字体颜色黑色*/
		border-radius: 8px;  /* 边圆角8*/
	}

	table tr td a:hover{
		background-color: black   /*背景颜色黑色*/
		color:white; /*字体颜色  白色*/
	}

</style>

<table>
	<b><caption>出库清单</caption></b>
	<tr>
		<th>编号</th>
		<th>产品名称</th>
		<th>数量</th>
		<th>缩略图</th>
		<th>确认出库</th>
		
	</tr>

	<tr>
		<th>1</th>
		<th>小米5S</th>
		<th>1部</th>
		<td><img src="http://imgslim.geekpark.net/uploads/image/file/cc/df/ccdf157b82ddfd02258e96e68fa43f97.PNG" width="100px"></td>
		<td><a href="https://www.mi.com/index.html">确认出库</a></td>
	</tr>

	<tr>
		<th>2</th>
		<th>小米8</th>
		<th>1部</th>
		<td><img src="http://imgslim.geekpark.net/uploads/image/file/cc/df/ccdf157b82ddfd02258e96e68fa43f97.PNG" width="100px"></td>
		<td><a href="https://www.mi.com/index.html">确认出库</a></td>
	</tr>

	<tr>
		<th>3</th>
		<th>小米8s</th>
		<th>1部</th>
		<td><img src="http://imgslim.geekpark.net/uploads/image/file/cc/df/ccdf157b82ddfd02258e96e68fa43f97.PNG" width="100px"></td>
		<td><a href="http://imgslim.geekpark.net/uploads/image/file/cc/df/ccdf157b82ddfd02258e96e68fa43f97.PNG">确认出库</a></td>
	</tr>

	<tr>
		<th>4</th>
		<th>小米6</th>
		<th>1部</th>
		<td><img src="http://imgslim.geekpark.net/uploads/image/file/cc/df/ccdf157b82ddfd02258e96e68fa43f97.PNG" width="100px"></td>
		<td><a href="https://www.mi.com/index.html">确认出库</a></td>
	</tr>
</table>

</body>
</html>

运行实例 »

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

V1GBX9R9))3E6{XK}Y71]0G.png

总结：

html可以什么都不写，但不推荐，会自动生成<html>
元素就是页面要呈现的内容，分为可见与不可见 <img> <h1> <br> 元素是用标签来表示的
标签是用来描述元素的，属性是用来描述标签的。
标签的四个公用属性：

style：内联样式 id：标识唯一元素 class：标识同类元素 title：提示信息

实例

相关文章