博客列表 >【8/14】--HTML标签深入以及表格样式调整协调;为什么要学习PHP的问题

【8/14】--HTML标签深入以及表格样式调整协调;为什么要学习PHP的问题

花弄的博客
花弄的博客原创
2018年08月15日 16:31:33575浏览

学习PHP为什么还要学习HTML?

前端开发主要是指静态页面的编写,主要用到三个工具:HTML,CSS,javascript;

后端也要服务器端,运行在服务器环境中

总结一下:前端HTML代码,由浏览器负责解释并执行;

后端代码,例如PHP,由服务器上的特殊城程序来运行;


PHP是用来干什么的?

PHP是用来动态声带HTML代码的;


因为PHP程序的运行结果就是html,所以要学好html


----------------------------------------------------------


为什么要选择PHP?


PHP流行的原因,就一个字块。上手快,开发快,迭代快


-----------------------------------------------------------


为什么用框架开发项目?

php可以进行原生开发

国内:TP 5.1;

国外:laravel 5.6;

框架就是劳动力,就是开发规范


-------------------------------------------------------------

1,html文档什么都不写行不行?行,但不推荐


2,双标签,如果没有正确关闭,浏览器会自动添加关闭标签


3,严肃是页面中要展现的内容,可见与不可见。元素是用标签来表示的


4,标签 标签是工具,标签是武器,标签与语义相关联

标签是用来描述元素的工具



实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML_Task3</title>

	<style type="text/css">
		table{
			width: 600px;
			height: 150px;
			text-align: center;
		}

		table caption
		{
			font-size: 25px;
			font-family: 微软雅黑;
			color: gray;
		}

		table tr:hover
		{
			background-color:#E6E6E6;
			color: coral; 
		}

		table tr:first-child
		{
			background-color: lightgreen;
			color: black;
		}

		table,tr,td{
			border:1px solid #585858;
			border-collapse: collapse;
			margin: 5px auto;
			padding: 5px auto;
		}

		table tr td img
		{
			width: 50px;
			height: 30px;
			margin: 5px auto;
			border-radius: 10px;
			box-shadow: 2px 2px 2px gray;
		}

		table tr td a
		{
			display: inline-block;
			width: 80px;
			box-shadow: 3px 3px 3px gray;
			border:1px solid black;
			margin: 5px auto;
			border-radius: 8px;
			text-decoration: none;
			color: black;
		}

		table tr td a:hover
		{
			display: inline-block;
			background-color: #787878;
			color: white;
			box-shadow: 1px 1px 1px black;
		}

	</style>
</head>
<body>

	<h2>
		购物清单
	</h2>
	<p>牛奶</p>
	<p>Apple</p>
	<p>电风扇</p>
	<hr>				<!-- 这是一条神奇的线 -->
	<ul>				<!-- 无序列表,如果多个段落中的内容具有关联性,应该使用列表来包装数据更合适 -->
		<li>牛奶</li>
		<li>Apple</li>
		<li>电风扇</li>
	</ul>
	<hr>				<!-- 这是一条神奇的线 -->


	<table>
		<caption>购物清单</caption>
		<th>编号</th>
		<th>名称</th>
		<th>品类</th>
		<th>数量</th>
		<th>缩略图</th>
		<th>操作</th>
		<tr>
			<td>1</td>
			<td>Apple</td>
			<td>红富士</td>
			<td>3斤</td>
			<td><img src="img/jy1.jpg"></td>
			<td><a href="#">点击选购</a></td>
		</tr>
		<tr>
			<td>2</td>
			<td>牛奶</td>
			<td>蒙牛</td>		
			<td>1箱</td>	
			<td><img src="img/jy2.jpg"></td>
			<td><a href="#">点击选购</a></td>
		</tr>
		<tr>
			<td>3</td>
			<td>西瓜</td>
			<td>黑美人</td>
			<td>1个</td>
			<td><img src="img/jy3.jpg"></td>
			<td><a href="#">点击选购</a></td>
		</tr>
		<tr>
			<td>4</td>
			<td>电风扇</td>
			<td>美的</td>
			<td>1台</td>
			<td><img src="img/jy4.jpg"></td>
			<td><a href="#">点击选购</a></td>
		</tr>
		<tr>
			<td>5</td>
			<td>手机</td>
			<td>华为</td>
			<td>一部</td>
			<td><img src="img/timg.png"></td>
			<td><a href="#">点击选购</a></td>
		</tr>
	</table>
</body>
</html>

运行实例 »

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

运行预览图如下:

1534321698(1).jpg

怎么说呢,前端大法好啊,牛批,漂亮,装逼神器。学好前端简直是不容易啊,要一步步打基础,尤其是标签,标签和css完美配合前端才能做得更好。

第一次听老朱的课,很生动,很喜欢案例结合的方式,更容易让人理解,不过突然一下起飞了,还真是按照老朱自己说的,不太轻松啊,不过轻松的话也就不会来学习了,没毛病,加油吧。

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