Blogger Information
Blog 14
fans 1
comment 0
visits 7357
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css属性和html标签的配合应用--2018年8月14日23时07分
百度郝郝的博客
Original
1012 people have browsed it

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>

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments