博客列表 >理解为什么学php要学html,以及为什么要学习PHP,标签的属性(单标签和双标签的使用),table表单的简单入门2018年8月14日

理解为什么学php要学html,以及为什么要学习PHP,标签的属性(单标签和双标签的使用),table表单的简单入门2018年8月14日

cxw的博客
cxw的博客原创
2018年08月15日 11:50:021746浏览

在朱老师的第一节课上,我总学到了,php和html直接的关系,为啥选择php语言,html的标签以及单标签双标签区别,具体展现如下:

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

答:    

         首先开发分为前端和服务器端开发,而前端是指静态页面的编写,用到了HTML,CSS,JAVASCRIPT,而前端代码是由浏览器解析并且运行,而php的作用原理是动态生成HTML代码,如果将htm基本标签元素进行掌握,再利用css进行页面布局,后期学习PHP会更加轻松容易对页面进行数据交互绑定 

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

答:

       php虽然不是开发程序中最简单的,但是一般中小型项目中,其开发周期相比其它语言较短,这也是众多企业选择php语言的原因之一,快速有效! 

3,标签的四个公共属性;

style:内联样式,

id 标识唯一元素

class 标识 同类元素

title 标题属性

4,双标签和单标签的区别

       单标签用/>结尾,只是一种简写 (<img />是单标签)

      双标签可以替换所有的单标签


在学习中我懂得   如果对一组相关的事物具体描述,应该使用表格标签 下面是我利用table标签制作的简单表格

实例

<!DOCTYPE html>
<html>
<head>
	<title>购物清单</title>
</head>
<style type="text/css">
	
	table{
		width: 700px;
		text-align: center;
		border-collapse: collapse;  /*将table边框由双框变为单框*/
		margin: 20px auto;
	}


  /*给标题设置样式*/
	table caption{

		font-size: 3em;
		font-weight: bolder;  /*设置边框加粗*/
		color: #666;
		margin-bottom: 20px;
	}

/* table 的标题以及文本设置边框样式*/
	table,th, td{
		border: 1px solid #666;

	}

/*给table下的第一个tr设置样式*/
	table tr:first-child{
		background-color: lightgreen;
	}

	table tr:hover{
		
		background-color: #efefef;
		color: coral;
	}
	table tr td img{
		padding: 5px;
		border-radius: 10px;  /*给图片添加圆角*/
	}

 /*将a标签模拟成按钮*/
 table tr td a{
 	
 	text-decoration: none; /*去掉下划线*/ 
 	width: 140px;
 	height: 30px;
 	border:1px solid yellow;  /*给边框设置像素以及颜色*/

 	background-color: white;
 	color: black;
 	border-radius: 5px   /*产生圆角*/
 }
</style>
<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>
    </tr>
   <!-- 表的内容 -->
    <tr>
    	<td>1110</td>
    	<td>大米</td>
    	<td>3袋</td>
    	<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534264768187&di=743600325e3ca8d410eeeb5b4e72315f&imgtype=0&src=http%3A%2F%2Fimg001.hc360.cn%2Fm1%2FM03%2F55%2FA3%2FwKhQb1Q8l-iERKR5AAAAAK7rXLs932.jpg" width="100"> </td>
    	<td><a href="">预定</a></td>
    </tr>

     <tr>
    	<td>1111</td>
    	<td>腊肉</td>
    	<td>2斤</td>
    	<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534264955804&di=4564bf3fb6187da2a85da222ee57931e&imgtype=0&src=http%3A%2F%2Fpic8.photophoto.cn%2F20080820%2F0042040254330043_b.jpg" width="100"> 
    	</td>
    		<td><a href="">预定</a></td>
    </tr>

     <tr>
    	<td>1112</td>
    	<td>榴莲</td>
    	<td>5斤</td>
    	<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534264790581&di=168578a81f26dd423916069ed3ce0dec&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3868539636%2C212814347%26fm%3D214%26gp%3D0.jpg" width="100"> </td>
    		<td><a href="">预定</a></td>
    </tr>
</table>
</body>
</html>

运行实例 »

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






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