css属性和html标签的配合应用--2018年8月14日23时07分

2018年08月14日 23:40:28阅读数:793博客 / 百度郝郝的博客 / 每日作业

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

答:

前端开发指的是静态页面的编写,主要涉及到html、css、JavaScript三个工具;

后端又称作服务器端,是运行在服务器环境中的,php就是后端编程语言其中的一种;因为php程序的运行后输出的结果就是html,所以不难看出,任何网站都是有网页组成的,也就是说想做一个网站,必须要学会做网页,html就是网页的基本标签,因必须要掌握html,今后才可以更方便的制作网站。

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

答:

php又叫做超文本预处理器,是一种开源的脚本语言,融合了c、java等其他的语言特点,学起来比较快,容易上手;php相对于其他的编程语言来说可以快速的执行动态网页,执行生成的html效率高。PHP具有非常强大的功能,支持几乎所有流行的数据库以及操作系统。更为重要的是PHP可以用C、C++进行程序的扩展!尤其是近几年的发展,促使应用领域广泛,版本迭代快;php框架比较规范,开发效率高。

代码:


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格实例操作</title>
</head>
<body>
	<table>
	<caption>手机参数对比</caption>
	<tr>
		<th>编号</th>
		<th>名称</th>
		<th>型号</th>
		<th>价格</th>
		<th>缩略图</th>
		<th>基本参数</th>
		<th>操作</th>
	</tr>
	<tr>
		<td>1</td>
		<td><h2>vivo</h2></td>
		<td>NEX旗舰版</td>
		<td><b>¥4498</b></td>
		<td><img src="https://2a.zol-img.com.cn/product/191_220x165/566/ceRo14zJK4flI.jpg" alt="" width="100"></td>
		<td>
			<ul>
				<li>核心数:八核</li>
				<li>内存:8GB</li>
				<li>主屏尺寸:6.59英寸</li>
				<li>电池容量:4000mAh</li>
				<li>后置摄像头:主摄2x1200万像素</li>
				<li>前置摄像头:800万像素</li>
			</ul>
		</td>
		<td><a href="">点击对比</a></td>
	</tr>
	<tr>
		<td>2</td>
		<td><h2>华为</h2></td>
		<td>Mate RS</td>
		<td><b>¥9999</b></td>
		<td><img src="https://2c.zol-img.com.cn/product/190_320x240/464/cek9voqaVYpeg.jpg" alt="" width="100"></td>
		<td>
			<ul>
				<li>核心数:八核</li>
				<li>内存:6GB</li>
				<li>主屏尺寸:6英寸</li>
				<li>电池容量:4000mAh</li>
				<li>后置摄像头:彩色4000万像素+黑白2000万像素</li>
				<li>前置摄像头:2400万像素</li>
			</ul>
		</td>
		<td><a href="">点击对比</a></td>
	</tr>
	<tr>
		<td>3</td>
		<td><h2>魅族</h2></td>
		<td>16 Plus</td>
		<td><b>¥3498</b></td>
		<td><img src="https://2c.zol-img.com.cn/product/192_220x165/334/ceRtdl8nJsFw.jpg" alt="" width="100"></td>
		<td>
			<ul>
				<li>核心数:八核</li>
				<li>内存:8GB</li>
				<li>主屏尺寸:6.5英寸</li>
				<li>电池容量:3640mAh</li>
				<li>后置摄像头:2000万像素+1200万像素</li>
				<li>前置摄像头:2000万像素</li>
			</ul>
		</td>
		<td><a href="">点击对比</a></td>
	</tr>
	<tr>
		<td>4</td>
		<td><h2>小米</h2></td>
		<td>MIX 2s</td>
		<td><b>¥3999</b></td>
		<td><img src="https://2f.zol-img.com.cn/product/190_220x165/101/ceiOd9tvonVNA.jpg" alt="" width="100"></td>
		<td>
			<ul>
				<li>核心数:八核</li>
				<li>内存:6GB</li>
				<li>主屏尺寸:5.99英寸</li>
				<li>电池容量:3400mAh</li>
				<li>后置摄像头:双1200万像素</li>
				<li>前置摄像头:500万像素</li>
			</ul>
		</td>
		<td><a href="">点击对比</a></td>
	</tr>
</table>
</body>
</html>
<style type="text/css">
	table{width: 850px;text-align: center;margin: 20px auto;border-collapse: collapse;}
	table caption {font-size:3rem;font-weight:bold;color:#666;margin-bottom:20px;}
	table,th,td {border:1px solid #ccc;}
	table tr:first-child {background:lightgreen;}
	table tr:hover {background:#efefef;color:coral;}
	table tr:hover td:nth-of-type(2){color: blue;}
	table tr b{color: red;}
	table tr td:nth-of-type(6){text-align: left;}
	table tr td img {padding:5px;border-radius:10px;}
	table tr td a {text-decoration:none;width:100px;height:40px;line-height:40px;padding:5px;border:1px solid black;background-color:#fff;color:#000;border-radius:8px;}
	table tr td a:hover {background-color:#000;color:#fff;}
	ul li{list-style: none;font-size: 14px;color: #666;}
</style>

运行实例 »

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

运行图片:

0S62_%KJQ31ZG}$J9EZ75V4.png

总结:

1、html文档什么都不写也可以,但不推荐,会自动生成<html><head></head><body></body></html>

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

3、元素就是页面中要展现的内容,分为可见与不可见  <img><h1><p>,<br>

    元素是用标签来表示的

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

5、属性就是用来描述标签的

标签的四个公共属性:

style:内联样式,

id:标识唯一元素,

class:标识 同类元素,

title: 提示信息

6、双标签和单标签的区别

非可替换元素:就是直接写在html代码中的,然后由浏览器直接渲染出来<h2><p><li><a>

可替换元素:来自源码的外部,通过标签的属性引入:图片,文件,富(多)媒体,<img><link>

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    百度郝郝的博客
    博文
    14
    粉丝
    1
    评论
    0
    访问量
    5976
    积分:2
    P豆:34