学习PHP第一天HELLO WORLD

PHP学习0~60 专栏收录该内容
4 篇文章 0 订阅

一、学习前准备

1.html 环境配置

firefox 浏览器安装,安装firebug插件

更换浏览器,执行标准

chrome

2.编程习惯

显示文件后缀名

3.工具sublime text3

安装调试,

插件 代码补全emmet

二、html基础

1.标签语言

<!docpye html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>PHP</title>

<body>

</body>

</head>

</html>

2.执行标准

html 4.0

xhtml 1.0

html 5

3.头文件 执行标准

<!-- 1.html -->

<!-- 告诉浏览器,执行标准 -->

<!-- html 4.0 -->
<!DOCTYPE HTMLPUBIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict/dtd">

<!-- xhtml -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4.网页布局css,div

块 与 样式

5.浮动布局 田字格


<!-- 04.html -->
<!-- 田字格浮动 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>田字格浮动</title>

	<style type="text/css">

		div{
			float: center;
		}

		#a{
			width: 300px;
			height: 300px;
			background: blue;
			float: left;
		}
		#b{
			width: 300px;
			height: 300px;
			background: red;
			float: left;
		}#c{
			width: 300px;
			height: 300px;
			background: yellow;
			float: left;
			clear: left;
		}
		#d{
			width: 300px;
			height: 300px;
			background: gray;
			float: left;
		}

	</style>



</head>
<body>


	<div id="a">a</div>
	<div id="b">b</div>
	<div id="c">c</div>
	<div id="d">d</div>





</body>
</html>

效果试图


三、盒子模型

1.概念

外边框:margin

边框:boarder

内边框:padding

2.对应的标签语法 规范 作用

需要熟悉  各标签的 用法

html手册

css手册

等等

3.上手练习

用盒子边框概念实现三角形


<!-- 12css三角形.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css三角形.html</title>
	<style type="text/css">
		div{
			width: 10px;
			height: 10px;
			background: green;

			margin: 0px auto;
			border-top: 40px solid red;
			border-bottom: 40px solid orange;
			border-left: 40px solid pink;
			border-right: 40px solid gray;
		}


		#a2{
			width: 0px;
			height: 0px;

			border-top: 40px solid transparent;

			border-left: 120px solid transparent;
			border-right: 120px solid transparent;

			background: transparent;

			border-bottom: 40px solid blue;
		}

		#a3{
			width: 0px;
			height: 0px;

			border-top: 80px solid transparent;

			border-left: 240px solid transparent;
			border-right: 240px solid transparent;

			background: transparent;

			border-bottom: 80px solid blue;
		}

	</style>
</head>
<body>
	<div id="a1"></div>
	<div id="a2"></div>
	<div id="a3"></div>
</body>
</html>

效果视图:



四、其他的,没有练习,囫囵吞枣的看了遍学习视频


1.文字内容格式控制

2. 相对定位和绝对定位

3. 注册表单


五、其实主要的,要有个明确的学习目标,学习方法。

贪多反而迷糊。

死磕,从容。


附注:

值得思考

1.时间的朋友

五只黑天鹅

 

2

.登珠穆朗玛峰——划皮划艇

2心态——睡觉

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值