博客列表 >0814作业:HTML和PHP的关系及表格标签

0814作业:HTML和PHP的关系及表格标签

Samoye
Samoye原创
2018年09月02日 23:25:46717浏览

1.学习PHP为什么要学习HTML?

答:我们平常接触到的web页面是有HTML语言标记中HTML元素构成的文本文件,而HTML文本任何浏览器都支持的。

PHP是一种动态生成HTML的编程语言,在PHP生成HTML文档后,由浏览器解释执行,如果我们不懂HTML的知识,就不会知道HTML在浏览器端生成的效果如何,是否报错,是否和我们预期的结果一直。

2.为什么选择PHP作为后端开发的语言?

答:1.PHP上手快,进修时间成本较低:与Javaweb 相比学习周期是比较短的,语言没Java复杂吧。

    2.开发周期短:在与其他服务器端语言比较,开发周期,项目上架快,实用。

    3.迭代快:目前PHP语言已经更新到7版本了。

table作业:

实例

<!DOCTYPE html>
<html>
<head>
	<title>古风歌曲推荐</title>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/x-icon" href="chapter01/images/music.png">
	<style type="text/css">
		table {
			border:1px solid #666;
			border-collapse: collapse;/*属性值collapse边框合并为单一边框,忽略spacing和empty-cells.separate/inherit*/
			width: 800px;
			text-align: center;
			margin:20px auto;/*上下20,左右自动*/
		}
		table caption {
			font-family: 微软雅黑;
			font-size: 2rem;/*1rem=10px*/
			color:#668;
			font-weight: bolder;
			margin-bottom: 20px;
		}
		table, th, td {/*注意table,th,td与table th td 的不同*/
			border:1px solid #888;/*border属性:按顺序写 width值 style值 color值;style值有:dotted点,double双线,dashed 虚线*/
			/*text-align: left;*/
		}
		table tr:first-child {/*定义/控制表格的第一个行table row first*/
			background-color: lightgreen;
		}
		table tr:hover { /*所有行施加一个动作,hover 变色coral*/
			background-color: #efefef;
			color: coral;/*珊瑚色*/
		}
		/*table tr td img {
			padding: 5px;
			border-radius: 10px;
		}*/
		table tr td img {
			width: 50px;
			border-radius: 50%;
			box-shadow: 3px 3px 3px #888;
		}
		/*table tr td a {
			text-decoration: none;
			width: 30px;
			height: 40px;
			padding: 5px;
			border:1px solid black;
			background-color: white;
			color:black;
			border-radius: 8px;
		}*/
		table tr td a:hover {/*当鼠标悬浮的时候,变成黑底白字*/
		background: black;
		color:white;}
		.td_left{text-align: left;}
		/*li{
			list-style-type: none;
		}*/
	</style>
</head>
<body>
<table>
	<caption>古风歌曲推荐</caption>
	<tr>
		<th>编号</th>
		<th>曲名</th>
		<th>演唱</th>
		<th>封面</th>
		<th>试听地址</th>
	</tr>
	<tr>
		<td>1</td>
		<td class="td_left">《随天老,自白头》</td>
		<td>楠葵子</td>
		<td><img src="chapter01/images/stl.png"></td>
		<td><a href="https://music.163.com/#/search/m/?s=%E9%9A%8F%E5%A4%A9%E8%80%81%EF%BC%8C%E8%87%AA%E7%99%BD%E5%A4%B4&type=1">《随天老,自白头》</a></td>
	</tr>
	<tr>
		<td>2</td>
		<td class="td_left">《梨花凉》</td>
		<td>叶洛洛</td>
		<td><img src="chapter01/images/lhl.png"></td>
		<td><a href="https://music.163.com/#/song?id=470677635">《梨花凉》</a></td>
	</tr>
	<tr>
		<td>3</td>
		<td>
			<ul>
				<li class="td_left">《青山入我怀》</li>
				<li class="td_left">《松烟入墨》</li>
			</ul>
		</td>
		<td>Winky诗</td>
		<td><img src="chapter01/images/winky.png"></td>
		<td>
			<ul>
				<li><a href="https://music.163.com/#/search/m/?id=470677635&s=%E9%9D%92%E5%B1%B1%E5%85%A5%E6%88%91%E6%80%80&type=1">《青山入我怀》</a></li><!-- 可以通过display:block 转换成块 然后style,left -->
				<li><a href="https://music.163.com/#/song?id=28765208">《松烟入墨》</a></li>
			</ul>
		</td>
	</tr>
</table>
</body>
</html>

运行实例 »

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

运行效果图如下:

0814效果图.png


总结:一、需要注意的知识点:

  1.border属性:

border-width,border-style,border-color 按顺序填写,(border: 800px solid pink)但也可以某项不写;

width:当边框样式是none时候,不起作用,可以值为:thin(细)/medium/thick(粗)/10px;

style:可取值none,dotted点,dashed虚线,solid实现,double双线,

  2.border-collapse属性:

  border-collapse:collapse;/*属性值collapse边框合并为单一边框,忽略spacing和empty-cells.separate/inherit*/

  3.table tr:first-child {/*定义/控制表格的第一个行table row first*/

    background-color: lightgreen;

  4.border-radius属性:圆角边框

  值可以是百分数/px;一般都是写一个值=四个角值,

  5.table tr:first-child {/*定义/控制表格的第一个行table row first*/

background-color: lightgreen;

  6.box-shadow属性: 向框添加一个或多个阴影。

  语法:box-shadow: h-shadow  v-shadow  (blur)   (spread) (color) (inset);

    box-shadow:   10px     10px    模糊距离px   5px    #888888; 改为内部阴影

  7.四个通用属性:

  id, class, title, style

  8.单双标签使用的场合;

  二、依然迷茫的问题:

      如何让:曲名列居中,而且是对齐的  既:居中且靠一边对齐的

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

{

border: thin dashed rgb(250,0,255)

}

</style>

</head>


<body>

<p>Some text</p>

</body>


</html>


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