博客列表 >PHP与HTML的关系及HTML列表——2018年8月14日

PHP与HTML的关系及HTML列表——2018年8月14日

张铮的博客
张铮的博客原创
2018年08月16日 15:26:18690浏览

本次课程解答了两个很重要的问题及列表的学习,具体如下

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

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

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

    php虽然不是开发语言中最好的,但是一般中小型项目中,其开发周期相比其它语言较短,有丰富的类库,目前也有了比较统一的开发规范,这也是众多企业选择php语言的原因之一,快速有效! 

HTML列表可以使用三种方式编写,代码示例如下:

实例

<!DOCTYPE html>
<html>
<head>
	<title>购物清单</title>
</head>
<style type="text/css">
	
	table{
		width: 700px;
		text-align: center;
		border-collapse: collapse;  /*合并表格的边框*/
		margin: 20px auto;
	}


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

		font-size: 3rem;/* 1rem=10px */
		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 black;  /*给边框设置像素以及颜色*/

 	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>

运行实例 »

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

运行结果如下图所示

微信图片_20180816152347.png

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