html元素标签属性的关系，标签类型及表格标签写法）——2018年8月14日课程作业

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

前端开发是静态页面的编写，主要用到三个工具：HTML;PHP;JAVASCRIPT

html是前端代码，由浏览器解析并执行；php是后端代码（脚本代码），在服务器上运行

php用来动态生成HTML代码的。如果不学习html，看不懂PHP的运行结果，也无法控制好html。

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

php既可以原生开发，也可以使用框架。开发的特点是快：上手快，开发快，迭代快。节约时间节约成本

 

元素是页面中展示的，标签是用来描述元素的，属性是用来描述标签！

双标签与单标签
非可替换元素，直接写在HTML代码中，主要是文本<h2><p><a>
可替换元素，来自源码的外部，通过标签的属性引入：图片，文件，富媒体<img><link><script>

实例

<!-- 如果要对一组相关事物具体描述，应该是使用表格标签 -->
<table>
	<caption>购物清单</caption>
	<tr>编号
       <th>编号</th>
       <th>名称</th>
       <th>数量</th>
       <th>产地</th>
       <th>缩略图</th>
       <th>更多详情</th>
	</tr>
	   <td>1</td>
	   <td>橙子</td>
	   <td>3斤</td>
	   <td>泰安</td>
	   <td><img src="images/chengzi.jpg" width="100px"></td>
	    <td><a href="http://www.baidu.com">点击浏览</a></td>
	<tr>
	   <td>2</td>
	   <td>草莓</td>
	   <td>4斤</td>
	   <td>昆明</td>
	   <td><img src="images/caomei.jpg" width="100px"></td>
	   <td><a href="http://www.baidu.com">点击浏览</a></td>
	</tr>
	<tr>
	   <td>3</td>
	   <td>樱桃</td>
	   <td>2斤</td>
	   <td>烟台</td>
	   <td><img src="images/yingtao.jpg" width="100px"></td>
	   <td><a href="http://www.baidu.com">点击浏览</a></td>
	</tr>
</table>

<style type="text/css">
	table{
		width: 700px;/*宽度*/
		text-align: center;/*居中*/
		margin: 20px auto;/*向下20px，左右自动*/
		border-collapse: collapse;/*表格线折叠*/
	}
	table caption{
		font-size: 3rem;/*30像素*/
		font-weight: bolder;
		margin-bottom: 20px;
	}
	table,th,td{
		border: 1px solid #666;/*表格线线颜色宽度*/
	}
	table tr:first-child{
		background-color: lightblue;/*tr背景*/
	}
	table tr:hover{
		background-color: #efefef;/*鼠标选中行变背景色*/
		color: coral;/*鼠标选中行变文字色*/
	}

	table tr td img{
           padding: 5px;/*图片间距*/
           border-radius: 30%;/*图片圆角*/

	}
	/*A标签模拟成按钮*/
     table tr td a{
         text-decoration-line:none;/*去掉下划线*/
         width: 140px;
         height: 40px;
         padding: 5px;
         border: 1px solid black;
         background-color: white;
         color:black;
         border-radius: 8px;
     }
     table tr td a:hover{
     	background-color: black;
     	color: white;
     	font-size: 1.1em;
     }
</style>